[ResourceItem] Add disabled prop

[tauthomas01]

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1360

The goal of this PR is to add a new disabled prop in the ResourceItem component. We want to have a disabled state in this component because one of our page is displaying it as a list of items and when we click on a ResourceItem, it's loading the same template along with the same list of ResourceItem. In that case, if we have a disabled state on the current item, it would be great to prevent users from clicking on it again because it would load the same page.

WHAT is this pull request doing?

When disabled prop is true in the ResourceItem:

• We hide the UnstyledLink/button as well as its accessibility attributes as it's no longer an interactive element. This should read as a regular text.
• The onClick should not be triggered when we hit onKeyUp or click on the disabled element
• The cursor style is now default + font color follows the disabled state like IndexTable.Row
• The hover state is removed
• onClick or url prop won't be triggered as long as disabled: true
• The checkbox selectable state is true

Here is a Playground code snippet below to test. In the example, I've added checkboxes in the ResourceList to make sure it still works as expected.

Code snippet for playground

import React, {useState} from 'react';
import type {ResourceListProps} from '@shopify/polaris';

import {
  Page,
  LegacyCard,
  ResourceList,
  ResourceItem,
  Text,
  Avatar,
} from '../src';

export function Playground() {
  const [selectedItems, setSelectedItems] = useState<
    ResourceListProps['selectedItems']
  >([]);

  return (
    <Page title="Playground">
      <LegacyCard>
        <ResourceList
          resourceName={{singular: 'customer', plural: 'customers'}}
          selectable
          selectedItems={selectedItems}
          onSelectionChange={setSelectedItems}
          items={[
            {
              id: '145',
              url: '#',
              avatarSource:
                'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
              name: 'Yi So-Yeon',
              location: 'Gwangju, South Korea',
            },
            {
              id: '146',
              url: '#',
              avatarSource:
                'https://burst.shopifycdn.com/photos/woman-standing-in-front-of-yellow-background.jpg?width=746',
              name: 'Jane Smith',
              location: 'Manhattan, New York',
            },
            {
              id: '147',
              url: '#',
              avatarSource:
                'https://burst.shopifycdn.com/photos/relaxing-in-headphones.jpg?width=746',
              name: 'Grace Baker',
              location: 'Los Angeles, California',
            },
          ]}
          renderItem={(item) => {
            const {id, url, avatarSource, name, location} = item;

            return (
              <ResourceItem
                disabled={id === '145'}
                id={id}
                url={url}
                media={
                  <Avatar
                    customer
                    size="md"
                    name={name}
                    source={avatarSource}
                  />
                }
                accessibilityLabel={`View details for ${name}`}
                name={name}
                onClick={() => console.log('clicked')}
              >
                <h3>
                  <Text fontWeight="bold" as="span">
                    {name}
                  </Text>
                </h3>
                <div>{location}</div>
              </ResourceItem>
            );
          }}
        />
      </LegacyCard>
    </Page>
  );
}

Screen.Recording.2024-02-13.at.2.58.34.PM.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• 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

[chloerice]

Hey @tauthomas01 👋🏽 The active state for ResourceItem is its selected state. The interaction here is a disabled state, so let's also make sure to disable the checkbox when selectable is true. The font color should also indicate that it's disabled like the IndexTable.Row does cc @Shopify/polaris-ux

[tauthomas01]

Hi @chloerice , thank you for the review! I made the changes based on your comments and updated the PR description to reflect the new prop name.

[chloerice]

Thank you for contributing @tauthomas01! 🎉 Can you add the Playground code you wrote as a story for this state?

[tauthomas01]

/snapit

[github-actions]

🫰✨ Thanks @tauthomas01! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20240214135159

yarn add @shopify/polaris@0.0.0-snapshot-release-20240214135159

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20240214135159

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20240214135159