diff --git a/.changeset/eleven-humans-sneeze.md b/.changeset/eleven-humans-sneeze.md deleted file mode 100644 index e881e43ce14..00000000000 --- a/.changeset/eleven-humans-sneeze.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -PageLayout.Content no longer renders as `main` by default. Instead, developers may add a `main` landmark within `Pagelayout.Content` themselves. diff --git a/.changeset/empty-snakes-join.md b/.changeset/empty-snakes-join.md deleted file mode 100644 index 2853ca9c02e..00000000000 --- a/.changeset/empty-snakes-join.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Upgrade @primer/octicons-react dependency to `^19.1.0` diff --git a/.changeset/modern-coins-destroy.md b/.changeset/modern-coins-destroy.md deleted file mode 100644 index 9c3fac41926..00000000000 --- a/.changeset/modern-coins-destroy.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -"@primer/react": minor ---- - -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: -``` - - - Create - Read - Update - Delete - - - ... - - -``` - -Instead, use `ActionList`s and stack them as needed. -``` -
- - - Create - Read - Update - Delete - - - ... - -
-``` diff --git a/.changeset/pink-beds-fetch.md b/.changeset/pink-beds-fetch.md deleted file mode 100644 index 5400fd391fa..00000000000 --- a/.changeset/pink-beds-fetch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Remove `aria-hidden=true` from `span`s with required asterisk diff --git a/.changeset/purple-crabs-matter.md b/.changeset/purple-crabs-matter.md deleted file mode 100644 index 261665de8d8..00000000000 --- a/.changeset/purple-crabs-matter.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Refactor(ActionList): ActionList.Item should render content as a button if parent is not interactive. diff --git a/.changeset/spicy-shoes-press.md b/.changeset/spicy-shoes-press.md deleted file mode 100644 index cc1af0c28fe..00000000000 --- a/.changeset/spicy-shoes-press.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Octicons (previously known StyledOcticons) to use React.forwardRef() diff --git a/.changeset/two-cycles-provide.md b/.changeset/two-cycles-provide.md deleted file mode 100644 index 803bbd43fcb..00000000000 --- a/.changeset/two-cycles-provide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Address ToggleSwitch accessibility feedback diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png index e254d01f8ec..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png index 98ebae34e1e..985067256bd 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png index 9bc8f5fdf00..490bd7677af 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png index c9bf7491e66..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png index e254d01f8ec..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png index 517576b742f..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png index 14d4cd19201..f180036cd16 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png index 04de60b7160..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png index 517576b742f..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png deleted file mode 100644 index 8c9edc27878..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png deleted file mode 100644 index a0987d81cb7..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png deleted file mode 100644 index 72cc4662a6d..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png deleted file mode 100644 index 0a8f020a796..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png deleted file mode 100644 index d66333e9ef0..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png deleted file mode 100644 index 35957d68122..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png deleted file mode 100644 index e61e83ab4e8..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png deleted file mode 100644 index 9863ba1450a..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png deleted file mode 100644 index fd380ac2255..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png index 25ab287c52a..9481c79ad5a 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png index 131883c9209..201ae2fdb0f 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png index 2fd173eb298..d2fa9c29bee 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png index 25ab287c52a..9481c79ad5a 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png index 25ab287c52a..9481c79ad5a 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png index 59a4f2da4b4..af776f930e7 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png index 59a4f2da4b4..af776f930e7 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png index 59a4f2da4b4..af776f930e7 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png index 59a4f2da4b4..af776f930e7 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png index 7e3cac2b940..17ddafd7759 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png index e3d97d80f1f..e99a44cb416 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png index 6b67c17ea70..f9e8a1ead45 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png index 9200056673d..17ddafd7759 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png index 7e3cac2b940..17ddafd7759 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png index 5d85ce1f083..1afb7640210 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png index c4b84c514bd..f7b708b91aa 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png index ec03f0c354d..1afb7640210 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png differ diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png index 5d85ce1f083..1afb7640210 100644 Binary files a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png and b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png index 80ae6d7ec3b..014d7bfd33e 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png index 3943dfd024e..8493a061de2 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png index c0680e0f8ad..efad31b0b44 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png index 34898f867d0..e7cd788f147 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png differ diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 724f3cb2c31..e4518d0d151 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI ``` -### With headings +### With groups ```javascript live noinline const SelectFields = () => { @@ -196,30 +196,29 @@ const SelectFields = () => { } return ( - <> - - + + {visibleOptions.map(option => ( toggle(option.text)}> {option.text} ))} - - + - {hiddenOptions.map((option, index) => ( toggle(option.text)}> {option.text} ))} {hiddenOptions.length === 0 && No hidden fields} - - + + ) } diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index dd2a8f8c6e8..ac5b4baa651 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -2,7 +2,7 @@ componentId: action_menu title: ActionMenu status: Beta -a11yReviewed: false +a11yReviewed: true source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx storybook: '/react/storybook?path=/story/components-actionmenu' description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. @@ -110,7 +110,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic ``` -### Divided into sections +### With Groups ```jsx live @@ -118,54 +118,57 @@ You can choose to have a different _anchor_ for the Menu depending on the applic - - - - - - repo:github/memex,github/github - - - - - - - - - Table - - Information-dense table optimized for operations across teams - - - - - - - Board - Kanban-style board focused on visual states - - - - - - - - Save sort and filters to current view - - - - - - Save sort and filters to new view - - - - - - - - View settings - + + + + + + repo:github/memex,github/github + + + + + + + + + Table + + Information-dense table optimized for operations across teams + + + + + + + Board + Kanban-style board focused on visual states + + + + + + + + + Save sort and filters to current view + + + + + + Save sort and filters to new view + + + + + + + + + View settings + + @@ -190,7 +193,9 @@ const Example = () => { return ( - {selectedType.name} + + {selectedType.name} + {fieldTypes.map((type, index) => ( diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index db4f810b995..7b4458b38fe 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -241,14 +241,14 @@ navigation container is used for. ### With `aria-label` -Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page. +Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page. ```jsx live - + @@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates ### With `aria-labelledby` -Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself. +Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself. ```jsx live - - + + @@ -300,35 +300,15 @@ Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` cr ``` -### With `
` landmark - -```jsx live - - - - - -
- -
- - - - - - - - -``` - ## Accessibility -The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header` and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page. +The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header`, `PageLayout.Content`, and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page. -| Component | Landmark role | -| :------------------ | :------------------------------------------------------------------------------------------------------ | -| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) | -| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) | +| Component | Landmark role | +| :------------------- | :------------------------------------------------------------------------------------------------------ | +| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) | +| `PageLayout.Content` | [`main`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) | +| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) | Each component may be labeled through either `aria-label` or `aria-labelledby` in order to provide a unique label for the landmark. This can be helpful when there are multiple landmarks of the same type on the page. @@ -338,14 +318,6 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11) - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) -### `PageLayout.Content` - -The `PageLayout.Content` component does not provide a default `
` landmark role. -If you want to utilize a `
` landmark with this component, you may supply one directly [as a child of `PageLayout.Content`](#with-main-landmark). -When using `
` ensure that no other `
` landmark exists on the page, as there should only be one per page. - -- [`main` usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html) - ### `PageLayout.Pane` The `PageLayout.Pane` component does not provide a default landmark role as the diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts index 9ffee2dae51..dddbaee08f5 100644 --- a/e2e/components/ActionMenu.test.ts +++ b/e2e/components/ActionMenu.test.ts @@ -15,7 +15,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -43,7 +43,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Links And Actions.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Links And Actions.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -71,7 +73,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Multi Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Multi Select.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -99,7 +103,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Single Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Single Select.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -127,7 +133,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Controlled Menu.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Controlled Menu.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -155,7 +163,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Anchor.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Custom Anchor.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -183,7 +193,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Overlay Props.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Custom Overlay Props.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -223,37 +235,13 @@ test.describe('ActionMenu', () => { colorScheme: theme, }, }) - 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({ + rules: { + 'aria-required-children': { + enabled: false, + }, }, }) - await expect(page).toHaveNoViolations() }) }) } diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts index bde4521a25c..33ed880d336 100644 --- a/e2e/components/ToggleSwitch.test.ts +++ b/e2e/components/ToggleSwitch.test.ts @@ -30,11 +30,6 @@ test.describe('ToggleSwitch', () => { 'color-contrast': { enabled: theme !== 'dark_dimmed', }, - - // the 'default' preview does not associate a label with the button - 'button-name': { - enabled: false, - }, }, }) }) diff --git a/generated/components.json b/generated/components.json index 293c88d1410..63660e4327b 100644 --- a/generated/components.json +++ b/generated/components.json @@ -108,7 +108,7 @@ "props": [ { "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", "defaultValue": "", "required": true, "description": "" @@ -285,34 +285,48 @@ ] }, { - "name": "ActionList.Heading", + "name": "ActionList.Group", "props": [ { - "name": "variant", - "type": "'subtle' | 'filled'", - "defaultValue": "subtle", + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "required": true, - "description": "" + "description": "Title of the group." }, { - "name": "subtitle", + "name": "auxiliaryText", "type": "string", "defaultValue": "", - "required": false, - "description": "" + "description": "Secondary text that provides additional information about the group." }, { - "name": "headingLevel", - "type": "'1' | '2' | '3' | '4' | '5' | '6'", - "defaultValue": "3", - "required": false, - "description": "" + "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." + }, + { + "name": "sx", + "type": "SystemStyleObject" } ] } @@ -2730,6 +2744,18 @@ { "name": "PageLayout.Content", "props": [ + { + "name": "aria-label", + "type": "string | undefined", + "defaultValue": "", + "description": "A unique label for the rendered main landmark" + }, + { + "name": "aria-labelledby", + "type": "string | undefined", + "defaultValue": "", + "description": "An id to an element which uniquely labels the rendered main landmark" + }, { "name": "width", "type": "| 'full' | 'medium' | 'large' | 'xlarge'", @@ -3626,7 +3652,7 @@ "stories": [ { "id": "components-selectpanel--default", - "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n overlayProps={{\n width: 'medium',\n height: 'medium',\n }}\n />\n \n )\n}" + "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n overlayProps={{\n width: 'small',\n height: 'xsmall',\n }}\n />\n \n )\n}" } ], "props": [ diff --git a/package-lock.json b/package-lock.json index d3603d550a2..9db7b6bc254 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,8 @@ "@github/relative-time-element": "^4.1.2", "@lit-labs/react": "1.1.1", "@primer/behaviors": "1.3.4", - "@primer/octicons-react": "^19.1.0", - "@primer/primitives": "^7.11.11", + "@primer/octicons-react": "18.3.0", + "@primer/primitives": "7.11.11", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -2991,54 +2991,6 @@ "react": ">=16.8.0" } }, - "node_modules/@esbuild/android-arm": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", - "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", - "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", - "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@esbuild/darwin-arm64": { "version": "0.17.19", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", @@ -3055,70 +3007,6 @@ "node": ">=12" } }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", - "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", - "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", - "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", - "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@esbuild/linux-arm64": { "version": "0.17.19", "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", @@ -3135,214 +3023,6 @@ "node": ">=12" } }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", - "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", - "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", - "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", - "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", - "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", - "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", - "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", - "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", - "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", - "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", - "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", - "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", - "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -5555,14 +5235,14 @@ } }, "node_modules/@primer/octicons-react": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.1.0.tgz", - "integrity": "sha512-owWS3jHcsMOQMRzXURSnbqkkQCgmNOZWmm/vejzwnPU21m8Wz1Xng5i0pu1B/VuW7cmsNh5+r5XsVM8r1igY6A==", + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.3.0.tgz", + "integrity": "sha512-kOoc4wrBw3bPe2ZPj9BmCwXdEkw8hxUX/tFCvcjOsZ6eywaQXm3PR0yZnPZxZ8o4RFj2tdg/cwGr4+cU83weHw==", "engines": { "node": ">=8" }, "peerDependencies": { - "react": ">=16.3" + "react": ">=15" } }, "node_modules/@primer/primitives": { diff --git a/package.json b/package.json index f29551f451f..a5baa96baef 100644 --- a/package.json +++ b/package.json @@ -99,8 +99,8 @@ "@github/relative-time-element": "^4.1.2", "@lit-labs/react": "1.1.1", "@primer/behaviors": "1.3.4", - "@primer/octicons-react": "^19.1.0", - "@primer/primitives": "^7.11.11", + "@primer/octicons-react": "18.3.0", + "@primer/primitives": "7.11.11", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json index 18610f7f622..392c6db523a 100644 --- a/src/ActionList/ActionList.docs.json +++ b/src/ActionList/ActionList.docs.json @@ -7,7 +7,7 @@ "props": [ { "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", "defaultValue": "", "required": true, "description": "" @@ -184,36 +184,50 @@ ] }, { - "name": "ActionList.Heading", + "name": "ActionList.Group", "props": [ { - "name": "variant", - "type": "'subtle' | 'filled'", - "defaultValue": "subtle", + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "required": true, - "description": "" + "description": "Title of the group." }, { - "name": "subtitle", + "name": "auxiliaryText", "type": "string", "defaultValue": "", - "required": false, - "description": "" + "description": "Secondary text that provides additional information about the group." }, { - "name": "headingLevel", - "type": "'1' | '2' | '3' | '4' | '5' | '6'", - "defaultValue": "3", - "required": false, - "description": "" + "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." + }, + { + "name": "sx", + "type": "SystemStyleObject" } ] } ] -} +} \ No newline at end of file diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx index 654e4dcf5ee..ef5c79a08aa 100644 --- a/src/ActionList/ActionList.examples.stories.tsx +++ b/src/ActionList/ActionList.examples.stories.tsx @@ -132,25 +132,24 @@ export function MixedSelection(): JSX.Element {

List with mixed selection

- In this list, there is a ActionList with single selection for picking one option, followed by another ActionList - with a single Item that is an action. This pattern appears inside a menu for selection view options in Memex. + In this list, there is a ActionList.Group with single selection for picking one option, followed by a Item that + is an action. This pattern appears inside a menu for selection view options in Memex

- - - {options.map((option, index) => ( - setSelectedIndex(index)} - role="option" - > - {option.icon} - {option.text} - - ))} - + + {options.map((option, index) => ( + setSelectedIndex(index)} + role="option" + > + {option.icon} + {option.text} + + ))} + {typeof selectedIndex === 'number' && ( <> @@ -249,31 +248,37 @@ export function MemexSortable(): JSX.Element { // @ts-ignore react-dnd needs to be updated to support React 18 - - {visibleOptions.map(option => ( - toggle(option.text)} - reorder={reorder} - /> - ))} - - - - {hiddenOptions.map((option, index) => ( - toggle(option.text)} - > - {option.icon} - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} + + {visibleOptions.map(option => ( + toggle(option.text)} + reorder={reorder} + /> + ))} + + + {hiddenOptions.map((option, index) => ( + toggle(option.text)} + > + {option.icon} + {option.text} + + ))} + {hiddenOptions.length === 0 && No hidden fields} + ) diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx index 2888ad1108f..a27e2181d3c 100644 --- a/src/ActionList/ActionList.features.stories.tsx +++ b/src/ActionList/ActionList.features.stories.tsx @@ -3,6 +3,7 @@ import {Meta} from '@storybook/react' import {ActionList} from '.' import {Item} from './Item' import {LinkItem} from './LinkItem' +import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' import Avatar from '../Avatar' @@ -27,7 +28,7 @@ import { export default { title: 'Components/ActionList/Features', component: ActionList, - subcomponents: {Item, LinkItem, Divider, Description}, + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const SimpleList = () => ( @@ -427,22 +428,23 @@ export const GroupWithSubtleTitle = () => { return ( - - {users.slice(2).map(user => ( - assignee.login === user.login))} - aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} - onSelect={() => toggleAssignee(user)} - > - - - - {user.login} - {user.name} - - ))} + + {users.slice(2).map(user => ( + assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} + onSelect={() => toggleAssignee(user)} + > + + + + {user.login} + {user.name} + + ))} + ) } @@ -459,22 +461,23 @@ export const GroupWithFilledTitle = () => { return ( - - {users.slice(2).map(user => ( - assignee.login === user.login))} - aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} - onSelect={() => toggleAssignee(user)} - > - - - - {user.login} - {user.name} - - ))} + + {users.slice(2).map(user => ( + assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} + onSelect={() => toggleAssignee(user)} + > + + + + {user.login} + {user.name} + + ))} + ) } diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx index 982dc3c2b71..de6f66ae6f5 100644 --- a/src/ActionList/ActionList.stories.tsx +++ b/src/ActionList/ActionList.stories.tsx @@ -1,9 +1,9 @@ import React from 'react' import {Story, Meta} from '@storybook/react' -import {ActionList, ActionListProps} from '.' +import {ActionList, ActionListProps, ActionListGroupProps} from '.' import {Item} from './Item' import {LinkItem} from './LinkItem' -import {Heading, ActionListHeadingProps} from './Heading' +import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} from '@primer/octicons-react' @@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} export default { title: 'Components/ActionList', component: ActionList, - subcomponents: {Item, LinkItem, Heading, Divider, Description}, + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const Default = () => ( @@ -33,7 +33,7 @@ Playground.args = { showDividers: false, selectionVariant: undefined, variant: 'inset', - role: 'list', + role: 'listbox', } Playground.argTypes = { showDividers: { @@ -242,34 +242,34 @@ LinkItemPlayground.argTypes = { }, } -export const HeadingPlayground: Story = args => ( +export const GroupPlayground: Story = args => ( - + + Item 1 + Item 2 + ) - -HeadingPlayground.args = { - title: 'Group title', -} - -HeadingPlayground.argTypes = { +GroupPlayground.argTypes = { variant: { - type: 'string', control: { type: 'radio', }, options: ['subtle', 'filled'], }, - title: { + role: { type: 'string', }, - subtitle: { + title: { type: 'string', }, - as: { - control: { - type: 'radio', - }, - options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], + auxiliaryText: { + type: 'string', }, } +GroupPlayground.args = { + variant: 'subtle', + role: 'listbox', + title: 'Group title', + auxiliaryText: '', +} diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index 011c1a800b8..4027ec22f58 100644 --- a/src/ActionList/Description.tsx +++ b/src/ActionList/Description.tsx @@ -44,6 +44,7 @@ export const Description: React.FC {props.children} diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 0eebca75cec..224140dc9ef 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -4,19 +4,16 @@ import {get} from '../constants' import {Theme} from '../ThemeProvider' import {SxProp, merge} from '../sx' -export type ActionListDividerProps = { - as?: React.ElementType -} & SxProp +export type ActionListDividerProps = SxProp /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export const Divider: React.FC> = ({sx = {}, as = 'li'}) => { +export const Divider: React.FC> = ({sx = {}}) => { return (
@@ -493,7 +493,7 @@ exports[`PageLayout renders default layout 1`] = `
-
-
+
@@ -787,7 +787,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
-
-
+
@@ -1081,7 +1081,7 @@ exports[`PageLayout renders with dividers 1`] = `
-
-
+
diff --git a/src/SelectPanel/SelectPanel.stories.tsx b/src/SelectPanel/SelectPanel.stories.tsx index 11206c4943b..c74b251991f 100644 --- a/src/SelectPanel/SelectPanel.stories.tsx +++ b/src/SelectPanel/SelectPanel.stories.tsx @@ -66,7 +66,7 @@ export const Default = () => { onSelectedChange={setSelected} onFilterChange={setFilter} showItemDividers={true} - overlayProps={{width: 'medium', height: 'medium'}} + overlayProps={{width: 'small', height: 'xsmall'}} /> ) diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap index 1486e3792bb..c35d5dc97cd 100644 --- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap +++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap @@ -234,7 +234,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
-
-
+
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx index 79f0d9cdce1..94827b83cf5 100644 --- a/src/TextInput/TextInput.tsx +++ b/src/TextInput/TextInput.tsx @@ -134,7 +134,7 @@ const TextInput = React.forwardRef( showLoadingIndicator={showLeadingLoadingIndicator} hasLoadingIndicator={typeof loading === 'boolean'} > - {LeadingVisual && (typeof LeadingVisual === 'string' ? LeadingVisual : )} + {typeof LeadingVisual === 'function' ? : LeadingVisual} ( showLoadingIndicator={showTrailingLoadingIndicator} hasLoadingIndicator={typeof loading === 'boolean'} > - {TrailingVisual && (typeof TrailingVisual === 'string' ? TrailingVisual : )} + {typeof TrailingVisual === 'function' ? : TrailingVisual} {trailingAction} diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx index 2c82ee2f407..69c93b13758 100644 --- a/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -296,7 +296,7 @@ function TextInputWithTokensInnerComponent - {LeadingVisual && (typeof LeadingVisual === 'string' ? LeadingVisual : )} + {typeof LeadingVisual === 'function' ? : LeadingVisual} } @@ -362,7 +362,7 @@ function TextInputWithTokensInnerComponent - {TrailingVisual && (typeof TrailingVisual === 'string' ? TrailingVisual : )} + {typeof TrailingVisual === 'function' ? : TrailingVisual} ) diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx index 6606f5edc1c..851757d9bab 100644 --- a/src/ToggleSwitch/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -7,6 +7,7 @@ import Text from '../Text' import {get} from '../constants' import {useProvidedStateOrCreate} from '../hooks' import sx, {BetterSystemStyleObject, SxProp} from '../sx' +import VisuallyHidden from '../_VisuallyHidden' import {CellAlignment} from '../DataTable/column' const TRANSITION_DURATION = '80ms' @@ -253,8 +254,7 @@ const ToggleSwitch: React.FC> = ({ fontSize={size === 'small' ? 0 : 1} mx={2} aria-hidden="true" - sx={{position: 'relative', cursor: 'pointer'}} - onClick={handleToggleClick} + sx={{position: 'relative'}} > On @@ -267,11 +267,13 @@ const ToggleSwitch: React.FC> = ({ onClick={handleToggleClick} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} - aria-pressed={isOn} + aria-checked={isOn} + role="switch" checked={isOn} size={size} disabled={!acceptsInteraction} > + {isOn ? 'On' : 'Off'}