Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Jul 11, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1f1fd11
feature(ui5-title): add new titleStyle property
TeodorTaushanov Jun 27, 2024
44a5c6f
Merge remote-tracking branch 'origin/main' into title_titlestyle_prop…
TeodorTaushanov Jun 28, 2024
a47a0e2
chore: fix test
TeodorTaushanov Jun 28, 2024
cbe3ee3
chore: change default font size
TeodorTaushanov Jun 28, 2024
5943d79
Merge remote-tracking branch 'origin/main' into title_titlestyle_prop…
TeodorTaushanov Jul 2, 2024
6890556
chore: change property name
TeodorTaushanov Jul 2, 2024
3c2566f
Merge remote-tracking branch 'origin/main' into title_titlestyle_prop…
TeodorTaushanov Jul 4, 2024
492b538
chore: address code review comments
TeodorTaushanov Jul 4, 2024
9e79cee
chore: adapt components which uses ui5-title
TeodorTaushanov Jul 4, 2024
b41be98
Merge remote-tracking branch 'origin/main' into title_titlestyle_prop…
TeodorTaushanov Jul 5, 2024
19b8115
chore: adapt dialog and popover templates to use ui5-title
TeodorTaushanov Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/ColorPalettePopover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
>
<div slot="header" class="ui5-cp-header">
<ui5-title
level="H5"
level="H1"
wrapping-type="None"
>{{_colorPaletteTitle}}</ui5-title>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Dialog.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you have to describe ui5-title as dependency of ui5-dialog

{{/if}}

{{#if resizable}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Popover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ResponsivePopover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Title.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{{> titleInner}}
</h1>
{{/if}}

{{#if h2}}
<h2
class="ui5-title-root">
Expand Down
11 changes: 11 additions & 0 deletions packages/main/src/Title.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TokenizerPopover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 0 additions & 2 deletions packages/main/src/themes/PopupsCommon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
TeodorTaushanov marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
justify-content: center;
align-items: center;
Expand Down
20 changes: 7 additions & 13 deletions packages/main/src/themes/Title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
1 change: 0 additions & 1 deletion packages/main/src/themes/base/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "../base/PopupsCommon-parameters.css";

:root {
--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
--_ui5_popup_border_radius: 0.5rem;
}
2 changes: 1 addition & 1 deletion packages/main/test/pages/Dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
10 changes: 5 additions & 5 deletions packages/main/test/pages/Kitchen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions packages/main/test/pages/Kitchen.openui5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
26 changes: 17 additions & 9 deletions packages/main/test/pages/Title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
TeodorTaushanov marked this conversation as resolved.
Show resolved Hide resolved
</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>
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/main/Title/Basic/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down