diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 6f3e5d445d8..ff09b30ed5a 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -295,4 +295,12 @@ function MyComponent() {
}
```
+## Enum Changes
+
+For a 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`
+
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index 69c8a07e039..ba330927254 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -593,6 +593,11 @@
"WizardContentLayout": "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js",
"WrappingType": "@ui5/webcomponents/dist/types/WrappingType.js"
},
+ "renamedEnums": {
+ "MessageBoxActions": "MessageBoxAction",
+ "MessageBoxTypes": "MessageBoxType",
+ "Themes": "Theme"
+ },
"enumProperties": {
"BusyIndicatorSize": {
"Small": "S",
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/main.cts b/packages/cli/src/scripts/codemod/transforms/v2/main.cts
index 72edd21b8a1..16d1f7bba8a 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/main.cts
+++ b/packages/cli/src/scripts/codemod/transforms/v2/main.cts
@@ -396,6 +396,21 @@ export default function transform(file: FileInfo, api: API, options?: Options):
}
});
+ Object.entries(config.renamedEnums).forEach(([enumName, newName]) => {
+ const currentImportSpecifier = root.find(j.ImportSpecifier, { local: { name: enumName } });
+ if (currentImportSpecifier.paths().length) {
+ const importedFrom = currentImportSpecifier.get().parentPath.parentPath.value.source.value;
+
+ if (importedFrom === '@ui5/webcomponents-react') {
+ currentImportSpecifier.replaceWith(j.importSpecifier(j.identifier(newName), j.identifier(newName)));
+
+ const currentIdentifier = root.find(j.Identifier, { name: enumName });
+ currentIdentifier.replaceWith(j.identifier(newName));
+ isDirty = true;
+ }
+ }
+ });
+
Object.entries>(config.enumProperties).forEach(([changedEnum, changedValues]) => {
Object.entries(changedValues ?? {}).forEach(([oldValue, newValue]) => {
const enumValueToReplace = root
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
index 7024ad02230..c97f9749d6b 100644
--- a/packages/main/src/components/FilterBar/FilterDialog.tsx
+++ b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -12,8 +12,8 @@ import { createPortal } from 'react-dom';
import {
FlexBoxDirection,
FlexBoxJustifyContent,
- MessageBoxActions,
- MessageBoxTypes,
+ MessageBoxAction,
+ MessageBoxType,
ToolbarStyle
} from '../../enums/index.js';
import {
@@ -614,8 +614,8 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
createPortal(
diff --git a/packages/main/src/components/MessageBox/MessageBox.cy.tsx b/packages/main/src/components/MessageBox/MessageBox.cy.tsx
index a7476d2d3b0..3a6be954846 100644
--- a/packages/main/src/components/MessageBox/MessageBox.cy.tsx
+++ b/packages/main/src/components/MessageBox/MessageBox.cy.tsx
@@ -1,15 +1,15 @@
import addIcon from '@ui5/webcomponents-icons/dist/add.js';
-import { Button, Icon, MessageBoxActions, MessageBoxTypes } from '../..';
+import { Button, Icon, MessageBoxAction, MessageBoxType } from '../..';
import { MessageBox } from './index.js';
describe('MessageBox', () => {
[
- [MessageBoxTypes.Confirm, MessageBoxActions.OK],
- [MessageBoxTypes.Success, MessageBoxActions.OK],
- [MessageBoxTypes.Warning, MessageBoxActions.OK],
- [MessageBoxTypes.Error, MessageBoxActions.Close],
- [MessageBoxTypes.Information, MessageBoxActions.OK]
- ].forEach(([type, buttonText]: [MessageBoxTypes, MessageBoxActions]) => {
+ [MessageBoxType.Confirm, MessageBoxAction.OK],
+ [MessageBoxType.Success, MessageBoxAction.OK],
+ [MessageBoxType.Warning, MessageBoxAction.OK],
+ [MessageBoxType.Error, MessageBoxAction.Close],
+ [MessageBoxType.Information, MessageBoxAction.OK]
+ ].forEach(([type, buttonText]: [MessageBoxType, MessageBoxAction]) => {
it(type, () => {
const callback = cy.spy();
cy.mount(
@@ -37,12 +37,12 @@ describe('MessageBox', () => {
open
onClose={close}
actions={[
- MessageBoxActions.Cancel,
+ MessageBoxAction.Cancel,
,
'Custom Text Action',
- MessageBoxActions.OK
+ MessageBoxAction.OK
]}
>
My Message Box Content
@@ -70,7 +70,7 @@ describe('MessageBox', () => {
it('Confirm - Cancel', () => {
const callback = cy.spy().as('onMessageBoxClose');
cy.mount(
-
+
Confirm
);
@@ -82,7 +82,7 @@ describe('MessageBox', () => {
'have.been.calledWith',
Cypress.sinon.match({
detail: {
- action: MessageBoxActions.Cancel
+ action: MessageBoxAction.Cancel
}
})
);
@@ -91,7 +91,7 @@ describe('MessageBox', () => {
it('Show', () => {
const callback = cy.spy().as('onMessageBoxClose');
cy.mount(
-
+
Custom
);
@@ -103,7 +103,7 @@ describe('MessageBox', () => {
'have.been.calledWith',
Cypress.sinon.match({
detail: {
- action: MessageBoxActions.Yes
+ action: MessageBoxAction.Yes
}
})
);
@@ -115,7 +115,7 @@ describe('MessageBox', () => {
'have.been.calledWith',
Cypress.sinon.match({
detail: {
- action: MessageBoxActions.No
+ action: MessageBoxAction.No
}
})
);
@@ -125,7 +125,7 @@ describe('MessageBox', () => {
const callback = cy.spy().as('onMessageBoxClose');
cy.mount(
{
'have.been.calledWith',
Cypress.sinon.match({
detail: {
- action: MessageBoxActions.OK
+ action: MessageBoxAction.OK
}
})
);
@@ -164,22 +164,22 @@ describe('MessageBox', () => {
cy.mount(
My Message Box Content
);
- cy.findByText(MessageBoxActions.OK).should('be.visible').click();
+ cy.findByText(MessageBoxAction.OK).should('be.visible').click();
cy.get('@onMessageBoxClose')
.should('have.been.calledOnce')
.should(
'have.been.calledWith',
Cypress.sinon.match({
detail: {
- action: MessageBoxActions.OK
+ action: MessageBoxAction.OK
}
})
);
@@ -209,7 +209,7 @@ describe('MessageBox', () => {
it('initial focus', () => {
cy.mount(
-
+
Content
);
diff --git a/packages/main/src/components/MessageBox/MessageBox.mdx b/packages/main/src/components/MessageBox/MessageBox.mdx
index 187a4bf8809..10288a57fba 100644
--- a/packages/main/src/components/MessageBox/MessageBox.mdx
+++ b/packages/main/src/components/MessageBox/MessageBox.mdx
@@ -53,7 +53,7 @@ const MessageBoxComponent = () => {
setOpen(true);
};
const handleClose = (event) => {
- if (event.detail.action === MessageBoxActions.OK) {
+ if (event.detail.action === MessageBoxAction.OK) {
// do something on "Ok" button click
} else if (event.detail.action === 'Custom Action') {
// do something on "Custom Action" click
@@ -68,7 +68,7 @@ const MessageBoxComponent = () => {
Content
diff --git a/packages/main/src/components/MessageBox/MessageBox.stories.tsx b/packages/main/src/components/MessageBox/MessageBox.stories.tsx
index edac1956b10..f31c8fd0de0 100644
--- a/packages/main/src/components/MessageBox/MessageBox.stories.tsx
+++ b/packages/main/src/components/MessageBox/MessageBox.stories.tsx
@@ -2,8 +2,8 @@ import { isChromatic } from '@sb/utils';
import type { Meta, StoryObj } from '@storybook/react';
import { forwardRef, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
-import { MessageBoxActions } from '../../enums/MessageBoxActions';
-import { MessageBoxTypes } from '../../enums/MessageBoxTypes';
+import { MessageBoxAction } from '../../enums/MessageBoxAction';
+import { MessageBoxType } from '../../enums/MessageBoxType';
import type { DialogDomRef } from '../../webComponents';
import { Button } from '../../webComponents/Button/index';
import type { MessageBoxPropTypes } from './index.js';
@@ -31,7 +31,7 @@ const meta = {
},
args: {
open: false,
- type: MessageBoxTypes.Confirm,
+ type: MessageBoxType.Confirm,
children: 'Press "Escape" to close the MessageBox.'
},
parameters: {
@@ -68,9 +68,9 @@ export const Default: Story = {
export const WithCustomActions: Story = {
args: {
actions: [
- MessageBoxActions.OK,
+ MessageBoxAction.OK,
'Custom Action',
- MessageBoxActions.Cancel,
+ MessageBoxAction.Cancel,
diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx
index 29b7eb2151d..0b336daded0 100644
--- a/packages/main/src/components/MessageBox/index.tsx
+++ b/packages/main/src/components/MessageBox/index.tsx
@@ -10,7 +10,7 @@ import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet }
import { clsx } from 'clsx';
import type { ReactElement, ReactNode } from 'react';
import { cloneElement, forwardRef, isValidElement } from 'react';
-import { MessageBoxActions, MessageBoxTypes } from '../../enums/index.js';
+import { MessageBoxAction, MessageBoxType } from '../../enums/index.js';
import {
ABORT,
CANCEL,
@@ -34,7 +34,7 @@ import { Text } from '../Text/index.js';
import { classNames, styleData } from './MessageBox.module.css.js';
// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-type MessageBoxAction = MessageBoxActions | keyof typeof MessageBoxActions | string;
+type MessageBoxActionType = MessageBoxAction | keyof typeof MessageBoxAction | string;
export interface MessageBoxPropTypes
extends Omit<
@@ -66,7 +66,7 @@ export interface MessageBoxPropTypes
*
* __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use `MessageBoxAction`s (text) or the `Button` component in order to preserve the intended.
*/
- actions?: (MessageBoxAction | ReactNode)[];
+ actions?: (MessageBoxActionType | ReactNode)[];
/**
* Specifies which action of the created dialog will be emphasized.
*
@@ -74,7 +74,7 @@ export interface MessageBoxPropTypes
*
* @default `"OK"`
*/
- emphasizedAction?: MessageBoxAction;
+ emphasizedAction?: MessageBoxActionType;
/**
* A custom icon. If not present, it will be derived from the `MessageBox` type.
*/
@@ -84,36 +84,36 @@ export interface MessageBoxPropTypes
*
* @default `"Confirm"`
*/
- type?: MessageBoxTypes | keyof typeof MessageBoxTypes;
+ type?: MessageBoxType | keyof typeof MessageBoxType;
/**
* Defines the ID of the HTML Element or the `MessageBoxAction`, which will get the initial focus.
*/
- initialFocus?: MessageBoxAction;
+ initialFocus?: MessageBoxActionType;
/**
* Callback to be executed when the `MessageBox` is closed (either by pressing on one of the `actions` or by pressing the `ESC` key). `event.detail.action` contains the pressed action button.
*/
- onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void;
+ onClose?: (event: CustomEvent<{ action: MessageBoxActionType }>) => void;
}
const getIcon = (icon, type, classes) => {
if (isValidElement(icon)) return icon;
switch (type) {
- case MessageBoxTypes.Confirm:
+ case MessageBoxType.Confirm:
return ;
default:
return null;
}
};
-const convertMessageBoxTypeToState = (type: MessageBoxTypes) => {
+const convertMessageBoxTypeToState = (type: MessageBoxType) => {
switch (type) {
- case MessageBoxTypes.Information:
+ case MessageBoxType.Information:
return ValueState.Information;
- case MessageBoxTypes.Success:
+ case MessageBoxType.Success:
return ValueState.Positive;
- case MessageBoxTypes.Warning:
+ case MessageBoxType.Warning:
return ValueState.Critical;
- case MessageBoxTypes.Error:
+ case MessageBoxType.Error:
return ValueState.Negative;
default:
return ValueState.None;
@@ -124,13 +124,13 @@ const getActions = (actions, type): (string | ReactElement)[] =
if (actions && actions.length > 0) {
return actions;
}
- if (type === MessageBoxTypes.Confirm) {
- return [MessageBoxActions.OK, MessageBoxActions.Cancel];
+ if (type === MessageBoxType.Confirm) {
+ return [MessageBoxAction.OK, MessageBoxAction.Cancel];
}
- if (type === MessageBoxTypes.Error) {
- return [MessageBoxActions.Close];
+ if (type === MessageBoxType.Error) {
+ return [MessageBoxAction.Close];
}
- return [MessageBoxActions.OK];
+ return [MessageBoxAction.OK];
};
/**
@@ -140,13 +140,13 @@ const getActions = (actions, type): (string | ReactElement)[] =
const MessageBox = forwardRef((props, ref) => {
const {
open,
- type = MessageBoxTypes.Confirm,
+ type = MessageBoxType.Confirm,
children,
className,
titleText,
icon,
actions = [],
- emphasizedAction = MessageBoxActions.OK,
+ emphasizedAction = MessageBoxAction.OK,
onClose,
initialFocus,
...rest
@@ -157,15 +157,15 @@ const MessageBox = forwardRef((props, ref) =>
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
const actionTranslations = {
- [MessageBoxActions.Abort]: i18nBundle.getText(ABORT),
- [MessageBoxActions.Cancel]: i18nBundle.getText(CANCEL),
- [MessageBoxActions.Close]: i18nBundle.getText(CLOSE),
- [MessageBoxActions.Delete]: i18nBundle.getText(DELETE),
- [MessageBoxActions.Ignore]: i18nBundle.getText(IGNORE),
- [MessageBoxActions.No]: i18nBundle.getText(NO),
- [MessageBoxActions.OK]: i18nBundle.getText(OK),
- [MessageBoxActions.Retry]: i18nBundle.getText(RETRY),
- [MessageBoxActions.Yes]: i18nBundle.getText(YES)
+ [MessageBoxAction.Abort]: i18nBundle.getText(ABORT),
+ [MessageBoxAction.Cancel]: i18nBundle.getText(CANCEL),
+ [MessageBoxAction.Close]: i18nBundle.getText(CLOSE),
+ [MessageBoxAction.Delete]: i18nBundle.getText(DELETE),
+ [MessageBoxAction.Ignore]: i18nBundle.getText(IGNORE),
+ [MessageBoxAction.No]: i18nBundle.getText(NO),
+ [MessageBoxAction.OK]: i18nBundle.getText(OK),
+ [MessageBoxAction.Retry]: i18nBundle.getText(RETRY),
+ [MessageBoxAction.Yes]: i18nBundle.getText(YES)
};
const titleToRender = () => {
@@ -173,15 +173,15 @@ const MessageBox = forwardRef((props, ref) =>
return titleText;
}
switch (type) {
- case MessageBoxTypes.Confirm:
+ case MessageBoxType.Confirm:
return i18nBundle.getText(CONFIRMATION);
- case MessageBoxTypes.Error:
+ case MessageBoxType.Error:
return i18nBundle.getText(ERROR);
- case MessageBoxTypes.Information:
+ case MessageBoxType.Information:
return i18nBundle.getText(INFORMATION);
- case MessageBoxTypes.Success:
+ case MessageBoxType.Success:
return i18nBundle.getText(SUCCESS);
- case MessageBoxTypes.Warning:
+ case MessageBoxType.Warning:
return i18nBundle.getText(WARNING);
default:
return null;
@@ -221,7 +221,7 @@ const MessageBox = forwardRef((props, ref) =>
accessibleRole={PopupAccessibleRole.AlertDialog}
{...restWithoutOmitted}
headerText={titleToRender()}
- state={convertMessageBoxTypeToState(type as MessageBoxTypes)}
+ state={convertMessageBoxTypeToState(type as MessageBoxType)}
initialFocus={getInitialFocus()}
data-type={type}
>
diff --git a/packages/main/src/components/Modals/Modals.stories.tsx b/packages/main/src/components/Modals/Modals.stories.tsx
index b5fe846d49a..1e587894078 100644
--- a/packages/main/src/components/Modals/Modals.stories.tsx
+++ b/packages/main/src/components/Modals/Modals.stories.tsx
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
-import { MessageBoxTypes } from '../../enums/index.js';
+import { MessageBoxType } from '../../enums/index.js';
import { Bar, Button, MenuItem } from '../../webComponents/index.js';
import { Modals } from './index.js';
@@ -101,7 +101,7 @@ export const MessageBox = {