[Feature Request]: add CSS Variables or other means to allow customization of certain parts of CheckBox, Radio, RangeSlider, Dialog

ilhan007 commented 9 months ago

Feature Request Description

This issue is created on behalf of SAP Brand colleagues that would like to be able to customize certain parts of the following components. Usually this can be done by either using shadow parts, that we provide, or by overwriting CSS vars that we use internally. Introducing parts is recommended, more clean, as the alternative would be to create new css vars, that should be declared in the component-parameter.css file. The only thing to pay attention when it comes to parts, is that we have to carefully see the DOM elements, that needs to be customised, and to introduce parts where it makes sense - f.e. not on every span or div that we may have, but on certain semantic elements that are integral part of the component. And, the use-case. is not suitable for part, then we have to go for the alternative.

Task

Analyse the internal DOM elements that are requested for customisation and see if (1) exposing ShadowPart is reasonable or if not (2) exposing new variables would be better.

ui5-checkbox

checkmark color on hover We would like to customize the checkmark (both the tick mark and the indeterminate rectangle) color on hover. Currently --sapField_TextColor is used.
readonly checkmark color
We would like to customize the checkmark color (both the tick mark and the indeterminate rectangle) when readonly. Currently --sapField_TextColor is used.

ui5-radio-button

inner ring color on hover
outer ring error state color .ui5-radio-svg-outer element color for state Error can't be customized, currently it uses SAP base param--sapField_InvalidColor
outer ring success state color .ui5-radio-svg-outer element color for state Success can't be customized, currently it uses SAP Base param --sapField_SuccessColor

ui5-range-slider

handle icon when active/focus "display" property It has css variable , but it is overwrite with display: none ( .ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus [slider-icon] )

ui5-dialog

backdrop (.ui-block-layer) opacity

Proposed Solution

Analyze the internal DOM elements that are requested for customisation and see if (1) exposing ShadowPart is reasonable or if not (2) exposing new variables would be better.

Proposed Alternatives

No response

Organization

SAP Brand

Additional Context

No response

Priority

None

Privacy Policy

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

hristop commented 7 months ago

Internal BLI created: BGSOFUIRILA-3814

s-todorova commented 7 months ago

Hi @ilhan007, Completed for Team Rodopi with PR#8347

Siyana

dobrinyonkov commented 6 months ago

Completed with https://github.com/SAP/ui5-webcomponents/pull/8423 for team p. Part icon added.

PlutaKatarzyna commented 3 months ago

Confirm that all issued here were resolved. Thank you.

ilhan007 commented 3 months ago

Thank you for checking, Kate!

SAP / ui5-webcomponents