Skip to content

Commit 2159ab1

Browse files
fix(Table): Fixed Table and adapt slot handling (#50)
BREAKING CHANGE Use prop `slot` instead of `data-ui5-slot` BREAKING CHANGE **Table**: prop `rows` is replaced by `children` BREAKING CHANGE **TableRow**: prop `header` is replaced by `children`
1 parent 7412da9 commit 2159ab1

File tree

34 files changed

+146
-165
lines changed

34 files changed

+146
-165
lines changed

packages/main/__karma_snapshots__/ActionSheet.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
<ThemeProvider theme={{...}}>
99
<WithStyles(ActionSheet) openBy={{...}} placement="Bottom">
1010
<ActionSheet openBy={{...}} placement="Bottom" classes={{...}} theme={{...}}>
11-
<Popover noHeader={true} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
11+
<Popover noHeader={true} openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
1212
<div style={{...}} onClick={[Function]}>
1313
<Button design="Default">
1414
<ui5-button design="Default" class="" />
1515
</Button>
1616
</div>
17-
<WithWebComponent(Popover) noHeader={true} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
18-
<ui5-popover no-header={true} placement-type="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
17+
<WithWebComponent(Popover) noHeader={true} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
18+
<ui5-popover no-header={true} placement-type="Bottom" style={[undefined]} slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
1919
<ul className="ActionSheet-actionSheet---" />
2020
</ui5-popover>
2121
</WithWebComponent(Popover)>

packages/main/__karma_snapshots__/AnalyticalCard.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div>
4646
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
4747
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
48-
<span style={{...}} className="Component-text---" title={[undefined]} data-ui5-slot={[undefined]}>
48+
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
4949
Target
5050
</span>
5151
</Component>
@@ -61,7 +61,7 @@
6161
<div>
6262
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
6363
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
64-
<span style={{...}} className="Component-text---" title={[undefined]} data-ui5-slot={[undefined]}>
64+
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
6565
Deviation
6666
</span>
6767
</Component>
@@ -80,7 +80,7 @@
8080
<div style={{...}}>
8181
<WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
8282
<Component renderWhitespace={false} wrapping={true} width={{...}} classes={{...}} theme={{...}}>
83-
<span style={{...}} className="Component-text---" title={[undefined]} data-ui5-slot={[undefined]}>
83+
<span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
8484
I&#39;m a content!
8585
</span>
8686
</Component>

packages/main/__karma_snapshots__/Avatar.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<ThemeProvider theme={{...}}>
99
<WithStyles(Avatar) size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
1010
<Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
11-
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
11+
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
1212
</Avatar>
1313
</WithStyles(Avatar)>
1414
</ThemeProvider>
@@ -24,7 +24,7 @@
2424
<ThemeProvider theme={{...}}>
2525
<WithStyles(Avatar) size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
2626
<Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
27-
<span className="Avatar-avatar--- Avatar-sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
27+
<span className="Avatar-avatar--- Avatar-sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
2828
</Avatar>
2929
</WithStyles(Avatar)>
3030
</ThemeProvider>
@@ -40,7 +40,7 @@
4040
<ThemeProvider theme={{...}}>
4141
<WithStyles(Avatar) size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
4242
<Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
43-
<span className="Avatar-avatar--- Avatar-sizeL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
43+
<span className="Avatar-avatar--- Avatar-sizeL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
4444
</Avatar>
4545
</WithStyles(Avatar)>
4646
</ThemeProvider>
@@ -56,7 +56,7 @@
5656
<ThemeProvider theme={{...}}>
5757
<WithStyles(Avatar) size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
5858
<Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
59-
<span className="Avatar-avatar--- Avatar-sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
59+
<span className="Avatar-avatar--- Avatar-sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
6060
</Avatar>
6161
</WithStyles(Avatar)>
6262
</ThemeProvider>
@@ -72,7 +72,7 @@
7272
<ThemeProvider theme={{...}}>
7373
<WithStyles(Avatar) size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
7474
<Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
75-
<span className="Avatar-avatar--- Avatar-sizeM--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
75+
<span className="Avatar-avatar--- Avatar-sizeM--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
7676
</Avatar>
7777
</WithStyles(Avatar)>
7878
</ThemeProvider>
@@ -88,7 +88,7 @@
8888
<ThemeProvider theme={{...}}>
8989
<WithStyles(Avatar) size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
9090
<Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
91-
<span className="Avatar-avatar--- Avatar-sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
91+
<span className="Avatar-avatar--- Avatar-sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
9292
</Avatar>
9393
</WithStyles(Avatar)>
9494
</ThemeProvider>
@@ -104,7 +104,7 @@
104104
<ThemeProvider theme={{...}}>
105105
<WithStyles(Avatar) size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
106106
<Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
107-
<span className="Avatar-avatar--- Avatar-sizeS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
107+
<span className="Avatar-avatar--- Avatar-sizeS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
108108
</Avatar>
109109
</WithStyles(Avatar)>
110110
</ThemeProvider>
@@ -120,7 +120,7 @@
120120
<ThemeProvider theme={{...}}>
121121
<WithStyles(Avatar) size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
122122
<Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
123-
<span className="Avatar-avatar--- Avatar-sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
123+
<span className="Avatar-avatar--- Avatar-sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
124124
</Avatar>
125125
</WithStyles(Avatar)>
126126
</ThemeProvider>
@@ -136,7 +136,7 @@
136136
<ThemeProvider theme={{...}}>
137137
<WithStyles(Avatar) size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
138138
<Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
139-
<span className="Avatar-avatar--- Avatar-sizeXS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
139+
<span className="Avatar-avatar--- Avatar-sizeXS--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
140140
</Avatar>
141141
</WithStyles(Avatar)>
142142
</ThemeProvider>
@@ -152,7 +152,7 @@
152152
<ThemeProvider theme={{...}}>
153153
<WithStyles(Avatar) size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
154154
<Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
155-
<span className="Avatar-avatar--- Avatar-sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
155+
<span className="Avatar-avatar--- Avatar-sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
156156
</Avatar>
157157
</WithStyles(Avatar)>
158158
</ThemeProvider>
@@ -168,7 +168,7 @@
168168
<ThemeProvider theme={{...}}>
169169
<WithStyles(Avatar) size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
170170
<Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
171-
<span className="Avatar-avatar--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
171+
<span className="Avatar-avatar--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
172172
</Avatar>
173173
</WithStyles(Avatar)>
174174
</ThemeProvider>
@@ -184,7 +184,7 @@
184184
<ThemeProvider theme={{...}}>
185185
<WithStyles(Avatar) size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
186186
<Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
187-
<span className="Avatar-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]} />
187+
<span className="Avatar-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
188188
</Avatar>
189189
</WithStyles(Avatar)>
190190
</ThemeProvider>
@@ -200,7 +200,7 @@
200200
<ThemeProvider theme={{...}}>
201201
<WithStyles(Avatar) size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
202202
<Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem" classes={{...}} theme={{...}}>
203-
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} data-ui5-slot={[undefined]}>
203+
<span className="Avatar-avatar--- Avatar-sizeXL--- Avatar-circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
204204
JD
205205
</span>
206206
</Avatar>

packages/main/__karma_snapshots__/Badge.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<ThemeProvider theme={{...}}>
2525
<Badge icon={{...}} colorScheme="1">
2626
<ui5-badge color-scheme="1" class="">
27-
<Icon src="sap-icon://employee" data-ui5-slot="icon">
28-
<ui5-icon src="sap-icon://employee" data-ui5-slot="icon" class="" />
27+
<Icon src="sap-icon://employee" slot="icon">
28+
<ui5-icon src="sap-icon://employee" slot="icon" class="" />
2929
</Icon>
3030
My Badge
3131
</ui5-badge>

0 commit comments

Comments
 (0)