[ResourceList] Fix checkbox / action visibility on different breakpoints / select mode

[AndrewMusgrave]

WHY are these changes introduced?

In #1312 @dleroux noticed some issues with how our actions are handled and checkboxes appearing when they shouldn't

Screenshot of current small screen + select mode

WHAT is this pull request doing?

I believe the below behaviour was our original intention. A confirmation from @ry5n or @dleroux would be great 😄

Large screen

https://cl.ly/106b459458af

• Show persistent actions
• Show actions on hover and keyboard interaction
• Select mode
  • Show persistent actions
  • Show actions on hover and keyboard interaction

Partially condensed

https://cl.ly/4037c3d388b8

• Show persistent actions in disclosure
• Do NOT show actions on hover or keyboard interaction
• Select mode
  • Do NOT show actions at all

Small screen

https://cl.ly/8f45b3d60c62

• Show persistent actions in disclosure
• Do NOT show actions on hover or keyboard interaction
• Select mode
  • Do NOT show actions at all

How to 🎩

Play with ResourceList items with a mix of small screen / partially condensed / large screen and select mode 😄

Videos have been included above of all interactions

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

import * as React from 'react';
import {Page, Avatar, Card, ResourceList, FilterType, TextStyle} from '../src';

interface State {}

export default class ResourceListExample extends React.Component {
  state = {
    selectedItems: [],
    sortValue: 'DATE_MODIFIED_DESC',
    searchValue: '',
    appliedFilters: [
      {
        key: 'accountStatusFilter',
        value: 'Account enabled',
      },
    ],
  };

  handleSearchChange = (searchValue) => {
    this.setState({searchValue});
  };

  handleFiltersChange = (appliedFilters) => {
    this.setState({appliedFilters});
  };

  handleSortChange = (sortValue) => {
    this.setState({sortValue});
  };

  handleSelectionChange = (selectedItems) => {
    this.setState({selectedItems});
  };

  renderItem = (item) => {
    const {id, url, name, location, latestOrderUrl, persistActions} = item;
    const media = <Avatar customer size="medium" name={name} />;
    const shortcutActions = latestOrderUrl
      ? [{content: 'View latest order', url: latestOrderUrl}]
      : null;
    return (
      <ResourceList.Item
        id={id}
        url={url}
        media={media}
        accessibilityLabel={`View details for ${name}`}
        shortcutActions={shortcutActions}
        // persistActions={Boolean(Math.floor(Math.random() * Math.floor(2)))}
        persistActions={persistActions}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceList.Item>
    );
  };

  render() {
    const resourceName = {
      singular: 'customer',
      plural: 'customers',
    };
    const items = [
      {
        id: 1,
        url: 'customers/1',
        name: 'First Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 2,
        name: 'Second Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
      {
        id: 3,
        name: 'Thrid Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 4,
        url: 'customers/2576',
        name: 'Fourth Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
      {
        id: 5,
        url: 'customers/323441',
        name: 'Fifth Jemison',
        location: 'Decatur, USA',
        latestOrderUrl: 'orders/1456',
        persistActions: true,
      },
      {
        id: 6,
        url: 'customers/256786',
        name: 'Sixth Ochoa',
        location: 'Los Angeles, USA',
        latestOrderUrl: 'orders/1457',
        persistActions: false,
      },
    ];
    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 filters = [
      {
        key: 'orderCountFilter',
        label: 'Number of orders',
        operatorText: 'is greater than',
        type: FilterType.TextField,
      },
      {
        key: 'accountStatusFilter',
        label: 'Account status',
        operatorText: 'is',
        type: FilterType.Select,
        options: ['Enabled', 'Invited', 'Not invited', 'Declined'],
      },
    ];
    const filterControl = (
      <ResourceList.FilterControl
        filters={filters}
        appliedFilters={this.state.appliedFilters}
        onFiltersChange={this.handleFiltersChange}
        searchValue={this.state.searchValue}
        onSearchChange={this.handleSearchChange}
        additionalAction={{
          content: 'Save',
          onAction: () => console.log('New filter saved'),
        }}
      />
    );
    console.log('remder')
    return (
      <Card>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={this.renderItem}
          selectedItems={this.state.selectedItems}
          onSelectionChange={this.handleSelectionChange}
          promotedBulkActions={promotedBulkActions}
          bulkActions={bulkActions}
          sortValue={this.state.sortValue}
          sortOptions={[
            {label: 'Newest update', value: 'DATE_MODIFIED_DESC'},
            {label: 'Oldest update', value: 'DATE_MODIFIED_ASC'},
          ]}
          onSortChange={(selected) => {
            this.setState({sortValue: selected});
            console.log(`Sort option changed to ${selected}.`);
          }}
          filterControl={filterControl}
        />
      </Card>
    );
  }
}

[AndrewMusgrave]

visibility: hidden; is required here to reserve the space in the dom so the item doesn't collapse and become partially hidden

[dleroux]

I wonder what changed that this wasn't an issue before.

[dleroux]

This works!

[chloerice]

🥇