Skip to content

Commit 9e7b8d5

Browse files
leanneriverajbadan
leannerivera
authored and
jbadan
committed
fix: default header changed for components (#1367)
1 parent 5fd0570 commit 9e7b8d5

41 files changed

Lines changed: 990 additions & 248 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/_data/strings.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
# placed here for translation purposes
2+
headerDisclaimer: Although the following examples use the `<h3>` tag for the title element, the styling provided by Fiori Fundamentals will remain consistent for any heading level used. `<h1>` should be reserved for the page title.
23
search_placeholder_text: search...
3-
search_no_results_text: No results found
4+
search_no_results_text: No results found

‎docs/_includes/demo-page-components/app-sidebar-content.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
</ul>
8585
</div>
8686
<div class="fd-side-nav__group">
87-
<h1 class="fd-side-nav__title">Group</h1>
87+
<h3 class="fd-side-nav__title">Group</h3>
8888
<ul class="fd-side-nav__list">
8989
<li class="fd-side-nav__item">
9090
<a class="fd-side-nav__link" href="#">
@@ -107,9 +107,9 @@ <h1 class="fd-side-nav__title">Group</h1>
107107
<header class="fd-page__header">
108108
<div class="fd-action-bar">
109109
<div class="fd-action-bar__header">
110-
<h1 class="fd-action-bar__title">
110+
<h3 class="fd-action-bar__title">
111111
Page Title
112-
</h1>
112+
</h3>
113113
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
114114
</div>
115115
<div class="fd-action-bar__actions">

‎docs/_includes/demo-page-components/fd-page__header.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<header class="fd-page__header">
22
<div class="fd-action-bar">
33
<div class="fd-action-bar__header">
4-
<h1 class="fd-action-bar__title">
4+
<h3 class="fd-action-bar__title">
55
{{ include.title }}
6-
</h1>
6+
</h3>
77
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
88
</div>
99
{% if include.hide-add-btn != "true" %}

‎docs/_includes/demo-page-components/modal-app-overlay.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="fd-modal" role="dialog">
33
<div class="fd-modal__content" role="document">
44
<header class="fd-modal__header">
5-
<h1 class="fd-modal__title">Modal Header</h1>
5+
<h3 class="fd-modal__title">Modal Header</h3>
66
<button class="fd-button--light fd-modal__close"></button>
77
</header>
88
<div class="fd-modal__body">

‎docs/_includes/demo-page-components/table-page-content.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<section class="fd-section">
33
<div class="fd-panel">
44
<div class="fd-panel__header">
5-
<h1 class="fd-panel__title">
5+
<h3 class="fd-panel__title">
66
Items (1180)
7-
</h1>
7+
</h3>
88
<div class="fd-panel__actions">
99
<div class="fd-dropdown">
1010
<div class="fd-popover">

‎docs/_includes/demo-page-components/tile-page-content.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<section class="fd-section">
33
<div class="fd-panel">
44
<div class="fd-panel__header">
5-
<h1 class="fd-panel__title">
5+
<h3 class="fd-panel__title">
66
Items (18)
7-
</h1>
7+
</h3>
88
<div class="fd-panel__actions">
99
<button class="fd-button--compact fd-button--standard sap-icon--search" aria-label="Search"></button>
1010
<div class="fd-button-group" role="group" aria-label="Show as">
@@ -20,7 +20,7 @@ <h1 class="fd-panel__title">
2020
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
2121
</div>
2222
<div class="fd-tile__content">
23-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
23+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
2424
<p>
2525
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
2626
Active
@@ -36,7 +36,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
3636
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
3737
</div>
3838
<div class="fd-tile__content">
39-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
39+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
4040
<p>
4141
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
4242
Active
@@ -52,7 +52,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
5252
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
5353
</div>
5454
<div class="fd-tile__content">
55-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
55+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
5656
<p>
5757
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
5858
Active
@@ -68,7 +68,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
6868
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
6969
</div>
7070
<div class="fd-tile__content">
71-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
71+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
7272
<p>
7373
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
7474
Active
@@ -84,7 +84,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
8484
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
8585
</div>
8686
<div class="fd-tile__content">
87-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
87+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
8888
<p>
8989
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
9090
Active
@@ -100,7 +100,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
100100
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
101101
</div>
102102
<div class="fd-tile__content">
103-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
103+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
104104
<p>
105105
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
106106
Active
@@ -116,7 +116,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
116116
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
117117
</div>
118118
<div class="fd-tile__content">
119-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
119+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
120120
<p>
121121
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
122122
Active
@@ -132,7 +132,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
132132
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
133133
</div>
134134
<div class="fd-tile__content">
135-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
135+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
136136
<p>
137137
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
138138
Active
@@ -148,7 +148,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
148148
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
149149
</div>
150150
<div class="fd-tile__content">
151-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
151+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
152152
<p>
153153
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
154154
Active
@@ -164,7 +164,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
164164
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
165165
</div>
166166
<div class="fd-tile__content">
167-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
167+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
168168
<p>
169169
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
170170
Active
@@ -180,7 +180,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
180180
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
181181
</div>
182182
<div class="fd-tile__content">
183-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
183+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
184184
<p>
185185
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
186186
Active
@@ -196,7 +196,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
196196
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
197197
</div>
198198
<div class="fd-tile__content">
199-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
199+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
200200
<p>
201201
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
202202
Active
@@ -212,7 +212,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
212212
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
213213
</div>
214214
<div class="fd-tile__content">
215-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
215+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
216216
<p>
217217
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
218218
Active
@@ -228,7 +228,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
228228
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
229229
</div>
230230
<div class="fd-tile__content">
231-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
231+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
232232
<p>
233233
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
234234
Active
@@ -244,7 +244,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
244244
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
245245
</div>
246246
<div class="fd-tile__content">
247-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
247+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
248248
<p>
249249
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
250250
Active
@@ -260,7 +260,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
260260
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
261261
</div>
262262
<div class="fd-tile__content">
263-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
263+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
264264
<p>
265265
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
266266
Active
@@ -276,7 +276,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
276276
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
277277
</div>
278278
<div class="fd-tile__content">
279-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
279+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
280280
<p>
281281
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
282282
Active
@@ -292,7 +292,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
292292
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
293293
</div>
294294
<div class="fd-tile__content">
295-
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
295+
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
296296
<p>
297297
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
298298
Active

‎docs/_includes/demo-page-components/tree-page-content.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<section class="fd-section">
33
<div class="fd-panel">
44
<div class="fd-panel__header">
5-
<h1 class="fd-panel__title">
5+
<h3 class="fd-panel__title">
66
Categories
7-
</h1>
7+
</h3>
88
</div>
99
<div class="fd-panel__body fd-panel__body--bleed">
1010
<div class="fd-tree fd-tree--header">

‎docs/pages/components/action-bar.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ The Action Bar is located at the top of the page and is used for the following:
1313
- Page title
1414
- Main Actions for the page
1515

16-
<br>
16+
> {{ site.data.strings.headerDisclaimer }}
17+
1718

1819
## Action bar with back button, description and action buttons.
1920
{% capture default-action-bar %}
@@ -22,9 +23,9 @@ The Action Bar is located at the top of the page and is used for the following:
2223
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
2324
</div>
2425
<div class="fd-action-bar__header">
25-
<h1 class="fd-action-bar__title">
26+
<h3 class="fd-action-bar__title">
2627
Page Title
27-
</h1>
28+
</h3>
2829
<p class="fd-action-bar__description">Action bar Description </p>
2930
</div>
3031
<div class="fd-action-bar__actions">
@@ -42,9 +43,9 @@ The Action Bar is located at the top of the page and is used for the following:
4243
{% capture default-action-bar-multi %}
4344
<div class="fd-action-bar">
4445
<div class="fd-action-bar__header">
45-
<h1 class="fd-action-bar__title">
46+
<h3 class="fd-action-bar__title">
4647
Page Title
47-
</h1>
48+
</h3>
4849
<p class="fd-action-bar__description">Action bar Description </p>
4950
</div>
5051
<div class="fd-action-bar__actions">
@@ -65,9 +66,9 @@ When there are several main actions for a page, consider displaying them under a
6566
{% capture default-action-bar-menu %}
6667
<div class="fd-action-bar">
6768
<div class="fd-action-bar__header">
68-
<h1 class="fd-action-bar__title">
69+
<h3 class="fd-action-bar__title">
6970
Page Title
70-
</h1>
71+
</h3>
7172
</div>
7273
<div class="fd-action-bar__actions">
7374
<div class="fd-popover">
@@ -98,15 +99,15 @@ When there are several main actions for a page, consider displaying them under a
9899
## Action bar mobile view
99100

100101
{% capture default-action-bar-multi %}
101-
<div style="width:319px">
102+
<div style="width:319px;">
102103
<div class="fd-action-bar">
103104
<div class="fd-action-bar__back">
104105
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
105106
</div>
106107
<div class="fd-action-bar__header">
107-
<h1 class="fd-action-bar__title">
108+
<h3 class="fd-action-bar__title">
108109
Action Bar with description and back button
109-
</h1>
110+
</h3>
110111
</div>
111112
<div class="fd-action-bar__actions">
112113
<div class="fd-popover">

‎docs/pages/components/contextual-menu.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Implementation Guidelines:
2121
- Opening one menu should close all other menus
2222
- Clicking away from the menu should also close the menu
2323

24-
<br>
24+
> {{ site.data.strings.headerDisclaimer }}
2525
2626
## With Icon
2727
{% capture default-contextualmenu %}
@@ -59,7 +59,7 @@ Implementation Guidelines:
5959
<li><a href="#" class="fd-menu__item">Option 3</a></li>
6060
</ul>
6161
<div class="fd-menu__group">
62-
<h1 class="fd-menu__title">Group Header</h1>
62+
<h3 class="fd-menu__title">Group Header</h3>
6363
<ul class="fd-menu__list">
6464
<li><a href="#" class="fd-menu__item">Option 4</a></li>
6565
<li><a href="#" class="fd-menu__item">Option 5</a></li>

‎docs/pages/components/loading-spinner.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ A loading spinner informs the user of an ongoing operation. Only one busy indica
1414
The aria-hidden attribute is used to hide and show the element.
1515
Loading indicators are not visible all the time, only when needed. To show and hide the loading indicator the `aria-hidden` attribute is used to hide/show the element.
1616

17-
<br>
17+
> {{ site.data.strings.headerDisclaimer }}
1818
1919
## Loader element
2020

@@ -41,7 +41,7 @@ The spinner should be included inside the container. Visibility can be toggled i
4141
<div></div>
4242
</div>
4343
<div class="fd-panel__header">
44-
<h1 class="fd-panel__title">Lorem ipsum</h1>
44+
<h3 class="fd-panel__title">Lorem ipsum</h3>
4545
</div>
4646
<!-- Loaded content goes here -->
4747
<div class="fd-panel__footer">

0 commit comments

Comments
 (0)