Skip to content

Commit 4958a15

Browse files
vberschMarcusNotheis
vbersch
authored and
MarcusNotheis
committed
feat: Update UI5 WebComponents to v0.12.0 (#30)
BREAKING CHANGE IconColor is renamed to SemanticColor BREAKING CHANGE Tab: renamed property iconColor to semanticColor BREAKING CHANGE Button: Remove activeIcon property BREAKING CHANGE ToggleButton: Remove activeIcon property See also [UI5-WebComponents 0.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v0.12.0) release notes.
1 parent 96eec72 commit 4958a15

File tree

89 files changed

+718
-961
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+718
-961
lines changed

‎packages/docs/.storybook/TableComponent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
ContentDensity,
3-
InfoLabel,
3+
Badge,
44
Label,
55
Table,
66
TableCell,
@@ -41,7 +41,7 @@ export const TableComponent = (props) => {
4141
<TableCell>
4242
<Text>{componentInfo.type.name}</Text>
4343
</TableCell>
44-
<TableCell>{componentInfo.required && <InfoLabel flavour={8}>Yes</InfoLabel>}</TableCell>
44+
<TableCell>{componentInfo.required && <Badge colorScheme="8">Yes</Badge>}</TableCell>
4545
<TableCell>{componentInfo.defaultValue && <Text>{componentInfo.defaultValue.value}</Text>}</TableCell>
4646
<TableCell>
4747
<Text>{componentInfo.description}</Text>

‎packages/docs/.storybook/preview-head.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
<script data-id="sap-ui-config" type="application/json">
2929
{
3030
"theme": "sap_fiori_3",
31-
"language": "EN"
31+
"language": "EN",
32+
"compactSize": true
3233
}
3334
</script>
3435

‎packages/fiori3/__karma_snapshots__/ActionSheet.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
<ResponsivePopover hideHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]}>
1212
<Popover hideHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
1313
<div style={{...}} onClick={[Function]}>
14-
<Button type="Default" icon={{...}} activeIcon={{...}}>
15-
<WithWebComponent theme={{...}} type="Default" icon={{...}} activeIcon={{...}}>
16-
<ui5-button type="Default" icon={{...}} active-icon={{...}} class="sapUiSizeCompact" />
14+
<Button type="Default">
15+
<WithWebComponent theme={{...}} type="Default">
16+
<ui5-button type="Default" class="" />
1717
</WithWebComponent>
1818
</Button>
1919
</div>
2020
<WithTheme(WithWebComponent) hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
2121
<WithWebComponent theme={{...}} hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
22-
<ui5-popover hide-header={true} inner-component-ref={[Function]} placement-type="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="sapUiSizeCompact">
22+
<ui5-popover hide-header={true} inner-component-ref={[Function]} placement-type="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
2323
<ul className="ActionSheet-actionSheet---" />
2424
</ui5-popover>
2525
</WithWebComponent>

‎packages/fiori3/__karma_snapshots__/AnalyticalCard.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<div>
4141
<Label for="">
4242
<WithWebComponent theme={{...}} for="">
43-
<ui5-label for="" class="sapUiSizeCompact">
43+
<ui5-label for="" class="">
4444
Target
4545
</ui5-label>
4646
</WithWebComponent>
@@ -60,7 +60,7 @@
6060
<div className="AnalyticalCardHeader-deviation---">
6161
<Label for="">
6262
<WithWebComponent theme={{...}} for="">
63-
<ui5-label for="" class="sapUiSizeCompact">
63+
<ui5-label for="" class="">
6464
Deviation
6565
</ui5-label>
6666
</WithWebComponent>

‎packages/fiori3/__karma_snapshots__/Badge.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# `Badge`
2+
3+
#### `Basic Test`
4+
5+
```
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
7+
<ThemeProvider jss={{...}} theme={{...}}>
8+
<Badge>
9+
<WithWebComponent theme={{...}}>
10+
<ui5-badge class="">
11+
My Badge
12+
</ui5-badge>
13+
</WithWebComponent>
14+
</Badge>
15+
</ThemeProvider>
16+
</ThemeProvider>
17+
```
18+
19+
#### `with Icon`
20+
21+
```
22+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
23+
<ThemeProvider jss={{...}} theme={{...}}>
24+
<Badge icon={{...}}>
25+
<WithWebComponent theme={{...}} icon={{...}}>
26+
<ui5-badge class="">
27+
<Icon src="sap-icon://employee" data-ui5-slot="icon">
28+
<WithWebComponent theme={{...}} src="sap-icon://employee" data-ui5-slot="icon">
29+
<ui5-icon src="sap-icon://employee" data-ui5-slot="icon" class="" />
30+
</WithWebComponent>
31+
</Icon>
32+
My Badge
33+
</ui5-badge>
34+
</WithWebComponent>
35+
</Badge>
36+
</ThemeProvider>
37+
</ThemeProvider>
38+
```
39+

‎packages/fiori3/__karma_snapshots__/BusyIndicator.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,61 @@
11
# `BusyIndicator`
22

3+
#### `Basic Test`
4+
5+
```
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
7+
<ThemeProvider jss={{...}} theme={{...}}>
8+
<BusyIndicator active={true} size="Large">
9+
<WithWebComponent theme={{...}} active={true} size="Large">
10+
<ui5-busyindicator active={true} size="Large" class="" />
11+
</WithWebComponent>
12+
</BusyIndicator>
13+
</ThemeProvider>
14+
</ThemeProvider>
15+
```
16+
17+
#### `Inactive`
18+
19+
```
20+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
21+
<ThemeProvider jss={{...}} theme={{...}}>
22+
<BusyIndicator size="Large">
23+
<WithWebComponent theme={{...}} size="Large">
24+
<ui5-busyindicator size="Large" class="" />
25+
</WithWebComponent>
26+
</BusyIndicator>
27+
</ThemeProvider>
28+
</ThemeProvider>
29+
```
30+
31+
#### `Size Medium`
32+
33+
```
34+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
35+
<ThemeProvider jss={{...}} theme={{...}}>
36+
<BusyIndicator active={true} size="Medium">
37+
<WithWebComponent theme={{...}} active={true} size="Medium">
38+
<ui5-busyindicator active={true} size="Medium" class="" />
39+
</WithWebComponent>
40+
</BusyIndicator>
41+
</ThemeProvider>
42+
</ThemeProvider>
43+
```
44+
45+
#### `Size Small`
46+
47+
```
48+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
49+
<ThemeProvider jss={{...}} theme={{...}}>
50+
<BusyIndicator active={true} size="Small">
51+
<WithWebComponent theme={{...}} active={true} size="Small">
52+
<ui5-busyindicator active={true} size="Small" class="" />
53+
</WithWebComponent>
54+
</BusyIndicator>
55+
</ThemeProvider>
56+
</ThemeProvider>
57+
```
58+
359
#### `Check Elements`
460

561
```

‎packages/fiori3/__karma_snapshots__/Button.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
8-
<Button type=\"Default\" icon={{...}} activeIcon={{...}}>
9-
<WithWebComponent theme={{...}} type=\"Default\" icon={{...}} activeIcon={{...}}>
10-
<ui5-button type=\"Default\" icon={{...}} active-icon={{...}} class=\"sapUiSizeCompact\" />
8+
<Button type="Default">
9+
<WithWebComponent theme={{...}} type="Default">
10+
<ui5-button type="Default" class="" />
1111
</WithWebComponent>
1212
</Button>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

‎packages/fiori3/__karma_snapshots__/Calendar.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
88
<Calendar>
99
<WithWebComponent theme={{...}}>
10-
<ui5-calendar class=\"sapUiSizeCompact\" />
10+
<ui5-calendar class="" />
1111
</WithWebComponent>
1212
</Calendar>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

‎packages/fiori3/__karma_snapshots__/CalendarHeader.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
88
<CalendarHeader>
99
<WithWebComponent theme={{...}}>
10-
<ui5-calendar-header class=\"sapUiSizeCompact\" />
10+
<ui5-calendar-header class="" />
1111
</WithWebComponent>
1212
</CalendarHeader>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

‎packages/fiori3/__karma_snapshots__/Card.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
8-
<Card heading=\"\" subtitle=\"\" status=\"\" avatar={{...}}>
9-
<WithWebComponent theme={{...}} heading=\"\" subtitle=\"\" status=\"\" avatar={{...}}>
10-
<ui5-card heading=\"\" subtitle=\"\" status=\"\" avatar={{...}} class=\"sapUiSizeCompact\" />
8+
<Card heading="" subtitle="" status="" avatar={{...}}>
9+
<WithWebComponent theme={{...}} heading="" subtitle="" status="" avatar={{...}}>
10+
<ui5-card heading="" subtitle="" status="" avatar={{...}} class="" />
1111
</WithWebComponent>
1212
</Card>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

‎packages/fiori3/__karma_snapshots__/Carousel.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
5656
<Icon src="slim-arrow-left">
5757
<WithWebComponent theme={{...}} src="slim-arrow-left">
58-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
58+
<ui5-icon src="slim-arrow-left" class="" />
5959
</WithWebComponent>
6060
</Icon>
6161
</div>
@@ -85,7 +85,7 @@
8585
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
8686
<Icon src="slim-arrow-right">
8787
<WithWebComponent theme={{...}} src="slim-arrow-right">
88-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
88+
<ui5-icon src="slim-arrow-right" class="" />
8989
</WithWebComponent>
9090
</Icon>
9191
</div>
@@ -171,14 +171,14 @@
171171
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
172172
<Icon src="slim-arrow-left">
173173
<WithWebComponent theme={{...}} src="slim-arrow-left">
174-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
174+
<ui5-icon src="slim-arrow-left" class="" />
175175
</WithWebComponent>
176176
</Icon>
177177
</div>
178178
<div className="CarouselPagination-paginationIndicator---">
179179
<Label for="">
180180
<WithWebComponent theme={{...}} for="">
181-
<ui5-label for="" class="sapUiSizeCompact">
181+
<ui5-label for="" class="">
182182
Showing 1 of 10
183183
</ui5-label>
184184
</WithWebComponent>
@@ -187,7 +187,7 @@
187187
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
188188
<Icon src="slim-arrow-right">
189189
<WithWebComponent theme={{...}} src="slim-arrow-right">
190-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
190+
<ui5-icon src="slim-arrow-right" class="" />
191191
</WithWebComponent>
192192
</Icon>
193193
</div>
@@ -258,7 +258,7 @@
258258
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
259259
<Icon src="slim-arrow-left">
260260
<WithWebComponent theme={{...}} src="slim-arrow-left">
261-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
261+
<ui5-icon src="slim-arrow-left" class="" />
262262
</WithWebComponent>
263263
</Icon>
264264
</div>
@@ -288,7 +288,7 @@
288288
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
289289
<Icon src="slim-arrow-right">
290290
<WithWebComponent theme={{...}} src="slim-arrow-right">
291-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
291+
<ui5-icon src="slim-arrow-right" class="" />
292292
</WithWebComponent>
293293
</Icon>
294294
</div>
@@ -359,7 +359,7 @@
359359
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
360360
<Icon src="slim-arrow-left">
361361
<WithWebComponent theme={{...}} src="slim-arrow-left">
362-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
362+
<ui5-icon src="slim-arrow-left" class="" />
363363
</WithWebComponent>
364364
</Icon>
365365
</div>
@@ -389,7 +389,7 @@
389389
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
390390
<Icon src="slim-arrow-right">
391391
<WithWebComponent theme={{...}} src="slim-arrow-right">
392-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
392+
<ui5-icon src="slim-arrow-right" class="" />
393393
</WithWebComponent>
394394
</Icon>
395395
</div>
@@ -421,7 +421,7 @@
421421
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
422422
<Icon src="slim-arrow-left">
423423
<WithWebComponent theme={{...}} src="slim-arrow-left">
424-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
424+
<ui5-icon src="slim-arrow-left" class="" />
425425
</WithWebComponent>
426426
</Icon>
427427
</div>
@@ -451,7 +451,7 @@
451451
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
452452
<Icon src="slim-arrow-right">
453453
<WithWebComponent theme={{...}} src="slim-arrow-right">
454-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
454+
<ui5-icon src="slim-arrow-right" class="" />
455455
</WithWebComponent>
456456
</Icon>
457457
</div>
@@ -561,7 +561,7 @@
561561
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
562562
<Icon src="slim-arrow-left">
563563
<WithWebComponent theme={{...}} src="slim-arrow-left">
564-
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
564+
<ui5-icon src="slim-arrow-left" class="" />
565565
</WithWebComponent>
566566
</Icon>
567567
</div>
@@ -591,7 +591,7 @@
591591
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
592592
<Icon src="slim-arrow-right">
593593
<WithWebComponent theme={{...}} src="slim-arrow-right">
594-
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
594+
<ui5-icon src="slim-arrow-right" class="" />
595595
</WithWebComponent>
596596
</Icon>
597597
</div>

‎packages/fiori3/__karma_snapshots__/CheckBox.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
8-
<CheckBox valueState=\"None\">
9-
<WithWebComponent theme={{...}} valueState=\"None\">
10-
<ui5-checkbox value-state=\"None\" class=\"sapUiSizeCompact\" />
8+
<CheckBox valueState="None">
9+
<WithWebComponent theme={{...}} valueState="None">
10+
<ui5-checkbox value-state="None" class="" />
1111
</WithWebComponent>
1212
</CheckBox>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

‎packages/fiori3/__karma_snapshots__/CustomListItem.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
#### `Basic Test (generated)`
44

55
```
6-
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
6+
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
8-
<CustomListItem type=\"Active\">
9-
<WithWebComponent theme={{...}} type=\"Active\">
10-
<ui5-li-custom type=\"Active\" class=\"sapUiSizeCompact\" />
8+
<CustomListItem type="Active">
9+
<WithWebComponent theme={{...}} type="Active">
10+
<ui5-li-custom type="Active" class="" />
1111
</WithWebComponent>
1212
</CustomListItem>
1313
</ThemeProvider>
14-
</ThemeProvider>"
14+
</ThemeProvider>
1515
```
1616

0 commit comments

Comments
 (0)