[Select] Improve spacing and types

[FCalabria]

WHY are these changes introduced?

There are two different changes here:

1. Set equal spacing to both size of the prefix when the select has an inline label.
   Previously the spacing on the left side was smaller than the spacing on the right, which made the prefix look more related to the select label than to that specific option. Now both sides have equal spacing.
   Before:
   
   After:
   

2. Change type for StrictOption.label to allow the use of React.ReactNode too.
   This way we can use styled text on it
   

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Spin: https://admin.web.select-changes.paqui-calabria.eu.spin.dev/store/shop1/collections/1

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

import React, {useCallback, useState} from 'react';
import {EnableSelectionMinor} from '@shopify/polaris-icons';

import {Icon, Page, Select, Text} from '../src';

export function Playground() {
  const [selected, setSelected] = useState('newestUpdate');

  const handleSelectChange = useCallback(
    (value: string) => setSelected(value),
    [],
  );

  const options = [
    {
      label: 'Better spacing',
      value: 'adjustSpacing',
      prefix: <Icon source={EnableSelectionMinor} />,
    },
    {
      label: (
        <Text as="span" color="success" fontWeight="bold">
          Label as react node
        </Text>
      ),
      value: 'reactNodeLabel',
    },
  ];
  return (
    <Page title="Playground">
      <Select
        label="Sort by"
        labelInline
        options={options}
        onChange={handleSelectChange}
        value={selected}
      />
    </Page>
  );
}

🎩 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

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	242.78 KB (0%)
polaris-react-esm	157.12 KB (0%)
polaris-react-esnext	219.6 KB (+0.01% 🔺)
polaris-react-css	47.48 KB (+0.02% 🔺)

[laurkim]

Suggested change

	Improve spacing and types on select component
	Improved spacing and types on `Select` component

[laurkim]

Suggested change

	label: string | React.ReactNode;
	label: React.ReactNode;

ReactNode includes string as type so we don't need to explicitly include string.

[laurkim]

@FCalabria do you mind providing a spin instance that shows these changes? You can use the /snapit command to create a snapshot from this PR.

I'm also going to add @sarahill for review from a design perspective.

[sarahill]

✅

[FCalabria]

/snapit

[github-actions]

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

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

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230502084619

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

[FCalabria]

@FCalabria do you mind providing a spin instance that shows these changes? You can use the /snapit command to create a snapshot from this PR.

@laurkim Sure! Here you go. I have changed the "best selling" option on the collection detail sort order so you can see both changes in action.