[ResourceList] Adjust sizing of CheckableButtonWrapper so it doesn't get squished

[amorriscode]

WHY are these changes introduced?

Fixes #2961

Following up on a previous PR, the CheckableButton was being squished.

WHAT is this pull request doing?

This PR adds min-width: spacing(); to the CheckableButtonWrapper so it has a nice amount of space.

Before:

After:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useState} from 'react';

import {Avatar, Card, ResourceItem, ResourceList, TextStyle} from '../src';

export function Playground() {
  const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC');

  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const items = [
    {
      id: 341,
      url: 'customers/341',
      name: 'Mae Jemison',
      location: 'Decatur, USA',
    },
    {
      id: 256,
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
    },
  ];

  return (
    <Card>
      <ResourceList
        selectable
        selectedItems={[]}
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        sortValue={sortValue}
        sortOptions={[
          {
            label:
              'Last shrimpy shrimp created (ascending shrimp) shrimp shrimp shrimp shrimp shrimp',
            value: 'DATE_MODIFIED_DESC',
          },
          {label: 'Oldest update', value: 'DATE_MODIFIED_ASC'},
        ]}
        onSortChange={(selected) => {
          setSortValue(selected);
          console.log(`Sort option changed to ${selected}.`);
        }}
      />
    </Card>
  );

  function renderItem(item) {
    const {id, url, name, location} = item;
    const media = <Avatar customer size="medium" name={name} />;

    return (
      <ResourceItem
        id={id}
        url={url}
        media={media}
        accessibilityLabel={`View details for ${name}`}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceItem>
    );
  }
}

🎩 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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[amorriscode]

@alex-page just wondering if there is interest in this PR or if I should close it?

[alex-page]

Suggested change

	- Fixed incorrect `icon` color of `Button` when `destructive` and `plain` ([#2958](https://github.com/Shopify/polaris-react/issues/2958))
	- Fixed sizing issue with `CheckableButtonWrapper` on `ResourceList` ([#2961](https://github.com/Shopify/polaris-react/issues/2961))
	- Fixed sizing issue with `CheckableButtonWrapper` on `ResourceList` ([#2961](https://github.com/Shopify/polaris-react/issues/2961))

[alex-page]

Are these values needed? I assume you added them so the areas to the right collapse down?

[kyledurand]

If this is all in a flex container then I would imagine adding flex-shrink: 0 to CheckableButtonWrapper would have been all that's necessary for this fix. Is that something you tried?

[alex-page]

@amorriscode I am going to close this PR but please reopen it if it is still an issue.