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

Jump to bottom

fix(nav): fix nav separator background in dark theme #2227

Merged
merged 3 commits into from Sep 6, 2019
Merged

fix(nav): fix nav separator background in dark theme #2227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
809a10b
fix(nav): fix nav separator background in dark theme
mcoker Sep 6, 2019
2376ac7
chore(page): create demos for legacy nav separators
mcoker Sep 6, 2019
7893046
chore(page): fix demo a11y
mcoker Sep 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/patternfly/components/Nav/nav.scss
View file
Open in desktop
Expand Up @@ -23,7 +23,9 @@
--pf-c-nav--m-dark__item--m-current--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
--pf-c-nav--m-dark__section-title--Color: var(--pf-global--Color--light-100);
--pf-c-nav--m-dark__c-divider--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
--pf-c-nav--m-dark__separator--BackgroundColor: var(--pf-global--BackgroundColor--dark-400); // remove at breaking change
--pf-c-nav--m-dark__item__c-divider--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
--pf-c-nav--m-dark__item__separator--BackgroundColor: var(--pf-global--BackgroundColor--dark-300); // remove at breaking change

// divider
--pf-c-nav__c-divider--MarginTop: var(--pf-global--spacer--sm);
Expand Down Expand Up @@ -275,12 +277,15 @@
--pf-c-nav__simple-list-link--m-current--Color: var(--pf-c-nav--m-dark__simple-list-link--m-current--Color);
--pf-c-nav__simple-list-link--m-current--BackgroundColor: var(--pf-c-nav--m-dark__simple-list-link--m-current--BackgroundColor);
--pf-c-nav__section-title--Color: var(--pf-c-nav--m-dark__section-title--Color);
--pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__separator--BackgroundColor);

.pf-c-divider {
background-color: var(--pf-c-nav--m-dark__c-divider--BackgroundColor);
}

.pf-c-nav__item {
--pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__item__separator--BackgroundColor);

.pf-c-divider {
background-color: var(--pf-c-nav--m-dark__item__c-divider--BackgroundColor);
}
Expand Down
20 changes: 20 additions & 0 deletions src/patternfly/demos/Page/examples/index.js
View file
Open in desktop
Expand Up @@ -7,14 +7,18 @@ import PageComponentExpandableNavExampleRaw from '!raw!./page-component-expandab
import PageComponentHorizontalNavExampleRaw from '!raw!./page-component-horizontal-nav-example.hbs';
import PageComponentTertiaryNavExampleRaw from '!raw!./page-component-tertiary-nav-example.hbs';
import PageComponentGroupedNavExampleRaw from '!raw!./page-component-grouped-nav-example.hbs';
import PageComponentLegacyNavSeparatorsExampleRaw from '!raw!./page-component-legacy-nav-separators-example.hbs';
import PageComponentLightSidebarNavExampleRaw from '!raw!./page-component-light-sidebar-nav-example.hbs';
import PageComponentLightSidebarNavLegacyNavSeparatorsExampleRaw from '!raw!./page-component-light-sidebar-nav-legacy-nav-separators-example.hbs';

import PageComponentDefaultNavHeaderExample from './page-component-default-nav-header-example.hbs';
import PageComponentExpandableNavExample from './page-component-expandable-nav-example.hbs';
import PageComponentHorizontalNavExample from './page-component-horizontal-nav-example.hbs';
import PageComponentTertiaryNavExample from './page-component-tertiary-nav-example.hbs';
import PageComponentGroupedNavExample from './page-component-grouped-nav-example.hbs';
import PageComponentLegacyNavSeparatorsExample from './page-component-legacy-nav-separators-example.hbs';
import PageComponentLightSidebarNavExample from './page-component-light-sidebar-nav-example.hbs';
import PageComponentLightSidebarNavLegacyNavSeparatorsExample from './page-component-light-sidebar-nav-legacy-nav-separators-example.hbs';

import docs from '../docs/code.md';

Expand All @@ -26,7 +30,9 @@ export default props => {
const pageComponentHorizontalNavExample = PageComponentHorizontalNavExample();
const pageComponentTertiaryNavExample = PageComponentTertiaryNavExample();
const pageComponentGroupedNavExample = PageComponentGroupedNavExample();
const pageComponentLegacyNavSeparatorsExample = PageComponentLegacyNavSeparatorsExample();
const pageComponentLightSidebarNavExample = PageComponentLightSidebarNavExample();
const pageComponentLightSidebarNavLegacyNavSeparatorsExample = PageComponentLightSidebarNavLegacyNavSeparatorsExample();
const headingText = 'Page component demo';

return (
Expand Down Expand Up @@ -66,13 +72,27 @@ export default props => {
>
{pageComponentGroupedNavExample}
</Example>
<Example
heading="Page component - legacy nav separators"
fullPageOnly="true"
handlebars={PageComponentLegacyNavSeparatorsExampleRaw}
>
{pageComponentLegacyNavSeparatorsExample}
</Example>
<Example
heading="Page component - legacy sidebar and nav (light themed)"
fullPageOnly="true"
handlebars={PageComponentLightSidebarNavExampleRaw}
>
{pageComponentLightSidebarNavExample}
</Example>
<Example
heading="Page component - legacy sidebar and nav (light themed), and legacy nav separators"
fullPageOnly="true"
handlebars={PageComponentLightSidebarNavLegacyNavSeparatorsExampleRaw}
>
{pageComponentLightSidebarNavLegacyNavSeparatorsExample}
</Example>
</Documentation>
);
};
115 changes: 1 addition & 114 deletions src/patternfly/demos/Page/examples/page-component-expandable-nav-example.hbs
View file
Open in desktop
@@ -1,114 +1 @@
{{#> page page--id="page-layout-expandable-nav"}}
{{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}}
Skip to content
{{/skip-to-content}}
{{#> page-header}}
{{!-- Brand --}}
{{#> page-header-brand}}
{{#> page-header-brand-toggle}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' page--id '-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="' page--id '-expandable-nav"')}}
<i class="fas fa-bars" aria-hidden="true"></i>
{{/button}}
{{/page-header-brand-toggle}}
{{#> page-header-brand-link page-header-brand-link--href="#"}}
{{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
{{/page-header-brand-link}}
{{/page-header-brand}}
{{#> page-template-header-tools-elements}}
{{/page-template-header-tools-elements}}
{{/page-header}}

{{#> page-sidebar page-sidebar--modifier="pf-m-dark"}}
{{#> nav nav--expandable="true" nav--attribute=(concat 'id="' page--id '-expandable-nav" aria-label="Global"') nav--modifier="pf-m-dark"}}
{{#> nav-list}}
{{#> nav-item nav-item--expandable="true" nav-item--expanded="true" nav-item--current="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute='id="expandable-nav-link1"'}}
System panel
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute='aria-labelledby="expandable-nav-link1"'}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Overview
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#" nav-link--current="true"}}
Resource usage
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Hypervisors
{{/nav-link}}
{{/nav-item}}
{{#> divider divider--type="li"}}{{/divider}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--modifier="pf-m-separator" nav-link--href="#"}}
Instances
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Volumes
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Networks
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{#> nav-item nav-item--expandable="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute='id="expandable-nav-link2"'}}
Policy
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute='aria-labelledby="expandable-nav-link2"'}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 1
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 2
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{#> divider divider--type="li"}}{{/divider}}
{{#> nav-item nav-item--expandable="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute='id="expandable-nav-link3"'}}
Authentication
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute='aria-labelledby="expandable-nav-link3"'}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 1
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 2
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{/nav-list}}
{{/nav}}
{{/page-sidebar}}
{{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}}
{{#> page-template-breadcrumb}}
{{/page-template-breadcrumb}}
{{#> page-template-title}}
{{/page-template-title}}
{{#> page-template-gallery}}
{{/page-template-gallery}}
{{/page-main}}
{{/page}}
{{#> page-demo-expandable-nav page-demo-expandable--id="page-expandable-nav-example" page-sidebar--modifier="pf-m-dark" nav--modifier="pf-m-dark"}}{{/page-demo-expandable-nav}}
1 change: 1 addition & 0 deletions src/patternfly/demos/Page/examples/page-component-legacy-nav-separators-example.hbs
View file
Open in desktop
@@ -0,0 +1 @@
{{#> page-demo-expandable-nav page-demo-expandable--id="page-legacy-nav-separators-example" page--IsLegacySeparators="true" page-sidebar--modifier="pf-m-dark" nav--modifier="pf-m-dark"}}{{/page-demo-expandable-nav}}
2 changes: 1 addition & 1 deletion src/patternfly/demos/Page/examples/page-component-light-sidebar-nav-example.hbs
View file
Open in desktop
@@ -1 +1 @@
{{> page-demo-default page-demo-default--id="page-light-sidebar-nav-example"}}
{{#> page-demo-expandable-nav page-demo-expandable--id="page-light-sidebar-nav-example"}}{{/page-demo-expandable-nav}}
1 change: 1 addition & 0 deletions ...ly/demos/Page/examples/page-component-light-sidebar-nav-legacy-nav-separators-example.hbs
View file
Open in desktop
@@ -0,0 +1 @@
{{#> page-demo-expandable-nav page-demo-expandable--id="page-light-sidebar-nav-legacy-nav-example" page--IsLegacySeparators="true"}}{{/page-demo-expandable-nav}}
122 changes: 122 additions & 0 deletions src/patternfly/demos/Page/page-demo-expandable-nav.hbs
View file
Open in desktop
@@ -0,0 +1,122 @@
{{#> page page--id=page-demo-expandable--id}}
{{#> skip-to-content skip-to-content--attribute=(concat 'href="#main-content-' page--id '"')}}
Skip to content
{{/skip-to-content}}
{{#> page-header}}
{{!-- Brand --}}
{{#> page-header-brand}}
{{#> page-header-brand-toggle}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' page--id '-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="' page--id '-expandable-nav"')}}
<i class="fas fa-bars" aria-hidden="true"></i>
{{/button}}
{{/page-header-brand-toggle}}
{{#> page-header-brand-link page-header-brand-link--href="#"}}
{{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
{{/page-header-brand-link}}
{{/page-header-brand}}
{{#> page-template-header-tools-elements}}
{{/page-template-header-tools-elements}}
{{/page-header}}

{{#> page-sidebar}}
{{#> nav nav--expandable="true" nav--attribute=(concat 'id="' page--id '-expandable-nav" aria-label="Global"')}}
{{#> nav-list}}
{{#> nav-item nav-item--expandable="true" nav-item--expanded="true" nav-item--current="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute=(concat 'id="' page--id '-expandable-nav-link1"')}}
System panel
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute=(concat 'aria-labelledby="' page--id '-expandable-nav-link1"')}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Overview
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#" nav-link--current="true"}}
Resource usage
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Hypervisors
{{/nav-link}}
{{/nav-item}}
{{#if page--IsLegacySeparators}}
{{#> nav-separator}}{{/nav-separator}}
{{else}}
{{#> divider divider--type="li"}}{{/divider}}
{{/if}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Instances
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Volumes
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Networks
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{#> nav-item nav-item--expandable="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute=(concat 'id="' page--id '-expandable-nav-link2"')}}
Policy
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute=(concat 'aria-labelledby="' page--id '-expandable-nav-link2"')}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 1
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 2
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{#if page--IsLegacySeparators}}
{{#> nav-separator}}{{/nav-separator}}
{{else}}
{{#> divider divider--type="li"}}{{/divider}}
{{/if}}
{{#> nav-item nav-item--expandable="true"}}
{{#> nav-link nav-link--href="#" nav-link--attribute=(concat 'id="' page--id '-expandable-nav-link3"')}}
Authentication
{{/nav-link}}
{{#> nav-subnav nav-subnav--attribute=(concat 'aria-labelledby="' page--id '-expandable-nav-link3"')}}
{{#> nav-list nav-list--type="simple"}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 1
{{/nav-link}}
{{/nav-item}}
{{#> nav-item newcontent}}
{{#> nav-link nav-link--href="#"}}
Subnav link 2
{{/nav-link}}
{{/nav-item}}
{{/nav-list}}
{{/nav-subnav}}
{{/nav-item}}
{{/nav-list}}
{{/nav}}
{{/page-sidebar}}
{{#> page-main page-main--attribute=(concat 'id="main-content-' page--id '"')}}
{{#> page-template-breadcrumb}}
{{/page-template-breadcrumb}}
{{#> page-template-title}}
{{/page-template-title}}
{{#> page-template-gallery}}
{{/page-template-gallery}}
{{/page-main}}
{{/page}}