feat(ui5-search): update visual hover and active state of shell search scope#13256
feat(ui5-search): update visual hover and active state of shell search scope#13256
Conversation
…search_activehover
|
🚀 Deployed on https://pr-13256--ui5-webcomponents-preview.netlify.app |
niyap
left a comment
niyap
left a comment
There was a problem hiding this comment.
- When select is active, it is expected to have a border, which is currently no presented
- Please, ask about the expected behaviour when search is active and hovered. Currently, it looks really strange. If the picker is open and the mouse cursor is somewhere within the picker or the search field, it receives hover styles (grey border, previously is was blue). Also, when it is open, please hover over its button -> its get bigger and color is changed
packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
Outdated
Show resolved
Hide resolved
| box-shadow: var(--_ui5-search_input_scope_hover_shadow); | ||
| } | ||
|
|
||
| [ui5-select]:active, |
There was a problem hiding this comment.
Did you check if that styles are applied?
There was a problem hiding this comment.
Yes. They are applied on mousedown as :active state is applied then.
| [ui5-select]:hover { | ||
| box-shadow: var(--sapField_Hover_Shadow); | ||
| [ui5-select]:hover, | ||
| .ui5-search-field-select::part(icon-wrapper):hover { |
There was a problem hiding this comment.
Why we change the box-shadow? Could you please tell me about the new value 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor); -> where it comes from as I did not manage to find it in the specification
There was a problem hiding this comment.
The solution with box-shadow was introduced before this change as if using border visual design cannot be achieved because the select and the dropdown icon (arrow down) border cannot stack on top of each other. Dropdown icon is inside the select and if use border - the border looks more thick because of parent-child stacking. This code achieved the border from visual design with box-shadow.
|
|
||
| .ui5-search-field-select[focused]::part(icon-wrapper) { | ||
| box-shadow: var(--sapField_Hover_Shadow); | ||
| } |
There was a problem hiding this comment.
Is it expected to not have styles applied for the search button icon when you hover over it?
There was a problem hiding this comment.
This styles are not for the search button icon as it does not have ::part(icon-wrapper).
3 participants
JIRA: BGSOFUIRILA-4275