[Button] Fix enabled button text in Safari

[nicolleromero]

WHY are these changes introduced?

Fixes #4228

Fixes a bug in Safari that prevents the enabled state of the primary button from changing to white text when previously disabled.

WHAT is this pull request doing?

Adds a key to the text of the button component to force a re-paint when the primary button changes from disabled to enabled in Safari.

Disabled_button_demo.mov

Steps to Reproduce the Issue

1. Open this Sandbox in Safari.
2. Uncheck "Disabled".
3. Button text will be gray instead of white.

OR

1. Check out this branch (fix-disabled-button-text).
2. Create a file at /playground/Playground.tsx.
3. Add the following code to that file:

import React from 'react';

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

export function Playground() {
  const [disabled, setDisabled] = React.useState(true);

  return (
    <Page title="Playground">
      <Checkbox
        label="Disabled"
        checked={disabled}
        onChange={() => setDisabled(!disabled)}
      />
      <div>
        <Button disabled={disabled} primary>
          Broken in safari?
        </Button>
      </div>
    </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
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	142.03 KB (+0.01% 🔺)
esm	95.65 KB (+0.02% 🔺)
esnext	138.9 KB (+0.01% 🔺)
css	33.8 KB (0%)

[kyledurand]

Amazing. Great find!

[kyledurand]

Can we elaborate a bit here? Maybe mention that it happens during a state change from disabled to enable and vice versa

[runmad]

Thanks for fixing this!!! Nice find.