diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 09b2e63435b..56dd2cec306 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -176,6 +176,14 @@ padding-block: 0; } + /*ObjectStatus "InListOrTable" story */ + .interactive-table-row:active .object-status, + .interactive-li[active] .object-status { + --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor); + color: var(--sapList_Active_TextColor); + text-shadow: none; + } + /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */ .docs-story > div > div[scale] { min-height: 20px; diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index 2e2c3e3717b..ff57acc5790 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -182,10 +182,17 @@ .tr[data-is-selected], .trActive:hover { & [data-component-name='ObjectStatus'][data-inverted='false']:not([data-state^='Indication']) { + --ui5wcr-object-status-icon-color: var(--sapContent_ContrastTextColor); color: var(--sapContent_ContrastTextColor); + text-shadow: none; } } } +.trActive:active [data-component-name='ObjectStatus'][data-inverted='false'] { + --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor); + color: var(--sapList_Active_TextColor); + text-shadow: none; +} .trActive { cursor: pointer; diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx index b2ea5209f82..1958375e24e 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx @@ -8,7 +8,16 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; import type { IndicationColor } from '../../enums/index.js'; import { INDICATION_COLOR } from '../../i18n/i18n-defaults.js'; -import { Icon } from '../../webComponents/index.js'; +import { Icon } from '../../webComponents/Icon/index.js'; +import { List } from '../../webComponents/List/index.js'; +import { ListItemCustom } from '../../webComponents/ListItemCustom/index.js'; +import { Table } from '../../webComponents/Table/index.js'; +import { TableCell } from '../../webComponents/TableCell/index.js'; +import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js'; +import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js'; +import { TableRow } from '../../webComponents/TableRow/index.js'; +import { TableSelectionSingle } from '../../webComponents/TableSelectionSingle/index.js'; +import { AnalyticalTable } from '../AnalyticalTable/index.js'; import { ObjectStatus } from './index.js'; import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils'; @@ -324,5 +333,97 @@ describe('ObjectStatus', () => { cy.get('[ui5-icon]').should('have.css', 'height', '24px'); }); + it('active state in interactive lists and tables', () => { + cy.document().then((doc) => { + const style = doc.createElement('style'); + style.textContent = ` + .interactive-table-row:active .object-status, + .interactive-li[active] .object-status { + --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor); + color: var(--sapList_Active_TextColor); + text-shadow: none; + } + `; + doc.head.appendChild(style); + }); + + const activeTextColor = cssVarToRgb(ThemingParameters.sapList_Active_TextColor); + const atData = [{ os1: 'ObjectStatus', os2: 'ObjectStatus' }]; + const args = { state: ValueState.Positive, inverted: false, showDefaultIcon: true, children: 'ObjectStatus' }; + const atCols = [ + { + accessor: 'os1', + Header: 'ObjectStatus (controllable)', + Cell: () => , + }, + { + accessor: 'os2', + Header: 'ObjectStatus ("Negative")', + Cell: () => , + }, + ]; + + cy.mount( + <> + + ObjectStatus (controllable) + ObjectStatus ("Negative") + + } + features={} + > + + + + + + + + +
+ + + + + + + , + ); + + cy.get('.interactive-table-row').realMouseDown(); + cy.findByTestId('os-table').should('have.css', 'color', activeTextColor); + cy.findByTestId('os-table') + .find('[data-component-name="ObjectStatusDefaultIcon"]') + .should('have.css', 'color', activeTextColor); + cy.get('.interactive-table-row').realMouseUp(); + + cy.get('.interactive-li').realMouseDown(); + cy.findByTestId('os-list').should('have.css', 'color', activeTextColor); + cy.findByTestId('os-list') + .find('[data-component-name="ObjectStatusDefaultIcon"]') + .should('have.css', 'color', activeTextColor); + cy.get('.interactive-li').realMouseUp(); + + cy.get('[data-testid="at"] [role="row"]') + .eq(1) + .realMouseDown({ position: { x: 100, y: 10 } }); // don't click in the middle as there's the resizer + cy.findByTestId('os-at').should('have.css', 'color', activeTextColor); + cy.findByTestId('os-at') + .find('[data-component-name="ObjectStatusDefaultIcon"]') + .should('have.css', 'color', activeTextColor); + cy.get('[data-testid="at"] [role="row"]') + .eq(1) + .realMouseUp({ position: { x: 100, y: 10 } }); + }); + cypressPassThroughTestsFactory(ObjectStatus); }); diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx index 458340c7d96..e6af34ba77e 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx @@ -22,22 +22,116 @@ import * as ComponentStories from './ObjectStatus.stories';
-## ObjectStatus with default icons +## ObjectStatus With Default Icons -## ObjectStatus with custom Icon +## ObjectStatus With Custom Icon -## ObjectStatus with Icon only +## ObjectStatus With Icon Only -## All ObjectStatus states +## All ObjectStatus States **Note:** Only the `inverted` `ObjectStatus` supports `IndicationColor`s 11-20. For non-inverted `ObjectStatus`, these colors default to the `"None"` `state` color and should **not** be used. +## ObjectStatus in Interactive Lists or Tables + +**Applicable since v2.17.0** + +The `AnalyticalTable` component includes active state styling for `ObjectStatus` out of the box, as it is developed within project and can be styled accordingly. +For lists or tables from `@ui5/webcomponents(-fiori/-ai/-compat)` (e.g., `List`, `Table`), custom CSS is required to override the text and icon `color` and `text-shadow` to ensure proper styling when rows are in active state: + +```css +.object-status { + --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor); + color: var(--sapList_Active_TextColor); + text-shadow: none; +} +``` + + + +
+ + Show Static Code + + ```css + .interactive-table-row:active .object-status, + .interactive-li[active] .object-status { + --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor); + color: var(--sapList_Active_TextColor); + text-shadow: none; + } + ``` + + ```tsx + function ObjectStatusInListOrTable(objectStatusProps: Omit) { + const atCols: AnalyticalTableColumnDefinition[] = useMemo( + () => [ + { + accessor: 'os1', + Header: 'ObjectStatus (controllable)', + Cell: () => , + }, + { + accessor: 'os2', + Header: 'ObjectStatus ("Negative")', + Cell: () => , + }, + ], + [objectStatusProps], + ); + return ( + <> + Table + + ObjectStatus (controllable) + ObjectStatus ("Negative") + + } + features={} + > + + + + + + + + +
+
+ List + + + + + +
+ AnalyticalTable + + + ); + } + ``` + +
+ +
+
+