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

Box may accept all system props. #1315

Merged
merged 32 commits into from
Jul 19, 2021
Merged

Box may accept all system props. #1315

merged 32 commits into from
Jul 19, 2021

Conversation

VanAnderson
Copy link
Contributor

@VanAnderson VanAnderson commented Jun 22, 2021

Box may accept all system props.

Closes https://github.com/github/primer/issues/222

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Jun 22, 2021

🦋 Changeset detected

Latest commit: ab9fb1f

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

This PR includes changesets to release 1 package
Name Type
@primer/components 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

@vercel
Copy link

vercel bot commented Jun 22, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/8JC14J397b85Amrycr3wLk42NEqe
✅ Preview: https://primer-components-git-vananderson-add-box-props-primer.vercel.app

@vercel vercel bot temporarily deployed to Preview June 22, 2021 16:26 Inactive
@vercel vercel bot temporarily deployed to Preview June 22, 2021 17:24 Inactive
.changeset/green-worms-nail.md Outdated Show resolved Hide resolved
src/__tests__/__snapshots__/AvatarStack.tsx.snap Outdated Show resolved Hide resolved
docs/content/Box.md Outdated Show resolved Hide resolved
Co-authored-by: Cole Bemis <colebemis@github.com>
@vercel vercel bot temporarily deployed to Preview July 2, 2021 13:05 Inactive
Co-authored-by: Cole Bemis <colebemis@github.com>
@vercel vercel bot temporarily deployed to Preview July 2, 2021 13:11 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 21:36 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 21:45 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 21:48 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 21:57 Inactive
docs/content/Box.md Outdated Show resolved Hide resolved
@vercel vercel bot temporarily deployed to Preview July 19, 2021 21:58 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 22:04 Inactive
@vercel vercel bot temporarily deployed to Preview July 19, 2021 22:21 Inactive
colebemis and others added 14 commits July 19, 2021 15:22
* fix: Type 'DropdownButton' as 'button'

* chore: Update snapshots
* fix: Separate 'Item' content into 'label' and 'description'

* fix: Only add 'aria-describedby' when 'description' exists

* fix: Memoize 'id' so 'Item's and labels match

* fix: Don’t rely on 'id' which is possibly not globally-unique

* fix: Restore semi-full-width 'Item' dividers, without giving up the semantic nesting.

By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM.

* fix: Reduce styled-components class permutations.

https://www.joshwcomeau.com/css/styled-components/
* feat(Overlay): slide away from anchor based on position

* fix: handle position changes when re-opening AnchoredOverlay

* refactor: use js animation for slide to fix safari

* fix: Tests were failing with Axe violations

- https://dequeuniversity.com/rules/axe/4.1/aria-dialog-name
- https://dequeuniversity.com/rules/axe/4.2/presentation-role-conflict
- https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html

First, 'Overlay's aren’t 'listbox'es, because (when used in 'DropdownMenu' or 'ActionMenu') they contain 'menuitem's, 'menuitemradio's, or 'menuitemcheckbox'es.

Second, 'Overlay's aren’t 'dialog's, because (as demonstrated in the WAI ARIA practices page linked above), 'menu's need not be contained in a 'dialog', and also (as noted in the 'aria-dialog-name' link above), 'dialog's must have an 'aria-label', 'aria-labelledby', or 'title', but neither 'DropdownMenu' nor 'ActionMenu' have any kind of header element that could be used for this.

Third, if 'Overlay's are 'none', they can’t be focusable (as noted in the 'presentation-role-conflict' link above), but one of our hooks (maybe 'FocusTrap', maybe 'FocusZone') was setting 'tabIndex' to '0' (in the test component), because it did not contain a focusable child. This PR adds a focusable button child so the 'none' 'Overlay' container won’t receive 'tabIndex' '0'.

* fix: Resolve lint errors

Co-authored-by: Clay Miller <clay@smockle.com>
* Add new filesystem source

* Add component metadata type

* Create Props component

* Update props table

* Handle empty and error states

* Add required label

* Update required prop styles

* Clean up code comments

* Remove filesystem plugin

* Remove extra markdown file

* Add component comment

Co-authored-by: Clay Miller <clay@smockle.com>
* fix: mark sideEffects free

* fix: update sideEffects delcaration in package.json to improve treeshaking

* fix: update sideEffects delcaration in package.json to improve treeshaking

* fix: BaseStyles doesnt use sideeffects

* chore: add changeset
@vercel vercel bot temporarily deployed to Preview July 19, 2021 22:25 Inactive
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

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

✨ Excited about these changes!

@colebemis colebemis enabled auto-merge (squash) July 19, 2021 22:27
@colebemis colebemis merged commit 85d0202 into main Jul 19, 2021
@colebemis colebemis deleted the VanAnderson/add-box-props branch July 19, 2021 22:28
@github-actions github-actions bot mentioned this pull request Jul 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants