diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx index c3dd95eadd6..224145f0baa 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js'; import { Icon, IndicationColor, Label } from '../..'; @@ -55,11 +56,11 @@ export const WithDefaultIcons: Story = { }; export const WithCustomIcon: Story = { - args: { icon: } + args: { icon: } }; export const WithIconOnly: Story = { - args: { icon: , children: null } + args: { icon: , children: null, title: 'Cancel' } }; export const InvertedObjectStatus: Story = { diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index 74c16b6c132..ed081132e0b 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -6,6 +6,7 @@ import { VALUE_STATE_SUCCESS, VALUE_STATE_WARNING } from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js'; +import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import alertIcon from '@ui5/webcomponents-icons/dist/alert.js'; import errorIcon from '@ui5/webcomponents-icons/dist/error.js'; @@ -40,7 +41,7 @@ export interface ObjectStatusPropTypes extends CommonProps { /** * Defines the icon in front of the `ObjectStatus` text. * - * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use `Icon` in order to preserve the intended design. + * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use the `Icon` component with `mode="Decorative"` in order to preserve the intended design. */ icon?: ReactNode; @@ -117,7 +118,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe switch (state) { case ValueState.Negative: if (renderDefaultIcon) { - icon = ; + icon = ; } if (!invisibleText) { invisibleText = errorStateText; @@ -125,7 +126,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe break; case ValueState.Positive: if (renderDefaultIcon) { - icon = ; + icon = ; } if (!invisibleText) { invisibleText = successStateText; @@ -133,7 +134,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe break; case ValueState.Critical: if (renderDefaultIcon) { - icon = ; + icon = ; } if (!invisibleText) { invisibleText = warningStateText; @@ -141,7 +142,9 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe break; case ValueState.Information: if (renderDefaultIcon) { - icon = ; + icon = ( + + ); } if (!invisibleText) { invisibleText = informationStateText;