PR5: feat: cross-theme hover/focus UX improvements + button XS size#1699
Open
anirudha wants to merge 3 commits intoopensearch-project:mainfrom
Open
PR5: feat: cross-theme hover/focus UX improvements + button XS size#1699anirudha wants to merge 3 commits intoopensearch-project:mainfrom
anirudha wants to merge 3 commits intoopensearch-project:mainfrom
Conversation
- Replace text-decoration underline hover states with subtle background color hover states across all themes (oui, oui-next, v9) - Update _states.scss mixin to use background-color hover instead of text-decoration underline - Update _button.scss mixin to remove text-decoration on hover/focus - Add focus-visible improvements to tabs component - Add XS (extra-small) button size variant with OuiXSmallButton component - Update component hover states: accordion, card, tabs, combo_box, context_menu, control_bar, date_picker, super_date_picker, expression, facet_button, filter_button, file_picker, image, list_group, pagination, selectable, steps, table - Add button XS documentation examples These are cross-theme changes that improve all themes, not v9-specific. Signed-off-by: Anirudha Jadhav <jadhanir@amazon.com> Signed-off-by: Anirudha (Ani) Jadhav <anirudha@nyu.edu>
anirudha
requested review from
AMoo-Miki,
Maosaic,
angle943,
ashwin-pc,
d-buckner,
ruanyl,
ruchidh and
virajsanghvi
as code owners
anirudha
changed the title
Filter buttons sit side-by-side in a filter group with shared borders. Adding border-radius on hover causes individual buttons to look rounded and disconnected from the group. The background-color hover effect is sufficient without it. Signed-off-by: Anirudha (Ani) Jadhav <anirudha@nyu.edu>
Author
|
Fixed — removed the |
Signed-off-by: Anirudha (Ani) Jadhav <anirudha@nyu.edu>
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
1 participant
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.
These are cross-theme changes that improve all themes, not v9-specific.
PR 5: Hover/Focus UX + Button XS (~25 files)
Scope: Cross-theme interactive state improvements and the new button XS size. These are shared changes that improve all themes.
Files included:
src/global_styling/mixins/_states.scss(hover background changes)src/global_styling/mixins/_button.scss(button mixin updates)src/themes/oui-next/global_styling/mixins/_states.scss(mirror)src/themes/oui-next/global_styling/mixins/_button.scss(mirror)src/themes/v9/global_styling/mixins/_states.scss(mirror)src/themes/v9/global_styling/mixins/_button.scss(mirror)src/components/tabs/_tabs.scss(focus-visible)src/components/button/_button.scss(XS size styles)src/components/button/button.tsx(XS type + OuiXSmallButton)src/components/button/index.ts(export)src/components/index.js(export)src-docs/src/views/button/button.js(XS button docs)Testing:
yarn test-unit buttonfor snapshot updates,yarn lint,yarn test-unitfull suite to verify no regressions across themes