-
Notifications
You must be signed in to change notification settings - Fork 273
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): add parts to support css customization #9590
Conversation
Thanks for helping us earlier in #8917. We have another scenario that need applying customized css styling on ui5-input. I have tested that adding these part attribute allowed the customized css to be applied successfully. Could you or your colleague review this PR and let me know if this PR needs any improvement to be accepted? |
Hi @SAP/ui5-webcomponents-topic-rl can you review this PR, it adds two shadow parts to make things more customisable from outside. If you have further questions, you can also follow up internally with the author. p.s. the build is not failing because of this change |
The default css class for focus is "ui5-input-focusable-element". This css class is added to the root div. Our UI design requires a rounded border on ui5-input. When ui5-input is clicked, the default focused blue border is shown over our rounded border, but these two border do not perfectly overlay, and user could see both. Therefore, customizing the root <div> is required in our case to make the focused border fit the new border radius design. I have seen other ui5 webcomponents using part="root". E.g. https://github.com/SAP/ui5-webcomponents/blob/main/packages/main/src/Card.hbs#L5 |
Colleagues @ivoplashkov @elenastoyanovaa @hristop @MapTo0 the PR looks fine to me, root is something that we will always have, native input as well, and the clear icon also seems integral part. So I think we can merge this PR, from my side +1 |
@slin-sap can you update the PR with the main branch - the failing build was fixed in the meantime. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @slin-sap
you have to list them in the component's overview with @csspart
in the Input.ts
:
/**
* ...
* @csspart root - some description
* @csspart input - some description
* @csspart clear-icon - some description
* @constructor
* @extends UI5Element
* @public
*/
@customElement({
tag: "ui5-input",
@ilhan007 Please check the updated file with csspart decorators added. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@slin-sap The PR is approved, you can merge it :)
@slin-sap this has been released with 2.2.0 |
PR checklist
Check the Development Hints
Follow the Commit message Guidelines
For example:
fix(ui5-*): correct/fix sth
orfeat(ui5-*): add/introduce sth
. If you don't want the change to be part of the release changelog - usechore
,refactor
ordocs
.Added 3
part
attributes to elements in ui5-input shadow dom, in order to support css customization on ui5-input. Namely:part: "root"
E.g. When border-radius is changed, this makes sure focused style can be adjusted as well with same border radius.part: "input"
E.g. customize color of placeholder text,part: "clear-icon"
E.g. customize color of built-in close icon.Use
Fixes: {#PR_NUMBER}
to close the issue automatically when the PR is mergedor
Related to: {#PR_NUMBER}
to just create a link between the PR and the issue.