Repository navigation
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5116 +/- ##
=======================================
Coverage 97.70% 97.70%
=======================================
Files 990 990
Lines 31820 31820
Branches 11754 11754
=======================================
Hits 31091 31091
Misses 683 683
Partials 46 46 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| background: $selected-background; | ||
| color: $selected-color; | ||
|
|
||
| @include theming.one-theme-only { |
There was a problem hiding this comment.
Can we remove this condition and just set the width to 0 for VR? Otherwise we'll have troubles adding a shadow in the other themes if that will become necessary.
There was a problem hiding this comment.
Thanks @mxschll. That's fair enough and integrated your feedback. The box-shadow is now defined for all themes with the width in a custom property that defaults to 0, and One Theme sets the width.
Declare the selected segment box-shadow once for all themes and carry the border width in a custom property that falls back to 0, so themes opt in by setting a single value instead of wrapping the shadow in a theme condition.
6f4149d to
a7935c4
Compare
| gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width}); | ||
| } | ||
|
|
||
| @include theming.one-theme-only { |
There was a problem hiding this comment.
Nit: this could be merged with the above gap: definition. We can use a variable that gets set depending on whether one theme is active or not which would make it a bit more maintainable than repeating this.
There was a problem hiding this comment.
Thanks! I've quickly looked into that, but I'm not sure if that works actually.
| position: relative; | ||
| inset-inline-start: calc(-1 * #{awsui.$space-xxs}); | ||
| margin-inline-end: awsui.$space-xxs; | ||
| @include theming.one-theme-only { |
There was a problem hiding this comment.
What changed for this to be xxxs?
There was a problem hiding this comment.
Many icons have inner padding within the 16×16 area. When these icons are placed in a segment with equal inline spacing, the spacing can appear uneven because the icon itself contains additional space.
A negative inset-inline-start is especially useful in VR, where segments have larger inline spacing, but the current value appears too large for One Theme.
This branch was successfully deployed
2 participants
Description
This PR updates the style for the segmented control component only for one-theme.
Related links, issue #, if available: n/a
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.