chore: add changeset

Author: mrcthms

.changeset/odd-spoons-dance.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Separate BulkActions and SelectAllActions for new bulk selection experience"

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

@@ -73,6 +73,7 @@ $button-vertical-padding: calc(
 
   &.CheckableButton-autoWidth {
     width: auto;
+    font-size: var(--p-font-size-75);
 
     @media #{$p-breakpoints-sm-up} {
       flex: none;

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

@@ -20,6 +20,7 @@ export interface CheckableButtonProps {
   disabled?: boolean;
   onToggleAll?(): void;
   autoWidth?: boolean;
+  ariaLive?: 'off' | 'assertive' | 'polite';
 }
 
 export function CheckableButton({
@@ -32,6 +33,7 @@ export function CheckableButton({
   measuring,
   disabled,
   autoWidth,
+  ariaLive,
 }: CheckableButtonProps) {
   const checkBoxRef = useRef<CheckboxHandles>(null);
 
@@ -75,7 +77,9 @@ export function CheckableButton({
           ref={checkBoxRef}
         />
       </div>
-      <span className={styles.Label}>{label}</span>
+      <span className={styles.Label} aria-live={ariaLive}>
+        {label}
+      </span>
     </div>
   );
 }

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

@@ -1,3 +1,5 @@
+@import '../../styles/common';
+
 .SelectAllActions {
   display: flex;
   gap: var(--p-space-025);
@@ -20,3 +22,36 @@
   opacity: 0;
   display: none;
 }
+
+.PaginatedSelectAll {
+  font-size: var(--p-font-size-75);
+  font-weight: var(--p-font-weight-semibold);
+}
+
+.AllAction {
+  font-size: var(--p-font-size-75);
+  font-weight: var(--p-font-weight-semibold);
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--p-interactive);
+  @include focus-ring;
+
+  &:hover,
+  &:focus {
+    color: var(--p-interactive-hovered);
+  }
+
+  &:active {
+    color: var(--p-interactive-pressed);
+  }
+
+  &:focus {
+    @include no-focus-ring;
+  }
+
+  &:focus:not(:active) {
+    @include focus-ring($style: 'focused');
+  }
+}

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

@@ -3,12 +3,13 @@ import {Transition} from 'react-transition-group';
 
 import {classNames} from '../../utilities/css';
 import type {Action} from '../../types';
-import {Button} from '../Button';
+import {UnstyledButton} from '../UnstyledButton';
 import {CheckableButton} from '../CheckableButton';
 
 import styles from './SelectAllActions.scss';
 
 type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+type AriaLive = 'off' | 'assertive' | 'polite' | undefined;
 
 export interface SelectAllActionsProps {
   /** Visually hidden text for screen readers */
@@ -43,38 +44,37 @@ export function SelectAllActions({
   onToggleAll,
 }: SelectAllActionsProps) {
   const paginatedSelectAllActionMarkup = paginatedSelectAllAction ? (
-    <Button
+    <UnstyledButton
+      className={styles.AllAction}
       onClick={paginatedSelectAllAction.onAction}
       plain
+      size="slim"
       disabled={disabled}
     >
       {paginatedSelectAllAction.content}
-    </Button>
+    </UnstyledButton>
   ) : null;
 
-  const paginatedSelectAllTextMarkup =
-    paginatedSelectAllText && paginatedSelectAllAction ? (
-      <span aria-live="polite">{paginatedSelectAllText}</span>
-    ) : (
-      paginatedSelectAllText
-    );
+  const hasTextAndAction = paginatedSelectAllText && paginatedSelectAllAction;
 
-  const paginatedSelectAllMarkup =
-    paginatedSelectAllActionMarkup || paginatedSelectAllTextMarkup ? (
-      <div className={styles.PaginatedSelectAll}>
-        {paginatedSelectAllTextMarkup} {paginatedSelectAllActionMarkup}
-      </div>
-    ) : null;
+  const paginatedSelectAllMarkup = paginatedSelectAllActionMarkup ? (
+    <div className={styles.PaginatedSelectAll}>
+      {paginatedSelectAllActionMarkup}
+    </div>
+  ) : null;
+
+  const ariaLive: AriaLive = hasTextAndAction ? 'polite' : undefined;
 
   const checkableButtonProps = {
     accessibilityLabel,
-    label,
+    label: hasTextAndAction ? paginatedSelectAllText : label,
     selected,
     selectMode,
     onToggleAll,
     disabled,
     plain: !smallScreen,
     autoWidth: true,
+    ariaLive,
   };
   const markup = (
     <Transition timeout={0} in={selectMode} key="markup">

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

@@ -3,7 +3,7 @@ import {Transition, CSSTransition} from 'react-transition-group';
 import {mountWithApp} from 'tests/utilities';
 
 import {CheckableButton} from '../../CheckableButton';
-import {Button} from '../../Button';
+import {UnstyledButton} from '../../UnstyledButton';
 import {SelectAllActions} from '../SelectAllActions';
 import styles from '../SelectAllActions.scss';
 
@@ -195,11 +195,12 @@ describe('<SelectAllActions />', () => {
       it('renders when provided', () => {
         const {paginatedSelectAllText} = selectAllActionProps;
         const selectAllActions = mountWithApp(
-          <SelectAllActions {...selectAllActionProps} />,
+          <SelectAllActions
+            {...selectAllActionProps}
+            paginatedSelectAllAction={{content: 'content', onAction: () => {}}}
+          />,
         );
-        expect(
-          selectAllActions.find('div', {className: styles.PaginatedSelectAll}),
-        ).toContainReactText(paginatedSelectAllText);
+        expect(selectAllActions).toContainReactText(paginatedSelectAllText);
       });
 
       it('does not render when not provided', () => {
@@ -222,7 +223,9 @@ describe('<SelectAllActions />', () => {
             paginatedSelectAllAction={{content: 'content', onAction: spy}}
           />,
         );
-        selectAllActions.find(Button, {onClick: spy})!.trigger('onClick');
+        selectAllActions
+          .find(UnstyledButton, {onClick: spy})!
+          .trigger('onClick');
         expect(spy).toHaveBeenCalled();
       });
     });