[TextField] Remove focus ring while disabled

[FCalabria]

WHY are these changes introduced?

When a text input is disabled while being focused, the onBlur event is not triggered, therefore the focus state doesn't change and keeps the focus-ring visible.

WHAT is this pull request doing?

Previous

Fixed

In case you need a use case for this, we have this scenario in search & discovery app: There's a form to introduce a list of terms, by writting each term and clicking a button or using enter. The input is disabled when you reach the max amount of terms. Therefore, when you introduce the last item and click enter, the input is disabled without being unfocused by the user, which causes the corner case and can lead to having two elements looking focused. Video for a more clear understanding

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

For reproduction on the playground.tsx

import React, {useCallback, useState} from 'react';

import {Button, Form, Page, TextField} from '../src';

export function Playground() {
  const [value, setValue] = useState('Jaded Pixel');
  const [disabled, setDisabled] = useState(false);

  const handleChange = useCallback(
    (newValue: string) => setValue(newValue),
    [],
  );

  return (
    <Page title="Playground">
      <Form onSubmit={() => setDisabled(true)}>
        <TextField
          label="Store name"
          value={value}
          onChange={handleChange}
          autoComplete="off"
          disabled={disabled}
        />
      </Form>
      <Button onClick={() => setDisabled(false)}>Enable</Button>
    </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

[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-20230529153618

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

[kyledurand]

LGTM