[BulkActions] Improve visibility of the BulkActions bar (Shopify#7851)

### WHY are these changes introduced?

Some feedback we got from SLT around the new Bulk Actions bar UX is
that, whilst a nice update, it can sometimes be hard to detect that the
bulk actions bar has appeared. This PR addresses that by tweaking some
of the settings for the sticky Bulk Actions bar.

### WHAT is this pull request doing?

This PR updates the bulk actions to use a "dark UI" pattern, similar to
the ContextualSaveBar and Toast components currently in Polaris. The
placement of the bar has been updated to be a little higher on the
screen, up from 16px from the bottom, to 48px from the bottom. We have
also combined the `--p-shadow-deep` and `--p-shadow-popover` shadow
tokens to increase the visual lift the component has from the rest of
the index UI.



https://user-images.githubusercontent.com/2562596/206267671-6782a7bc-f9c6-47ff-8a04-da374fcdf499.mov



### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Author: 2 people

.changeset/purple-hairs-teach.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated shadow and placement of the BulkActions bar for greater visibility

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

@@ -6,6 +6,13 @@ $bulk-actions-button-stacking-order: (
 );
 
 .Group {
+  /* stylelint-disable -- polaris: Used to apply dark theme to action buttons */
+  --p-surface: var(--p-surface-dark);
+  --p-text: var(--p-text-on-dark);
+  --p-icon: var(--p-text-on-dark);
+  --p-action-secondary-hovered: var(--p-action-secondary-hovered-dark);
+  --p-action-secondary-pressed: var(--p-action-secondary-pressed-dark);
+  /* stylelint-enable */
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-style-input;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -18,7 +25,7 @@ $bulk-actions-button-stacking-order: (
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   justify-content: center;
-  transition: var(--p-duration-250) var(--p-ease-in);
+  transition: var(--p-duration-100) var(--p-ease);
   transition-property: transform, opacity;
   transform: translateY(120px);
   padding: 0 var(--p-space-4);
@@ -65,7 +72,7 @@ $bulk-actions-button-stacking-order: (
   padding: var(--p-space-4);
   background: var(--p-surface);
   border-radius: var(--p-border-radius-2);
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-deep), var(--p-shadow-popover);
   max-width: 100%;
 
   .Group-measuring & {
@@ -78,6 +85,11 @@ $bulk-actions-button-stacking-order: (
 
 .BulkActionButton {
   white-space: nowrap;
+
+  button {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    display: flex;
+  }
 }
 
 .disabled {

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

@@ -13,7 +13,7 @@ import type {
 } from '../../types';
 import {ActionList} from '../ActionList';
 import {Popover} from '../Popover';
-import {ButtonGroup} from '../ButtonGroup';
+import {Inline} from '../Inline';
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../EventListener';
 
@@ -299,10 +299,10 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
     const groupContent =
       promotedActionsMarkup || actionsPopover ? (
-        <ButtonGroup>
+        <Inline gap="3">
           {promotedActionsMarkup}
           {actionsPopover}
-        </ButtonGroup>
+        </Inline>
       ) : null;
 
     if (!groupContent) {
@@ -311,7 +311,7 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
     const group = (
       <Transition
-        timeout={250}
+        timeout={100}
         in={selectMode}
         key="group"
         nodeRef={this.groupNode}

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

@@ -1,7 +1,9 @@
 import React, {useRef} from 'react';
+import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 
 import type {DisableableAction} from '../../../../types';
 import {Button} from '../../../Button';
+import {Icon} from '../../../Icon';
 import {Indicator} from '../../../Indicator';
 import {useComponentDidMount} from '../../../../utilities/use-component-did-mount';
 import styles from '../../BulkActions.scss';
@@ -37,12 +39,17 @@ export function BulkActionButton({
       <Button
         external={external}
         url={url}
-        aria-label={accessibilityLabel}
+        aria-label={disclosure ? content : accessibilityLabel}
         onClick={onAction}
         disabled={disabled}
-        disclosure={disclosure}
+        size="slim"
+        icon={
+          disclosure ? (
+            <Icon source={HorizontalDotsMinor} color="base" />
+          ) : undefined
+        }
       >
-        {content}
+        {disclosure ? undefined : content}
       </Button>
       {indicator && <Indicator />}
     </div>

polaris-react/src/components/BulkActions/hooks/tests/use-is-bulk-actions-sticky.test.tsx

@@ -62,7 +62,7 @@ describe('useIsBulkActionsSticky', () => {
     it('returns the offset correctly when select mode is true', () => {
       const component = mountWithApp(<Component selectMode />);
       const result = component.findAll('span')[0]?.text();
-      expect(result).toBe('300');
+      expect(result).toBe('308');
     });
 
     it('returns the width value correctly', () => {

polaris-react/src/components/BulkActions/hooks/use-is-bulk-actions-sticky.ts

@@ -4,7 +4,7 @@ import {debounce} from '../../../utilities/debounce';
 
 const DEBOUNCE_PERIOD = 250;
 
-const PADDING_IN_SELECT_MODE = 100;
+const PADDING_IN_SELECT_MODE = 92;
 
 export function useIsBulkActionsSticky(selectMode: boolean) {
   const hasIOSupport =
@@ -24,8 +24,8 @@ export function useIsBulkActionsSticky(selectMode: boolean) {
 
   const options = {
     root: null,
-    rootMargin: '0px',
-    threshold: 1,
+    rootMargin: '-12px',
+    threshold: 0,
   };
   const observerRef = useRef<IntersectionObserver | null>(
     hasIOSupport ? new IntersectionObserver(handleIntersect, options) : null,

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

@@ -307,21 +307,4 @@ describe('<BulkActions />', () => {
       });
     });
   });
-
-  describe('buttongroup', () => {
-    // Since we need to break our component model and reach into ButtonGroup to access the CheckableButton
-    // and ensure only the first element flex grows, we add this test to ensure the mark-up does not change
-    it('has the mark-up structure to target the CheckableButton', () => {
-      const bulkActions = mountWithApp(
-        <BulkActions {...bulkActionProps} selectMode />,
-      );
-
-      const checkableButton = bulkActions!
-        .find('div', {
-          className: 'ButtonGroupWrapper',
-        })!
-        .domNode!.querySelector('div > div.Item:first-child');
-      expect(checkableButton).not.toBeNull();
-    });
-  });
 });

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

@@ -429,6 +429,11 @@
     padding-right: var(--p-space-3);
   }
 
+  &.sizeSlim {
+    padding-left: var(--p-space-1);
+    padding-right: var(--p-space-1);
+  }
+
   .Icon:first-child {
     margin-left: 0;
   }

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

@@ -15,11 +15,16 @@
   border-radius: inherit;
 }
 
-.IndexTableWithBulkActions {
+.IndexTableWrapper {
+  border-radius: inherit;
+}
+
+.IndexTableWrapperWithBulkActions {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-index-table-bulk-actions-offset: 100px;
+  --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;
 }
 
 .LoadingContainer-enter {
@@ -592,7 +597,7 @@ $loading-panel-height: 53px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   top: auto;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  bottom: var(--p-space-4);
+  bottom: calc(var(--p-space-10) - var(--p-space-1));
 }
 
 .SelectAllActionsWrapper {

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

@@ -645,7 +645,9 @@ export function WithBulkActionsAndSelectionAcrossPages() {
   );
 
   return (
-    <div style={{padding: 'var(--p-space-4)'}}>
+    <div
+      style={{padding: 'var(--p-space-4) var(--p-space-4) var(--p-space-10)'}}
+    >
       <Card>
         <IndexTable
           resourceName={resourceName}