feat: update to UI5 Web Components 2.7.0

.storybook/manager-head.html

@@ -54,7 +54,6 @@
   /*experimental components */
   #data-display-table::after,
   #inputs-tokenizer::after,
-  #layouts-floorplans-form::after,
   #modals-popovers-usermenu::after,
   #charts-timelinechart::after {
     content: '(experimental)';

.storybook/utils.ts

@@ -61,7 +61,8 @@ const replaceSubComps = {
   TreeItemBase: ['TreeItem', 'TreeItemCustom'],
   AvatarGroupItem: ['Avatar'],
   TableFeature: ['TableGrowing', 'TableSelection', 'TableVirtualizer'],
-  SideNavigationItemBase: ['SideNavigationItem', 'SideNavigationGroup', 'SideNavigationSubItem']
+  SideNavigationItemBase: ['SideNavigationItem', 'SideNavigationGroup', 'SideNavigationSubItem'],
+  TableRowActionBase: ['TableRowAction', 'TableRowActionNavigation']
 };
 
 function findSubComponentsRecursively(moduleName: string, cem: any): string[] {

config/version-info.json

@@ -48,5 +48,6 @@
   "2.3.0": "2.2.0",
   "2.4.0": "2.4.0",
   "2.5.0": "2.5.0",
-  "2.6.0": "2.6.2"
+  "2.6.0": "2.6.2",
+  "2.7.0": "2.7.0"
 }

package.json

@@ -41,10 +41,10 @@
     "@storybook/react": "8.5.0",
     "@storybook/react-vite": "8.5.0",
     "@storybook/theming": "8.5.0",
-    "@ui5/webcomponents": "2.6.3",
-    "@ui5/webcomponents-compat": "2.6.3",
-    "@ui5/webcomponents-fiori": "2.6.3",
-    "@ui5/webcomponents-icons": "2.6.3",
+    "@ui5/webcomponents": "2.7.0",
+    "@ui5/webcomponents-compat": "2.7.0",
+    "@ui5/webcomponents-fiori": "2.7.0",
+    "@ui5/webcomponents-icons": "2.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-gfm": "^4.0.0",
@@ -66,7 +66,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
-    "@ui5/webcomponents-tools": "2.6.3",
+    "@ui5/webcomponents-tools": "2.7.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^11.0.0",
     "cssnano": "^7.0.0",

packages/base/package.json

@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.6.2",
+    "@ui5/webcomponents-base": "~2.7.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {

packages/charts/package.json

@@ -39,8 +39,8 @@
     "recharts": "2.15.1"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.6.0",
-    "@ui5/webcomponents-react-base": "~2.6.0",
+    "@ui5/webcomponents-react": "~2.7.0",
+    "@ui5/webcomponents-react-base": "~2.7.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {

packages/compat/package.json

@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.6.2",
-    "@ui5/webcomponents-react": "~2.6.0",
+    "@ui5/webcomponents-compat": "~2.7.0",
+    "@ui5/webcomponents-react": "~2.7.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/cypress-commands/package.json

@@ -23,8 +23,8 @@
     "clean": "rimraf dist api-commands.json api-queries.json"
   },
   "peerDependencies": {
-    "@ui5/webcomponents": "~2.6.0",
-    "@ui5/webcomponents-base": "~2.6.0",
+    "@ui5/webcomponents": "~2.7.0",
+    "@ui5/webcomponents-base": "~2.7.0",
     "cypress": "^12 || ^13 || ^14"
   },
   "peerDependenciesMeta": {

packages/main/package.json

@@ -57,10 +57,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.6.2",
-    "@ui5/webcomponents-base": "~2.6.2",
-    "@ui5/webcomponents-fiori": "~2.6.2",
-    "@ui5/webcomponents-icons": "~2.6.2",
+    "@ui5/webcomponents": "~2.7.0",
+    "@ui5/webcomponents-base": "~2.7.0",
+    "@ui5/webcomponents-fiori": "~2.7.0",
+    "@ui5/webcomponents-icons": "~2.7.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/main/src/internal/utils.cy.tsx

@@ -114,22 +114,22 @@ describe('utils', function () {
     cy.findByText('Sticky Header')
       .as('sticky1')
       .should(($el) => {
-        expect($el[0].getBoundingClientRect().top).to.approximately(216, 1);
+        expect($el[0].getBoundingClientRect().top).to.approximately(184, 1);
       });
     cy.findByText('Content1')
       .as('content1')
       .should(($el) => {
-        expect($el[0].getBoundingClientRect().top).to.approximately(280, 1);
+        expect($el[0].getBoundingClientRect().top).to.approximately(248, 1);
       });
     cy.findByText('Sticky Header 2')
       .as('sticky2')
       .should(($el) => {
-        expect($el[0].getBoundingClientRect().top).to.approximately(520, 1);
+        expect($el[0].getBoundingClientRect().top).to.approximately(488, 1);
       });
     cy.findByText('End Content')
       .as('endContent')
       .should(($el) => {
-        expect($el[0].getBoundingClientRect().top).to.approximately(2648, 1);
+        expect($el[0].getBoundingClientRect().top).to.approximately(2616, 1);
       });
 
     cy.get('.ui5-dynamic-page-scroll-container').scrollTo('bottom');

packages/main/src/internal/withWebComponent.cy.tsx

@@ -42,13 +42,13 @@ describe('withWebComponent', () => {
     };
     cy.mount(<TestComp />);
 
-    cy.findByTestId('switch').click();
+    cy.findByTestId('switch').realClick();
     cy.findByText('Btn').click();
     cy.get('@custom').should('have.been.calledOnce');
     cy.get('@native').should('have.been.calledOnce');
     cy.get('@nativePassedThrough').should('have.been.calledOnce');
     cy.findByText('Update handler').click();
-    cy.findByTestId('switch').click();
+    cy.findByTestId('switch').realClick();
     cy.findByText('Btn').click();
     cy.get('@custom').should('have.been.calledOnce');
     cy.get('@native').should('have.been.calledOnce');

packages/main/src/webComponents/Button/Button.mdx

@@ -1,6 +1,8 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import * as ComponentStories from './Button.stories';
+import { ButtonBadge } from '../ButtonBadge';
 
 <Meta of={ComponentStories} />
 
@@ -16,4 +18,17 @@ import * as ComponentStories from './Button.stories';
 
 <ControlsWithNote of={ComponentStories.Default} />
 
+## Button with ButtonBadge
+
+**Note:** `ButtonBadgeDesign.InlineText` is intended to be used with `ContentDensity` `"Compact"` and `ButtonBadgeDesign.OverlayText` with `ContentDensity` `"Cozy"`.
+
+<Canvas of={ComponentStories.WithBadge} />
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## ButtonBadge
+
+<Description of={ButtonBadge} />
+<ArgTypesWithNote of={ButtonBadge} />
+
 <Footer />

packages/main/src/webComponents/Button/Button.stories.tsx

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import ButtonBadgeDesign from '@ui5/webcomponents/dist/types/ButtonBadgeDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
+import { ButtonBadge } from '../ButtonBadge/index.js';
 import { Button } from './index.js';
 
 const meta = {
   title: 'Inputs / Button',
   component: Button,
   argTypes: {
-    children: { control: 'text' }
+    children: { control: 'text' },
+    badge: { control: { disable: true } }
   },
   args: {
     design: ButtonDesign.Default,
@@ -21,3 +24,21 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const WithBadge: Story = {
+  render(args) {
+    return (
+      <>
+        <Button {...args} badge={<ButtonBadge design={ButtonBadgeDesign.AttentionDot} />}>
+          ButtonBadgeDesign.AttentionDot
+        </Button>
+        <Button {...args} badge={<ButtonBadge design={ButtonBadgeDesign.InlineText} text="badge" />}>
+          ButtonBadgeDesign.InlineText
+        </Button>
+        <Button {...args} badge={<ButtonBadge design={ButtonBadgeDesign.OverlayText} text="badge" />}>
+          ButtonBadgeDesign.OverlayText
+        </Button>
+      </>
+    );
+  }
+};

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

@@ -7,7 +7,7 @@ import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import type ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js';
 import type { MouseEventHandler, ReactNode } from 'react';
 import { withWebComponent } from '../../internal/withWebComponent.js';
-import type { CommonProps, Ui5DomRef } from '../../types/index.js';
+import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
 
 interface ButtonAttributes {
   /**
@@ -131,7 +131,22 @@ interface ButtonAttributes {
 
 interface ButtonDomRef extends Required<ButtonAttributes>, Ui5DomRef {}
 
-interface ButtonPropTypes extends ButtonAttributes, Omit<CommonProps, keyof ButtonAttributes | 'children' | 'onClick'> {
+interface ButtonPropTypes
+  extends ButtonAttributes,
+    Omit<CommonProps, keyof ButtonAttributes | 'badge' | 'children' | 'onClick'> {
+  /**
+   * Adds a badge to the button.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="badge"`).
+   * 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.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**.
+   */
+  badge?: UI5WCSlotsNode;
+
   /**
    * Defines the text of the component.
    *
@@ -189,7 +204,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
     'type'
   ],
   ['disabled', 'submits'],
-  [],
+  ['badge'],
   ['click']
 );
 

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

@@ -0,0 +1,51 @@
+'use client';
+
+import '@ui5/webcomponents/dist/ButtonBadge.js';
+import type ButtonBadgeDesign from '@ui5/webcomponents/dist/types/ButtonBadgeDesign.js';
+import { withWebComponent } from '../../internal/withWebComponent.js';
+import type { CommonProps, Ui5DomRef } from '../../types/index.js';
+
+interface ButtonBadgeAttributes {
+  /**
+   * Determines where the badge should be placed and how it should be styled.
+   *
+   * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**.
+   * @default "AttentionDot"
+   */
+  design?: ButtonBadgeDesign | keyof typeof ButtonBadgeDesign;
+
+  /**
+   * Defines the text of the component.
+   *
+   * **Note:** Text is not needed when the `design` property is set to `AttentionDot`.
+   *
+   * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**.
+   */
+  text?: string;
+}
+
+interface ButtonBadgeDomRef extends Required<ButtonBadgeAttributes>, Ui5DomRef {}
+
+interface ButtonBadgePropTypes extends ButtonBadgeAttributes, Omit<CommonProps, keyof ButtonBadgeAttributes> {}
+
+/**
+ * The `ButtonBadge` component defines a badge that appears in the `Button`.
+ *
+ *  *
+ *
+ * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of __@ui5/webcomponents__.
+ */
+const ButtonBadge = withWebComponent<ButtonBadgePropTypes, ButtonBadgeDomRef>(
+  'ui5-button-badge',
+  ['design', 'text'],
+  [],
+  [],
+  []
+);
+
+ButtonBadge.displayName = 'ButtonBadge';
+
+export { ButtonBadge };
+export type { ButtonBadgeDomRef, ButtonBadgePropTypes };

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

@@ -41,8 +41,6 @@ interface ColorPalettePopoverAttributes {
 
   /**
    * Defines whether the user can choose a custom color from a component.
-   *
-   * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
    * @default false
    */
   showMoreColors?: boolean;

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

@@ -228,7 +228,6 @@ interface FormPropTypes extends FormAttributes, Omit<CommonProps, keyof FormAttr
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
- * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
  */
 const Form = withWebComponent<FormPropTypes, FormDomRef>(
   'ui5-form',

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

@@ -49,7 +49,6 @@ interface FormGroupPropTypes extends FormGroupAttributes, Omit<CommonProps, keyo
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
- * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
  */
 const FormGroup = withWebComponent<FormGroupPropTypes, FormGroupDomRef>(
   'ui5-form-group',

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

@@ -56,7 +56,6 @@ interface FormItemPropTypes
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
- * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
  */
 const FormItem = withWebComponent<FormItemPropTypes, FormItemDomRef>(
   'ui5-form-item',

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

@@ -95,9 +95,6 @@ interface InputAttributes {
 
   /**
    * Defines whether the component should show suggestions, if such are present.
-   *
-   * **Note:** You need to import the `InputSuggestions` module
-   * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
    * @default false
    */
   showSuggestions?: boolean;
@@ -153,12 +150,6 @@ interface InputPropTypes
    * property is set to `true`.
    *
    * **Note:** The `<SuggestionItem>`, `<SuggestionItemGroup>` and `SuggestionItemCustom` are recommended to be used as suggestion items.
-   *
-   * **Note:** Importing the Input Suggestions Support feature:
-   *
-   * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";`
-   *
-   * automatically imports the `<SuggestionItem>` and `<SuggestionItemGroup>` for your convenience.
    */
   children?: ReactNode | ReactNode[];
 
@@ -271,11 +262,6 @@ interface InputPropTypes
  * When the user makes changes to the text, the change event is fired,
  * which enables you to react on any text change.
  *
- * **Note:** If you are using the `Input` as a single npm module,
- * don't forget to import the `InputSuggestions` module from
- * "@ui5/webcomponents/dist/features/InputSuggestions.js"
- * to enable the suggestions functionality.
- *
  * ### Keyboard Handling
  * The `Input` provides the following keyboard shortcuts:
  *
@@ -290,8 +276,6 @@ interface InputPropTypes
  *
  *
  *
- * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";` (optional - for input suggestions support)
- *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
 const Input = withWebComponent<InputPropTypes, InputDomRef>(