Skip to content

Commit 4f42717

Browse files
authored
feat: update @ui5/webcomponents to ~1.16.0 (#4933)
1 parent f5361c0 commit 4f42717

File tree

38 files changed

+503
-536
lines changed

38 files changed

+503
-536
lines changed

.storybook/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,5 @@ export const MAPPED_THEMES = [
1414
// { value: 'sap_belize_hcb', title: 'Belize High Contrast Black' },
1515
// { value: 'sap_belize_hcw', title: 'Belize High Contrast White' }
1616
];
17+
18+
export const excludePropsForAbstract = ['className', 'style'];

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737
"@storybook/react": "7.1.1",
3838
"@storybook/react-vite": "7.1.1",
3939
"@storybook/theming": "7.1.1",
40-
"@ui5/webcomponents": "1.15.1",
41-
"@ui5/webcomponents-fiori": "1.15.1",
42-
"@ui5/webcomponents-icons": "1.15.1",
40+
"@ui5/webcomponents": "1.16.0",
41+
"@ui5/webcomponents-fiori": "1.16.0",
42+
"@ui5/webcomponents-icons": "1.16.0",
4343
"react": "18.2.0",
4444
"react-dom": "18.2.0",
4545
"remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
5959
"@types/react-dom": "^18.0.0",
6060
"@typescript-eslint/eslint-plugin": "^6.0.0",
6161
"@typescript-eslint/parser": "^6.0.0",
62-
"@ui5/webcomponents-tools": "1.15.1",
62+
"@ui5/webcomponents-tools": "1.16.0",
6363
"@vitejs/plugin-react": "^4.0.0",
6464
"chromatic": "^6.5.3",
6565
"cssnano": "^6.0.1",

packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"peerDependencies": {
3232
"@types/react": "*",
33-
"@ui5/webcomponents-base": "~1.15.1",
33+
"@ui5/webcomponents-base": "~1.16.0",
3434
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
3535
},
3636
"peerDependenciesMeta": {

packages/charts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"recharts": "2.7.2"
3535
},
3636
"peerDependencies": {
37-
"@ui5/webcomponents-react": "~1.17.0",
38-
"@ui5/webcomponents-react-base": "~1.17.0",
37+
"@ui5/webcomponents-react": "~1.18.0",
38+
"@ui5/webcomponents-react-base": "~1.18.0",
3939
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
4040
"react-jss": "^10.10.0"
4141
},

packages/cra-template-seed/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.15.1",
5-
"@ui5/webcomponents-fiori": "~1.15.1",
6-
"@ui5/webcomponents-icons": "~1.15.1",
4+
"@ui5/webcomponents": "~1.16.0",
5+
"@ui5/webcomponents-fiori": "~1.16.0",
6+
"@ui5/webcomponents-icons": "~1.16.0",
77
"@ui5/webcomponents-react": "latest",
88
"axios": "^0.27.2",
99
"formik": "^2.2.9",

packages/cra-template/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.15.1",
5-
"@ui5/webcomponents-fiori": "~1.15.1",
6-
"@ui5/webcomponents-icons": "~1.15.1",
4+
"@ui5/webcomponents": "~1.16.0",
5+
"@ui5/webcomponents-fiori": "~1.16.0",
6+
"@ui5/webcomponents-icons": "~1.16.0",
77
"@ui5/webcomponents-react": "latest",
88
"web-vitals": "^2.1.0"
99
},

packages/main/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@
6161
"peerDependencies": {
6262
"@types/react": "*",
6363
"@types/react-dom": "*",
64-
"@ui5/webcomponents": "~1.15.1",
65-
"@ui5/webcomponents-base": "~1.15.1",
66-
"@ui5/webcomponents-fiori": "~1.15.1",
67-
"@ui5/webcomponents-icons": "~1.15.1",
64+
"@ui5/webcomponents": "~1.16.0",
65+
"@ui5/webcomponents-base": "~1.16.0",
66+
"@ui5/webcomponents-fiori": "~1.16.0",
67+
"@ui5/webcomponents-icons": "~1.16.0",
6868
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
6969
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
7070
},

packages/main/src/webComponents/Avatar/index.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ interface AvatarAttributes {
3030
* * `Placeholder`
3131
*/
3232
colorScheme?: AvatarColorScheme | keyof typeof AvatarColorScheme;
33+
/**
34+
* Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
35+
*/
36+
disabled?: boolean;
3337
/**
3438
* Defines the name of the UI5 Icon, that will be displayed.
3539
* **Note:** If `image` slot is provided, the property will be ignored.
@@ -49,7 +53,7 @@ interface AvatarAttributes {
4953
*/
5054
initials?: string;
5155
/**
52-
* Defines if the avatar is interactive (focusable and pressable).
56+
* Defines if the avatar is interactive (focusable and pressable). **Note:** This property won't have effect if the `disabled` property is set to `true`.
5357
*/
5458
interactive?: boolean;
5559
/**
@@ -114,7 +118,7 @@ export interface AvatarPropTypes extends AvatarAttributes, CommonProps {
114118
const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
115119
'ui5-avatar',
116120
['accessibleName', 'colorScheme', 'icon', 'initials', 'shape', 'size'],
117-
['interactive'],
121+
['disabled', 'interactive'],
118122
['badge'],
119123
[],
120124
() => import('@ui5/webcomponents/dist/Avatar.js')

packages/main/src/webComponents/Breadcrumbs/Breadcrumbs.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BreadcrumbsItem } from '../BreadcrumbsItem';
55
import BreadcrumbsItemDescription from '../BreadcrumbsItem/BreadcrumbsItemDescription.md?raw';
66
import * as ComponentStories from './Breadcrumbs.stories';
77
import Description from './BreadcrumbsDescription.md?raw';
8+
import { excludePropsForAbstract } from '@sb/utils';
89

910
<Meta of={ComponentStories} />
1011

@@ -27,6 +28,6 @@ import Description from './BreadcrumbsDescription.md?raw';
2728
## BreadcrumbsItem
2829

2930
<Markdown>{BreadcrumbsItemDescription}</Markdown>
30-
<ArgTypesWithNote hideHTMLPropsNote of={BreadcrumbsItem} />
31+
<ArgTypesWithNote exclude={excludePropsForAbstract} hideHTMLPropsNote of={BreadcrumbsItem} />
3132

3233
<Footer />

packages/main/src/webComponents/Calendar/Calendar.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2+
import { excludePropsForAbstract } from '@sb/utils';
23
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
34
import { Canvas, Markdown, Meta } from '@storybook/blocks';
45
import { CalendarDate } from '../CalendarDate';
@@ -26,7 +27,7 @@ import Description from './CalendarDescription.md?raw';
2627

2728
## CalendarDate
2829

29-
<ArgTypesWithNote of={CalendarDate} />
30+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={CalendarDate} />
3031
<Markdown>{CalendarDateDescription}</Markdown>
3132

3233
<Footer />

packages/main/src/webComponents/ColorPalette/ColorPalette.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ColorPaletteItem } from '../ColorPaletteItem';
55
import ColorPaletteItemDescription from '../ColorPaletteItem/ColorPaletteItemDescription.md?raw';
66
import * as ComponentStories from './ColorPalette.stories';
77
import ColorPaletteDescription from './ColorPaletteDescription.md?raw';
8+
import { excludePropsForAbstract } from '@sb/utils';
89

910
<Meta of={ComponentStories} />
1011

@@ -26,7 +27,7 @@ import ColorPaletteDescription from './ColorPaletteDescription.md?raw';
2627

2728
## ColorPaletteItem
2829

29-
<ArgsTableWithNote of={ColorPaletteItem} />
30+
<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ColorPaletteItem} />
3031
<Markdown>{ColorPaletteItemDescription}</Markdown>
3132

3233
<Footer />

packages/main/src/webComponents/ComboBox/ComboBox.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ComboBoxItem } from '../ComboBoxItem';
88
import ComboBoxItemDescription from '../ComboBoxItem/ComboBoxItemDescription.md?raw';
99
import * as ComponentStories from './ComboBox.stories';
1010
import Description from './ComboBoxDescription.md?raw';
11+
import { excludePropsForAbstract } from '@sb/utils';
1112

1213
<Meta of={ComponentStories} />
1314

@@ -39,12 +40,12 @@ All available filter types controlled by the `filter` prop.
3940

4041
## ComboBoxItem
4142

42-
<ArgTypesWithNote hideHTMLPropsNote of={ComboBoxItem} />
43+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ComboBoxItem} />
4344
<Markdown>{ComboBoxItemDescription}</Markdown>
4445

4546
## ComboBoxGroupItem
4647

47-
<ArgTypesWithNote hideHTMLPropsNote of={ComboBoxGroupItem} />
48+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={ComboBoxGroupItem} />
4849
<Markdown>{ComboBoxGroupItemDescription}</Markdown>
4950

5051
<Footer />

packages/main/src/webComponents/Dialog/DialogDescription.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ The `Dialog` exposes the following CSS Shadow Parts:
1414
- header - Used to style the header of the component
1515
- content - Used to style the content of the component
1616
- footer - Used to style the footer of the component
17+
18+
**Note:** When a `Bar` is used in the header or in the footer, you should remove the default dialog's paddings.
19+
For more information see the sample "Bar in Header/Footer".

packages/main/src/webComponents/Dialog/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ export interface DialogPropTypes extends DialogAttributes, Omit<CommonProps, 'dr
101101
/**
102102
* Defines the footer HTML Element.
103103
*
104+
* **Note:** When a `Bar` is used in the footer, you should remove the default dialog's paddings.
105+
*
104106
* __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="footer"`).
105107
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
106108
*
@@ -111,6 +113,8 @@ export interface DialogPropTypes extends DialogAttributes, Omit<CommonProps, 'dr
111113
/**
112114
* Defines the header HTML Element.
113115
*
116+
* **Note:** When a `Bar` is used in the header, you should remove the default dialog's paddings.
117+
*
114118
* **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer. `accessibleName` should be used.
115119
*
116120
* __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="header"`).

packages/main/src/webComponents/FileUploader/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export interface FileUploaderPropTypes extends FileUploaderAttributes, Omit<Comm
7070
/**
7171
* By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
7272
* **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.
73+
* Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.
7374
*/
7475
children?: ReactNode | ReactNode[];
7576
/**

packages/main/src/webComponents/Input/Input.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import SuggestionItemDescription from '../SuggestionItem/SuggestionItemDescripti
88
import * as ComponentStories from './Input.stories';
99
import Description from './InputDescription.md?raw';
1010
import InputDomRef from './InputDomRef.json';
11+
import { excludePropsForAbstract } from '@sb/utils';
1112

1213
<Meta of={ComponentStories} />
1314

@@ -46,12 +47,12 @@ and the `showSuggestions` prop is set to `true`.
4647

4748
## SuggestionItem
4849

49-
<ArgTypesWithNote hideHTMLPropsNote of={SuggestionItem} />
50+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
5051
<Markdown>{SuggestionItemDescription}</Markdown>
5152

5253
## SuggestionGroupItem
5354

54-
<ArgTypesWithNote hideHTMLPropsNote of={SuggestionGroupItem} />
55+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionGroupItem} />
5556
<Markdown>{SuggestionGroupItemDescription}</Markdown>
5657

5758
<Footer />

packages/main/src/webComponents/Menu/Menu.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { MenuItem } from '../MenuItem';
77
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
88
import MenuItemDescription from '../MenuItem/MenuItemDescription.md?raw';
99
import MenuDomRef from './MenuDomRef.json';
10+
import { excludePropsForAbstract } from '@sb/utils';
1011

1112
<Meta of={ComponentStories} />
1213

@@ -116,4 +117,4 @@ const MenuComponent = () => {
116117

117118
<Markdown>{MenuItemDescription}</Markdown>
118119

119-
<ArgTypesWithNote of={MenuItem} />
120+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItem} />

packages/main/src/webComponents/MultiComboBox/MultiComboBox.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import MultiComboBoxItemDescription from '../MultiComboBoxItem/MultiComboBoxItem
88
import * as ComponentStories from './MultiComboBox.stories';
99
import Description from './MultiComboBoxDescription.md?raw';
1010
import MultiComboBoxDomRef from './MultiComboBoxDomRef.json';
11+
import { excludePropsForAbstract } from '@sb/utils';
1112

1213
<Meta of={ComponentStories} />
1314

@@ -37,12 +38,12 @@ import MultiComboBoxDomRef from './MultiComboBoxDomRef.json';
3738

3839
## MultiComboBoxItem
3940

40-
<ArgsTableWithNote hideHTMLPropsNote of={MultiComboBoxItem} />
41+
<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MultiComboBoxItem} />
4142
<Markdown>{MultiComboBoxItemDescription}</Markdown>
4243

4344
## MultiComboBoxGroupItem
4445

45-
<ArgsTableWithNote hideHTMLPropsNote of={MultiComboBoxGroupItem} />
46+
<ArgsTableWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MultiComboBoxGroupItem} />
4647
<Markdown>{MultiComboBoxGroupItemDescription}</Markdown>
4748

4849
<Footer />

packages/main/src/webComponents/MultiInput/MultiInput.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Token } from '../Token';
99
import TokenDescription from '../Token/TokenDescription.md?raw';
1010
import * as ComponentStories from './MultiInput.stories';
1111
import MultiInputDomRef from './MultiInputDomRef.json';
12+
import { excludePropsForAbstract } from '@sb/utils';
1213

1314
<Meta of={ComponentStories} />
1415

@@ -35,12 +36,12 @@ import MultiInputDomRef from './MultiInputDomRef.json';
3536

3637
## SuggestionItem
3738

38-
<ArgTypesWithNote hideHTMLPropsNote of={SuggestionItem} />
39+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
3940
<Markdown>{SuggestionItemDescription}</Markdown>
4041

4142
## SuggestionGroupItem
4243

43-
<ArgTypesWithNote hideHTMLPropsNote of={SuggestionGroupItem} />
44+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionGroupItem} />
4445
<Markdown>{SuggestionGroupItemDescription}</Markdown>
4546

4647
<Footer />

packages/main/src/webComponents/NotificationListGroupItem/NotificationListGroupItem.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { NotificationAction } from '../NotificationAction';
55
import NotificationActionDescription from '../NotificationAction/NotificationActionDescription.md?raw';
66
import * as ComponentStories from './NotificationListGroupItem.stories';
77
import NotificationListGroupItemDescription from './NotificationListGroupItemDescription.md?raw';
8+
import { excludePropsForAbstract } from '@sb/utils';
89

910
<Meta of={ComponentStories} />
1011

@@ -24,7 +25,7 @@ import NotificationListGroupItemDescription from './NotificationListGroupItemDes
2425

2526
## NotificationAction
2627

27-
<ArgTypesWithNote hideHTMLPropsNote of={NotificationAction} />
28+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={NotificationAction} />
2829
<Markdown>{NotificationActionDescription}</Markdown>
2930

3031
<Footer />

packages/main/src/webComponents/NotificationListItem/NotificationListItem.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { NotificationAction } from '../NotificationAction';
55
import NotificationActionDescription from '../NotificationAction/NotificationActionDescription.md?raw';
66
import * as ComponentStories from './NotificationListItem.stories';
77
import NotificationListItemDescription from './NotificationListItemDescription.md?raw';
8+
import { excludePropsForAbstract } from '@sb/utils';
89

910
<Meta of={ComponentStories} />
1011

@@ -33,7 +34,7 @@ import NotificationListItemDescription from './NotificationListItemDescription.m
3334

3435
## NotificationAction
3536

36-
<ArgTypesWithNote hideHTMLPropsNote of={NotificationAction} />
37+
<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={NotificationAction} />
3738
<Markdown>{NotificationActionDescription}</Markdown>
3839

3940
<Footer />
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
2+
13
The `Option` component defines the content of an option in the `Select`

packages/main/src/webComponents/Option/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ export interface OptionPropTypes extends OptionAttributes, CommonProps {
4646
/**
4747
* The `Option` component defines the content of an option in the `Select`
4848
*
49+
* @abstract
50+
*
4951
* __Note:__ This component is a web component developed by the UI5 Web Components’ team.
5052
*
5153
* [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Select)

packages/main/src/webComponents/Page/PageDescription.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,10 @@ The content occupies the main part of the page. Only the content area is scrolla
1111
### Footer
1212

1313
The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the `floatingFooter` property. **Note:** `Page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure that there is enough space for the `Page` to be rendered. **Note:** In order for the `Page` to be displayed, the parent element should have fixed height.
14+
15+
## CSS Shadow Parts
16+
17+
<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
18+
The `Page` exposes the following CSS Shadow Parts:
19+
20+
- content - Used to style the content section of the component

packages/main/src/webComponents/Panel/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ interface PanelAttributes {
4040
* Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
4141
*/
4242
noAnimation?: boolean;
43+
/**
44+
* Indicates whether the Panel header is sticky or not. If stickyHeader is set to true, then whenever you scroll the content or the application, the header of the panel will be always visible and a solid color will be used for its design.
45+
*/
46+
stickyHeader?: boolean;
4347
}
4448

4549
export interface PanelDomRef extends PanelAttributes, Ui5DomRef {}
@@ -77,7 +81,7 @@ export interface PanelPropTypes extends PanelAttributes, CommonProps {
7781
const Panel = withWebComponent<PanelPropTypes, PanelDomRef>(
7882
'ui5-panel',
7983
['accessibleName', 'accessibleRole', 'headerLevel', 'headerText'],
80-
['collapsed', 'fixed', 'noAnimation'],
84+
['collapsed', 'fixed', 'noAnimation', 'stickyHeader'],
8185
['header'],
8286
['toggle'],
8387
() => import('@ui5/webcomponents/dist/Panel.js')

0 commit comments

Comments
 (0)