docs: fix SegmentedButton multiple selection sample (#8869)

The API of the SegmentedButton has been recently changed, but the oficial sample was not adapted
SAP · Apr 27, 2024 · a6122be · a6122be
1 parent ef9304d
commit a6122be
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/docs/Migrating to version 2.0 guide.md b/docs/Migrating to version 2.0 guide.md
@@ -619,6 +619,63 @@ Now you have to use it like:
 <ui5-select value-state="Success"></ui5-select>
 ```
 
+### ui5-segmented-button
+
+
+| Changed item | Old     | New     | 
+|--------------|---------|---------|
+| Property     | mode | selectionMode | 
+| Readonly Property     | selectedItem | selectedItems | 
+
+- The property `mode` has been renamed to `selectionMode`. The selection modes are renamed from `SingleSelect` and `MultiSelect` to `Single` and `Multiple`. 
+
+If you previously used it as follows:
+```html
+<ui5-segmented-button mode="SingleSelect"></ui5-segmented-button>
+<ui5-segmented-button mode="MultiSelect"></ui5-segmented-button>
+```
+Now you have to use:
+```html
+<ui5-segmented-button selection-mode="Single"></ui5-segmented-button>
+<ui5-segmented-button selection-mode="Multiple"><ui5-segmented-button>
+```
+- The read-only getter `selectedItem` has been replaced by `selectedItems` as multiple items can be selected.
+
+### ui5-segmented-button-item
+
+| Changed item | Old     | New     | 
+|--------------|---------|---------|
+| Property     | pressed | selected | 
+| Property     | design | ---- | 
+| Property     | iconEnd | ---- | 
+| Property     | submits | ---- | 
+| Property     | type | ---- | 
+| Property     | accessibilityAttributes | ---- | 
+| Property     | accessibleRole | ---- | 
+
+- The property `pressed` has been renamed to `selected`.
+
+If you previously used it as follows:
+```html
+<ui5-segmented-button id="segButton1">
+	  <ui5-segmented-button-item>Item 1</ui5-segmented-button-item>
+	  <ui5-segmented-button-item pressed>Item 2</ui5-segmented-button-item>
+</ui5-segmented-button>
+```
+Now you have to use it as follows:
+```html
+<ui5-segmented-button id="segButton1">
+	  <ui5-segmented-button-item>Item 1</ui5-segmented-button-item>
+	  <ui5-segmented-button-item selected>Item 2</ui5-segmented-button-item>
+</ui5-segmented-button>
+```
+
+- The property `design` has been inherited but never had effect and it's now removed.
+- The property `iconEnd` has been inherited but never had effect and it's now removed.
+- The property `submits` has been inherited but never had effect and it's now removed.
+- The property `type` has been inherited but never had effect and it's now removed.
+- The property `accessibilityAttributes` has been inherited but never had effect and it's now removed.
+- The property `accessibleRole` has been inherited but never had effect and it's now removed.
 
 ### ui5-step-input
 

diff --git a/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html b/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html
@@ -12,15 +12,15 @@
     <!-- playground-fold-end -->
 
 
-    <ui5-segmented-button mode="SingleSelect">
+    <ui5-segmented-button selection-mode="Single">
         <ui5-segmented-button-item icon="bold-text" selected></ui5-segmented-button-item>
         <ui5-segmented-button-item icon="underline-text"></ui5-segmented-button-item>
         <ui5-segmented-button-item icon="italic-text"></ui5-segmented-button-item>
     </ui5-segmented-button>
 
     <br><br>
 
-    <ui5-segmented-button mode="MultiSelect">
+    <ui5-segmented-button selection-mode="Multiple">
         <ui5-segmented-button-item>Map</ui5-segmented-button-item>
         <ui5-segmented-button-item selected>Satellite</ui5-segmented-button-item>
         <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>