fix(loader-spinner): allow components label to extend longer than the svg wrapper #6710
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
… svg wrapper removes the fixed width on the components svg wrapper and label to ensure the component centers when rendered. Due to these changes the components label can now extend longer than the svg wrappers width. A varied margin-top is also now applied to the label on all sizes above extra-small, to ensure there is a correct amount of space between the label and svg wrapper. Finally, the labels text has also now been aligned to the center, so if any text does wrap due to container constraints, it will center correctly fix #6702
nineteen88
approved these changes
May 3, 2024
nuria1110
approved these changes
May 3, 2024
sianford
approved these changes
May 9, 2024
|
🎉 This PR is included in version 134.0.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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.
fix #6702
Proposed behaviour
All fixed widths on the component have been removed, making the component center upon rendering and also making the component much more responsive and flexible. The component's label can now exceed the length of the SVG wrapper above. Also, margin-top's are now applied to all sizes above extra-small to match designs, and text now aligns fully to the center.
Current behaviour
Currently, the component's label and SVG wrapper both have a set width, which corresponds to each component's size. This is suitable for smaller labels such as
"Loading...","Saving..."etc. However, some designs require longer strings and shorter words inen-GBmay be longer when translated.Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions