[Feature Request]: Styling of only a particular class of ui5-select popovers

stoehr commented 1 year ago

Feature Request Description

When styling UI5 Web Components, https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-customizing-styles--docs documents two approaches: “Usage of Shadow Parts” and “Changing CSS Vars”. In the case of styling only a particular class of ui5-select elements, that is possible by defining CSS variables that are scoped to the elements with a particular class name. For example, if the class name is “specialSelect”, and the elements are defined like <ui5-select class=“specialSelect”>, then a CSS rule like the following would limit the CSS variable overrides to just these elements who are in the class — and note that in this example, we’re overriding the --sapField_TextColor so that the foreground color of the ui5-select instances would be red:

.specialSelect {
  --sapField_TextColor: red;
}

However, for the ui5-select popovers that are shown within the ui5-static-area-item elements, this approach does not work, because the popovers that are defined within these separate ui5-static-area-item elements are outside of the ui5-select elements, and so there are no associations between the class attributes of the ui5-select elements, and their popovers’ ui5-static-area-item elements. If the ui5-static-area-item instances were also given the “specialSelect” class names on them, and the aforementioned example CSS rule added a --sapTextColor: red so that the ui5-select popovers’ list items’ foreground colors would be red, then the styling of the ui5-select popovers could also be customized via the CSS variables overridden within the scope of the popovers:

.specialSelect {
  --sapField_TextColor: red;
  --sapTextColor: red;
}

Proposed Solution

Have the ui5-select elements propagate their class attribute values to their popovers’ corresponding ui5-static-area-item elements -- or add a new attribute to the ui5-select elements whose values can be used in the class attributes of the popover's corresponding ui5-static-area-item elements -- so that the CSS variables of the ui5-select popovers can also be overridden (similarly to how the CSS variables of the ui5-select elements themselves can be overridden).

Proposed Alternatives

The only current alternative is to override CSS variables for a much wider group of elements, by using CSS selectors like [ui5-static-area-item]. However, these CSS selectors won't necessarily limit the selection to ui5-select popovers, nor would they limit the select to a particular class of ui5-select elements' popovers -- which is precisely the feature request of this ticket.

Organization

SAP SuccessFactors

Additional Context

To reproduce what is described in this ticket, do the following:

Go to https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-select--docs

Add the following to the iframe of the Storybook:

<style>
.specialSelect {
--sapField_TextColor: red;
--sapTextColor: red;
}
</style>

Add the specialSelect class to the <ui5-select value-state="Success"> ui5-select element in the https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-select--docs#value-state section, which has the "Apple" as the first selected item. And then notice that the main foreground color for that ui5-select element becomes red.
Open the ui5-select element's popover, and notice that the items within the popover do not have a foreground color of red.
Find the popover's corresponding <ui5-static-area-item>, and add the specialSelect class. Then, notice that the items within the popover now have a foreground color of red.

Priority

None

Privacy Policy

[X] I’m not disclosing any internal or sensitive information.

ilhan007 commented 1 year ago

Hello @stoehr we are currently working on prototype https://github.com/SAP/ui5-webcomponents/pull/7447 to allow significant customisation of the options (more than pure re-styling). If we decide to productise the POC, your use-case will be covered as well.

In the next week, we will probably know to go with the proposed solution, so we will keep you update on the progress.

vladitasev commented 1 year ago

Hello, @stoehr

This is possible already today. You can set a data-ui5-static-stable attribute to any UI5 Web Component, and if it has a static area item, it will have a corresponding data-ui5-stable attribute by which you can target it.

Example:

<style>
    [data-ui5-stable="select1"] {
        --sapField_TextColor: red;
        --sapTextColor: red;
    }
</style>

<ui5-select data-ui5-static-stable="select1">
    <ui5-option>1</ui5-option>
    <ui5-option>2</ui5-option>
</ui5-select>

Then we'll have:

and the result is:

Let me know if this worked out for you.

BR, Vladi

github-actions[bot] commented 11 months ago

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

github-actions[bot] commented 11 months ago

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.

stoehr commented 11 months ago

Hello, @stoehr

This is possible already today. You can set a data-ui5-static-stable attribute to any UI5 Web Component, and if it has a static area item, it will have a corresponding data-ui5-stable attribute by which you can target it.

@vladitasev, @BennyHuang gave this a try, and it worked for us. Thanks!

SAP / ui5-webcomponents