feat(component): Add loading state on select and text input#3278
feat(component): Add loading state on select and text input#3278louismaximepiton wants to merge 24 commits intoouds/mainfrom
Conversation
louismaximepiton
added
📖 documentation
github-project-automation
bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from Need Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>
boosted-bot
moved this from Dev Review In Progress
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
|
Ok from an a11y pov |
| // Select input | ||
| $select-input-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.874 9.977 12 17.25l7.125-7.273-2.034-2.079L12 13.095 6.91 7.898 4.874 9.977Z'/></svg>") !default; | ||
| $select-input-expanded-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.124 14.023 12 6.75l-7.125 7.273 2.035 2.079L12 10.905l5.088 5.197 2.037-2.079Z'/></svg>") !default; | ||
|
|
There was a problem hiding this comment.
These 2 variables are already declared on lines 112 and 113. Maybe an error on conflict resolution ?
| - Put the focus back on the select to ensure similar behavior across browsers and not lose the user after changes. | ||
|
|
||
| <Callout type="info"> | ||
| The select can be disabled or not during the loading time depending on the context of use. |
There was a problem hiding this comment.
We say at the beginning of the states section that states are exclusive and here we say they can be mixed :)
| </svg> | ||
| <label for="exampleDisabledLoadingTextInputWithDisabledAction">Disabled loading input example with disabled action</label> | ||
| <input disabled type="text" class="text-input-field loading-indeterminate" id="exampleDisabledLoadingTextInputWithDisabledAction" placeholder=" " value="Input" aria-describedby="loading-msg-1"> | ||
| <button disabled class="btn btn-minimal btn-icon"> |
There was a problem hiding this comment.
Shoudn't we use the loading button in this case ? I'm not sure actually if it should be also the button component that should switch to loading state or if the button should be hidden for the local loader to be shown ?
| <Example buttonLabel="loading inputs" code={`<div class="text-input mb-medium"> | ||
| <div class="text-input-container"> | ||
| <label for="exampleDisabledLoadingTextInput">Disabled loading input example</label> | ||
| <input disabled type="text" class="text-input-field loading-indeterminate" id="exampleDisabledLoadingTextInput" placeholder=" " value="Input" aria-describedby="loading-msg-0"> |
There was a problem hiding this comment.
Shouldn't we have the disabled style to prevail over the loading style ? I mean the disabled information seems more important than the loading one ?
There was a problem hiding this comment.
I'm asking designers
boosted-bot
moved this from Need Lead Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
| These states should be exclusive among each others. | ||
|
|
||
| ### Disabled | ||
|
|
There was a problem hiding this comment.
Seen together we have a bug with the leading icon in the disabled state, the color should be muted. Maybe we should add a leading icon on one of the following examples.
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>
3 participants
Types of change
Related issues
Closes #3373
Context & Motivation
Add the loading state and examples for the loading state of select and text-input.
Description
NA
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews