make Table cells responsive on narrow widths (#1863)

- All columns have an overridable non-zero min-width defined to prevent them from getting too small.
- Cells will use shadow DOM to clamp automatically if the value is a string (can be explicitly enabled/disabled).
- Filter/sort icons will wrap into next line on narrow widths.
- Filter icon is now always visible (previously only on hover).
- Sort icon occupies less space.

.changeset/fair-lamps-relax.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-css": minor
+---
+
+The filter button inside a Table will now always be visible, instead of only being shown on hover/focus.

.changeset/six-pans-guess.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+The filter button inside a Table will now always be visible, instead of only being shown on hover/focus.

.changeset/tender-seas-shake.md

@@ -0,0 +1,8 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+The responsive behavior of Table columns has been improved in a few different ways:
+- All columns now have a non-zero default min-width. While we still recommend passing a custom min-width based on your data, this default will help prevent resizable columns from becoming too small. 
+- The filter and sort icons in a column header will now wrap to the next line, before the text starts wrapping.
+- For cells that have a string value, the value will be automatically truncated after three lines.

packages/itwinui-css/src/table/base.scss

@@ -57,10 +57,6 @@
       cursor: grabbing;
     }
 
-    .iui-table-filter-button:not([data-iui-active='true']) {
-      opacity: 0;
-    }
-
     > .iui-table-resizer {
       block-size: 100%;
       inline-size: var(--iui-size-m);
@@ -93,23 +89,14 @@
       opacity: 1;
     }
 
-    &:is(:hover, :focus-visible, :has(:focus-visible)) {
+    &:is(:hover, :focus-visible),
+    &:has(:focus-visible) {
       background-color: var(--iui-color-background-hover);
 
-      :is(.iui-table-sort, .iui-table-filter-button) {
+      .iui-table-sort {
         opacity: 1;
       }
     }
-
-    @supports not selector(:has(+ *)) {
-      &:focus-within {
-        background-color: var(--iui-color-background-hover);
-
-        :is(.iui-table-sort, .iui-table-filter-button) {
-          opacity: 1;
-        }
-      }
-    }
   }
 
   .iui-table-reorder-bar {
@@ -336,14 +323,12 @@
   flex-grow: 1;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: flex-end;
   margin-inline-end: var(--iui-size-s);
 
   .iui-table-cell-end-icon {
-    // Hardcoded size of the borderless button so that the icons are centered
-    inline-size: 28px;
-    block-size: 28px;
-    margin-inline-end: initial;
+    inline-size: unset;
+    block-size: unset;
+    margin: 0;
     margin-inline-start: auto;
   }
 }

packages/itwinui-react/setupTests.ts

@@ -22,6 +22,26 @@ vi.mock('./src/core/utils/hooks/useGlobals.js', () => {
   };
 });
 
+vi.mock('@testing-library/react', async () => {
+  const originalRtl = await vi.importActual<
+    typeof import('@testing-library/react')
+  >('@testing-library/react');
+
+  return {
+    ...originalRtl,
+    /**
+     * Wrapper over `@testing-library/react`'s `render()` that also waits for all
+     * microtasks to be flushed. This is necessary for ShadowRoot to be tested properly.
+     */
+    render: (...args: Parameters<typeof originalRtl.render>) => {
+      vi.useFakeTimers({ toFake: ['queueMicrotask'] });
+      const result = originalRtl.render(...args);
+      originalRtl.act(() => vi.runAllTicks());
+      return result;
+    },
+  };
+});
+
 afterEach(() => {
   vi.useRealTimers();
 });

packages/itwinui-react/src/core/Table/SubRowExpander.tsx

@@ -13,12 +13,13 @@ export type SubRowExpanderProps<T extends Record<string, unknown>> = {
   isDisabled: boolean;
   cellProps: CellProps<T>;
   density?: 'default' | 'condensed' | 'extra-condensed';
+  [k: string]: unknown;
 };
 
 export const SubRowExpander = <T extends Record<string, unknown>>(
   props: SubRowExpanderProps<T>,
 ) => {
-  const { cell, isDisabled, cellProps, expanderCell, density } = props;
+  const { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
 
   return (
     <>
@@ -40,6 +41,7 @@ export const SubRowExpander = <T extends Record<string, unknown>>(
             cell.row.toggleRowExpanded();
           }}
           disabled={isDisabled}
+          {...rest}
         >
           {
             <SvgChevronRight