diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx index 08491c51f13..f85fc9d0b41 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx @@ -231,6 +231,7 @@ describe('ObjectStatus', () => { Content ); + cy.get('button').should('not.exist'); cy.findByText('Content').click(); cy.get('@clickSpy').should('not.be.called'); cy.findByRole('button').should('not.exist'); @@ -241,8 +242,13 @@ describe('ObjectStatus', () => { Content ); + cy.get('button').should('be.visible'); cy.findByText('Content').click(); cy.get('@clickSpy').should('have.been.calledOnce'); + cy.findByText('Content').realPress('Enter'); + cy.get('@clickSpy').should('have.been.calledTwice'); + cy.findByText('Content').realPress('Space'); + cy.get('@clickSpy').should('have.been.calledThrice'); cy.findByText('Object Status Button').should('exist').and('not.be.visible'); }); diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts index 2d5c68dd8d5..96e68cc3c45 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts @@ -46,6 +46,9 @@ const createInvertedIndicationStyles = (baseColor: string) => ({ }); const styles = { + normalizeCSS: { + all: 'unset' + }, objectStatus: { fontFamily: ThemingParameters.sapFontFamily, fontSize: ThemingParameters.sapFontSize, diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index e52c939672b..21e7d075f1d 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -29,16 +29,18 @@ import styles from './ObjectStatus.jss.js'; export interface ObjectStatusPropTypes extends CommonProps { /** - * Indicates if the ObjectStatus text and icon can be clicked/tapped by the user. + * Indicates if the ObjectStatus is rendered as inactive `div` or interactive `button` and therefore can be clicked/tapped by the user or not. + * + * **Note:** If this prop is set to `true`, you should also set the `children` or `icon` prop. * - * **Note:** If you set this property to true, you have to also set the `children` or `icon` prop. * * @since 0.16.6 */ active?: boolean; /** - * Defines the icon in front of the `ObjectStatus` text.
+ * 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. */ icon?: ReactNode; @@ -58,10 +60,11 @@ export interface ObjectStatusPropTypes extends CommonProps { large?: boolean; /** - * Defines the text of the `ObjectStatus`.
+ * Defines the text of the `ObjectStatus`. + * * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. */ - children?: string | number | ReactNode; + children?: ReactNode; /** * Defines the value state of the ObjectStatus.

Available options are: @@ -71,7 +74,8 @@ export interface ObjectStatusPropTypes extends CommonProps { state?: ValueState | keyof typeof ValueState | IndicationColor | keyof typeof IndicationColor; /** - * Defines whether the default icon for each `ValueState` should be displayed.
+ * Defines whether the default icon for each `ValueState` should be displayed. + * * __Note:__ If the `icon` prop was set, `showDefaultIcon` has no effect. */ showDefaultIcon?: boolean; @@ -93,9 +97,13 @@ export interface ObjectStatusPropTypes extends CommonProps { /** * Fires when the user clicks/taps on active text. * + * __Note:__ This prop has no effect if `active` is not set to `true`. + * + * __Note:__ In order to support legacy code, `HTMLDivElement` is still supported even though the `click` event is never fired if the component isn't `active`. + * * @since 0.16.6 */ - onClick?: MouseEventHandler; + onClick?: MouseEventHandler; } const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementText, i18nTexts) => { @@ -151,7 +159,7 @@ const useStyles = createUseStyles(styles, { name: 'ObjectStatus' }); /** * Status information that can be either text with a value state, or an icon. */ -const ObjectStatus = forwardRef((props, ref) => { +const ObjectStatus = forwardRef((props, ref) => { const { state, showDefaultIcon, @@ -199,6 +207,7 @@ const ObjectStatus = forwardRef((props, r ); const objStatusClasses = clsx( + classes.normalizeCSS, classes.objectStatus, classes[`${state as string}`.toLowerCase()], active && classes.active, @@ -207,8 +216,11 @@ const ObjectStatus = forwardRef((props, r className ); + const TagName = active ? 'button' : 'div'; + return ( -
((props, r {invisibleText} )} -
+ ); });