From 4b4815b0066cce7e6522dc5fd05b9c14a24e7555 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 8 Jul 2024 16:35:33 +0200 Subject: [PATCH] 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`. --- docs/MigrationGuide.mdx | 28 +++++++---- .../codemod/transforms/v2/codemodConfig.json | 19 +++++++- .../ActionSheet/ActionSheet.stories.tsx | 2 +- .../main/src/components/ActionSheet/index.tsx | 9 ++-- .../AnalyticalTable/AnalyticalTable.cy.tsx | 46 +++++++++---------- .../AnalyticalTable/AnalyticalTable.mdx | 2 +- .../AnalyticalTable.stories.tsx | 7 ++- .../AnalyticalTableHooks.stories.tsx | 6 +-- .../PluginDisableRowSelection.mdx | 4 +- .../PluginIndeterminateRowSelection.mdx | 2 +- .../AnalyticalTable/PluginManualRowSelect.mdx | 2 +- .../hooks/useRowSelectionColumn.tsx | 6 +-- .../hooks/useSelectionChangeCallback.ts | 2 +- .../hooks/useSingleRowStateSelection.ts | 2 +- .../AnalyticalTable/hooks/useStyling.ts | 7 ++- .../useIndeterminateRowSelection.tsx | 4 +- .../pluginHooks/useRowDisableSelection.tsx | 9 ++-- .../components/AnalyticalTable/types/index.ts | 4 +- .../main/src/components/MessageBox/index.tsx | 2 +- .../ObjectPage/ObjectPage.stories.tsx | 2 +- .../main/src/components/ObjectPage/index.tsx | 12 ++--- .../components/ObjectPageAnchorBar/index.tsx | 8 ++-- .../ObjectStatus/ObjectStatus.cy.tsx | 4 +- .../ObjectStatus/ObjectStatus.stories.tsx | 28 +++++------ .../src/components/ObjectStatus/index.tsx | 22 ++++----- .../src/enums/AnalyticalTableSelectionMode.ts | 4 +- 26 files changed, 133 insertions(+), 110 deletions(-) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 0a874df5be5..ba0aa1b1072 100644 --- 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,8 +444,7 @@ 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 @@ -452,7 +452,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react'; function MyComponent() { return ( - + ); @@ -463,7 +463,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react'; function MyComponent() { return ( - + ); @@ -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 index e54b5d27f62..7d49db5296e 100644 --- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json +++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json @@ -9,6 +9,7 @@ }, "ActionSheet": { "changedProps": { + "a11yConfig": "accessibilityAttributes", "onAfterClose": "onClose", "onAfterOpen": "onOpen", "placementType": "placement", @@ -16,7 +17,11 @@ }, "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 index 7fb92c27e1d..2f0ad6715f8 100644 --- 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 index f20800f0bd3..a1f6198a85b 100644 --- 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((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((p
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index c3d6679e539..ae211938676 100644 --- 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" />
{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} />

@@ -790,7 +790,7 @@ describe('AnalyticalTable', () => { onRowSelect(e); }} data={groupableData} - selectionMode="MultiSelect" + selectionMode="Multiple" />

{JSON.stringify(relevantPayload?.selectedFlatRows?.filter(Boolean).length)} @@ -833,7 +833,7 @@ describe('AnalyticalTable', () => { return ( <> { const indeterminateChange = cy.spy().as('onIndeterminateChangeSpy'); cy.mount( { [ { 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( - - ); + cy.mount(); cy.findAllByText('Custom Cell Button') .should('have.length', 2) .each(($cellBtn) => { @@ -1429,7 +1427,7 @@ describe('AnalyticalTable', () => { } ]; cy.mount( - + ); cy.findAllByText('Custom Cell Button') .should('have.length', 2) @@ -1536,7 +1534,7 @@ describe('AnalyticalTable', () => { ); @@ -1545,7 +1543,7 @@ describe('AnalyticalTable', () => { ); @@ -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( { 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( { const [, ...updatedManualSelectData] = manualSelectData; cy.mount( { Show Selected { {stringifiedPl} @@ -2825,7 +2823,7 @@ describe('AnalyticalTable', () => { ); @@ -2838,7 +2836,7 @@ describe('AnalyticalTable', () => { ); diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx index e9dce47c963..527f3107826 100644 --- 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 /> ``` diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index ab760c133ee..549e84399b5 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx @@ -121,7 +121,7 @@ const meta = { subRowsKey: 'subRows', isTreeTable: false, scaleWidthMode: AnalyticalTableScaleWidthMode.Default, - selectionMode: AnalyticalTableSelectionMode.SingleSelect, + selectionMode: AnalyticalTableSelectionMode.Single, selectionBehavior: AnalyticalTableSelectionBehavior.Row, overscanCountHorizontal: 5, visibleRowCountMode: AnalyticalTableVisibleRowCountMode.Fixed, @@ -138,8 +138,7 @@ const meta = { tableHooks: { control: { disable: true } }, NoDataComponent: { control: { disable: true } }, extension: { control: { disable: true } }, - tableInstance: { control: { disable: true } }, - portalContainer: { control: { disable: true } } + tableInstance: { control: { disable: true } } } } satisfies Meta; export default meta; @@ -360,7 +359,7 @@ export const ResponsiveColumns: Story = { }; export const NavigationIndicator: Story = { - args: { withNavigationHighlight: true, selectionMode: AnalyticalTableSelectionMode.MultiSelect, data: dataLarge }, + args: { withNavigationHighlight: true, selectionMode: AnalyticalTableSelectionMode.Multiple, data: dataLarge }, render: (args) => { const [selectedRow, setSelectedRow] = useState(); const onRowSelect = (e) => { diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx index ea01d7c24b2..ee5daf7fa93 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx @@ -50,7 +50,7 @@ export const PluginAnnounceEmptyCells: Story = { export const PluginDisableRowSelection: Story = { args: { data: dataLarge.map((item) => ({ ...item, disableSelection: Math.random() < 0.5 })), - selectionMode: AnalyticalTableSelectionMode.MultiSelect + selectionMode: AnalyticalTableSelectionMode.Multiple }, render: (args) => { const disableRowFunc = (row) => row.original.age < 40; @@ -107,7 +107,7 @@ export const PluginIndeterminateRowSelection: Story = { selectSubRows ? "Don't " : '' }Select Sub-Rows`}
{ ); @@ -55,7 +55,7 @@ const data = [ ); diff --git a/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx b/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx index c7b070eb261..ab91adc24a7 100644 --- a/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx +++ b/packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx @@ -32,7 +32,7 @@ When using this hook, it is recommended to also select all sub-rows when selecti ```jsx { webComponentsReactProperties: { selectionMode } } = instance; - if (selectionMode === AnalyticalTableSelectionMode.SingleSelect) { + if (selectionMode === AnalyticalTableSelectionMode.Single) { return null; } const checkBoxProps = getToggleAllRowsSelectedProps(); @@ -35,7 +35,7 @@ const Header = (instance) => { }; const Cell = ({ row, webComponentsReactProperties: { selectionMode } }) => { - if (selectionMode === AnalyticalTableSelectionMode.SingleSelect || row.isGrouped) { + if (selectionMode === AnalyticalTableSelectionMode.Single || row.isGrouped) { return null; } @@ -73,7 +73,7 @@ const headerProps = (props, { instance }) => { const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' }; if ( props.key === 'header___ui5wcr__internal_selection_column' && - selectionMode === AnalyticalTableSelectionMode.MultiSelect + selectionMode === AnalyticalTableSelectionMode.Multiple ) { const onClick = (e) => { toggleAllRowsSelected(!isAllRowsSelected); diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts b/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts index 08cbd5f9e5a..3ecaa7d0036 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts @@ -24,7 +24,7 @@ export const useSelectionChangeCallback = (hooks: ReactTableHooks) => { selectedRowIds }; - if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.MultiSelect) { + if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Multiple) { // when selecting a row on a filtered table, `preFilteredRowsById` has to be used, otherwise filtered out rows are undefined const tempRowsById = isFiltered ? preFilteredRowsById : rowsById; const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => { diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts index 45333853250..31b0893bc42 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts @@ -38,7 +38,7 @@ const getRowProps = (rowProps, { row, instance }) => { } // deselect other rows - if (selectionMode === AnalyticalTableSelectionMode.SingleSelect) { + if (selectionMode === AnalyticalTableSelectionMode.Single) { for (const selectedRow of selectedFlatRows) { if (selectedRow.id !== row.id) { toggleRowSelected(selectedRow.id, false); diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts index 08daab4a977..c72f46e3259 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts @@ -47,10 +47,9 @@ const getRowProps = (rowProps, { instance, row, userProps }) => { const { webComponentsReactProperties } = instance; const { classes, selectionBehavior, selectionMode, alternateRowColor, subRowsKey } = webComponentsReactProperties; let className = classes.tr; - const rowCanBeSelected = [ - AnalyticalTableSelectionMode.SingleSelect, - AnalyticalTableSelectionMode.MultiSelect - ].includes(selectionMode); + const rowCanBeSelected = [AnalyticalTableSelectionMode.Single, AnalyticalTableSelectionMode.Multiple].includes( + selectionMode + ); if ( row.isGrouped || (instance.manualGroupBy && diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx index a4783439fb6..2e8168d4e2b 100644 --- a/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx +++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useIndeterminateRowSelection.tsx @@ -67,7 +67,7 @@ const getIndeterminate = (rows, rowsById, state) => { }; /** - * A plugin hook that marks parent rows as indeterminate if a child row is selected in `MultiSelect` mode. + * A plugin hook that marks parent rows as indeterminate if a child row is selected in `Multiple` mode. * When using this hook, it is recommended to also select all sub-rows when selecting a row. (`reactTableOptions={{ selectSubRows: true }}`) * * __Note:__ The `indeterminate` state has a higher priority than the `selected` state. Therefore, a row can be selected and indeterminate at the same time. This can for example happen, if `selectSubRows: true` is set and a row with sub-rows is selected and then a sub-row is unselected. @@ -129,7 +129,7 @@ export const useIndeterminateRowSelection = (onIndeterminateChange?: onIndetermi useEffect(() => { if ( isTreeTable && - selectionMode === AnalyticalTableSelectionMode.MultiSelect && + selectionMode === AnalyticalTableSelectionMode.Multiple && selectionBehavior !== AnalyticalTableSelectionBehavior.RowOnly && Object.keys(selectedRowIds).length && Object.keys(rowsById).length !== Object.keys(selectedRowIds).length diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx index 6df51f7b06b..c689aeab0aa 100644 --- a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx +++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx @@ -20,7 +20,7 @@ const headerProps = ( ) => { if ( props.key === 'header___ui5wcr__internal_selection_column' && - selectionMode === AnalyticalTableSelectionMode.MultiSelect + selectionMode === AnalyticalTableSelectionMode.Multiple ) { const style = { ...props.style, cursor: 'auto' }; return [props, { onClick: undefined, onKeyDown: undefined, title: undefined, style }]; @@ -36,13 +36,10 @@ const columns = (columns) => { Cell: (instance) => { const { webComponentsReactProperties, row } = instance; if (row.disableSelect === true) { - if ( - row.isGrouped && - webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect - ) { + if (row.isGrouped && webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Single) { return null; } - if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.SingleSelect) { + if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Single) { return
; } return ( diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts index b22f516f223..8227e959f1b 100644 --- a/packages/main/src/components/AnalyticalTable/types/index.ts +++ b/packages/main/src/components/AnalyticalTable/types/index.ts @@ -508,8 +508,8 @@ export interface AnalyticalTablePropTypes extends Omit { * Defines the `SelectionMode` of the table. * * - __"None":__ The rows are not selectable. - * - __"SingleSelect":__ You can select only one row at once. Clicking on another row will unselect the previously selected row. - * - __"MultiSelect":__ You can select multiple rows. + * - __"Single":__ You can select only one row at once. Clicking on another row will unselect the previously selected row. + * - __"Multiple":__ You can select multiple rows. * * @default `"None"` */ diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx index e2488b52a3d..9288e734216 100644 --- a/packages/main/src/components/MessageBox/index.tsx +++ b/packages/main/src/components/MessageBox/index.tsx @@ -56,7 +56,7 @@ export interface MessageBoxPropTypes /** * Defines the content of the `MessageBox`. * - * **Note:** Although this prop accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design and a11y capabilities. + * **Note:** Although this prop accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design and accessibility capabilities. */ children: ReactNode | ReactNode[]; /** diff --git a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx index 185fc18893e..d5e2c0be211 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx @@ -44,7 +44,7 @@ const meta = { footer: { control: { disable: true } }, children: { control: { disable: true } }, placeholder: { control: { disable: true } }, - a11yConfig: { table: { category: 'A11y props' } } + accessibilityAttributes: { table: { category: 'Accessibility props' } } }, args: { mode: ObjectPageMode.Default, diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index ff9fec55e72..62f6b5e76a9 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -147,9 +147,9 @@ export interface ObjectPagePropTypes extends Omit { */ headerContentPinnable?: boolean; /** - * Defines internally used a11y properties. + * Defines internally used accessibility properties/attributes. */ - a11yConfig?: { + accessibilityAttributes?: { objectPageTopHeader?: { role?: string; ariaRoledescription?: string; @@ -208,7 +208,7 @@ const ObjectPage = forwardRef((props, ref) showTitleInHeaderContent, headerContent, headerContentPinnable, - a11yConfig, + accessibilityAttributes, placeholder, onSelectedSectionChange, onToggleHeaderContent, @@ -829,9 +829,9 @@ const ObjectPage = forwardRef((props, ref) onMouseLeave={onHoverToggleButton} data-component-name="ObjectPageTopHeader" ref={topHeaderRef} - role={a11yConfig?.objectPageTopHeader?.role} + role={accessibilityAttributes?.objectPageTopHeader?.role} data-not-clickable={titleHeaderNotClickable} - aria-roledescription={a11yConfig?.objectPageTopHeader?.ariaRoledescription ?? 'Object Page header'} + aria-roledescription={accessibilityAttributes?.objectPageTopHeader?.ariaRoledescription ?? 'Object Page header'} className={classNames.header} onClick={onTitleClick} style={{ @@ -869,7 +869,7 @@ const ObjectPage = forwardRef((props, ref) headerContentPinnable={headerContentPinnable} showHideHeaderButton={showHideHeaderButton} headerPinned={headerPinned} - a11yConfig={a11yConfig} + accessibilityAttributes={accessibilityAttributes} onToggleHeaderContentVisibility={onToggleHeaderContentVisibility} setHeaderPinned={setHeaderPinned} onHoverToggleButton={onHoverToggleButton} diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx index c87657d2e40..b19326fdd6e 100644 --- a/packages/main/src/components/ObjectPageAnchorBar/index.tsx +++ b/packages/main/src/components/ObjectPageAnchorBar/index.tsx @@ -53,9 +53,9 @@ interface ObjectPageAnchorBarPropTypes extends CommonProps { */ onHoverToggleButton?: (e: any) => void; /** - * Defines internally used a11y properties. + * Defines internally used accessibility properties/attributes. */ - a11yConfig?: { + accessibilityAttributes?: { objectPageAnchorBar?: { role?: string; }; @@ -76,7 +76,7 @@ const ObjectPageAnchorBar = forwardRef diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx index 939696c53e0..1f72f5ae0bf 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx @@ -224,7 +224,7 @@ describe('ObjectStatus', () => { }); }); - it('active', () => { + it('interactive', () => { const click = cy.spy().as('clickSpy'); cy.mount( @@ -238,7 +238,7 @@ describe('ObjectStatus', () => { cy.findByText('Object Status').should('exist').and('not.be.visible'); cy.mount( - + Content ); diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx index d819860d19f..c3dd95eadd6 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx @@ -115,45 +115,45 @@ export const InvertedObjectStatus: Story = { IndicationColor.Indication08 - + ValueState.None - + ValueState.Positive - + ValueState.Critical - + ValueState.Negative - + ValueState.Information - + IndicationColor.Indication01 - + IndicationColor.Indication02 - + IndicationColor.Indication03 - + IndicationColor.Indication04 - + IndicationColor.Indication05 - + IndicationColor.Indication06 - + IndicationColor.Indication07 - + IndicationColor.Indication08
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index b177e914b10..88428c1b8b9 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -35,7 +35,7 @@ export interface ObjectStatusPropTypes extends CommonProps { * * @since 0.16.6 */ - active?: boolean; + interactive?: boolean; /** * Defines the icon in front of the `ObjectStatus` text. @@ -96,9 +96,9 @@ export interface ObjectStatusPropTypes extends CommonProps { stateAnnouncementText?: string; /** - * Fires when the user clicks/taps on active text. + * Fires when the user clicks/taps on an interactive text. * - * __Note:__ This prop has no effect if `active` is not set to `true`. + * __Note:__ This prop has no effect if `interactive` is not set to `true`. * * @since 0.16.6 */ @@ -164,7 +164,7 @@ const ObjectStatus = forwardRef - {active ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)} + {interactive ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)} {iconToRender && ( diff --git a/packages/main/src/enums/AnalyticalTableSelectionMode.ts b/packages/main/src/enums/AnalyticalTableSelectionMode.ts index 8ac70c6b0d6..99a1e6cf3ba 100644 --- a/packages/main/src/enums/AnalyticalTableSelectionMode.ts +++ b/packages/main/src/enums/AnalyticalTableSelectionMode.ts @@ -9,9 +9,9 @@ export enum AnalyticalTableSelectionMode { /** * Only a single row is selectable. Clicking on another row will unselect the previously selected row. */ - SingleSelect = 'SingleSelect', + Single = 'Single', /** * Multiple rows are selectable. */ - MultiSelect = 'MultiSelect' + Multiple = 'Multiple' }