[IndexTable] Updates to IndexTable from polaris-next version (#5785)

* chore: updates to index table * chore: update readme * chore: add ability to clear selection * chore: add changeset * chore: export ScrollContainer * chore: scroll container styling * chore: cell styling * chore: add width to first heading for checkbox * chore: add flush option for TableHeading * chore: fixes from merge * chore: update checkbox style
Shopify · May 26, 2022 · 56b8ca7 · 56b8ca7
1 parent 54d15c3
commit 56b8ca7
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 24 deletions.
diff --git a/.changeset/wet-trainers-admire.md b/.changeset/wet-trainers-admire.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Upstream changes from polaris-next IndexTable
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -179,13 +179,18 @@ $loading-panel-height: 53px;
   border: 0;
 }
 
+.TableHeading-flush {
+  padding: 0;
+}
+
 .TableHeading-first {
-  --pc-index-table-checkbox-offset-left: 14px;
+  --pc-index-table-checkbox-offset-left: 16px;
   --pc-index-table-checkbox-offset-right: 18px;
   position: sticky;
   left: 0;
   padding-left: var(--pc-index-table-checkbox-offset-left);
   padding-right: var(--pc-index-table-checkbox-offset-right);
+  width: var(--p-space-5);
 }
 
 .ColumnHeaderCheckboxWrapper {
@@ -230,7 +235,8 @@ $loading-panel-height: 53px;
   position: sticky;
   left: 0;
   z-index: var(--pc-index-table-sticky-cell);
-  padding: 0;
+  padding: var(--p-space-2) 0;
+  vertical-align: middle;
 }
 
 .TableCell-first + .TableCell {
@@ -240,7 +246,6 @@ $loading-panel-height: 53px;
   @include breakpoint-after($breakpoint-small) {
     position: sticky;
     z-index: var(--pc-index-table-sticky-cell);
-    padding: 0;
   }
 }
 
@@ -422,10 +427,9 @@ $scroll-bar-size: var(--p-space-2);
   z-index: var(--pc-index-table-scroll-bar);
   bottom: 0;
   padding: var(--p-space-05);
-  border-top: var(--p-border-divider);
   background-color: var(--p-surface);
-  border-bottom-right-radius: var(--p-border-radius-1);
-  border-bottom-left-radius: var(--p-border-radius-1);
+  border-bottom-right-radius: var(--p-border-radius-2);
+  border-bottom-left-radius: var(--p-border-radius-2);
 }
 
 .scrollBarContainerCondensed {

diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -35,6 +35,7 @@ import styles from './IndexTable.scss';
 
 export interface IndexTableHeading {
   title: string;
+  flush?: boolean;
   new?: boolean;
   hidden?: boolean;
 }
@@ -46,6 +47,7 @@ export interface IndexTableBaseProps {
   children?: React.ReactNode;
   emptyState?: React.ReactNode;
   sort?: React.ReactNode;
+  paginatedSelectAllActionText?: string;
   lastColumnSticky?: boolean;
   selectable?: boolean;
 }
@@ -67,6 +69,7 @@ function IndexTableBase({
   children,
   emptyState,
   sort,
+  paginatedSelectAllActionText,
   lastColumnSticky = false,
   ...restProps
 }: IndexTableBaseProps) {
@@ -633,6 +636,7 @@ function IndexTableBase({
       isSecond && styles['TableHeading-second'],
       isLast && !heading.hidden && styles['TableHeading-last'],
       !selectable && styles['TableHeading-unselectable'],
+      heading.flush && styles['TableHeading-flush'],
     );
 
     const stickyPositioningStyle =
@@ -746,13 +750,17 @@ function IndexTableBase({
       return;
     }
 
+    const customActionText =
+      paginatedSelectAllActionText ??
+      i18n.translate('Polaris.IndexTable.selectAllItems', {
+        itemsLength: itemCount,
+        resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
+      });
+
     const actionText =
       selectedItemsCount === SELECT_ALL_ITEMS
         ? i18n.translate('Polaris.IndexTable.undo')
-        : i18n.translate('Polaris.IndexTable.selectAllItems', {
-            itemsLength: itemCount,
-            resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
-          });
+        : customActionText;
 
     return {
       content: actionText,

diff --git a/polaris-react/src/components/IndexTable/README.md b/polaris-react/src/components/IndexTable/README.md
@@ -116,6 +116,79 @@ function SimpleIndexTableExample() {
 }
 ```
 
+### Simple flush index table
+
+A index table with simple items and no bulk actions, sorting, or filtering.
+
+```jsx
+function SimpleFlushIndexTableExample() {
+  const customers = [
+    {
+      id: '3411',
+      url: 'customers/341',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '2561',
+      url: 'customers/256',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+  ];
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(customers);
+
+  const rowMarkup = customers.map(
+    ({id, name, location, orders, amountSpent}, index) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+      >
+        <IndexTable.Cell flush>
+          <TextStyle variation="strong">{name}</TextStyle>
+        </IndexTable.Cell>
+        <IndexTable.Cell flush>{location}</IndexTable.Cell>
+        <IndexTable.Cell flush>{orders}</IndexTable.Cell>
+        <IndexTable.Cell flush>{amountSpent}</IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <Card>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={customers.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Name', flush: true},
+          {title: 'Location', flush: true},
+          {title: 'Order count', flush: true},
+          {title: 'Amount spent', flush: true},
+        ]}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </Card>
+  );
+}
+```
+
 ### Simple small screen index table
 
 A small screen index table with simple items and no bulk actions, sorting, or filtering.
@@ -1495,13 +1568,14 @@ An `IndexTableRow` is used to render a row representing an item within an `Index
 
 ### IndexTableRow properties
 
-| Prop     | Type      | Description                                                     |
-| -------- | --------- | --------------------------------------------------------------- |
-| id       | string    | A unique identifier for the row                                 |
-| selected | boolean   | A boolean property indicating whether the row is selected       |
-| position | number    | The index position of the row                                   |
-| subdued  | boolean   | A boolean property indicating whether the row should be subdued |
-| status   | RowStatus | A property indicating whether the row should have a status      |
+| Prop     | Type       | Description                                                     |
+| -------- | ---------- | --------------------------------------------------------------- |
+| id       | string     | A unique identifier for the row                                 |
+| selected | boolean    | A boolean property indicating whether the row is selected       |
+| position | number     | The index position of the row                                   |
+| subdued  | boolean    | A boolean property indicating whether the row should be subdued |
+| status   | RowStatus  | A property indicating whether the row should have a status      |
+| onClick  | () => void | A function which overrides the default click behaviour          |
 
 <a name="index-table-cell"></a>
 
@@ -1511,9 +1585,10 @@ An `IndexTableCell` is used to render a single cell within an `IndexTableRow`
 
 ### IndexTableCell properties
 
-| Prop  | Type    | Description                                                                      |
-| ----- | ------- | -------------------------------------------------------------------------------- |
-| flush | boolean | A boolean property indicating whether the cell should remove the default padding |
+| Prop      | Type    | Description                                                                      |
+| --------- | ------- | -------------------------------------------------------------------------------- |
+| flush     | boolean | A boolean property indicating whether the cell should remove the default padding |
+| className | string  | Adds a class to the cell, used for setting widths of a cell                      |
 
 ---
 

diff --git a/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx b/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx
@@ -5,11 +5,17 @@ import styles from '../../IndexTable.scss';
 
 export interface CellProps {
   children?: ReactNode;
+  className?: string;
   flush?: boolean;
 }
 
-export const Cell = memo(function Cell({children, flush}: CellProps) {
+export const Cell = memo(function Cell({
+  children,
+  className,
+  flush,
+}: CellProps) {
   const cellClassName = classNames(
+    className,
     styles.TableCell,
     flush && styles['TableCell-flush'],
   );

diff --git a/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx b/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx
@@ -17,6 +17,14 @@ describe('<Cell />', () => {
       className: 'TableCell TableCell-flush',
     });
   });
+
+  it('applies className if present', () => {
+    const className = 'foo-bar-baz';
+    const cell = mountWithTable(<Cell className={className} />);
+    expect(cell).toContainReactComponent('td', {
+      className: `${className} TableCell`,
+    });
+  });
 });
 
 function mountWithTable(children: ReactElement) {

diff --git a/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.scss b/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.scss
@@ -1,7 +1,7 @@
 @import '../../../../styles/common';
 
-$expanded-height: 32px;
-$expanded-width: 32px;
+$expanded-height: 20px;
+$expanded-width: 36px;
 $condensed-height: 44px;
 $condensed-width: 50px;
 

diff --git a/polaris-react/src/components/IndexTable/components/Row/Row.tsx b/polaris-react/src/components/IndexTable/components/Row/Row.tsx
@@ -21,6 +21,7 @@ export interface RowProps {
   subdued?: boolean;
   status?: RowStatus;
   onNavigation?(id: string): void;
+  onClick?(): void;
 }
 
 export const Row = memo(function Row({
@@ -31,6 +32,7 @@ export const Row = memo(function Row({
   subdued,
   status,
   onNavigation,
+  onClick,
 }: RowProps) {
   const {selectable, selectMode, condensed} = useIndexRow();
   const onSelectionChange = useIndexSelectionChange();
@@ -101,6 +103,11 @@ export const Row = memo(function Row({
       event.stopPropagation();
       event.preventDefault();
 
+      if (onClick) {
+        onClick();
+        return;
+      }
+
       if (primaryLinkElement.current && !selectMode) {
         isNavigating.current = true;
         const {ctrlKey, metaKey} = event.nativeEvent;

diff --git a/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx b/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx
@@ -220,6 +220,48 @@ describe('<Row />', () => {
     expect(onNavigationSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('calls onClick when clicked', () => {
+    const onClickSpy = jest.fn();
+    const row = mountWithTable(
+      <Row {...defaultProps} onClick={onClickSpy}>
+        <th>
+          <a href="/" data-primary-link>
+            Child
+          </a>
+        </th>
+      </Row>,
+    );
+
+    triggerOnClick(row, 1, defaultEvent);
+
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not execute further functionality when onClick is present', () => {
+    const onClickSpy = jest.fn();
+    const onSelectionChangeSpy = jest.fn();
+
+    const row = mountWithTable(
+      <Row {...defaultProps} onClick={onClickSpy}>
+        <th>
+          <a href="/" data-primary-link>
+            Child
+          </a>
+        </th>
+      </Row>,
+      {
+        indexTableProps: {
+          itemCount: 50,
+          selectedItemsCount: 0,
+          onSelectionChange: onSelectionChangeSpy,
+        },
+      },
+    );
+
+    triggerOnClick(row, 1, defaultEvent);
+    expect(onSelectionChangeSpy).toHaveBeenCalledTimes(0);
+  });
+
   it('calls handleInteraction when clicked and no primary link child present', () => {
     const onSelectionChangeSpy = jest.fn();
     const row = mountWithTable(

diff --git a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx
@@ -382,6 +382,26 @@ describe('<IndexTable>', () => {
       );
     });
 
+    it('renders a custom select all string if present', () => {
+      const onSelectionChangeSpy = jest.fn();
+      const customString = 'Foo bar baz';
+      const index = mountWithApp(
+        <IndexTable
+          {...defaultProps}
+          selectable
+          hasMoreItems
+          selectedItemsCount={1}
+          itemCount={2}
+          promotedBulkActions={[{content: 'promoted action'}]}
+          onSelectionChange={onSelectionChangeSpy}
+          paginatedSelectAllActionText={customString}
+        >
+          {mockTableItems.map(mockRenderRow)}
+        </IndexTable>,
+      );
+      expect(index.find(BulkActions)).toContainReactText(customString);
+    });
+
     it('toggles all page resources when onToggleAll is triggered', () => {
       const onSelectionChangeSpy = jest.fn();
       const index = mountWithApp(