From 1953b6935516db5d9ca77888ee41ffda1c2e80df Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 18 Jan 2024 15:57:35 +0000 Subject: [PATCH] [TextField] Fix position of loading spinner when there is no clear button visible (#11466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? The loading spinner currently sits flat against the right-hand edge of the TextField when there is no clear button visible on screen, which we do not want. This PR adds some margin between the loading spinner and the edge of the TextField in this case, and makes sure to remove the margin when there is both the loading spinner and clear button present. Before: Screenshot 2024-01-18 at 12 06 40 After: Screenshot 2024-01-18 at 12 16 44 ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/metal-fireants-crash.md | 6 ++++ .../TextField/TextField.module.scss | 6 ++++ .../TextField/TextField.stories.tsx | 22 +++++++++++++-- .../selection-and-input/text-field.mdx | 3 ++ .../examples/text-field-with-loading.tsx | 28 +++++++++++++++++++ 5 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 .changeset/metal-fireants-crash.md create mode 100644 polaris.shopify.com/pages/examples/text-field-with-loading.tsx diff --git a/.changeset/metal-fireants-crash.md b/.changeset/metal-fireants-crash.md new file mode 100644 index 00000000000..abf626484ee --- /dev/null +++ b/.changeset/metal-fireants-crash.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': patch +'polaris.shopify.com': patch +--- + +[TextField] Fixed positional issue of loading indicator when no clear button is present diff --git a/polaris-react/src/components/TextField/TextField.module.scss b/polaris-react/src/components/TextField/TextField.module.scss index 7e2a6968da5..b069eee4c4b 100644 --- a/polaris-react/src/components/TextField/TextField.module.scss +++ b/polaris-react/src/components/TextField/TextField.module.scss @@ -27,6 +27,11 @@ $spinner-icon-size: 12px; visibility: visible; opacity: 1; } + + // stylelint-disable-next-line -- needed to remove extra margin between loading indicator and clear button when visible + .Loading:has(+ .ClearButton) { + margin-right: 0; + } } &:not(:focus-within) { @@ -447,6 +452,7 @@ $spinner-icon-size: 12px; .Loading { // stylelint-disable-next-line -- Needed to render the spinner above the Backdrop z-index: var(--pc-text-field-contents); + margin-right: var(--p-space-300); svg { display: block; diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx index eda55f9dacb..a2fa6061943 100644 --- a/polaris-react/src/components/TextField/TextField.stories.tsx +++ b/polaris-react/src/components/TextField/TextField.stories.tsx @@ -1029,8 +1029,6 @@ export function WithAutoSizeAndOtherElements() { const handleChange = useCallback((newValue) => setValue(newValue), []); - const handleTextFieldChange = useCallback((value) => setValue(value), []); - const handleClearButtonClick = useCallback(() => setValue(''), []); return ( @@ -1048,3 +1046,23 @@ export function WithAutoSizeAndOtherElements() { /> ); } + +export function WithLoading() { + const [value, setValue] = useState('Jaded Pixel'); + + const handleChange = useCallback((newValue) => setValue(newValue), []); + + const handleClearButtonClick = useCallback(() => setValue(''), []); + + return ( + + ); +} diff --git a/polaris.shopify.com/content/components/selection-and-input/text-field.mdx b/polaris.shopify.com/content/components/selection-and-input/text-field.mdx index 8a45600e0d4..e01b8b9d87b 100644 --- a/polaris.shopify.com/content/components/selection-and-input/text-field.mdx +++ b/polaris.shopify.com/content/components/selection-and-input/text-field.mdx @@ -107,6 +107,9 @@ examples: - fileName: text-field-with-auto-size-and-dynamic-suffix.tsx title: With auto size and dynamic suffix description: Use to only show the suffix when the text field has a value. + - fileName: text-field-with-loading.tsx + title: With loading + description: Use to indicate that the text field is in a loading state. previewImg: /images/components/selection-and-input/text-field.png --- diff --git a/polaris.shopify.com/pages/examples/text-field-with-loading.tsx b/polaris.shopify.com/pages/examples/text-field-with-loading.tsx new file mode 100644 index 00000000000..9487bc8d552 --- /dev/null +++ b/polaris.shopify.com/pages/examples/text-field-with-loading.tsx @@ -0,0 +1,28 @@ +import {TextField} from '@shopify/polaris'; +import {useState, useCallback} from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LoadingExample() { + const [value, setValue] = useState(''); + + const handleChange = useCallback( + (newValue: string) => setValue(newValue), + [], + ); + + const handleClearButtonClick = useCallback(() => setValue(''), []); + + return ( + + ); +} + +export default withPolarisExample(LoadingExample);