Text input loading state #1920
Text input loading state #1920
Conversation
🦋 Changeset detectedLatest commit: f9ad318 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
src/TextInput.tsx
Outdated
| * 'leading': at the beginning of the input | ||
| * 'trailing': at the end of the input | ||
| **/ | ||
| loadingIndicatorPosition?: 'auto' | 'leading' | 'trailing' // TODO: come up with a shorter name |
There was a problem hiding this comment.
Any better recommendations for this prop name? It's so long...
|
This is the option that we all liked: <TextInput
leadingVisual={MergeIcon}
trailingVisual={CheckIcon}
isLoading={true | false}
loaderPosition="auto | leading | trailing"
/> |
Co-authored-by: Pavithra Kodmad <pksjce@github.com>
… into mp/text-input-loading-state
| @@ -0,0 +1,45 @@ | |||
| import React from 'react' | |||
| import {Box, Spinner} from '.' | |||
| import {TextInputNonPassthroughProps} from './TextInput' | |||
There was a problem hiding this comment.
do you think this is like a circular dependency?
There was a problem hiding this comment.
Possibly, but it's just a type. Do you have any alternative suggestions?
| import {Box, Spinner} from '.' | ||
| import {TextInputNonPassthroughProps} from './TextInput' | ||
|
|
||
| const TextInputInnerVisualSlot: React.FC<{ |
There was a problem hiding this comment.
is it more like TextInputReplaceLoader or something like that.
There was a problem hiding this comment.
I still feel like it's more about the visual than the loader.
I don't think we need to announce it, but I could be wrong. @alliethu - any input on this? |
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Issue: https://github.com/github/primer/issues/156
Adds a loading state to the text input. The loading indicator is positioned to avoid layout shifts in the component when it hides and shows.
loadingIndicatorPosition="auto"(default behavior)Does not have a
leadingVisualORtrailingVisual?Show at the end of the input
Has a
leadingVisual?Show in place of the
leadingVisualHas a
trailingVisual?Show in place of the
trailingVisualHas a
leadingVisualandtrailingVisual?Show in place of the
trailingVisualDoes not have a
leadingVisual?Show at the end of the input
loadingIndicatorPosition="leading"Show in place of
leadingVisualif there is one, or show at the start of the inputloadingIndicatorPosition="trailing"Show in place of
trailingVisualif there is one, or show at the end of the inputScreenshots
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.