[TextField] Improves styling on hidden ClearButton in TextField component.

[zaquille-oneil]

WHY are these changes introduced?

Fixes #5888. Screenshots are shown in the github issue.

WHAT is this pull request doing?

Renaming and adjusting a CSS style on the TextField component.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </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

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

[github-actions]

size-limit report 📦

Path	Size
cjs	150.17 KB (-0.02% 🔽)
esm	86.56 KB (-0.02% 🔽)
esnext	136.52 KB (-0.03% 🔽)
css	37.3 KB (-0.02% 🔽)

[chloerice]

Thanks for catching and fixing this @zaquille-oneil!! 🎉 I think we can do away with the CSS altogether, but I'm having trouble running Storybook so I haven't tophatted my suggestion.

[stefanlegg]

LGTM! I'm fine with either the current approach or the one @chloerice suggested 👍

[zaquille-oneil]

Thanks for catching and fixing this @zaquille-oneil!! 🎉 I think we can do away with the CSS altogether, but I'm having trouble running Storybook so I haven't tophatted my suggestion.

np! glad I could help. I've implemented your suggestion and ran storybook with it. things work just fine when hiding the clear button

[ghost]

🎉 Thanks for your contribution to Polaris!