Fix spinner button animation for long action text#8472
Merged
Conversation
changelog: Bug Fixes, UI Components, Fix appearance of button spinner in specific scenarios
aduth
commented
May 23, 2023
|
|
||
| get button(): HTMLElement { | ||
| return this.querySelector('a,button:not([type]),[type="submit"],[type="button"]')!; | ||
| return this.querySelector('.usa-button')!; |
Contributor
Author
There was a problem hiding this comment.
I suspect this was premature optimization on past Andrew's part. I don't know that we ever render any spinner buttons that aren't .usa-button.
mitchellhenke
approved these changes
May 23, 2023
Since we explicitly handle outline button as part of the spinner button implementation
nickttng
approved these changes
May 24, 2023
Contributor
Author
|
In testing this, I forgot there's a React implementation of this as well, so I'll need to sync the markup changes there as well. |
Revert stylesheet to main application stylesheet, since currently there's not a way to auto-load component stylesheets for components implemented in React
See: https://github.com/18F/identity-idp/pull/8472/files#r1204466631 Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
Contributor
Author
Updated in b51d60a. I had to move styles back to the shared stylesheet, since we currently can't use #8375's per-component stylesheets for components which also have a React implementation. |
zachmargolis
approved these changes
May 24, 2023
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
🛠 Summary of changes
Fixes an issue where SpinnerButton may appear incorrect when using longer
action_messagetext. The issue is that the spinner button's container width will grow to accommodate the longer text, but this growth causes the spinner animation to be positioned incorrectly, since it is horizontally centered.📜 Testing Plan
👀 Screenshots
Note the issue is horizontal centering: