Skip to content

Commit

Permalink
Update PRC ActionList implementation to have similar semantics to PVC. (
Browse files Browse the repository at this point in the history
#2878)

* Render ActionList.Group header inside list, use li for semantic HTML reasons.

* Update snapshots.

* Fix snapshot. No idea why this isn't being generated correctly.

* Separate Heading from ActionList.Group.

Also made some styling changes (ex. no vertical padding on ActionList
<ul>) to align with PVC implementation.

* removed usage of actionlist.group.

* Fix type errors.

* Create modern-coins-destroy.md

* Fix ActionList.docs.json to fix components build CI step.

* Update generated/components.json

* test(vrt): update snapshots

* test(vrt): update snapshots

* Update snapshots.

* Update themePreval snapshot and cache bust file.

* Updated snapshots.

* Revert padding on ActionList.

* test(vrt): update snapshots

* Make sure lists are surrounded by a div, fix accessibility issues in Storybook.

* Updated snapshots, fix linting error.

* Update docs.

* Update generated/components.json

* Fix linting issues.

* Fixing some issues after the previous merge.

* Fix ActionMenu feature stories.

* Updated snapshots that shouldn't be different from main.

* disable axe check

* Update changeset to major patch instead of minor.

* re-gen test

* Add missing selectionVariant to Groups and Descriptions ActionMenu story.

* test(vrt): update snapshots

* Fix styling of ActionList to match prod.

* Fix linting errors in ActionList.

* test(vrt): update snapshots

* Reduce padding between ActionLists in ActionMenu example.

* refactor(DataTable): update optional type signatures (#2987)

* refactor(DataTable): update optional type signatures

* chore: update docs and add stories to json for DataTable

* chore: remove default story

* Update generated/components.json

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Textarea stories (#2988)

* checkbox

* Update generated/components.json

* tests

* Update generated/components.json

* fix docs

* radio stories

* Update generated/components.json

* fix doc

* remove axe

* add sb tests

* select

* add features

* e2e

* text input

* Update generated/components.json

* tokens

* Update generated/components.json

* tokens

* textarea

* all the things

* Update generated/components.json

* remove animation test

* test(vrt): update snapshots

* remove dead files

* Update generated/components.json

* missing exports

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

* Pagination design updates (#2702)

* updates pagination styles to match latest token usage patterns, and updates ARIA markup

* adds changeset

* Create .changeset/long-bags-double.md

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

* Make sure ActionList.Heading titles are bolded correctly.

* Updated snapshots.

* Revert title font weight to semibold.

* Update snapshots.

* test(vrt): update snapshots

* Passing sxProps to ActionList.Heading through ActionList.

* More snapshot fiddling.

* Formatting.

* Use margin and padding to get spacing correct.

* Fix aat tests.

* Update snapshots.

* I think this should get the ActionMenu example back to what is expected.

* Revert "test(vrt): update snapshots"

This reverts commit a02012b.

* Revert "test(vrt): update snapshots"

This reverts commit a713875.

* Revert "test(vrt): update snapshots"

This reverts commit 2eae060.

* Revert "test(vrt): update snapshots"

This reverts commit bf59217.

* Revert "test(vrt): update snapshots"

This reverts commit 1c11a1b.

* Revert "test(vrt): update snapshots"

This reverts commit a02012b.

* Revert "test(vrt): update snapshots"

This reverts commit bf59217.

* Fix underlinenav.

* Updated snapshots.

* test(vrt): update snapshots

* Dialog v2: Move files, reformat stories and add e2e tests (#2984)

* initial

* Dialog v2: move files, refaormat stories and add e2e tests

* Update generated/components.json

* snaps

* remove jest disable

* Dialogv2 -> Dialog2

* storybook tests and await dialogs

* disable animations

* disable animations on the first snapshots too

* fix page locators

* test(vrt): update snapshots

* test(Hidden): update export

* Revert "test(Hidden): update export"

This reverts commit f29edd9.

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* feat(project): add warning, invariant utilities and dev-expression plugin (#2901)

* chore(project): add warning utility and dev-expression plugin

* chore: address eslint violations

* feat: add invariant and warn helper

* chore: flip flag for useMedia warning

* chore: add changeset

* chore: add minified exception case for invariant

* chore: update type signature for invariant

* test: update test for warning helper

* refactor(hooks): update useControllableState warning usage

* test(warning): update test titles with flipped condition

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(deps-dev): bump mdast-util-to-string from 3.1.0 to 3.1.1 (#3018)

Bumps [mdast-util-to-string](https://github.com/syntax-tree/mdast-util-to-string) from 3.1.0 to 3.1.1.
- [Release notes](https://github.com/syntax-tree/mdast-util-to-string/releases)
- [Commits](syntax-tree/mdast-util-to-string@3.1.0...3.1.1)

---
updated-dependencies:
- dependency-name: mdast-util-to-string
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump jscodeshift from 0.13.0 to 0.14.0 (#3015)

Bumps [jscodeshift](https://github.com/facebook/jscodeshift) from 0.13.0 to 0.14.0.
- [Release notes](https://github.com/facebook/jscodeshift/releases)
- [Changelog](https://github.com/facebook/jscodeshift/blob/main/CHANGELOG.md)
- [Commits](facebook/jscodeshift@0.13.0...v0.14.0)

---
updated-dependencies:
- dependency-name: jscodeshift
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>

* chore(deps-dev): bump @babel/cli from 7.19.3 to 7.21.0 (#3016)

Bumps [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) from 7.19.3 to 7.21.0.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.21.0/packages/babel-cli)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>

* Add argTypes for HeadingPlayground ActionList story.

* Add aria-busy declaration in relevant story instead of in component.

* Update snapshots.

* Recalculate autocomplete suggestions if the input data changes while the menu is open (#3009)

* Add support for custom emoji suggestions

* Allow declaratively setting suggestions as "loading"

* Recalculate suggestions on update

* Create .changeset/silly-plants-draw.md

* Fix bug where page would be unresponsive if no suggestions provided

* docs(DataTable): add reference stories for row actions (#2978)

* docs(DataTable): add reference stories for row actions

* chore: clean-up ts types

* fix: add guards for optional id and field

* docs: add story ids to DataTable docs json

* Update generated/components.json

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(deps): update babel dependencies (#3005)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* feat(DataTable): add support for alphanumeric, datatable, and custom sort functions (#3001)

* chore: check-in work

* chore: clean-up work

* Update generated/components.json

* docs: add custom sorting story

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Add new usage instructions to changeset.

* Move ActionList.Group to versioned deprecated directory.

* Fix references in deprecated ActionList.Group.

* Fix themePreval snapshot.

* Update src/ActionList/ActionList.stories.tsx

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

* Update src/ActionList/ActionList.stories.tsx

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

* Heading playground only uses heading props.

* Use Box instead of styled elements for ActionList.Heading.

* Remove presentation role and aria-hidden from ActionList.Heading.

* Updated snapshot.

* Use restricted as prop instead of headingLevel.

* Use slots and contexts to allow developers to declare Heading like a child while still rendering correctly.

* Linting.

* Add @deprecated tag to ActionList.Group as first step towards deprecating component.

* Fix type errors in ActionMenu and ActionList stories.

* Formatting.

* Updated snapshots.

* Updating snapshots with --no-cache flag.

* Update docs, fix missing Group export on ActionList.

* Terminate comment correctly.

* Regenerate ActionMenu e2e tests.

* Add padding to fix snapshot diff.

* Change padding again.

* Remove extra padding.

* Add small amount of margin (not padding) to fix snapshot diff.

* Less margin.

* More margin, actually.

* I think this should work.

* I think this is the correct margin, something else is off.

* .

* These snapshot comparisons are confusing me.

* Just a little more margin.

* Ugh.

* test(vrt): update snapshots

* Slightly less margin.

* More tweaking.

* More tweaking.

* Disable animations on actionmenu test to see if it helps generate the snapshot correctly.

* test(vrt): update snapshots

* Don't animate Multiple Sections e2e test.

* Format file.

* test(vrt): update snapshots

* Revert snapshots to match main.

* Update snapshots again.

* Build snapshots without cache.

* Remove lingering references to headingProps.

* Update generated/components.json

* chore(deps): bump react-intersection-observer from 9.4.1 to 9.4.3 (#3177)

Bumps [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) from 9.4.1 to 9.4.3.
- [Release notes](https://github.com/thebuilder/react-intersection-observer/releases)
- [Commits](thebuilder/react-intersection-observer@v9.4.1...v9.4.3)

---
updated-dependencies:
- dependency-name: react-intersection-observer
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump jest-fail-on-console from 3.0.2 to 3.1.1 (#3180)

Bumps [jest-fail-on-console](https://github.com/ValentinH/jest-fail-on-console) from 3.0.2 to 3.1.1.
- [Release notes](https://github.com/ValentinH/jest-fail-on-console/releases)
- [Commits](ValentinH/jest-fail-on-console@v3.0.2...v3.1.1)

---
updated-dependencies:
- dependency-name: jest-fail-on-console
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump unist-util-find-before from 3.0.0 to 3.0.1 (#3179)

Bumps [unist-util-find-before](https://github.com/syntax-tree/unist-util-find-before) from 3.0.0 to 3.0.1.
- [Release notes](https://github.com/syntax-tree/unist-util-find-before/releases)
- [Commits](syntax-tree/unist-util-find-before@3.0.0...3.0.1)

---
updated-dependencies:
- dependency-name: unist-util-find-before
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(PageLayout): update Pane to warn instead of error (#3160)

* fix(PageLayout): update Pane to warn instead of error

* chore: add changeset

* chore: remove invariant

* chore: address eslint violations

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Refactor(PageLayout): use Playwright for interaction tests instead of Storybook. (#3171)

* Change PageLayout interactions to use Playwright.

* Build snapshots without cache.

* Fix PageLayout.test.ts to use Page object because document is not defined.

* Pass missing page parameter to isInViewPort function.

* test(vrt): update snapshots

* Add tabIndex to PullRequestPage test so it is a scrollable region.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Delete docs migration-related code (#3187)

* Delete docs_migration.yml

* Delete docs-migration.js

* Delete props-mdx-to-json.mjs

* Docs(Tooltip): Adds `defaultValue` of tooltip direction to documentation (#3175)

* docs: adds defaultValue of tooltip direction to documentation

* remove the changeset

* chore(project): update test-e2e docker image (#3183)

* feat(project): add subpath pattern to package.json to restrict internal imports (#3186)

* feat(project): add subpath pattern to package.json to restrict internal imports

* refactor(project): move useOverflow to internal/hooks

* docs(adrs): update adopted status for adr

* chore: add changeset

* Update generated/components.json

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Ensure disabled invisible buttons have the right text color. (#3185)

* Set disabled invisible button color similarly to other button variants.

* Don't set [data-no-visual=true] on invisible button variants.

* Update snapshots.

* Formatting and linting.

* test(vrt): update snapshots

* Update generated/components.json

* chore(project): update test-e2e docker image (#3183)

* Use selector to set disabled invisible button text color correctly.

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>

* Refactor(Overlay): move files to folder. (#3191)

* Move overlay files to directory, move all stories to features as there isn't a clear default.

* Update generated/components.json

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(Text): move files to directory, add storybook and e2e tests. (#3189)

* Move Text files into directory, create storybook and e2e tests.

* Fix Text reference in src/index.ts, update snapshots.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Reduce ❌ for forks (#2283)

* Limit deploy to has pages

* Limit statuses to primer/react

* Limit stale to primer/react

* Preview cross org forks

---------

Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Rez <rezrah@github.com>
Co-authored-by: Josh Black <joshblack@github.com>

* Setup snapshots for visual regression for  experimental/Button2 (#3181)

* duplicate button into drafts

* update story title

* add visual tests for Button2

* test(vrt): update snapshots

---------

Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* Version Packages (#3106)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Bug fix: `ButtonGroup` borders (#3198)

* fix hover borders

* Create wicked-knives-sparkle.md

* snaps

* why so many snaps?

* revert?

* test(vrt): update snapshots

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

* Refactor(Portal): move stories into Portal directory. (#3188)

* Move portal stories to portal directory.

* Reorganize portal stories into separate files for default and features.

* Generate e2e tests for portal components.

* Update generated/components.json

* Remove e2e portal tests as they do not play well with Playwright.

* Remove unnecessary decorator from story metadata.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Use SSR-compatible slot implementation in ActionList/NavList (#3173)

* Migrate ActionList to use new slots impl

* Remove ActionList slots

* Remove unused import

* Create lemon-berries-run.md

* Update snapshots

* Fix slot description logic

* Fix style logic

* Fix conditional box logic

* Fix aria-labelledby logic

* Fix flexbox logic

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: langermank <18661030+langermank@users.noreply.github.com>
Co-authored-by: joshblack <joshblack@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: langermank <langermank@users.noreply.github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Armağan <broccolinisoup@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ian Sanders <iansan5653@github.com>
Co-authored-by: Ederson Lucas <27015559+edersonlucas@users.noreply.github.com>
Co-authored-by: Josh Soref <2119212+jsoref@users.noreply.github.com>
Co-authored-by: Rez <rezrah@github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
Co-authored-by: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
19 people authored Apr 24, 2023
1 parent 9e204d1 commit 87883c3
Show file tree
Hide file tree
Showing 48 changed files with 1,068 additions and 898 deletions.
39 changes: 39 additions & 0 deletions .changeset/modern-coins-destroy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
"@primer/react": major
---

Update PRC ActionList implementation to have similar semantics to PVC.
* Removes `ActionList.Group`.
* Adds `ActionList.Heading` to be used for labelling children in an `ActionList`.
* Adds `heading` slot to `ActionList` for adding headings that label internal lists correctly.

ActionList.Groups inside an ActionList generated inaccessible markup. Previous usage:
```
<ActionList>
<ActionList.Group title="Actions">
<ActionList.Item>Create</ActionList.Item>
<ActionList.Item>Read</ActionList.Item>
<ActionList.Item>Update</ActionList.Item>
<ActionList.Item>Delete</ActionList.Item>
</ActionList.Group>
<ActionList.Group>
...
</ActionList.Group>
</ActionList>
```

Instead, use `ActionList`s and stack them as needed.
```
<div>
<ActionList>
<ActionList.Heading title="Actions" />
<ActionList.Item>Create</ActionList.Item>
<ActionList.Item>Read</ActionList.Item>
<ActionList.Item>Update</ActionList.Item>
<ActionList.Item>Delete</ActionList.Item>
</ActionList>
<ActionList>
...
</ActionList>
</div>
```
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 9 additions & 8 deletions docs/content/ActionList.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
</ActionList>
```

### With groups
### With headings

```javascript live noinline
const SelectFields = () => {
Expand All @@ -196,29 +196,30 @@ const SelectFields = () => {
}

return (
<ActionList selectionVariant="multiple">
<ActionList.Group title="Visible fields">
<>
<ActionList selectionVariant="multiple">
<ActionList.Heading title="Visible fields" />
{visibleOptions.map(option => (
<ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
{option.text}
</ActionList.Item>
))}
</ActionList.Group>
<ActionList.Group
title="Hidden fields"
</ActionList>
<ActionList
selectionVariant={
/** selectionVariant override on Group: disable selection if there are no options */
hiddenOptions.length ? 'multiple' : false
}
>
<ActionList.Heading title="Hidden fields" />
{hiddenOptions.map((option, index) => (
<ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
{option.text}
</ActionList.Item>
))}
{hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
</ActionList.Group>
</ActionList>
</ActionList>
</>
)
}

Expand Down
101 changes: 49 additions & 52 deletions docs/content/ActionMenu.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -110,65 +110,62 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
</ActionMenu>
```

### With Groups
### Divided into sections

```jsx live
<ActionMenu>
<ActionMenu.Button>Open column menu</ActionMenu.Button>

<ActionMenu.Overlay>
<ActionList showDividers>
<ActionList.Group title="Live query">
<ActionList.Item>
<ActionList.LeadingVisual>
<SearchIcon />
</ActionList.LeadingVisual>
repo:github/memex,github/github
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group title="Layout" variant="subtle">
<ActionList.Item>
<ActionList.LeadingVisual>
<NoteIcon />
</ActionList.LeadingVisual>
Table
<ActionList.Description variant="block">
Information-dense table optimized for operations across teams
</ActionList.Description>
</ActionList.Item>
<ActionList.Item role="listitem">
<ActionList.LeadingVisual>
<ProjectIcon />
</ActionList.LeadingVisual>
Board
<ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to current view
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to new view
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group>
<ActionList.Item>
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
View settings
</ActionList.Item>
</ActionList.Group>
<ActionList.Heading title="Live query" />
<ActionList.Item>
<ActionList.LeadingVisual>
<SearchIcon />
</ActionList.LeadingVisual>
repo:github/memex,github/github
</ActionList.Item>
</ActionList>
<ActionList showDividers>
<ActionList.Heading title="Layout" variant="subtle" />
<ActionList.Item>
<ActionList.LeadingVisual>
<NoteIcon />
</ActionList.LeadingVisual>
Table
<ActionList.Description variant="block">
Information-dense table optimized for operations across teams
</ActionList.Description>
</ActionList.Item>
<ActionList.Item role="listitem">
<ActionList.LeadingVisual>
<ProjectIcon />
</ActionList.LeadingVisual>
Board
<ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
</ActionList.Item>
</ActionList>
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to current view
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to new view
</ActionList.Item>
</ActionList>
<ActionList>
<ActionList.Item>
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
View settings
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
Expand Down
60 changes: 36 additions & 24 deletions e2e/components/ActionMenu.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -43,9 +43,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Links And Actions.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Links And Actions.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -73,9 +71,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Multi Select.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Multi Select.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -103,9 +99,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Single Select.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Single Select.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -133,9 +127,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Controlled Menu.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Controlled Menu.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -163,9 +155,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Custom Anchor.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Anchor.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -193,9 +183,7 @@ test.describe('ActionMenu', () => {
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Custom Overlay Props.${theme}.png`,
)
expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Overlay Props.${theme}.png`)
})

test('axe @aat', async ({page}) => {
Expand Down Expand Up @@ -235,13 +223,37 @@ test.describe('ActionMenu', () => {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations({
rules: {
'aria-required-children': {
enabled: false,
},
await expect(page).toHaveNoViolations()
})
})
}
})

test.describe('Multiple Sections', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-actionmenu-examples--multiple-sections',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
`ActionMenu.Multiple Sections.${theme}.png`,
)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-actionmenu-examples--multiple-sections',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
Expand Down
44 changes: 15 additions & 29 deletions generated/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
"props": [
{
"name": "children",
"type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
"type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
"defaultValue": "",
"required": true,
"description": ""
Expand Down Expand Up @@ -342,48 +342,34 @@
]
},
{
"name": "ActionList.Group",
"name": "ActionList.Heading",
"props": [
{
"name": "children",
"type": "ActionList.Item[] | ActionList.LinkItem[]",
"defaultValue": "",
"required": true,
"name": "variant",
"type": "'subtle' | 'filled'",
"defaultValue": "subtle",
"description": ""
},
{
"name": "title",
"type": "string",
"defaultValue": "",
"description": "Title of the group."
"required": true,
"description": ""
},
{
"name": "auxiliaryText",
"name": "subtitle",
"type": "string",
"defaultValue": "",
"description": "Secondary text that provides additional information about the group."
},
{
"name": "variant",
"type": "'filled' | 'subtle'",
"defaultValue": "'subtle'",
"description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
},
{
"name": "selectionVariant",
"type": "'single' | 'multiple' | false",
"defaultValue": "",
"description": "Set `selectionVariant` at the group level."
},
{
"name": "role",
"type": "AriaRole",
"defaultValue": "",
"description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
"required": false,
"description": ""
},
{
"name": "sx",
"type": "SystemStyleObject"
"name": "headingLevel",
"type": "'1' | '2' | '3' | '4' | '5' | '6'",
"defaultValue": "3",
"required": false,
"description": ""
}
]
}
Expand Down
Loading

0 comments on commit 87883c3

Please sign in to comment.