Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Update UI5 WebComponents to v0.12.0 #30

Merged
merged 12 commits into from
Jun 13, 2019
Merged

feat: Update UI5 WebComponents to v0.12.0 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6cdb78b
feat: Updated UI5 WebComponents to v0.12.0
vbersch Jun 12, 2019
5b2505f
WIP: add BusyIndicatorType
vbersch Jun 12, 2019
554e8e0
WIP: update Badge and BusyIndicator demos
vbersch Jun 12, 2019
eb89387
chore: update snapshots
vbersch Jun 12, 2019
1bed1d5
fix: manually correct Badge children type
vbersch Jun 12, 2019
d58df72
fix: manually fix StandardListItem children prop
vbersch Jun 12, 2019
b0a2bfc
WIP: update snapshots
vbersch Jun 12, 2019
684ca62
WIP: replace InfoLabel usage in storybook TableComponent
vbersch Jun 12, 2019
7ae1cb2
fix(WebComponentsWrapper): Remove content density handling
MarcusNotheis Jun 13, 2019
10e2c5d
test(Badge): Added Tests
MarcusNotheis Jun 13, 2019
6e802bd
test(BusyIndicator): Added Test
MarcusNotheis Jun 13, 2019
a5ae21c
docs: Improved Demo for Badge and BusyIndicator
MarcusNotheis Jun 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/docs/.storybook/TableComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
ContentDensity,
InfoLabel,
Badge,
Label,
Table,
TableCell,
Expand Down Expand Up @@ -41,7 +41,7 @@ export const TableComponent = (props) => {
<TableCell>
<Text>{componentInfo.type.name}</Text>
</TableCell>
<TableCell>{componentInfo.required && <InfoLabel flavour={8}>Yes</InfoLabel>}</TableCell>
<TableCell>{componentInfo.required && <Badge colorScheme="8">Yes</Badge>}</TableCell>
<TableCell>{componentInfo.defaultValue && <Text>{componentInfo.defaultValue.value}</Text>}</TableCell>
<TableCell>
<Text>{componentInfo.description}</Text>
Expand Down
3 changes: 2 additions & 1 deletion packages/docs/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
<script data-id="sap-ui-config" type="application/json">
{
"theme": "sap_fiori_3",
"language": "EN"
"language": "EN",
"compactSize": true
}
</script>

Expand Down
8 changes: 4 additions & 4 deletions packages/fiori3/__karma_snapshots__/ActionSheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@
<ResponsivePopover hideHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]}>
<Popover hideHeader={true} innerComponentRef={[Function]} openBy={{...}} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
<div style={{...}} onClick={[Function]}>
<Button type="Default" icon={{...}} activeIcon={{...}}>
<WithWebComponent theme={{...}} type="Default" icon={{...}} activeIcon={{...}}>
<ui5-button type="Default" icon={{...}} active-icon={{...}} class="sapUiSizeCompact" />
<Button type="Default">
<WithWebComponent theme={{...}} type="Default">
<ui5-button type="Default" class="" />
</WithWebComponent>
</Button>
</div>
<WithTheme(WithWebComponent) hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
<WithWebComponent theme={{...}} hideHeader={true} innerComponentRef={[Function]} placementType="Bottom" style={[undefined]} data-ui5-slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
<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">
<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="">
<ul className="ActionSheet-actionSheet---" />
</ui5-popover>
</WithWebComponent>
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori3/__karma_snapshots__/AnalyticalCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<div>
<Label for="">
<WithWebComponent theme={{...}} for="">
<ui5-label for="" class="sapUiSizeCompact">
<ui5-label for="" class="">
Target
</ui5-label>
</WithWebComponent>
Expand All @@ -60,7 +60,7 @@
<div className="AnalyticalCardHeader-deviation---">
<Label for="">
<WithWebComponent theme={{...}} for="">
<ui5-label for="" class="sapUiSizeCompact">
<ui5-label for="" class="">
Deviation
</ui5-label>
</WithWebComponent>
Expand Down
39 changes: 39 additions & 0 deletions packages/fiori3/__karma_snapshots__/Badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# `Badge`

#### `Basic Test`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<Badge>
<WithWebComponent theme={{...}}>
<ui5-badge class="">
My Badge
</ui5-badge>
</WithWebComponent>
</Badge>
</ThemeProvider>
</ThemeProvider>
```

#### `with Icon`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<Badge icon={{...}}>
<WithWebComponent theme={{...}} icon={{...}}>
<ui5-badge class="">
<Icon src="sap-icon://employee" data-ui5-slot="icon">
<WithWebComponent theme={{...}} src="sap-icon://employee" data-ui5-slot="icon">
<ui5-icon src="sap-icon://employee" data-ui5-slot="icon" class="" />
</WithWebComponent>
</Icon>
My Badge
</ui5-badge>
</WithWebComponent>
</Badge>
</ThemeProvider>
</ThemeProvider>
```

56 changes: 56 additions & 0 deletions packages/fiori3/__karma_snapshots__/BusyIndicator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,61 @@
# `BusyIndicator`

#### `Basic Test`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<BusyIndicator active={true} size="Large">
<WithWebComponent theme={{...}} active={true} size="Large">
<ui5-busyindicator active={true} size="Large" class="" />
</WithWebComponent>
</BusyIndicator>
</ThemeProvider>
</ThemeProvider>
```

#### `Inactive`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<BusyIndicator size="Large">
<WithWebComponent theme={{...}} size="Large">
<ui5-busyindicator size="Large" class="" />
</WithWebComponent>
</BusyIndicator>
</ThemeProvider>
</ThemeProvider>
```

#### `Size Medium`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<BusyIndicator active={true} size="Medium">
<WithWebComponent theme={{...}} active={true} size="Medium">
<ui5-busyindicator active={true} size="Medium" class="" />
</WithWebComponent>
</BusyIndicator>
</ThemeProvider>
</ThemeProvider>
```

#### `Size Small`

```
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<BusyIndicator active={true} size="Small">
<WithWebComponent theme={{...}} active={true} size="Small">
<ui5-busyindicator active={true} size="Small" class="" />
</WithWebComponent>
</BusyIndicator>
</ThemeProvider>
</ThemeProvider>
```

#### `Check Elements`

```
Expand Down
10 changes: 5 additions & 5 deletions packages/fiori3/__karma_snapshots__/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<Button type=\"Default\" icon={{...}} activeIcon={{...}}>
<WithWebComponent theme={{...}} type=\"Default\" icon={{...}} activeIcon={{...}}>
<ui5-button type=\"Default\" icon={{...}} active-icon={{...}} class=\"sapUiSizeCompact\" />
<Button type="Default">
<WithWebComponent theme={{...}} type="Default">
<ui5-button type="Default" class="" />
</WithWebComponent>
</Button>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

6 changes: 3 additions & 3 deletions packages/fiori3/__karma_snapshots__/Calendar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<Calendar>
<WithWebComponent theme={{...}}>
<ui5-calendar class=\"sapUiSizeCompact\" />
<ui5-calendar class="" />
</WithWebComponent>
</Calendar>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

6 changes: 3 additions & 3 deletions packages/fiori3/__karma_snapshots__/CalendarHeader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<CalendarHeader>
<WithWebComponent theme={{...}}>
<ui5-calendar-header class=\"sapUiSizeCompact\" />
<ui5-calendar-header class="" />
</WithWebComponent>
</CalendarHeader>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

10 changes: 5 additions & 5 deletions packages/fiori3/__karma_snapshots__/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<Card heading=\"\" subtitle=\"\" status=\"\" avatar={{...}}>
<WithWebComponent theme={{...}} heading=\"\" subtitle=\"\" status=\"\" avatar={{...}}>
<ui5-card heading=\"\" subtitle=\"\" status=\"\" avatar={{...}} class=\"sapUiSizeCompact\" />
<Card heading="" subtitle="" status="" avatar={{...}}>
<WithWebComponent theme={{...}} heading="" subtitle="" status="" avatar={{...}}>
<ui5-card heading="" subtitle="" status="" avatar={{...}} class="" />
</WithWebComponent>
</Card>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

26 changes: 13 additions & 13 deletions packages/fiori3/__karma_snapshots__/Carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -85,7 +85,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -171,14 +171,14 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
<div className="CarouselPagination-paginationIndicator---">
<Label for="">
<WithWebComponent theme={{...}} for="">
<ui5-label for="" class="sapUiSizeCompact">
<ui5-label for="" class="">
Showing 1 of 10
</ui5-label>
</WithWebComponent>
Expand All @@ -187,7 +187,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -258,7 +258,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -288,7 +288,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -359,7 +359,7 @@
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -389,7 +389,7 @@
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -421,7 +421,7 @@
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -451,7 +451,7 @@
<div data-value={{...}} className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -561,7 +561,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-left">
<WithWebComponent theme={{...}} src="slim-arrow-left">
<ui5-icon src="slim-arrow-left" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-left" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down Expand Up @@ -591,7 +591,7 @@
<div data-value="paginationArrow" className="CarouselPagination-paginationArrow---" onClick={[Function]}>
<Icon src="slim-arrow-right">
<WithWebComponent theme={{...}} src="slim-arrow-right">
<ui5-icon src="slim-arrow-right" class="sapUiSizeCompact" />
<ui5-icon src="slim-arrow-right" class="" />
</WithWebComponent>
</Icon>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/fiori3/__karma_snapshots__/CheckBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<CheckBox valueState=\"None\">
<WithWebComponent theme={{...}} valueState=\"None\">
<ui5-checkbox value-state=\"None\" class=\"sapUiSizeCompact\" />
<CheckBox valueState="None">
<WithWebComponent theme={{...}} valueState="None">
<ui5-checkbox value-state="None" class="" />
</WithWebComponent>
</CheckBox>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

10 changes: 5 additions & 5 deletions packages/fiori3/__karma_snapshots__/CustomListItem.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
#### `Basic Test (generated)`

```
"<ThemeProvider theme=\"sap_fiori3_light\" contentDensity=\"Compact\" withToastContainer={false}>
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
<ThemeProvider jss={{...}} theme={{...}}>
<CustomListItem type=\"Active\">
<WithWebComponent theme={{...}} type=\"Active\">
<ui5-li-custom type=\"Active\" class=\"sapUiSizeCompact\" />
<CustomListItem type="Active">
<WithWebComponent theme={{...}} type="Active">
<ui5-li-custom type="Active" class="" />
</WithWebComponent>
</CustomListItem>
</ThemeProvider>
</ThemeProvider>"
</ThemeProvider>
```

Loading