fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons#13832
Open
unazko wants to merge 4 commits into
Open
fix(ui5-color-palette): fix hover background shape mismatch in color palette popover buttons#13832unazko wants to merge 4 commits into
unazko wants to merge 4 commits into
Conversation
…palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements (ui5-cp-default-color-button-wrapper and ui5-cp-more-colors-wrapper) that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Solution: Apply the hover background color on the wrapper elements instead of letting the button render it. The button's own hover background and border are overridden to transparent via CSS custom properties scoped to those wrappers, so the highlight takes the correct shape of the wrapper. Fixes: #13763
|
🚀 Deployed on https://pr-13832--ui5-webcomponents-preview.netlify.app |
…palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Additionally, the buttons displayed a visible border and used the blue link text color from the Transparent button design instead of the standard text color. Solution: Override CSS custom properties on the button elements inside the wrappers. Setting --_ui5_button_border_radius to 0 removes the button's own corner rounding so the rectangular hover background fills the full wrapper area, relying on the popover's overflow: hidden to clip the corners correctly. Setting --sapButton_Lite_BorderColor and --sapButton_Lite_Hover_BorderColor to transparent removes the visible border in both normal and hover states. Setting --sapButton_Lite_TextColor and --sapButton_Lite_Hover_TextColor to --sapTextColor aligns the text color with the design specification. Fixes: #13763
…palette popover buttons
…palette popover buttons Issue: The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape. Additionally, the buttons used the blue link text color from the Transparent button design instead of the standard text color. Solution: Override --_ui5_button_border_radius to 0 on the button elements so the rectangular hover background fills the full wrapper area, relying on the popover's overflow: hidden to clip the corners correctly. Introduce --_ui5_color-palette-button-text-color in the component parameters and use it to override --sapButton_Lite_TextColor and --sapButton_Lite_Hover_TextColor, scoped only to those buttons. Fixes: #13763
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.
Issue:
The Default Color and More colors... buttons inside the color palette popover are placed in wrapper elements (ui5-cp-default-color-button-wrapper and ui5-cp-more-colors-wrapper) that have a specific shape due to the popover's border-radius clipping. On hover, the button rendered its own background with four fully rounded corners, visually conflicting with the wrapper shape.
Solution:
Apply the hover background color on the wrapper elements instead of letting the button render it. The button's own hover background and border are overridden to transparent via CSS custom properties scoped to those wrappers, so the highlight takes the correct shape of the wrapper.
Fixes: #13763