Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-input): allow custom icon styling #8881

Merged
merged 10 commits into from
May 14, 2024
Merged

Conversation

elenastoyanovaa
Copy link
Contributor

@elenastoyanovaa elenastoyanovaa commented Apr 30, 2024

Reusable component styles

Introduce reusable css styles for input icons in order to be used by applications using icons in the input-type of components as a slot.

  • adapt existing component which used to add input-icon html attribute to reuse the input icon styling with the new inputIcon class.
  • reuse InputIcon.css in the Icon.module.css.

The approach is from #8182 .

FIXES: #6132

@ilhan007 ilhan007 added the 2.0 label May 13, 2024
@@ -16,26 +9,26 @@
border-radius: var(--_ui5_input_icon_border_radius);
}

[input-icon][pressed] {
.inputIcon [pressed] {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.inputIcon [pressed]

should be without space, otherwise it won't match the icon as expected

.inputIcon[pressed]

@elenastoyanovaa elenastoyanovaa merged commit cf9f1c2 into main May 14, 2024
10 checks passed
@elenastoyanovaa elenastoyanovaa deleted the input-icon-common-css branch May 14, 2024 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Harmonize input icons style
4 participants