Components: Introduce a basic ProgressBar component #53030
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tyxla
added
Needs Design Feedback
tyxla
requested review from
mtias,
mirka,
jsnajdr,
jameskoster,
jasmussen,
flootr,
chad1008,
pablohoneyhoney,
brookewp and
a team
tyxla
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
Size Change: +619 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 664a4de. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5714030435
|
ntsekouras
reviewed
Jul 27, 2023
5 tasks
ntsekouras
reviewed
Jul 27, 2023
Thanks, I appreciate your help, @alexstine! Sorry about it, but this PR intends only to introduce the component and not introduce any usage. I'll make sure to ping you at #53032 for an accessibility review - that PR introduces an actual production usage for that component. |
Good point, @jasmussen! I've added some |
|
Thanks, everyone, for the reviews! I've pushed some changes to accommodate the latest feedback, so I'd appreciate one final look before I land it. Regarding accessibility testing, I'm hoping to make it easier for testing once this new component is utilized in the site editor loading experience in #53032. |
mirka
reviewed
Jul 31, 2023
|
@mirka thanks, your feedback has been very helpful - I've now addressed it all! I think the component is in a really good state for merging now, but I'd love to get your eyes on it before that. Let me know what you think. |
mirka
approved these changes
Aug 1, 2023
|
Digging the indeterminate animation — great job! |
|
What are your thoughts on the standard https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element |
We're using an underlying |
10 tasks
|
In preparation for WP 6.4, I've added a dev note in the PR description. |
|
Sorry I came here via the Dev Note which I am surprised included this since it is a Private API. Never mind my concerns |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR introduces a basic horizontal
ProgressBarcomponent.I'd love to get some design feedback since this is done from scratch and is using some component package colors by default, for consistency with the rest of the components. We're introducing some props to allow easier changing of the colors.
Why?
While it can be useful in various places, we're aiming to use this new component to replace the
Spinnercomponent that is currently utilized in the site editor loading experience. I've started work on this in #53032.How?
We're introducing a basic component with tests, stories, and README - all the basic pieces for a new component.
Testing Instructions
npm run storybook:devTesting Instructions for Keyboard
None
Screenshots or screencast
Indeterminate:
Screen.Recording.2023-07-27.at.15.02.37.mov
Determinate:
Screen.Recording.2023-07-27.at.15.03.37.mov
✍️ Dev Note
Introducing a new experimental
ProgressBarcomponentA new experimental
ProgressBarcomponent has been introduced to the@wordpress/componentspackage.The
ProgressBarcomponent supports two modes:The component is capable of switching between modes depending on the progress
valueprop that's passed to it.The primary need and motivation for creating this new component is currently in the Site Editor, where it's already utilized for displaying the loading progress of the editor.