fix(ui-library): add hover state to the icon and password icon in pas… #295
Conversation
There was a problem hiding this comment.
Just a few small things I noticed:
- In forms.css.js, on line 32, could we change the border colour to use the Hover state? I think it will remain the same colour but at least we have the ability to change the hover colour if or when the tokens change
- I think we need to add different styles for the states for the password icon. For example hover, readonly, disabled etc...
- We need to style the password eye icon so that it gets a darker shade of grey when the input field is hovered. You can do this using the sibling selector in CSS (use the + symbol). This might be a little tedious to get the right syntax for scss but give it a try and reach out to me if you have any issues
There was a problem hiding this comment.
On line 50 of forms.css.js, after the :hover rules, you can add something like this to modify a sibling element:
&:hover + .blr-input-icon { color: ${InputIcon.Hover}; }
Then on line 190 you can add a second hover state so that the icon will remain in that hover state when the cursor switches from the text input field to the icon:
&:hover { color: ${InputIcon.Hover}; }
However, starting from line 220, you will have some conflicts that will undo the hover states that you added. You may need to refactor this or remove it entirely. I don't think you will need a hover state when it is disabled or readonly, so you may need to add a rule similar to this:
&:not(:disabled, [readonly]) {
Take a look at the checkbox or radio css files for more details on how to implement it
|
With the latest push,
|
| @@ -208,6 +217,12 @@ export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThem | |||
| right: ${Select.LG.IconPaddingRight}; | |||
| } | |||
| } | |||
|
|
|||
| &:hover { | |||
| & input:not(:disabled) + .blr-input-icon { | |||
There was a problem hiding this comment.
I know this is a little messy, but we need one more condition to check that no error is present. Otherwise the hover state will be applied to when there is an error
I think this will resolve it:
& input:not(:disabled, .error) + .blr-input-icon {
#222