feat(ui5-title): add new "size" property (#9327)

feat(ui5-title): add new "size" property
SAP · Jul 11, 2024 · 8e430e2 · 8e430e2
1 parent 0480e58
commit 8e430e2
Show file tree

Hide file tree

Showing 23 changed files with 58 additions and 56 deletions.
diff --git a/packages/main/src/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs
@@ -9,7 +9,7 @@
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
-			level="H5"
+			level="H1"
 			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
@@ -20,7 +20,7 @@
 				{{#if header.length }}
 					<slot name="header"></slot>
 				{{else}}
-					<h1 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h1>
+					<ui5-title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 				{{/if}}
 
 				{{#if resizable}}

diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
@@ -8,7 +8,7 @@
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h1 class="ui5-popup-header-text">{{headerText}}</h1>
+				<ui5-title level="H1" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 			{{/if}}
 		</header>
 	{{/if}}

diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -22,7 +22,7 @@
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
 						<ui5-title
-							level="H2"
+							level="H1"
 							wrapping-type="None"
 							class="ui5-popup-header-text ui5-responsive-popover-header-text"
 						>

diff --git a/packages/main/src/Title.hbs b/packages/main/src/Title.hbs
@@ -4,7 +4,7 @@
 				{{> titleInner}}
 		</h1>
 {{/if}}
-		
+
 {{#if h2}}
 		<h2
 			class="ui5-title-root">

diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
@@ -50,12 +50,23 @@ class Title extends UI5Element {
 	/**
 	 * Defines the component level.
 	 * Available options are: `"H6"` to `"H1"`.
+	 * This property does not influence the style of the component.
+	 * Use the property `size` for this purpose instead.
 	 * @default "H2"
 	 * @public
 	 */
 	@property()
 	level: `${TitleLevel}` = "H2";
 
+	/**
+	 * Defines the visual appearance of the title.
+	 * Available options are: `"H6"` to `"H1"`.
+	 * @default "H5"
+	 * @public
+	 */
+	@property()
+	size: `${TitleLevel}` = "H5";
+
 	get h1() {
 		return this.level === TitleLevel.H1;
 	}

diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
@@ -16,7 +16,7 @@
 		<div slot="header" class="ui5-responsive-popover-header">
 			<div class="row">
 				<ui5-title
-					level="H5"
+					level="H1"
 					wrapping-type="None"
 					class="ui5-responsive-popover-header-text"
 				>

diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -43,8 +43,6 @@
 .ui5-popup-footer-root,
 :host([header-text]) .ui5-popup-header-text {
     margin: 0;
-    font-size: 1rem;
-    font-family: "72override", var(--_ui5_popup_header_font_family);
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
@@ -6,7 +6,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
-	font-size: var(--sapFontHeader2Size);
+	font-size: var(--sapFontHeader5Size);
 	font-family: "72override", var(--sapFontHeaderFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }
@@ -48,32 +48,26 @@
 	text-shadow: inherit;
 }
 
-/* Level H1 */
-:host([level="H1"]) {
+:host([size="H1"]) {
 	font-size: var(--sapFontHeader1Size);
 }
 
-/* Level H2 */
-:host([level="H2"]) {
+:host([size="H2"]) {
 	font-size: var(--sapFontHeader2Size);
 }
 
-/* Level H3 */
-:host([level="H3"]) {
+:host([size="H3"]) {
 	font-size: var(--sapFontHeader3Size);
 }
 
-/* Level H4 */
-:host([level="H4"]) {
+:host([size="H4"]) {
 	font-size: var(--sapFontHeader4Size);
 }
 
-/* Level H5 */
-:host([level="H5"]) {
+:host([size="H5"]) {
 	font-size: var(--sapFontHeader5Size);
 }
 
-/* Level H6 */
-:host([level="H6"]) {
+:host([size="H6"]) {
 	font-size: var(--sapFontHeader6Size);
 }
diff --git a/packages/main/src/themes/base/PopupsCommon-parameters.css b/packages/main/src/themes/base/PopupsCommon-parameters.css
@@ -7,7 +7,6 @@
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
 	--_ui5_popup_header_font_weight: 400;
-	--_ui5_popup_header_font_family: var(--sapFontFamily);
 	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 	--_ui5_popup_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_popup_header_background: var(--sapPageHeader_Background);

diff --git a/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -150,7 +150,7 @@
 	<ui5-dialog id="dialog" accessible-name="Resizable" stretch>
 		<div slot="header">
 			<ui5-button id="header-button">focus stop</ui5-button>
-			<ui5-title id="tt" level="H1">Resizable</ui5-title>
+			<ui5-title level="H1" id="tt" level="H1">Resizable</ui5-title>
 
 		</div>
 

diff --git a/packages/main/test/pages/Kitchen.html b/packages/main/test/pages/Kitchen.html
@@ -76,11 +76,11 @@
 
 	<div id="main-content" class="main">
 		<section class="row heading-row-centered">
-			<ui5-title level="H1">UI5 webcomponents</ui5-title>
+			<ui5-title size="H1" level="H1">UI5 webcomponents</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered no-vertical-padding">
-			<ui5-title level="H3">For better experience, for Fiori3 experience</ui5-title>
+			<ui5-title size="H3" level="H3">For better experience, for Fiori3 experience</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered">
@@ -208,7 +208,7 @@
 			<ui5-button id="openPopoverButton">Open Popover</ui5-button>
 			<ui5-popover header-text="Popover" id="hello-popover">
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -224,7 +224,7 @@
 			<ui5-button id="openDialogButton">Open Dialog</ui5-button>
 			<ui5-dialog id="hello-dialog" header-text="Dialog">
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -239,7 +239,7 @@
 			<ui5-button id="openDialogStretched">Open Dialog Stretched</ui5-button>
 			<ui5-dialog id="hello-dialog2" header-text="Dialog" stretch>
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"

diff --git a/packages/main/test/pages/Kitchen.openui5.html b/packages/main/test/pages/Kitchen.openui5.html
@@ -71,11 +71,11 @@
 
 	<div id="main-content" class="main">
 		<section class="row heading-row-centered">
-			<ui5-title level="H1">UI5 webcomponents</ui5-title>
+			<ui5-title size="H1" level="H1">UI5 webcomponents</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered no-vertical-padding">
-			<ui5-title level="H3">For better experience, for Fiori3 experience</ui5-title>
+			<ui5-title size="H3" level="H3">For better experience, for Fiori3 experience</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered">
@@ -190,7 +190,7 @@
 			<ui5-button id="openPopoverButton">Open Popover</ui5-button>
 			<ui5-popover header-text="Popover" id="hello-popover">
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -206,7 +206,7 @@
 			<ui5-button id="openDialogButton">Open Dialog</ui5-button>
 			<ui5-dialog id="hello-dialog" header-text="Dialog">
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -221,7 +221,7 @@
 			<ui5-button id="openDialogStretched">Open Dialog Stretched</ui5-button>
 			<ui5-dialog id="hello-dialog2" header-text="Dialog" stretch>
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"

diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
@@ -17,20 +17,28 @@
 
 <body class="title1auto">
 	<section>
-		<ui5-title id="titleH1" level="H1">Title Level 1</ui5-title>
-		<ui5-title>Title Level Auto (2)</ui5-title>
-		<ui5-title id="titleH2" level="H2">Title Level 2</ui5-title>
-		<ui5-title id="titleH3" level="H3">Title Level 3</ui5-title>
-		<ui5-title id="titleH4" level="H4">Title Level 4</ui5-title>
-		<ui5-title id="titleH5" level="H5">Title Level 5</ui5-title>
-		<ui5-title id="titleH6" level="H6">Title Level 6</ui5-title>
+		<ui5-title id="titleH1" level="H1">Title Size 1</ui5-title>
+		<ui5-title>Title Size Auto (2)</ui5-title>
+		<ui5-title id="titleH2" level="H2">Title Size 2</ui5-title>
+		<ui5-title id="titleH3" level="H3">Title Size 3</ui5-title>
+		<ui5-title id="titleH4" level="H4">Title Size 4</ui5-title>
+		<ui5-title id="titleH5" level="H5">Title Size 5</ui5-title>
+		<ui5-title id="titleH6" level="H6">Title Size 6</ui5-title>
 		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
+		<br>
+		<ui5-title size="H1">Title Style 1</ui5-title>
+		<ui5-title size="H2">Title Style 2</ui5-title>
+		<ui5-title size="H3">Title Style 3</ui5-title>
+		<ui5-title size="H4">Title Style 4</ui5-title>
+		<ui5-title>Title Style Auto (5)</ui5-title>
+		<ui5-title size="H5">Title Style 5</ui5-title>
+		<ui5-title size="H6">Title Style 6</ui5-title>
 	</section>
 
 	<section class="wrapping">
 		<h2>Wrapping</h2>
-		<ui5-title level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
-		<ui5-title level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title size="H6" level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title size="H6" level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
 	</section>
 
 	<section>

diff --git a/packages/website/docs/_samples/main/Title/Basic/sample.html b/packages/website/docs/_samples/main/Title/Basic/sample.html
@@ -9,12 +9,12 @@
 <body style="background-color: var(--sapBackgroundColor)">
 <!-- playground-fold-end -->
 
-<ui5-title level="H1">Title</ui5-title>
-<ui5-title level="H2">Title</ui5-title>
-<ui5-title level="H3">Title</ui5-title>
-<ui5-title level="H4">Title</ui5-title>
-<ui5-title level="H5">Title</ui5-title>
-<ui5-title level="H6">Title</ui5-title>
+<ui5-title level="H1" size="H1">Title</ui5-title>
+<ui5-title level="H2" size="H2">Title</ui5-title>
+<ui5-title level="H3" size="H3">Title</ui5-title>
+<ui5-title level="H4" size="H4">Title</ui5-title>
+<ui5-title level="H5" size="H5">Title</ui5-title>
+<ui5-title level="H6" size="H6">Title</ui5-title>
 <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     				{{> titleInner}}
     		</h1>
     {{/if}}
     {{#if h2}}
     		<h2
     			class="ui5-title-root">
@@ Expand Down @@