[ViewSettingsDialog | header | reset button]: The reset button text color of the ViewSettingsDialog header cannot be overridden because UI5-Dialog is enscapulated in shadow DOM.

[hkshetry]

Bug Description

The reset button text color of the ViewSettingsDialog header cannot be overridden because UI5-Dialog is enscapulated in shadow DOM. Following this CSS rule stops working in the new version of the UI5 Web component React.

[ui5-dialog]::part(header) {
--sapButton_Lite_TextColor: green;
}

https://ui5.github.io/webcomponents-react/v2/?path=/docs/modals-popovers-viewsettingsdialog--docs

Affected Component

No response

Expected Behaviour

The Reset button in the ViewSettingsDialog header should support theming. Only the text color of this button in the dialog header needs to be updated.

Isolated Example

No response

Steps to Reproduce

1.https://ui5.github.io/webcomponents-react/v2/?path=/docs/modals-popovers-viewsettingsdialog--docs
2. click show ViewSetting button
3. inspect reset button and try to override css of button

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

v2.15.0

Browser

Chrome

Operating System

all

Additional Context

No response

Organization

sf

Declaration

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

[hinzzx]

Hi @UI5/ui5-team-ctr-bal,

The reporter would like to have a CSS Part, enabling them to style the text of the Reset Button of the ui5-view-settings-dialog. Could you please check if it is feastible ?

Best, Stoyan

[tsanislavgatev]

Hello @hkshetry ,

Can I ask in which version and project you were able to overstyle the button? As the ui5-dialog should've always been a part of the shadow dom of the ui5-view-settings-dialog?

Best Regards,
Tsanislav