Skip to content

chore(DashboardHeader): align DashboardHeader with core #7518

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
kmcfaul merged 8 commits into from
Jun 22, 2022
Merged

chore(DashboardHeader): align DashboardHeader with core #7518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2088cf5
align dashboardwrapper with core
jenny-s51 Jun 6, 2022
835c62e
remove inset from toolbar
jenny-s51 Jun 6, 2022
eb0b415
tests
jenny-s51 Jun 7, 2022
1eb7785
update mastheadToggle.tsx
jenny-s51 Jun 7, 2022
e626ad2
fix kebab visibility
jenny-s51 Jun 8, 2022
3af6c8c
fix circular dependency
jenny-s51 Jun 9, 2022
d9a7ee6
PR feedback from mcoker, mattnolting
jenny-s51 Jun 21, 2022
aa8812c
visibility comment from mcoker
jenny-s51 Jun 21, 2022
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
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Masthead/MastheadToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export const MastheadToggle: React.FunctionComponent<MastheadToggleProps> = ({
className,
...props
}: MastheadToggleProps) => (
<div className={css(styles.mastheadToggle, className)} {...props}>
<span className={css(styles.mastheadToggle, className)} {...props}>
{children}
</div>
</span>
);
MastheadToggle.displayName = 'MastheadToggle';
12 changes: 6 additions & 6 deletions packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ exports[`Masthead verify full structure 1`] = `
<header
class="pf-c-masthead pf-m-display-inline-on-md"
>
<div
<span
class="pf-c-masthead__toggle"
>
Toggle
</div>
</span>
<div
class="pf-c-masthead__main"
>
Expand Down Expand Up @@ -226,20 +226,20 @@ exports[`MastheadMain verify custom class 1`] = `

exports[`MastheadToggle verify basic 1`] = `
<DocumentFragment>
<div
<span
class="pf-c-masthead__toggle"
>
test
</div>
</span>
</DocumentFragment>
`;

exports[`MastheadToggle verify custom class 1`] = `
<DocumentFragment>
<div
<span
class="pf-c-masthead__toggle custom-css"
>
test
</div>
</span>
</DocumentFragment>
`;
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/PageSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
aria-hidden={!navOpen}
{...props}
>
<div className="pf-topology-side-bar__body">
<div className={styles.pageSidebarBody}>
<PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...eact-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
>
<div>
ReactNode
Expand Down
18 changes: 9 additions & 9 deletions packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`Page Check dark page against snapshot 1`] = `
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
>
Navigation
</div>
Expand Down Expand Up @@ -93,7 +93,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -157,7 +157,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -324,7 +324,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -491,7 +491,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -777,7 +777,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -1067,7 +1067,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -1253,7 +1253,7 @@ exports[`Page Check page to verify skip to content points to main content region
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
/>
</div>
<main
Expand Down Expand Up @@ -1416,7 +1416,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
id="page-sidebar"
>
<div
class="pf-topology-side-bar__body"
class="pf-c-page__sidebar-body"
>
Navigation
</div>
Expand Down
14 changes: 9 additions & 5 deletions packages/react-core/src/demos/examples/DashboardHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import imgBrand from './pfColorLogo.svg';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';

export default class DashboardHeader extends React.Component {
Expand Down Expand Up @@ -147,7 +146,7 @@ export default class DashboardHeader extends React.Component {
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem visibility={{ default: 'hidden', sm: 'visible', md: 'visible', lg: 'hidden' }}>
<ToolbarItem visibility={{ lg: 'hidden' }}>
<Dropdown
isPlain
position="right"
Expand All @@ -158,10 +157,8 @@ export default class DashboardHeader extends React.Component {
/>
</ToolbarItem>
</ToolbarGroup>

<ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
<Dropdown
position="right"
isFullHeight
onSelect={this.onDropdownSelect}
isOpen={isDropdownOpen}
Expand All @@ -186,7 +183,14 @@ export default class DashboardHeader extends React.Component {
</MastheadToggle>
<MastheadMain>
<MastheadBrand>
<Brand src={imgBrand} alt="Patternfly logo" />
<Brand
widths={{ default: '180px', md: '180px', '2xl': '220px' }}
src="/assets/images/logo__pf--reverse--base.png"
alt="Fallback patternFly default logo"
>
<source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
<source srcSet="/assets/images/logo__pf--reverse--base.svg" />
Copy link
Contributor

@mcoker mcoker Jun 15, 2022

Choose a reason for hiding this comment

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

🔥

</Brand>
</MastheadBrand>
</MastheadMain>
<MastheadContent>{headerToolbar}</MastheadContent>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/examples/DashboardWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default class DashboardWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
activeItem: 0
activeItem: 1
};

this.onNavSelect = result => {
Expand Down Expand Up @@ -70,7 +70,7 @@ export default class DashboardWrapper extends React.Component {
<Nav onSelect={this.onNavSelect} aria-label="Nav">
<NavList>
<NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
System Panel
System panel
</NavItem>
<NavItem itemId={1} isActive={activeItem === 1} to="#policy">
Policy
Expand All @@ -79,7 +79,7 @@ export default class DashboardWrapper extends React.Component {
Authentication
</NavItem>
<NavItem itemId={3} isActive={activeItem === 3} to="#network">
Network Services
Network services
</NavItem>
<NavItem itemId={4} isActive={activeItem === 4} to="#server">
Server
Expand Down