From 713518f0d20adefa5c228998c061c315791e7783 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 18 Jan 2024 12:54:42 +0100 Subject: [PATCH 1/4] chore: use `react-jsx` transform --- tsconfig.base.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.base.json b/tsconfig.base.json index cdccf306599..073eb9fd3b0 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,7 +3,7 @@ "module": "esnext", "target": "ES2021", "lib": ["ES2022", "dom"], - "jsx": "react", + "jsx": "react-jsx", "baseUrl": ".", "rootDir": ".", "composite": true, From d47444419a08111edfe06ed6cec18cd132443b87 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 18 Jan 2024 16:12:10 +0100 Subject: [PATCH 2/4] fix(ObjectStatus): fire on SPACE or ENTER press --- .../ObjectStatus/ObjectStatus.cy.tsx | 6 ++++ .../ObjectStatus/ObjectStatus.jss.ts | 3 ++ .../src/components/ObjectStatus/index.tsx | 32 +++++++++++++------ 3 files changed, 31 insertions(+), 10 deletions(-) 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..171c41e3021 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 not `active`. It will be removed with our next major release. + * * @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} )} -
+ ); }); From 22506e4efd9a066ec49d04f32e27e9e62c6405a2 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 18 Jan 2024 16:16:31 +0100 Subject: [PATCH 3/4] Revert "chore: use `react-jsx` transform" This reverts commit 713518f0d20adefa5c228998c061c315791e7783. --- tsconfig.base.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.base.json b/tsconfig.base.json index 073eb9fd3b0..cdccf306599 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,7 +3,7 @@ "module": "esnext", "target": "ES2021", "lib": ["ES2022", "dom"], - "jsx": "react-jsx", + "jsx": "react", "baseUrl": ".", "rootDir": ".", "composite": true, From 75eed0e083639d7ce5fa03137ab9ff40cabc80f6 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 18 Jan 2024 16:20:45 +0100 Subject: [PATCH 4/4] description --- packages/main/src/components/ObjectStatus/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index 171c41e3021..21e7d075f1d 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -99,7 +99,7 @@ export interface ObjectStatusPropTypes extends CommonProps { * * __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 not `active`. It will be removed with our next major release. + * __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 */