fix(FilterBar): fix alignment of table cells in dialog (#3829)

Author: Lukas742

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -241,4 +241,57 @@ describe('FilterBar.cy.tsx', () => {
     cy.findByTestId('variantManagement').should('not.exist');
     cy.findByTestId('SELECT');
   });
+
+  it.only('addCustomCSS', () => {
+    cy.mount(
+      <FilterBar>
+        <FilterGroupItem label="INPUT">
+          <Input placeholder="Placeholder" value="123123" data-testid="INPUT" />
+        </FilterGroupItem>
+        <FilterGroupItem label="SWITCH" active>
+          <Switch checked={true} data-testid="SWITCH" />
+        </FilterGroupItem>
+        <FilterGroupItem label="SELECT" required>
+          <Select data-testid="SELECT">
+            <Option selected={true}>Option 1</Option>
+            <Option>Option 2</Option>
+            <Option>Option 3</Option>
+            <Option>Option 4</Option>
+          </Select>
+        </FilterGroupItem>
+      </FilterBar>
+    );
+    cy.findByText('Filters').click();
+    cy.get('[accessible-name="Group View"]').click();
+
+    cy.get('[data-component-name="FilterBarDialogPanelTable"]')
+      .shadow()
+      .within(() => {
+        // no header for tables within panel
+        cy.get('thead').should('have.css', 'visibility', 'collapse');
+        cy.get('thead').should('not.be.visible');
+        // no border for table rows within panel - `getComputedStyle` returns the default value (`separate`) for `unset`
+        cy.get('table').should('have.css', 'border-collapse', 'separate');
+        // no bottom border for table within panel - `getComputedStyle` sets the border-width to 0 for `none`
+        cy.get('.ui5-table-root').should('have.css', 'border-bottom', '0px none rgb(50, 54, 58)');
+        // no select-all checkbox (header row is hidden)
+        cy.get('thead th.ui5-table-select-all-column').should('not.be.visible');
+      });
+
+    cy.get('[data-component-name="FilterBarDialogTable"]')
+      .shadow()
+      .within(() => {
+        cy.get('thead').within(() => {
+          // select-all checkbox is not displayed if no rows are defined
+          cy.get('[ui5-checkbox]').should('not.exist');
+        });
+      });
+
+    cy.get('[data-component-name="FilterBarDialogTableRow"]')
+      .shadow()
+      .within(() => {
+        // no navigated cell
+        cy.get('.ui5-table-row-navigated').should('not.be.visible');
+      });
+  });
 });

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -75,11 +75,6 @@ addCustomCSSWithScoping(
 
 :host([data-component-name="FilterBarDialogPanelTable"]) .ui5-table-root {
   border-bottom: none;
-}
-/* don't display select all checkbox */
-:host([data-component-name="FilterBarDialogPanelTable"]) thead th.ui5-table-select-all-column [ui5-checkbox],
-:host([data-component-name="FilterBarDialogTable"]) thead th.ui5-table-select-all-column [ui5-checkbox] {
- visibility: hidden;
 }
  `
 );

packages/main/src/components/FilterGroupItem/index.tsx

@@ -1,15 +1,27 @@
+import circleTask2Icon from '@ui5/webcomponents-icons/dist/circle-task-2.js';
 import clsx from 'clsx';
 import React, { forwardRef, ReactElement } from 'react';
 import { createUseStyles } from 'react-jss';
 import { FlexBoxDirection } from '../../enums';
 import { BusyIndicatorSize } from '../../enums/BusyIndicatorSize';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping';
 import { Icon, TableCell, TableRow } from '../../webComponents';
 import { BusyIndicator } from '../../webComponents/BusyIndicator';
 import { Label } from '../../webComponents/Label';
 import { FlexBox } from '../FlexBox';
 import styles from './FilterGroupItem.jss';
 
+addCustomCSSWithScoping(
+  'ui5-table-row',
+  `
+/* hide navigated cell */
+:host([data-component-name="FilterBarDialogTableRow"]) .ui5-table-row-navigated {
+ width: 0;
+}
+`
+);
+
 const useStyles = createUseStyles(styles, { name: 'FilterGroupItem' });
 
 export interface FilterGroupItemPropTypes extends CommonProps {
@@ -92,7 +104,12 @@ export const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTyp
   if (!inFB) {
     return (
       //todo: disable selection for required fields when it's possible, or the table is fully controllable (https://github.com/SAP/ui5-webcomponents/issues/5662)
-      <TableRow data-react-key={props['data-react-key']} selected={selected} data-required={required}>
+      <TableRow
+        data-react-key={props['data-react-key']}
+        selected={selected}
+        data-required={required}
+        data-component-name="FilterBarDialogTableRow"
+      >
         <TableCell>
           <FlexBox direction={FlexBoxDirection.Column}>
             <Label className={classes.dialogCellLabel} title={labelTooltip ?? label} required={required}>
@@ -103,7 +120,7 @@ export const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTyp
         </TableCell>
         {!withValues && (
           <TableCell className={classes.dialogActiveCell}>
-            {active && <Icon name="circle-task-2" className={classes.dialogActiveIcon} />}
+            {active && <Icon name={circleTask2Icon} className={classes.dialogActiveIcon} />}
           </TableCell>
         )}
       </TableRow>