Skip to content

fix: default header changed for components #1367

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

Merged
jbadan merged 11 commits into from
Apr 4, 2019
Merged

fix: default header changed for components #1367

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fc98b65
default header changed for menu, mega menu, modal, panel, sidenav, ac…
leannerivera Apr 1, 2019
e2243e1
minor indent fixes
leannerivera Apr 1, 2019
a5adc0e
fix action-bar.md syntax error
leannerivera Apr 2, 2019
dbeead9
docs updated correctly
leannerivera Apr 2, 2019
d54b3ee
panel h3 header blurb added
leannerivera Apr 2, 2019
3e62bfe
components that were also using other components have their headers n…
leannerivera Apr 2, 2019
9d22835
update tile and docs pages, new examples in test pages
jbadan Apr 3, 2019
62633d3
replace header note with variable
jbadan Apr 3, 2019
8d4e9f0
replace if statement with variable
jbadan Apr 4, 2019
07da7f1
missed modal
jbadan Apr 4, 2019
80251ed
more disclaimer headings on pages
jbadan Apr 4, 2019
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
3 changes: 2 additions & 1 deletion docs/_data/strings.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# placed here for translation purposes
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.
search_placeholder_text: search...
search_no_results_text: No results found
search_no_results_text: No results found
6 changes: 3 additions & 3 deletions docs/_includes/demo-page-components/app-sidebar-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
</ul>
</div>
<div class="fd-side-nav__group">
<h1 class="fd-side-nav__title">Group</h1>
<h3 class="fd-side-nav__title">Group</h3>
<ul class="fd-side-nav__list">
<li class="fd-side-nav__item">
<a class="fd-side-nav__link" href="#">
Expand All @@ -107,9 +107,9 @@ <h1 class="fd-side-nav__title">Group</h1>
<header class="fd-page__header">
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
</div>
<div class="fd-action-bar__actions">
Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/demo-page-components/fd-page__header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<header class="fd-page__header">
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
{{ include.title }}
</h1>
</h3>
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
</div>
{% if include.hide-add-btn != "true" %}
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/demo-page-components/modal-app-overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="fd-modal" role="dialog">
<div class="fd-modal__content" role="document">
<header class="fd-modal__header">
<h1 class="fd-modal__title">Modal Header</h1>
<h3 class="fd-modal__title">Modal Header</h3>
<button class="fd-button--light fd-modal__close"></button>
</header>
<div class="fd-modal__body">
Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/demo-page-components/table-page-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<section class="fd-section">
<div class="fd-panel">
<div class="fd-panel__header">
<h1 class="fd-panel__title">
<h3 class="fd-panel__title">
Items (1180)
</h1>
</h3>
<div class="fd-panel__actions">
<div class="fd-dropdown">
<div class="fd-popover">
Expand Down
40 changes: 20 additions & 20 deletions docs/_includes/demo-page-components/tile-page-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<section class="fd-section">
<div class="fd-panel">
<div class="fd-panel__header">
<h1 class="fd-panel__title">
<h3 class="fd-panel__title">
Items (18)
</h1>
</h3>
<div class="fd-panel__actions">
<button class="fd-button--compact fd-button--standard sap-icon--search" aria-label="Search"></button>
<div class="fd-button-group" role="group" aria-label="Show as">
Expand All @@ -20,7 +20,7 @@ <h1 class="fd-panel__title">
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -36,7 +36,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -52,7 +52,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -68,7 +68,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -84,7 +84,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -100,7 +100,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -116,7 +116,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -132,7 +132,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -148,7 +148,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -164,7 +164,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -180,7 +180,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -196,7 +196,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -212,7 +212,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -228,7 +228,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -244,7 +244,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -260,7 +260,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -276,7 +276,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand All @@ -292,7 +292,7 @@ <h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<span class=" fd-identifier--m sap-icon--person-placeholder fd-has-background-color-accent-1"></span>
</div>
<div class="fd-tile__content">
<h2 class="fd-tile__title">Lorem ipsum</h2><p>Second line</p>
<h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
<p>
<span class="fd-badge fd-badge--success fd-badge--filled fd-sap-icon--accept">
Active
Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/demo-page-components/tree-page-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<section class="fd-section">
<div class="fd-panel">
<div class="fd-panel__header">
<h1 class="fd-panel__title">
<h3 class="fd-panel__title">
Categories
</h1>
</h3>
</div>
<div class="fd-panel__body fd-panel__body--bleed">
<div class="fd-tree fd-tree--header">
Expand Down
21 changes: 11 additions & 10 deletions docs/pages/components/action-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ The Action Bar is located at the top of the page and is used for the following:
- Page title
- Main Actions for the page

<br>
> {{ site.data.strings.headerDisclaimer }}


## Action bar with back button, description and action buttons.
{% capture default-action-bar %}
Expand All @@ -22,9 +23,9 @@ The Action Bar is located at the top of the page and is used for the following:
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
</div>
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Action bar Description </p>
</div>
<div class="fd-action-bar__actions">
Expand All @@ -42,9 +43,9 @@ The Action Bar is located at the top of the page and is used for the following:
{% capture default-action-bar-multi %}
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Action bar Description </p>
</div>
<div class="fd-action-bar__actions">
Expand All @@ -65,9 +66,9 @@ When there are several main actions for a page, consider displaying them under a
{% capture default-action-bar-menu %}
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
</div>
<div class="fd-action-bar__actions">
<div class="fd-popover">
Expand Down Expand Up @@ -98,15 +99,15 @@ When there are several main actions for a page, consider displaying them under a
## Action bar mobile view

{% capture default-action-bar-multi %}
<div style="width:319px">
<div style="width:319px;">
<div class="fd-action-bar">
<div class="fd-action-bar__back">
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
</div>
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Action Bar with description and back button
</h1>
</h3>
</div>
<div class="fd-action-bar__actions">
<div class="fd-popover">
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/components/contextual-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Implementation Guidelines:
<li><a href="#" class="fd-menu__item">Option 3</a></li>
</ul>
<div class="fd-menu__group">
<h1 class="fd-menu__title">Group Header</h1>
<h3 class="fd-menu__title">Group Header</h3>
<ul class="fd-menu__list">
<li><a href="#" class="fd-menu__item">Option 4</a></li>
<li><a href="#" class="fd-menu__item">Option 5</a></li>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/components/loading-spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The spinner should be included inside the container. Visibility can be toggled i
<div></div>
</div>
<div class="fd-panel__header">
<h1 class="fd-panel__title">Lorem ipsum</h1>
<h3 class="fd-panel__title">Lorem ipsum</h3>
</div>
<!-- Loaded content goes here -->
<div class="fd-panel__footer">
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/components/mega-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ summary:
Mega menu is used in conjunction with Context Switcher within the Global Navigation (link to Global Nav page) and supports two levels within a hierarchy.
{: .docs-intro}

<br>
> {{ site.data.strings.headerDisclaimer }}

## Default Mega Menu

{% capture default-alert %}
<nav class="fd-mega-menu" id="">
<div class="fd-mega-menu__group">
<h1 class="fd-mega-menu__title">Group Name</h1>
<h3 class="fd-mega-menu__title">Group Name</h3>
<ul class="fd-mega-menu__list">
<li class="fd-mega-menu__item">
<a class="fd-mega-menu__link" href="#">
Expand Down Expand Up @@ -56,7 +56,7 @@ Mega menu is used in conjunction with Context Switcher within the Global Navigat
</ul>
</div>
<div class="fd-mega-menu__group">
<h1 class="fd-mega-menu__title">Group Name</h1>
<h3 class="fd-mega-menu__title">Group Name</h3>
<ul class="fd-mega-menu__list">
<li class="fd-mega-menu__item">
<a class="fd-mega-menu__link" href="#">
Expand Down
Loading