[BulkActions] - Allowing promoted actions to be rendered as menus

[thiagoloschi]

WHY are these changes introduced?

Closes #4246

Currently, promoted actions are single buttons and are limited to only 2 actions in the BulkAction component. With this change, we're proposing that each one of these buttons can become a menu where we would group relevant actions by subject. This can be seen on this card with the real use case where it would be first used.

WHAT is this pull request doing?

What it looks like now 🎩

On large screens
On small screens
when the two buttons are menus

Jun-17-2021.04-07-28.mp4

To make this possible, we're basically changing the promotedActions prop to also accept values of type MenuGroupDescriptor, which are essentially the type of the menus that we'll be rendering. Then where we define what the promotedActions markup will look like, we're mapping through the actions, checking for their type through a type guard function and deciding based on it whether we should render a BulkActionButton or a BulkActionMenu (which is also being introduced in this PR).

The other change introduced on this PR was for smaller screens, where promoted actions will get rolled into a general Actions menu. Here we still want the actions on the menus to be grouped together, so we're making sure they work as ActionListSection, similarly to how the prop actions is being treated.

Notes

1. This should be backwards compatible as we're just extending the capabilities of promoted actions.
2. Regular button actions and newly added menu actions can coexist.
3. We can have as many menus as we'd like (the warning for keeping promoted actions up to 2 actions will still be thrown though)

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState} from 'react';

import {Page, UnstableBulkActions, Button, Badge, Frame} from '../src';

export function Playground() {
  const [active, setActive] = useState(true);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const bulkActionProps = {
    bulkActions: ['button 3', 'button 4', 'button 5'],
    promotedActions: [
      {
        title: 'button1',
        actions: [
          {
            content: 'action1',
          },
          {
            content: 'action2',
          },
          {
            content: 'action3',
            badge: {content: 'new', status: 'new'},
            helpText: 'Short help text',
          },
        ],
      },
      {
        content: 'button 2',
      },
    ],
    actions: [
      {
        content: 'button 7',
      },
      {
        content: 'button 6',
      },
    ],
    paginatedSelectAllText: 'paginated select all text string',
    selected: true,
    accessibilityLabel: 'test-aria-label',
    label: 'Test-Label',
    disabled: false,
    smallScreen: false,
    selectMode: true,
  };

  return (
    <Page title="Playground">
      <UnstableBulkActions {...bulkActionProps} />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit
• Updated the component's README.md with documentation changes (there's no readme for this component)

[github-actions]

size-limit report

Path	Size
cjs	142.53 KB (+0.1% 🔺)
esm	96.3 KB (+0.15% 🔺)
esnext	139.5 KB (+0.1% 🔺)
css	33.75 KB (0%)

[charlottepoon]

cc: @sarahill

[AndrewMusgrave]

This is looking really good! 💯

[AndrewMusgrave]

If you wanted a type safe way (without casting), we can use the in operator

return 'title' in action

[AndrewMusgrave]

It shouldn't need a lot, but would you mind adding a few tests 🙏

[AndrewMusgrave]

Small nit: we have a useToggle hook

[AndrewMusgrave]

I know this pattern was already used in this file, but should we move this + spyOn to a beforeEach/afterEach?

[thiagoloschi]

[iangermann]

Code lgtm! @AndrewMusgrave do you think it would make sense to add an example of this to the IndexTable storybook?

[AndrewMusgrave]

LGTM ✅ @Germanika a new example totally makes sense!!

[thiagoloschi]

/shipit