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

[ilhan007]

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

• I’m not disclosing any internal or sensitive information.

[hristop]

Internal BLI created: BGSOFUIRILA-3814

[s-todorova]

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

Siyana

[dobrinyonkov]

Completed with #8423 for team p. Part icon added.

[PlutaKatarzyna]

Confirm that all issued here were resolved. Thank you.

[ilhan007]

Thank you for checking, Kate!