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.

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

NavigationList #1905

Merged
merged 22 commits into from
Feb 11, 2022
Merged

NavigationList #1905

merged 22 commits into from
Feb 11, 2022

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Jan 26, 2022

Addressing a11y feedback

This is a working PR to provide pre-release CSS for dotcom. We'll use NavigationList stories as a template for the View Component implementation.

  • Introduces <button> to manage collapsible groups (instead of handling it on the <li>)
  • Better Divider markup including an h3 tag with id referenced by arialabelledbyid per group

Breaking changes

Original Refactor Breaking
- ActionList-sectionDivider-title new class for title <h3> No
.ActionList-item--hasActiveSubItem ActionList-content--hasActiveSubItem Yes
  • expand/collapse, disabled, and other state logic moved down one level to the button aka ActionList-content
  • adds specific button overrides to remove default browser styling

Storybook changes

  • Moves ActionList and co to a new directory called UI Patterns which is intended to be used for private api (the building blocks of other components)
  • Displays a simplified ActionList under Components to demonstrate a list of links scenario
  • Adds NavigationList and TreeView as separate components under Components

Review

Feel free to skip reviewing the .stories.jsx changes, it's purely organizational changes and refactoring to make sharing stories easier

  • Check that CSS changes will not impact .ActionList--tree variant

@changeset-bot
Copy link

changeset-bot bot commented Jan 26, 2022

🦋 Changeset detected

Latest commit: 428d00f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -157,98 +150,6 @@
}
}

// collapsible item [aria-expanded]

// nesting (single level)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moving all collapse logic down a level to -content

docs/content/components/action-list.md Outdated Show resolved Hide resolved
docs/content/components/action-list.md Outdated Show resolved Hide resolved
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Looks good 👍🏻

@langermank langermank merged commit 50221a5 into main Feb 11, 2022
@langermank langermank deleted the actionlist-a11y branch February 11, 2022 17:47
@primer-css primer-css mentioned this pull request Feb 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants