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): add parts to support css customization #9590

Merged
merged 10 commits into from
Aug 8, 2024

Conversation

slin-sap
Copy link
Contributor

PR checklist

For example: fix(ui5-*): correct/fix sth or feat(ui5-*): add/introduce sth. If you don't want the change to be part of the release changelog - use chore, refactor or docs.

  • Add proper description about the background of the change and the change itself

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.

  • Link to an existing issue (if available)

Use Fixes: {#PR_NUMBER} to close the issue automatically when the PR is merged
or Related to: {#PR_NUMBER} to just create a link between the PR and the issue.

Sorry, something went wrong.

Copy link

cla-assistant bot commented Jul 30, 2024

CLA assistant check
All committers have signed the CLA.

@slin-sap
Copy link
Contributor Author

@ilhan007

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?

@ilhan007
Copy link
Member

ilhan007 commented Jul 31, 2024

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

@slin-sap
Copy link
Contributor Author

slin-sap commented Aug 1, 2024

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

@ilhan007
Copy link
Member

ilhan007 commented Aug 6, 2024

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

@ilhan007
Copy link
Member

ilhan007 commented Aug 6, 2024

@slin-sap can you update the PR with the main branch - the failing build was fixed in the meantime.

Copy link
Member

@ilhan007 ilhan007 left a 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",

@slin-sap
Copy link
Contributor Author

slin-sap commented Aug 8, 2024

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.

@hristop hristop requested a review from simonarangelova August 8, 2024 05:45
Copy link
Contributor

@hristop hristop left a 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 :)

@ilhan007 ilhan007 merged commit 8260c47 into SAP:main Aug 8, 2024
10 checks passed
@ilhan007 ilhan007 changed the title fix(ui5-input): add parts to support css customization feat(ui5-input): add parts to support css customization Aug 8, 2024
@ilhan007
Copy link
Member

ilhan007 commented Sep 3, 2024

@slin-sap this has been released with 2.2.0

@ilhan007 ilhan007 added this to the 2.2.0 milestone Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants