Merge pull request #19 from glints-dev/feat/index-table-styling

Index table styling

Author: ninariccimarie

.changeset/serious-dolls-travel.md

@@ -0,0 +1,6 @@
+---
+'polaris-glints': minor
+'@shopify/stylelint-polaris': minor
+---
+
+IndexTable styling changes

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

@@ -77,6 +77,8 @@ $bulk-actions-button-stacking-order: (
   border-radius: var(--p-border-radius-2);
   box-shadow: var(--p-shadow-deep), var(--p-shadow-popover);
   max-width: 100%;
+  pointer-events: auto;
+  margin-top: 16px;
 
   .Group-measuring & {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -92,6 +94,13 @@ $bulk-actions-button-stacking-order: (
   button {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     display: flex;
+    &:hover {
+      background-color: #666666;
+    }
+
+    &:active {
+      background-color: #666666 !important;
+    }
   }
 }
 

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

@@ -3,7 +3,6 @@ import {Transition} from 'react-transition-group';
 
 import {debounce} from '../../utilities/debounce';
 import {classNames} from '../../utilities/css';
-import {useI18n} from '../../utilities/i18n';
 import {clamp} from '../../utilities/clamp';
 import type {
   BadgeAction,
@@ -49,9 +48,7 @@ export interface BulkActionsProps {
   width: number;
 }
 
-type CombinedProps = BulkActionsProps & {
-  i18n: ReturnType<typeof useI18n>;
-};
+type CombinedProps = BulkActionsProps;
 
 interface State {
   popoverVisible: boolean;
@@ -202,8 +199,7 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
-    const {selectMode, disabled, promotedActions, i18n, isSticky, width} =
-      this.props;
+    const {selectMode, disabled, promotedActions, isSticky, width} = this.props;
 
     const actionSections = this.actionSections();
 
@@ -214,9 +210,7 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
     ) {
       // eslint-disable-next-line no-console
       console.warn(
-        i18n.translate('Polaris.ResourceList.BulkActions.warningMessage', {
-          maxPromotedActions: MAX_PROMOTED_ACTIONS,
-        }),
+        `"To provide a better user experience. There should only be a maximum of ${MAX_PROMOTED_ACTIONS} promoted actions."`,
       );
     }
 
@@ -255,12 +249,8 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
     const activatorLabel =
       !promotedActions ||
       (promotedActions && numberOfPromotedActionsToRender === 0 && !measuring)
-        ? i18n.translate(
-            'Polaris.ResourceList.BulkActions.actionsActivatorLabel',
-          )
-        : i18n.translate(
-            'Polaris.ResourceList.BulkActions.moreActionsActivatorLabel',
-          );
+        ? 'Actions'
+        : 'More actions';
 
     let combinedActions: ActionListSection[] = [];
 
@@ -416,7 +406,5 @@ function instanceOfMenuGroupDescriptor(
 }
 
 export function BulkActions(props: BulkActionsProps) {
-  const i18n = useI18n();
-
-  return <BulkActionsInner {...props} i18n={i18n} />;
+  return <BulkActionsInner {...props} />;
 }

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

@@ -11,7 +11,6 @@ import {
   handleMouseUpByBlurring,
   MouseUpBlurHandler,
 } from '../../utilities/focus';
-import {useI18n} from '../../utilities/i18n';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
 import {Popover} from '../Popover';
@@ -131,8 +130,6 @@ export function Button({
   connectedDisclosure,
   dataPrimaryLink,
 }: ButtonProps) {
-  const i18n = useI18n();
-
   const isDisabled = disabled || loading;
 
   const className = classNames(
@@ -191,12 +188,7 @@ export function Button({
 
   const spinnerSVGMarkup = loading ? (
     <span className={styles.Spinner}>
-      <Spinner
-        size="small"
-        accessibilityLabel={i18n.translate(
-          'Polaris.Button.spinnerAccessibilityLabel',
-        )}
-      />
+      <Spinner size="small" accessibilityLabel="Loading" />
     </span>
   ) : null;
 
@@ -223,9 +215,7 @@ export function Button({
       monochrome && styles.monochrome,
     );
 
-    const defaultLabel = i18n.translate(
-      'Polaris.Button.connectedDisclosureAccessibilityLabel',
-    );
+    const defaultLabel = 'Related actions';
 
     const {disabled, accessibilityLabel: disclosureLabel = defaultLabel} =
       connectedDisclosure;

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

@@ -2,7 +2,7 @@
 @import '../ResourceList/variables';
 
 $button-vertical-padding: calc(
-  (36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2
+  (38px - var(--p-font-line-height-2) - var(--p-space-05)) / 2
 );
 
 .CheckableButton {
@@ -61,7 +61,8 @@ $button-vertical-padding: calc(
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-200);
+  font-weight: var(--p-font-weight-semibold);
   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

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

@@ -50,6 +50,7 @@ export const CheckableButton = forwardRef(function CheckableButton(
           checkbox?.({
             onChange: onToggleAll,
             checked: selected,
+            indeterminate: selected === 'indeterminate',
           })
         ) : (
           <Checkbox

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

@@ -23,7 +23,6 @@
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-index-table-bulk-actions-offset: 92px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding-bottom: var(--pc-index-table-bulk-actions-offset);
   border-radius: 0;
 }
 
@@ -580,7 +579,7 @@ $loading-panel-height: 53px;
   align-items: center;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   justify-content: center;
-  margin-top: var(--p-space-4);
+  pointer-events: none;
 }
 
 .BulkActionsWrapperSticky {
@@ -605,7 +604,7 @@ $loading-panel-height: 53px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   right: 0;
   padding: 0 var(--p-space-2) 0 calc(var(--p-space-3) - var(--p-space-025));
-  background: var(--p-surface);
+  background: #f8fafc;
 
   &.StickyTableHeader-condensed {
     padding-top: calc(var(--p-space-2) + var(--p-space-05));

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

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