[IndexTable] Fix issue where bulk actions appear on mobile when no rows are selected

[lhoffbeck]

WHY are these changes introduced?

Found this while working on shopify/web #38318.

The IndexTable's bulk actions are operations that can be performed on selected IndexTableRows. The mobile responsive view shows the bulk actions even when no rows are selected though.

WHAT is this pull request doing?

Hides bulk actions dropdown unless 1+ rows are selected.

19-44-d74mk-1xyms.video.mp4

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useState} from 'react';

import {Page, useIndexResourceState, IndexTable, Card, TextStyle, EventListener} from '../src';

export function Playground() {
  const [condensed, setCondensed] = useState(window.innerWidth < 458);

  const handleResize = () => {
    setCondensed(window.innerWidth < 458);
  };

  return (
    <Page title="Playground">
      <EventListener event="resize" handler={handleResize} />
      <IndexTableWithBulkActionsExample condensed={condensed} />
    </Page>
  );
}

function IndexTableWithBulkActionsExample({condensed}: {condensed?: boolean}) {
  const customers = [
    {
      id: '3413',
      url: 'customers/341',
      name: 'Mae Jemison',
      location: 'Decatur, USA',
      orders: 20,
      amountSpent: '$2,400',
    },
    {
      id: '2563',
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
      orders: 30,
      amountSpent: '$140',
    },
  ];
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const {
    selectedResources,
    allResourcesSelected,
    handleSelectionChange,
  } = useIndexResourceState(customers);

  const promotedBulkActions = [
    {
      content: 'Edit customers',
      onAction: () => console.log('Todo: implement bulk edit'),
    },
  ];
  const bulkActions = [
    {
      content: 'Add tags',
      onAction: () => console.log('Todo: implement bulk add tags'),
    },
    {
      content: 'Remove tags',
      onAction: () => console.log('Todo: implement bulk remove tags'),
    },
    {
      content: 'Delete customers',
      onAction: () => console.log('Todo: implement bulk delete'),
    },
  ];

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <TextStyle variation="strong">{name}</TextStyle>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        bulkActions={bulkActions}
        promotedBulkActions={promotedBulkActions}
        headings={[
          {title: 'Name'},
          {title: 'Location'},
          {title: 'Order count'},
          {title: 'Amount spent'},
        ]}
        condensed={condensed}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• 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

[github-actions]

🟢 No significant changes to src/**/*.tsx were detected.

[kyledurand]

Thanks for tackling this! Can you add a test case?