From 0f4f3e51b5f0245864cf1e865b7a04bfe88b2fd2 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 13:33:47 +0200
Subject: [PATCH 01/13] refactor: harmonize prop names
---
.../codemod/transforms/v2/codemodConfig.json | 4 ++
.../AnalyticalTable/AnalyticalTable.cy.tsx | 46 +++++++++----------
.../AnalyticalTable/AnalyticalTable.mdx | 2 +-
.../AnalyticalTable.stories.tsx | 4 +-
.../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 +-
.../src/enums/AnalyticalTableSelectionMode.ts | 4 +-
16 files changed, 53 insertions(+), 55 deletions(-)
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index e54b5d27f62..6cf48b6810f 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -618,6 +618,10 @@
"Themes": "Theme"
},
"enumProperties": {
+ "AnalyticalTableSelectionMode": {
+ "SingleSelect": "Single",
+ "MultiSelect": "Multiple"
+ },
"BusyIndicatorSize": {
"Small": "S",
"Medium": "M",
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"
/>
<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
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..0948dfb4ef4 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,
@@ -360,7 +360,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`}</ToggleButton>
<AnalyticalTable
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
data={dataTree}
columns={args.columns}
isTreeTable
@@ -143,7 +143,7 @@ export const PluginManualRowSelect: Story = {
<br />
<br />
<AnalyticalTable
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
data={data}
columns={args.columns}
tableHooks={[AnalyticalTableHooks.useManualRowSelect('isSelected')]}
diff --git a/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx b/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
index 844c4d8aa2c..1641e2e39e8 100644
--- a/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx
@@ -35,7 +35,7 @@ const WithFunctionParameter = () => {
<AnalyticalTable
data={data}
columns={columns}
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
tableHooks={[AnalyticalTableHooks.useRowDisableSelection(disableRowFunc)]}
/>
);
@@ -55,7 +55,7 @@ const data = [
<AnalyticalTable
data={data}
columns={columns}
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
tableHooks={[AnalyticalTableHooks.useRowDisableSelection('disableSelection')]}
/>
);
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
<AnalyticalTable
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
data={data}
columns={columns}
isTreeTable
diff --git a/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx b/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
index 1202a3df7fe..cce582eaeb9 100644
--- a/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
+++ b/packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx
@@ -18,7 +18,7 @@ If this key is found on the original data row, and it is `true`, this row will b
```jsx
<AnalyticalTable
- selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+ selectionMode={AnalyticalTableSelectionMode.Multiple}
data={data}
columns={columns}
// you could also omit the `'isSelected'`, as this is the default value
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
index 278fb9b9874..2637c88af74 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
+++ b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
@@ -19,7 +19,7 @@ const Header = (instance) => {
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 <div onClick={undefined} data-name="internal_selection_column" />;
}
return (
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 69520269df2..400b5963083 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<CommonProps, 'title'> {
* 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/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'
}
From 6e037b4e898d9042eb6f1ec6887dec72bd118175 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 13:39:54 +0200
Subject: [PATCH 02/13] Update MigrationGuide.mdx
---
docs/MigrationGuide.mdx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 351fe314510..882f1c6880f 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -479,13 +479,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.
+The 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.
@@ -501,6 +507,7 @@ const columns = [{ ...otherProperties, canReorder: false }];
scaleWidthMode={TableScaleWidthMode.Grow}
selectionBehavior={TableSelectionBehavior.Row}
selectionMode={TableSelectionMode.MultiSelect}
+ // selectionMode={TableSelectionMode.SingleSelect}
visibleRowCountMode={TableVisibleRowCountMode.Interactive}
/>;
@@ -513,7 +520,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}
/>;
```
From ba743c68c261ac0ca0b05b87c4dd66cd82242b51 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 13:52:02 +0200
Subject: [PATCH 03/13] ActionSheet: replace `a11yConfig` with
`accessibilityAttributes`
---
docs/MigrationGuide.mdx | 7 +++----
.../src/scripts/codemod/transforms/v2/codemodConfig.json | 1 +
packages/main/src/components/ActionSheet/index.tsx | 7 ++++---
3 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 882f1c6880f..e3f95fcdd30 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -443,8 +443,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 +451,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react';
function MyComponent() {
return (
- <ActionSheet showCancelButton={false}>
+ <ActionSheet showCancelButton={false} accessibilityAttributes={{ a11yConfig: { role: 'menu' } }}>
<Button>Action 1</Button>
</ActionSheet>
);
@@ -463,7 +462,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react';
function MyComponent() {
return (
- <ActionSheet hideCancelButton>
+ <ActionSheet hideCancelButton accessibilityAttributes={{ actionSheetMobileContent: { role: 'menu' } }}>
<Button>Action 1</Button>
</ActionSheet>
);
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index 6cf48b6810f..763962ef023 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",
diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
index f20800f0bd3..5c0fc8c8652 100644
--- a/packages/main/src/components/ActionSheet/index.tsx
+++ b/packages/main/src/components/ActionSheet/index.tsx
@@ -46,7 +46,7 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
/**
* Defines internally used a11y properties.
*/
- 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}
>
From 6ec5184f822f3e51f4b5d5003e9fd2ce5e7595a7 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:09:47 +0200
Subject: [PATCH 04/13] ObjectPage: replace `a11yConfig` with
`accessibilityAttributes`
---
docs/MigrationGuide.mdx | 3 ++-
.../scripts/codemod/transforms/v2/codemodConfig.json | 5 +++++
packages/main/src/components/ActionSheet/index.tsx | 2 +-
.../src/components/ObjectPage/ObjectPage.stories.tsx | 2 +-
packages/main/src/components/ObjectPage/index.tsx | 12 ++++++------
.../src/components/ObjectPageAnchorBar/index.tsx | 8 ++++----
6 files changed, 19 insertions(+), 13 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index e3f95fcdd30..c8bf044876e 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"`
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index 763962ef023..c5005cd1959 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -287,6 +287,11 @@
},
"removedProps": ["selected"]
},
+ "ObjectPage": {
+ "renamedEnums": {
+ "a11yConfig": "accessibilityAttributes"
+ }
+ },
"ObjectStatus": {
"renamedEnums": {
"state": "ValueState"
diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
index 5c0fc8c8652..e6410269eca 100644
--- a/packages/main/src/components/ActionSheet/index.tsx
+++ b/packages/main/src/components/ActionSheet/index.tsx
@@ -44,7 +44,7 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
*/
hideCancelButton?: boolean;
/**
- * Defines internally used a11y properties.
+ * Defines internally used a11y properties/attributes.
*/
accessibilityAttributes?: {
actionSheetMobileContent?: {
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
index 185fc18893e..f13b35ebd11 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: 'A11y 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..94039f3b2dc 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<CommonProps, 'placeholder'> {
*/
headerContentPinnable?: boolean;
/**
- * Defines internally used a11y properties.
+ * Defines internally used a11y properties/attributes.
*/
- a11yConfig?: {
+ accessibilityAttributes?: {
objectPageTopHeader?: {
role?: string;
ariaRoledescription?: string;
@@ -208,7 +208,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
showTitleInHeaderContent,
headerContent,
headerContentPinnable,
- a11yConfig,
+ accessibilityAttributes,
placeholder,
onSelectedSectionChange,
onToggleHeaderContent,
@@ -829,9 +829,9 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((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<HTMLDivElement, ObjectPagePropTypes>((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..696bdc3051a 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 a11y properties/attributes.
*/
- a11yConfig?: {
+ accessibilityAttributes?: {
objectPageAnchorBar?: {
role?: string;
};
@@ -76,7 +76,7 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
headerContentPinnable,
headerPinned,
style,
- a11yConfig,
+ accessibilityAttributes,
setHeaderPinned,
onPinnedStateChange,
onToggleHeaderContentVisibility,
@@ -123,7 +123,7 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
<section
data-component-name="ObjectPageAnchorBar"
style={style}
- role={a11yConfig?.objectPageAnchorBar?.role}
+ role={accessibilityAttributes?.objectPageAnchorBar?.role}
className={showHideHeaderButton || headerContentPinnable ? classNames.container : null}
ref={ref}
>
From 7889a7c7543ee45d7044c231cb8d753f7c2dc90d Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:28:28 +0200
Subject: [PATCH 05/13] Update ActionSheet.stories.tsx
---
.../main/src/components/ActionSheet/ActionSheet.stories.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx
index 7fb92c27e1d..0ec0631307b 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: 'A11y props' } }
},
args: {
horizontalAlign: PopoverHorizontalAlign.Center,
From ea172e99fda4b3345c5b176a29085498dc46977c Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:33:06 +0200
Subject: [PATCH 06/13] ObjectStatus: replace `active` with `interactive`
---
.../ObjectStatus/ObjectStatus.cy.tsx | 4 +--
.../ObjectStatus/ObjectStatus.stories.tsx | 28 +++++++++----------
.../src/components/ObjectStatus/index.tsx | 18 ++++++------
3 files changed, 25 insertions(+), 25 deletions(-)
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(
<ObjectStatus onClick={click} data-testid="os">
@@ -238,7 +238,7 @@ describe('ObjectStatus', () => {
cy.findByText('Object Status').should('exist').and('not.be.visible');
cy.mount(
- <ObjectStatus onClick={click} active>
+ <ObjectStatus onClick={click} interactive>
Content
</ObjectStatus>
);
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
</ObjectStatus>
<Label style={{ gridColumn: 'span 5' }}>
- <code>active</code> mode:
+ <code>interactive</code> mode:
</Label>
- <ObjectStatus active inverted state={ValueState.None}>
+ <ObjectStatus interactive inverted state={ValueState.None}>
ValueState.None
</ObjectStatus>
- <ObjectStatus active inverted state={ValueState.Positive}>
+ <ObjectStatus interactive inverted state={ValueState.Positive}>
ValueState.Positive
</ObjectStatus>
- <ObjectStatus active inverted state={ValueState.Critical}>
+ <ObjectStatus interactive inverted state={ValueState.Critical}>
ValueState.Critical
</ObjectStatus>
- <ObjectStatus active inverted state={ValueState.Negative}>
+ <ObjectStatus interactive inverted state={ValueState.Negative}>
ValueState.Negative
</ObjectStatus>
- <ObjectStatus active inverted state={ValueState.Information}>
+ <ObjectStatus interactive inverted state={ValueState.Information}>
ValueState.Information
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication01}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication01}>
IndicationColor.Indication01
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication02}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication02}>
IndicationColor.Indication02
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication03}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication03}>
IndicationColor.Indication03
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication04}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication04}>
IndicationColor.Indication04
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication05}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication05}>
IndicationColor.Indication05
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication06}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication06}>
IndicationColor.Indication06
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication07}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication07}>
IndicationColor.Indication07
</ObjectStatus>
- <ObjectStatus active inverted state={IndicationColor.Indication08}>
+ <ObjectStatus interactive inverted state={IndicationColor.Indication08}>
IndicationColor.Indication08
</ObjectStatus>
</div>
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
index b177e914b10..2a6fb56a323 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<HTMLDivElement | HTMLButtonElement, ObjectStatus
icon,
className,
style,
- active,
+ interactive,
inverted,
onClick,
emptyIndicator,
@@ -207,13 +207,13 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
classNames.normalizeCSS,
classNames.objectStatus,
classNames[`${state as string}`.toLowerCase()],
- active && classNames.active,
+ interactive && classNames.active,
inverted && !showEmptyIndicator && classNames.inverted,
large && classNames.large,
className
);
- const TagName = active ? 'button' : 'div';
+ const TagName = interactive ? 'button' : 'div';
return (
<TagName
@@ -223,13 +223,13 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
style={style}
// @ts-expect-error: onClick is only registered if the event target is a HTMLButtonElement
onClick={active ? onClick : undefined}
- tabIndex={active ? 0 : undefined}
+ tabIndex={interactive ? 0 : undefined}
data-icon-only={!children}
- role={active ? 'button' : 'group'}
+ role={interactive ? 'button' : 'group'}
{...rest}
>
<span className={classNames.pseudoInvisibleText} data-component-name="ObjectStatusInvisibleDescriptionContainer">
- {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)}
</span>
{iconToRender && (
<span className={classNames.icon} data-icon-only={!children} data-component-name="ObjectStatusIconContainer">
From 8af9f05a69e7866f3d99dee4d4c1afc24ce3fef1 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:34:25 +0200
Subject: [PATCH 07/13] Update MigrationGuide.mdx
---
docs/MigrationGuide.mdx | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index c8bf044876e..0ecc96f40c5 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -616,10 +616,14 @@ The prop `titleText` is now required.
## 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`
- `Themes` has been renamed to `Theme`
+### ObjectStatus
+
+For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
+
<Footer />
From 707a099d9c8f419f4e0491c8155421d93cc0ba1b Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:35:10 +0200
Subject: [PATCH 08/13] Update MigrationGuide.mdx
---
docs/MigrationGuide.mdx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 0ecc96f40c5..040a7258a73 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -614,6 +614,10 @@ 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 better alignment with the UI5 Web Components, the following enums have been renamed:
@@ -622,8 +626,4 @@ For better alignment with the UI5 Web Components, the following enums have been
- `MessageBoxTypes` has been renamed to `MessageBoxType`
- `Themes` has been renamed to `Theme`
-### ObjectStatus
-
-For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
-
<Footer />
From 7373855eb8cd705786ca8ec841f31b8c20461c47 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:36:04 +0200
Subject: [PATCH 09/13] Update codemodConfig.json
---
.../cli/src/scripts/codemod/transforms/v2/codemodConfig.json | 3 +++
1 file changed, 3 insertions(+)
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index c5005cd1959..4630ff9c50d 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -293,6 +293,9 @@
}
},
"ObjectStatus": {
+ "changedProps": {
+ "active": "interactive"
+ },
"renamedEnums": {
"state": "ValueState"
}
From e2cb699a71bb35cb523dcc430a19e33d4ebf7492 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:40:35 +0200
Subject: [PATCH 10/13] typos
---
docs/MigrationGuide.mdx | 2 +-
.../cli/src/scripts/codemod/transforms/v2/codemodConfig.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 040a7258a73..2aadb4ff917 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -479,7 +479,7 @@ function MyComponent() {
**Renamed Enums:**
-The names of the following enums have changed:
+Names of the following enums have changed:
- `TableScaleWidthMode` is now `AnalyticalTableScaleWidthMode`
- `TableSelectionBehavior` is now `AnalyticalTableSelectionBehavior`
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index 4630ff9c50d..addfef7f77b 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -288,7 +288,7 @@
"removedProps": ["selected"]
},
"ObjectPage": {
- "renamedEnums": {
+ "changedProps": {
"a11yConfig": "accessibilityAttributes"
}
},
From dd0fea5c45855ecce57854a2c9b89204498048fa Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 14:50:50 +0200
Subject: [PATCH 11/13] Update index.tsx
---
packages/main/src/components/ObjectStatus/index.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
index 2a6fb56a323..88428c1b8b9 100644
--- a/packages/main/src/components/ObjectStatus/index.tsx
+++ b/packages/main/src/components/ObjectStatus/index.tsx
@@ -217,12 +217,12 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
return (
<TagName
- // @ts-expect-error: both refs are allowed (attributes, etc. of HTMLButtonElement should only be used if `active` is `true`)
+ // @ts-expect-error: both refs are allowed (attributes, etc. of HTMLButtonElement should only be used if `interactive` is `true`)
ref={ref}
className={objStatusClasses}
style={style}
// @ts-expect-error: onClick is only registered if the event target is a HTMLButtonElement
- onClick={active ? onClick : undefined}
+ onClick={interactive ? onClick : undefined}
tabIndex={interactive ? 0 : undefined}
data-icon-only={!children}
role={interactive ? 'button' : 'group'}
From adc81c79fdde4878ce88a886882e292307f00868 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 15:57:36 +0200
Subject: [PATCH 12/13] cleanup: fix typos and oversights (review)
---
docs/MigrationGuide.mdx | 2 +-
.../src/scripts/codemod/transforms/v2/codemodConfig.json | 6 +++++-
.../main/src/components/ActionSheet/ActionSheet.stories.tsx | 2 +-
.../components/AnalyticalTable/AnalyticalTable.stories.tsx | 3 +--
.../main/src/components/ObjectPage/ObjectPage.stories.tsx | 2 +-
5 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index a7c8a1c441b..ba0aa1b1072 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -452,7 +452,7 @@ import { ActionSheet, Button } from '@ui5/webcomponents-react';
function MyComponent() {
return (
- <ActionSheet showCancelButton={false} accessibilityAttributes={{ a11yConfig: { role: 'menu' } }}>
+ <ActionSheet showCancelButton={false} a11yConfig={{ actionSheetMobileContent: { role: 'menu' } }}>
<Button>Action 1</Button>
</ActionSheet>
);
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index addfef7f77b..7d49db5296e 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -17,7 +17,11 @@
},
"removedProps": ["portalContainer"]
},
- "AnalyticalTable": {},
+ "AnalyticalTable": {
+ "renamedEnums": {
+ "selectionMode": "AnalyticalTableSelectionMode"
+ }
+ },
"Avatar": {},
"Badge": {
"newComponent": "Tag"
diff --git a/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/main/src/components/ActionSheet/ActionSheet.stories.tsx
index 0ec0631307b..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 }
},
- accessibilityAttributes: { table: { category: 'A11y props' } }
+ accessibilityAttributes: { table: { category: 'Accessibility props' } }
},
args: {
horizontalAlign: PopoverHorizontalAlign.Center,
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
index 0948dfb4ef4..549e84399b5 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -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<typeof AnalyticalTable>;
export default meta;
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx b/packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
index f13b35ebd11..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 } },
- accessibilityAttributes: { table: { category: 'A11y props' } }
+ accessibilityAttributes: { table: { category: 'Accessibility props' } }
},
args: {
mode: ObjectPageMode.Default,
From 90d9c0650cffc120ac24def97f42b8888cd6119d Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 8 Jul 2024 16:01:40 +0200
Subject: [PATCH 13/13] a11y -> accessibility
---
packages/main/src/components/ActionSheet/index.tsx | 2 +-
packages/main/src/components/MessageBox/index.tsx | 2 +-
packages/main/src/components/ObjectPage/index.tsx | 2 +-
packages/main/src/components/ObjectPageAnchorBar/index.tsx | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx
index e6410269eca..a1f6198a85b 100644
--- a/packages/main/src/components/ActionSheet/index.tsx
+++ b/packages/main/src/components/ActionSheet/index.tsx
@@ -44,7 +44,7 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
*/
hideCancelButton?: boolean;
/**
- * Defines internally used a11y properties/attributes.
+ * Defines internally used accessibility properties/attributes.
*/
accessibilityAttributes?: {
actionSheetMobileContent?: {
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/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 94039f3b2dc..62f6b5e76a9 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -147,7 +147,7 @@ export interface ObjectPagePropTypes extends Omit<CommonProps, 'placeholder'> {
*/
headerContentPinnable?: boolean;
/**
- * Defines internally used a11y properties/attributes.
+ * Defines internally used accessibility properties/attributes.
*/
accessibilityAttributes?: {
objectPageTopHeader?: {
diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx
index 696bdc3051a..b19326fdd6e 100644
--- a/packages/main/src/components/ObjectPageAnchorBar/index.tsx
+++ b/packages/main/src/components/ObjectPageAnchorBar/index.tsx
@@ -53,7 +53,7 @@ interface ObjectPageAnchorBarPropTypes extends CommonProps {
*/
onHoverToggleButton?: (e: any) => void;
/**
- * Defines internally used a11y properties/attributes.
+ * Defines internally used accessibility properties/attributes.
*/
accessibilityAttributes?: {
objectPageAnchorBar?: {