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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

* 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] <[email protected]>
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] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>

* 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] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* Update src/ActionList/ActionList.stories.tsx

Co-authored-by: Katie Langerman <[email protected]>

* 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] <[email protected]>
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] <[email protected]>
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] <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Rez <[email protected]>
Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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] <[email protected]>
Co-authored-by: radglob <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: joshblack <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: Mike Perrotti <[email protected]>
Co-authored-by: Cole Bemis <[email protected]>
Co-authored-by: Armağan <[email protected]>
Co-authored-by: broccolinisoup <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ian Sanders <[email protected]>
Co-authored-by: Ederson Lucas <[email protected]>
Co-authored-by: Josh Soref <[email protected]>
Co-authored-by: Rez <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: siddharthkp <[email protected]>
Co-authored-by: GitHub Design Systems Bot <[email protected]>
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.