patternfly / patternfly/patternfly-react

DashboardWrapper demo updates

Open
#8,130 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

PF Team Pinned
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

re: https://github.com/patternfly/patternfly-react/pull/7927#pullrequestreview-1125650784

I think we want the vertical nav's aria-label to be "Global", otherwise the rotor reads this as "Nav navigation". "Global" is the default, so if we want to update, you could remove this entirely. This also matches the <PageToggleButton>'s aria-label, and those labels should probably match.

https://github.com/patternfly/patternfly-react/blob/22fc7d8e8189ef2da0eb483a8c35c4c0e2be3807/packages/react-core/src/demos/examples/DashboardWrapper.js#L73

https://github.com/patternfly/patternfly-react/blob/22fc7d8e8189ef2da0eb483a8c35c4c0e2be3807/packages/react-core/src/demos/examples/DashboardHeader.js#L220


A bunch of the demos have body text that references the Overpass font and some specific font styles that aren't relevant and may change (and be incorrect) as styles change over time. Just in general, I'd say we should review the body text of demos/examples and make sure we don't have other stuff like this. Here's a list of the places I found that reference the overpass text

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Nav.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/PrimaryDetail.md:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/PrimaryDetail.md:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/PrimaryDetail.md:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/PrimaryDetail.md:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/PrimaryDetail.md:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Banner.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/Banner.md:                    Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/examples/BackToTop/BackToTopNameDemo.tsx:              Body text should be Overpass Regular at 16px.It should have leading of 24px because 

packages/react-core/src//demos/NotificationDrawer/NotificationDrawer.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-core/src//demos/NotificationDrawer/NotificationDrawer.md:                Body text should be Overpass Regular at 16px. It should have leading of 24px because 

packages/react-table/src//docs/examples/ComposableTableStickyToolbar.tsx:              Body text should be Overpass Regular at 16px. It should have leading of 24px because 


This page section should be isWidthLimited, or maybe some mechanism to add/remove that depending on what else is on the page (like if other page sections aren't width limited?), though I'm not sure if there is ever a use case where this wouldn't be width limited. I guess it doesn't matter here since the text isn't very long, but if more content is added, it will keep it from spanning the whole viewport.

https://github.com/patternfly/patternfly-react/blob/22fc7d8e8189ef2da0eb483a8c35c4c0e2be3807/packages/react-core/src/demos/examples/DashboardWrapper.js#L29-L34


Jira Issue: PF-169

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/react-core/src/demos/examples/DashboardWrapper.js and DashboardHeader.js, then review the listed demo Markdown and TSX files for the Overpass references. Done means the navigation labels and page-section width behavior match the request, and demo text no longer contains the outdated font guidance across the identified files.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, react, typescript
Domain
accessibility, documentation, frontend
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.