Merge pull request #17 from glints-dev/feat/index-table-bulk-actions

IndexTable pass BulkAction component as prop

Author: ninariccimarie

.changeset/wet-kangaroos-hope.md

@@ -0,0 +1,5 @@
+---
+'polaris-glints': major
+---
+
+IndexTable pass BulkAction component as prop

polaris-react/src/components/CheckableButton/CheckableButton.scss

@@ -61,6 +61,9 @@ $button-vertical-padding: calc(
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;
+  font-size: var(--p-font-size-100);
+  font-family: 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', 'Noto Sans JP',
+    'Noto Sans', sans-serif;
   // padding to fix the bottom of letters being cutoff by overflow: hidden
   padding: var(--p-space-025) 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

polaris-react/src/components/CheckableButton/CheckableButton.tsx

@@ -3,6 +3,7 @@ import React, {useRef, useImperativeHandle, forwardRef} from 'react';
 import type {CheckboxHandles} from '../../types';
 import {classNames} from '../../utilities/css';
 import {Checkbox} from '../Checkbox';
+import type {IndexTableHeadingCheckbox} from '../IndexTable';
 
 import styles from './CheckableButton.scss';
 
@@ -13,6 +14,7 @@ export interface CheckableButtonProps {
   disabled?: boolean;
   onToggleAll?(): void;
   ariaLive?: 'off' | 'polite';
+  checkbox?: (props: IndexTableHeadingCheckbox) => React.ReactNode;
 }
 
 export const CheckableButton = forwardRef(function CheckableButton(
@@ -23,6 +25,7 @@ export const CheckableButton = forwardRef(function CheckableButton(
     selected,
     disabled,
     ariaLive,
+    checkbox,
   }: CheckableButtonProps,
   ref,
 ) {
@@ -43,14 +46,21 @@ export const CheckableButton = forwardRef(function CheckableButton(
   return (
     <div className={className} onClick={onToggleAll}>
       <div className={styles.Checkbox}>
-        <Checkbox
-          label={accessibilityLabel}
-          labelHidden
-          checked={selected}
-          disabled={disabled}
-          onChange={onToggleAll}
-          ref={checkBoxRef}
-        />
+        {checkbox ? (
+          checkbox?.({
+            onChange: onToggleAll,
+            checked: selected,
+          })
+        ) : (
+          <Checkbox
+            label={accessibilityLabel}
+            labelHidden
+            checked={selected}
+            disabled={disabled}
+            onChange={onToggleAll}
+            ref={checkBoxRef}
+          />
+        )}
       </div>
       <span className={styles.Label} aria-live={ariaLive}>
         {label}

polaris-react/src/components/Checkbox/Checkbox.tsx

@@ -6,10 +6,10 @@ import React, {
   useContext,
 } from 'react';
 import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
+import {nanoid} from 'nanoid';
 
 import {classNames} from '../../utilities/css';
 import {useToggle} from '../../utilities/use-toggle';
-import {useUniqueId} from '../../utilities/unique-id';
 import {Choice, helpTextID} from '../Choice';
 import {errorTextID} from '../InlineError';
 import {Icon} from '../Icon';
@@ -70,7 +70,7 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
     ref,
   ) {
     const inputNode = useRef<HTMLInputElement>(null);
-    const id = useUniqueId('Checkbox', idProp);
+    const id = `Checkbox-${idProp ?? nanoid()}`;
     const {
       value: mouseOver,
       setTrue: handleMouseOver,

polaris-react/src/components/IndexTable/IndexTable.scss

@@ -174,7 +174,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-surface-hovered);
+      background-color: #eaf9ff;
     }
   }
 
@@ -185,7 +185,7 @@ $loading-panel-height: 53px;
     .TableHeading-second,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-surface-selected);
+      background-color: #eaf9ff;
     }
   }
 
@@ -195,7 +195,7 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-surface-selected-hovered);
+      background-color: #eaf9ff;
     }
   }
 }

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -13,7 +13,7 @@ import {Stack} from '../Stack';
 import {Spinner} from '../Spinner';
 import {Text} from '../Text';
 import {
-  BulkActions,
+  BulkAction,
   BulkActionsProps,
   useIsBulkActionsSticky,
 } from '../BulkActions';
@@ -27,7 +27,7 @@ import {
 } from '../../utilities/index-provider';
 import {AfterInitialMount} from '../AfterInitialMount';
 import {IndexProvider} from '../IndexProvider';
-import type {NonEmptyArray} from '../../types';
+import type {ActionListSection, NonEmptyArray} from '../../types';
 
 import {getTableHeadingsBySelector} from './utilities';
 import {ScrollContainer, Cell, Row} from './components';
@@ -62,7 +62,7 @@ interface IndexTableSortToggleLabels {
   [key: number]: IndexTableSortToggleLabel;
 }
 
-interface IndexTableHeadingCheckbox {
+export interface IndexTableHeadingCheckbox {
   label?: string;
   onChange?: (checked: boolean) => unknown;
   checked?: boolean | 'indeterminate';
@@ -104,6 +104,11 @@ export interface IndexTableBaseProps {
   onboardingBadgeText?: string;
   undoText?: string;
   checkbox?: (props: IndexTableHeadingCheckbox) => React.ReactNode;
+  renderBulkActions?: ({
+    actions,
+  }: {
+    actions: (BulkAction | ActionListSection)[];
+  }) => React.ReactNode;
 }
 
 export interface TableHeadingRect {
@@ -137,6 +142,7 @@ function IndexTableBase({
   onboardingBadgeText,
   undoText,
   checkbox,
+  renderBulkActions,
   ...restProps
 }: IndexTableBaseProps) {
   const {
@@ -531,7 +537,7 @@ function IndexTableBase({
   );
 
   const shouldShowActions = !condensed || selectedItemsCount;
-  const promotedActions = shouldShowActions ? promotedBulkActions : [];
+  // const promotedActions = shouldShowActions ? promotedBulkActions : [];
   const actions = shouldShowActions ? bulkActions : [];
 
   const bulkActionsMarkup =
@@ -548,14 +554,15 @@ function IndexTableBase({
             : undefined,
         }}
       >
-        <BulkActions
+        {renderBulkActions?.({actions})}
+        {/* <BulkActions
           selectMode={selectMode}
           promotedActions={promotedActions}
           actions={actions}
           onSelectModeToggle={condensed ? handleSelectModeToggle : undefined}
           isSticky={isBulkActionsSticky}
           width={bulkActionsMaxWidth}
-        />
+        /> */}
       </div>
     ) : null;
 
@@ -576,6 +583,7 @@ function IndexTableBase({
             onToggleAll={handleTogglePage}
             paginatedSelectAllText={paginatedSelectAllText}
             paginatedSelectAllAction={paginatedSelectAllAction}
+            checkbox={checkbox}
           />
           {loadingMarkup}
         </div>
@@ -834,9 +842,9 @@ function IndexTableBase({
     };
   }
 
-  function handleSelectModeToggle() {
-    handleSelectionChange(SelectionType.All, false);
-  }
+  // function handleSelectModeToggle() {
+  //   handleSelectionChange(SelectionType.All, false);
+  // }
 }
 
 const isBreakpointsXS = () => {

polaris-react/src/components/SelectAllActions/SelectAllActions.tsx

@@ -5,6 +5,7 @@ import {classNames} from '../../utilities/css';
 import type {Action} from '../../types';
 import {UnstyledButton} from '../UnstyledButton';
 import {CheckableButton} from '../CheckableButton';
+import type {IndexTableHeadingCheckbox} from '../IndexTable';
 
 import styles from './SelectAllActions.scss';
 
@@ -28,6 +29,7 @@ export interface SelectAllActionsProps {
   disabled?: boolean;
   /** Callback when the select all checkbox is clicked */
   onToggleAll?(): void;
+  checkbox?: (props: IndexTableHeadingCheckbox) => React.ReactNode;
 }
 
 export const SelectAllActions = forwardRef(function SelectAllActions(
@@ -40,6 +42,7 @@ export const SelectAllActions = forwardRef(function SelectAllActions(
     paginatedSelectAllAction,
     disabled,
     onToggleAll,
+    checkbox,
   }: SelectAllActionsProps,
   ref,
 ) {
@@ -72,6 +75,7 @@ export const SelectAllActions = forwardRef(function SelectAllActions(
     disabled,
     ariaLive,
     ref,
+    checkbox,
   };
   const markup = (
     <Transition timeout={0} in={selectMode} key="markup">

polaris-react/src/components/Tabs/tests/Tabs.test.tsx

@@ -402,17 +402,6 @@ describe('<Tabs />', () => {
       expect(tabs.find(Popover)).toHaveReactProps({preferredPosition: 'below'});
     });
 
-    it('renders with a button as the activator when there are hiddenTabs', () => {
-      const tabs = mountWithApp(<Tabs {...mockProps} />);
-      tabs.find(TabMeasurer)!.trigger('handleMeasurement', {
-        hiddenTabWidths: [82, 160, 150, 100, 80, 120],
-        containerWidth: 300,
-        disclosureWidth: 0,
-      });
-
-      expect(tabs.find(Popover)!.prop('activator').type).toBe('button');
-    });
-
     describe('ArrowRight', () => {
       it('shifts focus to the first tab when pressing ArrowRight', () => {
         const tabs = mountWithApp(<Tabs {...mockProps} />);

polaris-react/src/index.ts

@@ -209,7 +209,7 @@ export {Image} from './components/Image';
 export type {ImageProps} from './components/Image';
 
 export {IndexTable, Row, Cell} from './components/IndexTable';
-export type {IndexTableProps} from './components/IndexTable';
+export type {IndexTableProps, RowProps} from './components/IndexTable';
 
 export {Indicator} from './components/Indicator';
 export type {IndicatorProps} from './components/Indicator';
@@ -435,6 +435,6 @@ export {
 export {
   SELECT_ALL_ITEMS as INDEX_TABLE_SELECT_ALL_ITEMS,
   SelectionType as IndexTableSelectionType,
-  useIndexSelectionChange as useIndexTableIndexSelectionChange,
+  useIndexSelectionChange,
 } from './utilities/index-provider';
 export {useBreakpoints} from './utilities/breakpoints';