style OS in AT

Author: Lukas742

.storybook/preview-head.html

@@ -176,19 +176,19 @@
     padding-block: 0;
   }
 
-  /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
-  .docs-story > div > div[scale] {
-    min-height: 20px;
-    height: auto;
-  }
-
+  /*ObjectStatus "InListOrTable" story */
   .interactive-table-row:active .object-status,
-  .interactive-analytical-table [role='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;
+    height: auto;
+  }
 </style>
 <script data-ui5-config type="application/json">
   {

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -184,9 +184,15 @@
     & [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.mdx

@@ -44,7 +44,8 @@ import * as ComponentStories from './ObjectStatus.stories';
 
 **Applicable since v2.17.0**
 
-When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tables, you can override the text and icon `color` and `text-shadow` to comply with design specs.
+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 {
@@ -62,7 +63,6 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
 
     ```css
     .interactive-table-row:active .object-status,
-    .interactive-analytical-table [role='row']:active .object-status,
     .interactive-li[active] .object-status {
       --ui5wcr-object-status-icon-color: var(--sapList_Active_TextColor);
       color: var(--sapList_Active_TextColor);
@@ -77,12 +77,12 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
           {
             accessor: 'os1',
             Header: 'ObjectStatus (controllable)',
-            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} />,
+            Cell: () => <ObjectStatus {...objectStatusProps} />,
           },
           {
             accessor: 'os2',
             Header: 'ObjectStatus ("Negative")',
-            Cell: () => <ObjectStatus {...objectStatusProps} className={'object-status'} state={'Negative'} />,
+            Cell: () => <ObjectStatus {...objectStatusProps} state={'Negative'} />,
           },
         ],
         [objectStatusProps],
@@ -123,7 +123,6 @@ When a normal (non-inverted) `ObjectStatus` is used in interactive lists or tabl
             minRows={1}
             selectionMode={'Single'}
             selectionBehavior={'RowOnly'}
-            className="interactive-analytical-table"
           />
         </>
       );

packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx

@@ -160,12 +160,12 @@ export const InListOrTable: Story = {
         {
           accessor: 'os1',
           Header: 'ObjectStatus (controllable)',
-          Cell: () => <ObjectStatus {...args} className={'object-status'} />,
+          Cell: () => <ObjectStatus {...args} />,
         },
         {
           accessor: 'os2',
           Header: 'ObjectStatus ("Negative")',
-          Cell: () => <ObjectStatus {...args} className={'object-status'} state={'Negative'} />,
+          Cell: () => <ObjectStatus {...args} state={'Negative'} />,
         },
       ],
       [args],
@@ -206,7 +206,6 @@ export const InListOrTable: Story = {
           minRows={1}
           selectionMode={'Single'}
           selectionBehavior={'RowOnly'}
-          className="interactive-analytical-table"
         />
       </>
     );