refactor(ui5-input): style icon slot content by default #8995
Conversation
|
looks good to me |
| @@ -524,6 +524,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement | |||
|
|
|||
| /** | |||
| * Defines the icon to be displayed in the component. | |||
| * | |||
| * **Note:** It is recommended to hide the icon when the component is in readonly state | |||
There was a problem hiding this comment.
IMO there will also be cases for users to add decorative icons intentionally (to serve as a visual label) and this statement is not okay in the case. Better to try to fix the issues for the readonly case than restrict the user.
packages/main/src/themes/Input.css
Outdated
| @@ -1,5 +1,6 @@ | |||
| @import "./FormComponents.css"; | |||
| @import "./InvisibleTextStyles.css"; | |||
| @import "./InputSharedStyles.css"; | |||
There was a problem hiding this comment.
This is a big change and my opinion on that is that it should not be done here as part of the icon styling as it does not have have a direct relationship. No need to complicate the change and have the risk of potentially introducing issues in all inputs for the release as it would be impossible to test all input components thoroughly in a short matter.
It is the correct way to go, but not as a 2.0 change.
There was a problem hiding this comment.
I though it would be good since we are doing "css refactoring" somehow by moving all icon related styles to separate file. Basically the file contain only 1:1 css code that is duplicated in both files (Input.css and InputSharedStyles.css). If you do global search in your IDE for the file content of InputSharedStyles it will match the content in Input.css.
packages/main/src/themes/Input.css
Outdated
| } | ||
|
|
||
| /* |
| --_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem; | ||
| --_ui5_input_error_warning_custom_focused_icon_padding: .1875rem .5rem; | ||
| --_ui5_input_information_error_warning_custom_icon_padding: .1875rem .5rem; | ||
| --_ui5_input_information_error_warning_custom_focused_icon_padding: .1875rem .5rem; | ||
| --_ui5_input_information_custom_icon_padding: .1875rem .5rem; |
There was a problem hiding this comment.
_ui5_input_information_custom_icon_padding has different values from the error and warning ones in the high-contrast Fiori 3 themes.
Also as it is, both --_ui5_input_information_custom_icon_padding and --_ui5_input_information_custom_focused_icon_padding params are not used anywhere
Icon styles related to the `ui5-input` component will now be implemented by enhancing slotted elements (see: #8995). This change eliminates the need for CSS modules setup, as there are no remaining candidates requiring this approach. Additionally, the configuration to use CSS modules in somed technologies is excluded by default, making the setup process more complex (e.g., requiring specific configurations for webpack or other bundlers). In most cases, such styles are intended to be utilized via CDN if available, further reducing the necessity for CSS modules.
With this change, all icons slotted inside
iconslot ofui5-inputare visually enhanced for hover/pressed state by default.Related to: #8461