refactor: harmonize prop/enum names (#6040)

BREAKING CHANGE: __ActionSheet:__ `a11yConfig` has been renamed to `accessibilityAttributes`. BREAKING CHANGE: __AnalyticalTable:__ The properties and values for the `AnalyticalTableSelectionMode` enum has been changed. `SingleSelect` is now `Single` and `MultiSelect` is now `Multiple`. BREAKING CHANGE: __AnalyticalTable:__ `a11yConfig` has been renamed to `accessibilityAttributes`. BREAKING CHANGE: __ObjectPage:__ `a11yConfig` has been renamed to `accessibilityAttributes`. BREAKING CHANGE: __ObjectStatus:__ `active` has been renamed to `interactive`.
SAP · Jul 8, 2024 · 4b4815b · 4b4815b
1 parent 7e19fbb
commit 4b4815b
Show file tree

Hide file tree

Showing 26 changed files with 133 additions and 110 deletions.
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
@@ -405,7 +405,8 @@ Please use the following components instead:
 
 **Renamed Props:**
 
-- `a11yConfig.dynamicPageAnchorBar` has been renamed to `a11yConfig.objectPageAnchorBar`
+- `a11yConfig` has been renamed to `accessibilityAttributes`
+- `a11yConfig.dynamicPageAnchorBar` has been renamed to `accessibilityAttributes.objectPageAnchorBar`
 
 Also, the namings of internal `data-component-name` attributes have been adjusted accordingly. E.g. `data-component-name="DynamicPageTitleSubHeader"` has been renamed to `data-component-name="ObjectPageTitleSubHeader"`
 
@@ -443,16 +444,15 @@ function MyComponent() {
 ### ActionSheet
 
 The prop `portalContainer` has been removed as it is no longer needed due to the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) which is now used in the UI5 Web Components.
-For a better aligned API, the `showCancelButton` prop has been replaced wih the `hideCancelButton` prop and the logic has been inverted.
-You only need to apply changes to your code if `showCancelButton` has been set to `false`.
+For a better aligned API, the `showCancelButton` prop has been replaced wih the `hideCancelButton` prop and the logic has been inverted. Also, the `a11yConfig` prop has been renamed to `accessibilityAttributes`.
 
 ```tsx
 // v1
 import { ActionSheet, Button } from '@ui5/webcomponents-react';
 
 function MyComponent() {
   return (
-    <ActionSheet showCancelButton={false}>
+    <ActionSheet showCancelButton={false} a11yConfig={{ actionSheetMobileContent: { role: 'menu' } }}>
       <Button>Action 1</Button>
     </ActionSheet>
   );
@@ -463,7 +463,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react';
 
 function MyComponent() {
   return (
-    <ActionSheet hideCancelButton>
+    <ActionSheet hideCancelButton accessibilityAttributes={{ actionSheetMobileContent: { role: 'menu' } }}>
       <Button>Action 1</Button>
     </ActionSheet>
   );
@@ -483,13 +483,19 @@ function MyComponent() {
 
 **Renamed Enums:**
 
-Only the names of the following enums have changed, so it's sufficient to replace them with the new name.
+Names of the following enums have changed:
 
 - `TableScaleWidthMode` is now `AnalyticalTableScaleWidthMode`
 - `TableSelectionBehavior` is now `AnalyticalTableSelectionBehavior`
 - `TableSelectionMode` is now `AnalyticalTableSelectionMode`
 - `TableVisibleRowCountMode` is now `AnalyticalTableVisibleRowCountMode`
 
+**Changed Enums:**
+
+- The properties and values for the `AnalyticalTableSelectionMode` enum has been changed.
+  - `SingleSelect` is now `Single`
+  - `MultiSelect` is now `Multiple`.
+
 **[Column Properties](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticaltable--docs#column-properties) Changes**
 
 - `canReorder` has been removed, please use `disableDragAndDrop` instead.
@@ -505,6 +511,7 @@ const columns = [{ ...otherProperties, canReorder: false }];
   scaleWidthMode={TableScaleWidthMode.Grow}
   selectionBehavior={TableSelectionBehavior.Row}
   selectionMode={TableSelectionMode.MultiSelect}
+  // selectionMode={TableSelectionMode.SingleSelect}
   visibleRowCountMode={TableVisibleRowCountMode.Interactive}
 />;
 
@@ -517,7 +524,8 @@ const columns = [{ ...otherProps, disableDragAndDrop: true }];
   subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
   scaleWidthMode={AnalyticalTableScaleWidthMode.Grow}
   selectionBehavior={AnalyticalTableSelectionBehavior.Row}
-  selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+  selectionMode={AnalyticalTableSelectionMode.Multiple}
+  // selectionMode={AnalyticalTableSelectionMode.Single}
   visibleRowCountMode={AnalyticalTableVisibleRowCountMode.Interactive}
 />;
 ```
@@ -610,9 +618,13 @@ The prop `titleText` is now required and the default value `true` has been remov
 
 The prop `titleText` is now required.
 
+### ObjectStatus
+
+For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
+
 ## Enum Changes
 
-For a better alignment with the UI5 Web Components, the following enums have been renamed:
+For better alignment with the UI5 Web Components, the following enums have been renamed:
 
 - `MessageBoxActions` has been renamed to `MessageBoxAction`
 - `MessageBoxTypes` has been renamed to `MessageBoxType`

diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -9,14 +9,19 @@
     },
     "ActionSheet": {
       "changedProps": {
+        "a11yConfig": "accessibilityAttributes",
         "onAfterClose": "onClose",
         "onAfterOpen": "onOpen",
         "placementType": "placement",
         "showCancelButton": "hideCancelButton"
       },
       "removedProps": ["portalContainer"]
     },
-    "AnalyticalTable": {},
+    "AnalyticalTable": {
+      "renamedEnums": {
+        "selectionMode": "AnalyticalTableSelectionMode"
+      }
+    },
     "Avatar": {},
     "Badge": {
       "newComponent": "Tag"
@@ -286,7 +291,15 @@
       },
       "removedProps": ["selected"]
     },
+    "ObjectPage": {
+      "changedProps": {
+        "a11yConfig": "accessibilityAttributes"
+      }
+    },
     "ObjectStatus": {
+      "changedProps": {
+        "active": "interactive"
+      },
       "renamedEnums": {
         "state": "ValueState"
       }
@@ -618,6 +631,10 @@
     "Themes": "Theme"
   },
   "enumProperties": {
+    "AnalyticalTableSelectionMode": {
+      "SingleSelect": "Single",
+      "MultiSelect": "Multiple"
+    },
     "BusyIndicatorSize": {
       "Small": "S",
       "Medium": "M",

diff --git a/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx
@@ -24,7 +24,7 @@ const meta = {
     header: {
       control: { disable: true }
     },
-    a11yConfig: { table: { category: 'A11y props' } }
+    accessibilityAttributes: { table: { category: 'Accessibility props' } }
   },
   args: {
     horizontalAlign: PopoverHorizontalAlign.Center,

diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
@@ -44,9 +44,9 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
    */
   hideCancelButton?: boolean;
   /**
-   * Defines internally used a11y properties.
+   * Defines internally used accessibility properties/attributes.
    */
-  a11yConfig?: {
+  accessibilityAttributes?: {
     actionSheetMobileContent?: {
       role?: string;
     };
@@ -116,7 +116,8 @@ function ActionSheetButton(props: ActionSheetButtonPropTypes) {
  *
  */
 const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((props, ref) => {
-  const { a11yConfig, children, className, header, headerText, hideCancelButton, onOpen, open, ...rest } = props;
+  const { accessibilityAttributes, children, className, header, headerText, hideCancelButton, onOpen, open, ...rest } =
+    props;
 
   useStylesheet(styleData, ActionSheet.displayName);
 
@@ -229,7 +230,7 @@ const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((p
       <div
         className={isPhone() ? classNames.contentMobile : undefined}
         data-component-name="ActionSheetMobileContent"
-        role={a11yConfig?.actionSheetMobileContent?.role ?? 'application'}
+        role={accessibilityAttributes?.actionSheetMobileContent?.role ?? 'application'}
         onKeyDown={handleKeyDown}
         ref={actionBtnsRef}
       >

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -484,7 +484,7 @@ describe('AnalyticalTable', () => {
             }}
             data={dataTree}
             globalFilterValue={filter}
-            selectionMode="MultiSelect"
+            selectionMode="Multiple"
           />
           <div data-testid="payloadHelper">
             {JSON.stringify(relevantPayload?.selectedFlatRows?.filter(Boolean).length)}
@@ -587,7 +587,7 @@ describe('AnalyticalTable', () => {
               setAllRowsSelected(e.detail.allRowsSelected);
               onRowSelect(e);
             }}
-            selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+            selectionMode={AnalyticalTableSelectionMode.Multiple}
             selectedRowIds={selectedRowIds}
           />
           <p>
@@ -790,7 +790,7 @@ describe('AnalyticalTable', () => {
               onRowSelect(e);
             }}
             data={groupableData}
-            selectionMode="MultiSelect"
+            selectionMode="Multiple"
           />
           <div data-testid="selectedFlatRowsLength">
             {JSON.stringify(relevantPayload?.selectedFlatRows?.filter(Boolean).length)}
@@ -833,7 +833,7 @@ describe('AnalyticalTable', () => {
       return (
         <>
           <AnalyticalTable
-            selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+            selectionMode={AnalyticalTableSelectionMode.Multiple}
             data={dataTree}
             columns={columns}
             isTreeTable
@@ -947,7 +947,7 @@ describe('AnalyticalTable', () => {
     const indeterminateChange = cy.spy().as('onIndeterminateChangeSpy');
     cy.mount(
       <AnalyticalTable
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
         data={dataTree}
         columns={columns}
         isTreeTable
@@ -1086,7 +1086,7 @@ describe('AnalyticalTable', () => {
     [
       { props: {}, bothWidth: 952, onlyNameWidth: 1904, onlyAgeWidth: 1904 },
       {
-        props: { selectionMode: AnalyticalTableSelectionMode.MultiSelect },
+        props: { selectionMode: AnalyticalTableSelectionMode.Multiple },
         bothWidth: 930,
         onlyNameWidth: 1860,
         onlyAgeWidth: 1860
@@ -1107,7 +1107,7 @@ describe('AnalyticalTable', () => {
         props: {
           withNavigationHighlight: true,
           withRowHighlight: true,
-          selectionMode: AnalyticalTableSelectionMode.SingleSelect
+          selectionMode: AnalyticalTableSelectionMode.Single
         },
         bothWidth: 924,
         onlyNameWidth: 1848,
@@ -1397,9 +1397,7 @@ describe('AnalyticalTable', () => {
         accessor: 'friend.name'
       }
     ];
-    cy.mount(
-      <AnalyticalTable selectionMode="SingleSelect" data={data.slice(0, 2)} columns={columns} onRowSelect={select} />
-    );
+    cy.mount(<AnalyticalTable selectionMode="Single" data={data.slice(0, 2)} columns={columns} onRowSelect={select} />);
     cy.findAllByText('Custom Cell Button')
       .should('have.length', 2)
       .each(($cellBtn) => {
@@ -1429,7 +1427,7 @@ describe('AnalyticalTable', () => {
       }
     ];
     cy.mount(
-      <AnalyticalTable selectionMode="SingleSelect" data={data.slice(0, 2)} columns={columns2} onRowSelect={select} />
+      <AnalyticalTable selectionMode="Single" data={data.slice(0, 2)} columns={columns2} onRowSelect={select} />
     );
     cy.findAllByText('Custom Cell Button')
       .should('have.length', 2)
@@ -1536,7 +1534,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={data}
         columns={columns}
-        selectionMode={AnalyticalTableSelectionMode.SingleSelect}
+        selectionMode={AnalyticalTableSelectionMode.Single}
         selectionBehavior={AnalyticalTableSelectionBehavior.RowOnly}
       />
     );
@@ -1545,7 +1543,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={data}
         columns={columns}
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
         selectionBehavior={AnalyticalTableSelectionBehavior.RowOnly}
       />
     );
@@ -1572,7 +1570,7 @@ describe('AnalyticalTable', () => {
           data={data}
           columns={columns}
           withNavigationHighlight
-          selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+          selectionMode={AnalyticalTableSelectionMode.Multiple}
           markNavigatedRow={markNavigatedRow}
           onRowSelect={onRowSelect}
         />
@@ -1595,7 +1593,7 @@ describe('AnalyticalTable', () => {
     const selectedRowColor = cssVarToRgb(ThemingParameters.sapList_SelectionBackgroundColor);
     cy.mount(
       <AnalyticalTable
-        selectionMode={AnalyticalTableSelectionMode.SingleSelect}
+        selectionMode={AnalyticalTableSelectionMode.Single}
         data={data}
         columns={columns}
         reactTableOptions={{
@@ -1620,7 +1618,7 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         selectionBehavior={AnalyticalTableSelectionBehavior.Row}
-        selectionMode={AnalyticalTableSelectionMode.SingleSelect}
+        selectionMode={AnalyticalTableSelectionMode.Single}
         onRowClick={rowClick}
         onRowSelect={rowSelect}
       />
@@ -1648,7 +1646,7 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         selectionBehavior={AnalyticalTableSelectionBehavior.Row}
-        selectionMode={AnalyticalTableSelectionMode.SingleSelect}
+        selectionMode={AnalyticalTableSelectionMode.Single}
         onRowClick={rowSelectWithoutSelCell}
         onRowSelect={rowSelect}
       />
@@ -2005,7 +2003,7 @@ describe('AnalyticalTable', () => {
           columns={columns}
           onRowSelect={onRowSelect}
           onRowClick={onRowClick}
-          selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+          selectionMode={AnalyticalTableSelectionMode.Multiple}
           tableHooks={[useRowDisableSelection('disableSelection')]}
           minRows={1}
         />
@@ -2041,7 +2039,7 @@ describe('AnalyticalTable', () => {
   it('plugin hook: useManualRowSelect', () => {
     cy.mount(
       <AnalyticalTable
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
         data={manualSelectData}
         columns={columns}
         tableHooks={[useManualRowSelect('isSelected')]}
@@ -2059,7 +2057,7 @@ describe('AnalyticalTable', () => {
     const [, ...updatedManualSelectData] = manualSelectData;
     cy.mount(
       <AnalyticalTable
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
         data={[
           {
             name: 'Selected',
@@ -2096,7 +2094,7 @@ describe('AnalyticalTable', () => {
             Show Selected
           </Button>
           <AnalyticalTable
-            selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+            selectionMode={AnalyticalTableSelectionMode.Multiple}
             data={data}
             columns={columns}
             tableInstance={instance}
@@ -2388,7 +2386,7 @@ describe('AnalyticalTable', () => {
           <AnalyticalTable
             columns={columns}
             data={data}
-            selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+            selectionMode={AnalyticalTableSelectionMode.Multiple}
             onRowSelect={handleSelect}
           />
           <span data-testid="payload">{stringifiedPl}</span>
@@ -2825,7 +2823,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns}
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
       />
     );
 
@@ -2838,7 +2836,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns}
-        selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+        selectionMode={AnalyticalTableSelectionMode.Multiple}
         withRowHighlight
       />
     );

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -137,7 +137,7 @@ import * as ComponentStories from './AnalyticalTable.stories';
   selectedRowIds={{
     3: true
   }}
-  selectionMode="SingleSelect"
+  selectionMode="Single"
   withRowHighlight
 />
 ```