feat(ui5-bar): change part to header

Author: tsanislavgatev

packages/fiori/src/ViewSettingsDialog.ts

@@ -114,7 +114,7 @@ type VSDInternalSettings = {
  * @extends UI5Element
  * @since 1.0.0-rc.16
  * @public
- * @csspart reset-button - Used to style the reset button in the header.
+ * @csspart header - Used to style the header.
  */
 @customElement({
 	tag: "ui5-view-settings-dialog",

packages/fiori/src/ViewSettingsDialogTemplate.tsx

@@ -16,7 +16,7 @@ import type ViewSettingsDialog from "./ViewSettingsDialog.js";
 function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) {
 	return (
 		<div slot="header" class="ui5-vsd-header">
-			<div class="ui5-vsd-header-container">
+			<div class="ui5-vsd-header-container" part="header">
 				<div class="ui5-vsd-header-start">
 					{this.showBackButton && (
 						<Button
@@ -36,7 +36,6 @@ function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) {
 				<div class="ui5-vsd-header-end">
 					<Button
 						design="Transparent"
-						part="reset-button"
 						onClick={this._resetSettings}
 						disabled={this._disableResetButton}
 					>{this._resetButtonLabel}</Button>

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -13,8 +13,8 @@
 	</script>
 
 	<style>
-		#vsdGroup::part(reset-button) {
-			background-color: pink;
+		#vsd::part(header) {
+			--sapButton_Lite_TextColor: pink;
 		}
 	</style>