feat(ObjectStatus): simplify active state styling in lists & tables

.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;

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;

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: () => <ObjectStatus {...args} data-testid="os-at" />,
+      },
+      {
+        accessor: 'os2',
+        Header: 'ObjectStatus ("Negative")',
+        Cell: () => <ObjectStatus {...args} state={'Negative'} data-testid="os-at-negative" />,
+      },
+    ];
+
+    cy.mount(
+      <>
+        <Table
+          headerRow={
+            <TableHeaderRow>
+              <TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
+              <TableHeaderCell>ObjectStatus ("Negative")</TableHeaderCell>
+            </TableHeaderRow>
+          }
+          features={<TableSelectionSingle behavior={'RowOnly'} />}
+        >
+          <TableRow rowKey={'0'} className={'interactive-table-row'}>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} data-testid="os-table" />
+            </TableCell>
+            <TableCell>
+              <ObjectStatus {...args} className={'object-status'} state={'Negative'} data-testid="os-table-negative" />
+            </TableCell>
+          </TableRow>
+        </Table>
+        <List selectionMode="Single">
+          <ListItemCustom className={'interactive-li'}>
+            <ObjectStatus {...args} className={'object-status'} data-testid="os-list" />
+          </ListItemCustom>
+        </List>
+        <AnalyticalTable
+          data={atData}
+          columns={atCols}
+          minRows={1}
+          selectionMode={'Single'}
+          selectionBehavior={'RowOnly'}
+          data-testid="at"
+        />
+      </>,
+    );
+
+    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);
 });

packages/main/src/components/ObjectStatus/ObjectStatus.mdx

@@ -22,22 +22,116 @@ import * as ComponentStories from './ObjectStatus.stories';
 
 <br />
 
-## ObjectStatus with default icons
+## ObjectStatus With Default Icons
 
 <Canvas of={ComponentStories.WithDefaultIcons} />
 
-## ObjectStatus with custom Icon
+## ObjectStatus With Custom Icon
 
 <Canvas of={ComponentStories.WithCustomIcon} />
 
-## ObjectStatus with Icon only
+## ObjectStatus With Icon Only
 
 <Canvas of={ComponentStories.WithIconOnly} />
 
-## 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.
 
 <Canvas of={ComponentStories.InvertedObjectStatus} />
 
+## 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;
+}
+```
+
+<Canvas of={ComponentStories.InListOrTable} />
+
+<details>
+
+    <summary>Show Static Code</summary>
+
+    ```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<ObjectStatusPropTypes, 'inverted'>) {
+      const atCols: AnalyticalTableColumnDefinition[] = useMemo(
+        () => [
+          {
+            accessor: 'os1',
+            Header: 'ObjectStatus (controllable)',
+            Cell: () => <ObjectStatus {...objectStatusProps} />,
+          },
+          {
+            accessor: 'os2',
+            Header: 'ObjectStatus ("Negative")',
+            Cell: () => <ObjectStatus {...objectStatusProps} state={'Negative'} />,
+          },
+        ],
+        [objectStatusProps],
+      );
+      return (
+        <>
+          Table
+          <Table
+            headerRow={
+              <TableHeaderRow>
+                <TableHeaderCell>ObjectStatus (controllable)</TableHeaderCell>
+                <TableHeaderCell>ObjectStatus (&#34;Negative&#34;)</TableHeaderCell>
+              </TableHeaderRow>
+            }
+            features={<TableSelectionSingle behavior={'RowOnly'} />}
+          >
+            <TableRow rowKey={'0'} className={'interactive-table-row'}>
+              <TableCell>
+                <ObjectStatus {...objectStatusProps} className={'object-status'} />
+              </TableCell>
+              <TableCell>
+                <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />
+              </TableCell>
+            </TableRow>
+          </Table>
+          <hr />
+          List
+          <List selectionMode="Single">
+            <ListItemCustom className={'interactive-li'}>
+              <ObjectStatus {...objectStatusProps} className={'object-status'} />
+            </ListItemCustom>
+          </List>
+          <hr />
+          AnalyticalTable
+          <AnalyticalTable
+            data={atData}
+            columns={atCols}
+            minRows={1}
+            selectionMode={'Single'}
+            selectionBehavior={'RowOnly'}
+          />
+        </>
+      );
+    }
+    ```
+
+</details>
+
+<br />
+<br />
+
 <Footer />