diff --git a/.changeset/calm-insects-boil.md b/.changeset/calm-insects-boil.md deleted file mode 100644 index 1aba232fec9..00000000000 --- a/.changeset/calm-insects-boil.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Update NavList to use the new ActionList.GroupHeading API and Add an "as" prop to specify the heading level as default h3. (No changes expected in the rendered HTML) diff --git a/.changeset/few-weeks-serve.md b/.changeset/few-weeks-serve.md new file mode 100644 index 00000000000..c910b97efa6 --- /dev/null +++ b/.changeset/few-weeks-serve.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Add `openInFocus` prop (default: true) to `AutocompleteInput` diff --git a/.changeset/good-bugs-grab.md b/.changeset/good-bugs-grab.md new file mode 100644 index 00000000000..39a88eb9094 --- /dev/null +++ b/.changeset/good-bugs-grab.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +SelectPanel2: Minor optimization for escape key event listener binding diff --git a/.changeset/long-doors-bow.md b/.changeset/long-doors-bow.md deleted file mode 100644 index aad7df261a4..00000000000 --- a/.changeset/long-doors-bow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Update the Stack component so that the `justify` prop correctly updates the layout of items diff --git a/.changeset/silent-apricots-fly.md b/.changeset/silent-apricots-fly.md new file mode 100644 index 00000000000..e5516655b6e --- /dev/null +++ b/.changeset/silent-apricots-fly.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update how gap is set in Stack to work in wide breakpoints diff --git a/.changeset/slimy-pandas-turn.md b/.changeset/slimy-pandas-turn.md new file mode 100644 index 00000000000..07a6eeab3cf --- /dev/null +++ b/.changeset/slimy-pandas-turn.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Replaced space-small with base-size-6 diff --git a/.changeset/stupid-suns-cheat.md b/.changeset/stupid-suns-cheat.md new file mode 100644 index 00000000000..3f936571554 --- /dev/null +++ b/.changeset/stupid-suns-cheat.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator` diff --git a/.changeset/tame-nails-live.md b/.changeset/tame-nails-live.md deleted file mode 100644 index 5c39b099be4..00000000000 --- a/.changeset/tame-nails-live.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -TreeView: Add support for `TreeView.LeadingAction` diff --git a/.eslintrc.js b/.eslintrc.js index ed92672af6c..43ed40e5530 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -68,7 +68,11 @@ module.exports = { camelcase: [ 'error', { - allow: ['dark_dimmed'], + allow: [ + 'dark_dimmed', + // Allow feature flag names that start with `primer_react_` + '^primer_react_', + ], }, ], 'primer-react/no-deprecated-colors': ['warn', {checkAllStrings: true}], diff --git a/.github/workflows/release_tracking.yml b/.github/workflows/release_tracking.yml index 7b509d8fa93..a915b4f273f 100644 --- a/.github/workflows/release_tracking.yml +++ b/.github/workflows/release_tracking.yml @@ -3,6 +3,8 @@ name: Release Event Tracking on: pull_request: + branches: + - 'changeset-release/main' types: - closed - opened @@ -14,6 +16,6 @@ on: jobs: release-tracking: name: Release Tracking - uses: primer/.github/.github/workflows/release_tracking.yml@create_release_tracking_workflow + uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.0 secrets: datadog_api_key: ${{ secrets.DATADOG_API_KEY }} diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png index ed6f16df207..12ae1ab1f97 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png index ef42d025bd5..81054b17e8c 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png index c5062ec59ae..1c7a86a9322 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png index dedbc822f62..dc81c874410 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png index ed6f16df207..12ae1ab1f97 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png index 08d8ef916f5..2b309d634e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png index 8af3a348812..3144d63bad8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png index 9f91e25873a..4a6a6bdd442 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png index 08d8ef916f5..2b309d634e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png index 7ca932492eb..a9945c7c97a 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png index 59a37b63042..93984a22924 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png index e3ed04d0efb..670514a8f52 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png index b4c57664484..087d3050920 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png index 7ca932492eb..a9945c7c97a 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png index a5ae1bfd8d8..54ebef0641e 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png index 03e3ba3ce8c..0ddff78f691 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png index f602939aec3..894a7f69c06 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png index 231e8f689f9..b087f858cbf 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png index ba7b1f165e8..cb584be7e9f 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png index b73b01b5cc6..b93a601acdc 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png index a4dd033689c..bbc93d13a8b 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png index 01022ab1e7e..8fce680c221 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png index 909abe8f4cb..0946c66e7e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png index 58d265e8b5a..b806f4525c7 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png index c5ffd924341..6a7610277a2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png index a887d62a0b1..274c0dabde8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png index f8e8601b827..263fa1dfd03 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png index bd3badf0037..0b3c5d491ce 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png index c5ffd924341..6a7610277a2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png index 089f7a48b8b..9fb921a3328 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png index 7720ef27c8e..0cd4881456d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png index 6a6ace273e0..6826d686203 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png index 5ecd5b32e16..4957de17f9d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png index c695e47df2a..f25f67fd3ce 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png index 0aaca4b1b03..80f4f0ad69b 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png index 1225ebc74f6..c308d50dbe3 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png index 5b08dd9d293..9c2e939e65d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png index 9f8888445bf..a9cc60d52b3 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png index e5428c1f3a9..febee9c17e5 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png differ diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx index 2222ef71509..5d26c715c5e 100644 --- a/docs/content/drafts/PageHeader.mdx +++ b/docs/content/drafts/PageHeader.mdx @@ -316,15 +316,15 @@ import {PageHeader} from '@primer/react/drafts' noUnnecessaryDeps: true, adaptsToThemes: true, adaptsToScreenSizes: true, - fullTestCoverage: false, - usedInProduction: false, - usageExamplesDocumented: false, - hasStorybookStories: false, - designReviewed: false, - a11yReviewed: false, + fullTestCoverage: true, + usedInProduction: true, + usageExamplesDocumented: true, + hasStorybookStories: true, + designReviewed: true, + a11yReviewed: true, stableApi: false, - addressedApiFeedback: false, - hasDesignGuidelines: false, + addressedApiFeedback: true, + hasDesignGuidelines: true, hasFigmaComponent: false, }} /> diff --git a/docs/package.json b/docs/package.json index 5305b4fc1c3..051039346b7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,7 +38,7 @@ "eslint": "8.56.0", "eslint-config-react-app": "7.0.1", "globby": "^11.0.4", - "minipass": "^2.9.0", + "minipass": "^7.1.1", "path-browserify": "^1.0.1", "webpack": "5.40.0" } diff --git a/examples/app-router/package.json b/examples/app-router/package.json index eaabde6bbe5..b40cdd2f515 100644 --- a/examples/app-router/package.json +++ b/examples/app-router/package.json @@ -9,7 +9,7 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index 600473b03ff..f346c8b5bc9 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -20,7 +20,7 @@ "@typescript-eslint/eslint-plugin": "^7.3.1", "@typescript-eslint/parser": "^7.3.1", "@vitejs/plugin-react": "^4.2.1", - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index e1a650e6c96..702d62617d6 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@primer/octicons-react": "19.x", - "@primer/react": "36.18.0", + "@primer/react": "36.19.0", "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/package-lock.json b/package-lock.json index 9f02064eea5..e9efa4eadac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -85,7 +85,7 @@ "eslint": "8.56.0", "eslint-config-react-app": "7.0.1", "globby": "^11.0.4", - "minipass": "^2.9.0", + "minipass": "^7.1.1", "path-browserify": "^1.0.1", "webpack": "5.40.0" }, @@ -268,16 +268,6 @@ "integrity": "sha512-f8kcHX1ArhllUtb/wVSyvygoKCznIjnxhLxy7TCvIiMdT7fL4ZDTIKaadMe6eLvOXg6Wk02UeoFgUoZ2EKZZUA==", "dev": true }, - "docs/node_modules/minipass": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", - "dev": true, - "dependencies": { - "safe-buffer": "^5.1.2", - "yallist": "^3.0.0" - } - }, "docs/node_modules/webpack": { "version": "5.40.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.40.0.tgz", @@ -324,12 +314,6 @@ } } }, - "docs/node_modules/yallist": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true - }, "examples/app-router": { "name": "example-app-router", "dependencies": { @@ -4703,9 +4687,9 @@ "integrity": "sha512-zL79nlhZVCg7x2Pf/HT5MB0mowmErE71VXpF10/3Wy8dQwkninNO1M9aOizh2wKC5LkSpDXqNYjDZwbH0/bcSg==" }, "node_modules/@github/tab-container-element": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-4.5.0.tgz", - "integrity": "sha512-8pzFJVg7AyPFqOjKFoiHwVQbo4MdTPpUfQwW91Hgj+OOvySZVmw4PU8ejU4qTHbb2oA2ajYMRuXuAvhfMgnS1Q==" + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-4.8.0.tgz", + "integrity": "sha512-LxPe4RSNdmfXcjM5APzbwjzyD3aDOqtoKpKgGc7aXucp8t6SWetbJ5lNoZSRCNtKugUkOLnKY1+Zr5DcdbHrhg==" }, "node_modules/@graphql-tools/batch-execute": { "version": "7.1.2", @@ -47111,11 +47095,12 @@ } }, "node_modules/minipass": { - "version": "5.0.0", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz", + "integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==", "dev": true, - "license": "ISC", "engines": { - "node": ">=8" + "node": ">=16 || 14 >=14.17" } }, "node_modules/minizlib": { @@ -52672,9 +52657,9 @@ } }, "node_modules/recast": { - "version": "0.23.6", - "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz", - "integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==", + "version": "0.23.7", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz", + "integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==", "dev": true, "dependencies": { "ast-types": "^0.16.1", @@ -56947,6 +56932,15 @@ "node": ">= 6" } }, + "node_modules/tar/node_modules/minipass": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", + "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/tar/node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -61646,7 +61640,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "4.5.0", + "@github/tab-container-element": "^4.8.0", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", @@ -61759,7 +61753,7 @@ "react-dnd-html5-backend": "14.0.2", "react-dom": "18.2.0", "react-test-renderer": "18.2.0", - "recast": "0.23.6", + "recast": "0.23.7", "rimraf": "5.0.5", "rollup": "4.9.6", "rollup-plugin-postcss": "4.0.2", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index b3dc126dc4d..0a49016cd8f 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,23 @@ # @primer/react +## 36.19.0 + +### Minor Changes + +- [#4546](https://github.com/primer/react/pull/4546) [`c81898c93664d224d7a18722cd1abcdcf2d1a510`](https://github.com/primer/react/commit/c81898c93664d224d7a18722cd1abcdcf2d1a510) Thanks [@ayy-bc](https://github.com/ayy-bc)! - TreeView: Add support for `TreeView.LeadingAction` + +- [#4574](https://github.com/primer/react/pull/4574) [`9c01a930b97218ea550cd7de3436941990b3b068`](https://github.com/primer/react/commit/9c01a930b97218ea550cd7de3436941990b3b068) Thanks [@pksjce](https://github.com/pksjce)! - ActionBar: Move to main directory. ActionBar can now be imported from `'@primer/react'` + +### Patch Changes + +- [#4593](https://github.com/primer/react/pull/4593) [`d4e234f52bf63e632d41fe947801d2c16da0b61f`](https://github.com/primer/react/commit/d4e234f52bf63e632d41fe947801d2c16da0b61f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Update NavList to use the new ActionList.GroupHeading API and Add an "as" prop to specify the heading level as default h3. (No changes expected in the rendered HTML) + +- [#4591](https://github.com/primer/react/pull/4591) [`6cce7b749d8502fc851ad8a432a04acff21dec14`](https://github.com/primer/react/commit/6cce7b749d8502fc851ad8a432a04acff21dec14) Thanks [@joshblack](https://github.com/joshblack)! - Update the Stack component so that the `justify` prop correctly updates the layout of items + +- [#4572](https://github.com/primer/react/pull/4572) [`ac2502975057dc0330e19fdd2d446f43d77eed92`](https://github.com/primer/react/commit/ac2502975057dc0330e19fdd2d446f43d77eed92) Thanks [@iansan5653](https://github.com/iansan5653)! - TreeView: Always align expand/collapse chevron icon, leading visual, and trailing visual to top of item + +- [#4596](https://github.com/primer/react/pull/4596) [`4fa4fae099c425bab58c6f5c3c98b10bbca16012`](https://github.com/primer/react/commit/4fa4fae099c425bab58c6f5c3c98b10bbca16012) Thanks [@keithamus](https://github.com/keithamus)! - Update @github/tab-container-element to latest + ## 36.18.0 ### Minor Changes diff --git a/packages/react/package.json b/packages/react/package.json index 48a4281072f..d1b0d486ad5 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "36.18.0", + "version": "36.19.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js", @@ -89,7 +89,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "4.5.0", + "@github/tab-container-element": "^4.8.0", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", @@ -202,7 +202,7 @@ "react-dnd-html5-backend": "14.0.2", "react-dom": "18.2.0", "react-test-renderer": "18.2.0", - "recast": "0.23.6", + "recast": "0.23.7", "rimraf": "5.0.5", "rollup": "4.9.6", "rollup-plugin-postcss": "4.0.2", diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/ActionBar/ActionBar.docs.json similarity index 94% rename from packages/react/src/drafts/ActionBar/ActionBar.docs.json rename to packages/react/src/ActionBar/ActionBar.docs.json index c73929c5802..7b8f2659f96 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.docs.json +++ b/packages/react/src/ActionBar/ActionBar.docs.json @@ -1,10 +1,10 @@ { "id": "actionbar", "name": "ActionBar", - "status": "draft", - "a11yReviewed": false, + "status": "alpha", + "a11yReviewed": true, "stories": [], - "importPath": "@primer/react/experimental", + "importPath": "@primer/react", "props": [ { "name": "size", diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx similarity index 96% rename from packages/react/src/drafts/ActionBar/ActionBar.stories.tsx rename to packages/react/src/ActionBar/ActionBar.stories.tsx index f2dd0563a0a..95a4f72f720 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/ActionBar/ActionBar.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import ActionBar from '.' -import Text from '../../Text' +import Text from '../Text' import { PencilIcon, BoldIcon, @@ -18,12 +18,12 @@ import { ReplyIcon, ThreeBarsIcon, } from '@primer/octicons-react' -import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput' -import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch' -import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch' -import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../..' -import {Divider} from '../../deprecated/ActionList/Divider' -import mockData from '../SelectPanel2/mock-story-data' +import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput' +import {ViewSwitch} from '../drafts/MarkdownEditor/_ViewSwitch' +import type {MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch' +import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../' +import {Divider} from '../deprecated/ActionList/Divider' +import mockData from '../drafts/SelectPanel2/mock-story-data' export default { title: 'Drafts/Components/ActionBar', diff --git a/packages/react/src/drafts/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx similarity index 95% rename from packages/react/src/drafts/ActionBar/ActionBar.test.tsx rename to packages/react/src/ActionBar/ActionBar.test.tsx index 97cc6ee4ff0..d9d9ab45827 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.test.tsx +++ b/packages/react/src/ActionBar/ActionBar.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {behavesAsComponent} from '../../utils/testing' +import {behavesAsComponent} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx similarity index 94% rename from packages/react/src/drafts/ActionBar/ActionBar.tsx rename to packages/react/src/ActionBar/ActionBar.tsx index e3f5b3b9879..aa2238aafc7 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -1,20 +1,20 @@ import type {RefObject, MutableRefObject} from 'react' import React, {useState, useCallback, useRef, forwardRef} from 'react' import {KebabHorizontalIcon} from '@primer/octicons-react' -import {ActionList} from '../../ActionList' -import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' +import {ActionList} from '../ActionList' +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect' import styled from 'styled-components' -import sx from '../../sx' -import {useOnEscapePress} from '../../hooks/useOnEscapePress' -import type {ResizeObserverEntry} from '../../hooks/useResizeObserver' -import {useResizeObserver} from '../../hooks/useResizeObserver' - -import {useOnOutsideClick} from '../../hooks/useOnOutsideClick' -import type {IconButtonProps} from '../../Button' -import {IconButton} from '../../Button' -import Box from '../../Box' -import {ActionMenu} from '../../ActionMenu' -import {useFocusZone, FocusKeys} from '../../hooks/useFocusZone' +import sx from '../sx' +import {useOnEscapePress} from '../hooks/useOnEscapePress' +import type {ResizeObserverEntry} from '../hooks/useResizeObserver' +import {useResizeObserver} from '../hooks/useResizeObserver' + +import {useOnOutsideClick} from '../hooks/useOnOutsideClick' +import type {IconButtonProps} from '../Button' +import {IconButton} from '../Button' +import Box from '../Box' +import {ActionMenu} from '../ActionMenu' +import {useFocusZone, FocusKeys} from '../hooks/useFocusZone' type ChildSize = { text: string diff --git a/packages/react/src/drafts/ActionBar/index.ts b/packages/react/src/ActionBar/index.ts similarity index 93% rename from packages/react/src/drafts/ActionBar/index.ts rename to packages/react/src/ActionBar/index.ts index ae3069a0ae3..64bf265ed8f 100644 --- a/packages/react/src/drafts/ActionBar/index.ts +++ b/packages/react/src/ActionBar/index.ts @@ -7,3 +7,4 @@ const ActionBar = Object.assign(Bar, { }) export default ActionBar +export {ActionBar} diff --git a/packages/react/src/Autocomplete/Autocomplete.docs.json b/packages/react/src/Autocomplete/Autocomplete.docs.json index 39b19c9ce45..80da9258ba4 100644 --- a/packages/react/src/Autocomplete/Autocomplete.docs.json +++ b/packages/react/src/Autocomplete/Autocomplete.docs.json @@ -19,6 +19,12 @@ "name": "as", "type": "React.ElementType", "defaultValue": "TextInput" + }, + { + "name": "openOnFocus", + "type": "boolean", + "defaultValue": "true", + "description": "Whether the associated autocomplete menu should open on an input focus event" } ], "passthrough": { diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx index 0ff949cb574..ed0fb56ddc9 100644 --- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx @@ -29,6 +29,9 @@ const getArgsByChildComponent = ({ menuLoading, selectionVariant, + // Autocomplete.Input + openOnFocus, + // Autocomplete.Overlay anchorSide, height, @@ -65,6 +68,7 @@ any) => { } return { menuArgs: {emptyStateText, loading: menuLoading, selectionVariant}, + inputArgs: {openOnFocus}, overlayArgs: {anchorSide, height, maxHeight: overlayMaxHeight, width}, textInputArgs, textInputWithTokensArgs: { @@ -131,6 +135,7 @@ const autocompleteStoryMeta: Meta = { emptyStateText: 'No selectable options', menuLoading: false, selectionVariant: 'single', + openOnFocus: true, anchorSide: undefined, height: 'auto', overlayMaxHeight: undefined, @@ -161,6 +166,16 @@ const autocompleteStoryMeta: Meta = { }, }, + // Autocomplete.Input + openOnFocus: { + control: { + type: 'boolean', + }, + table: { + category: 'Autocomplete.Input', + }, + }, + // Autocomplete.Overlay anchorSide: { control: { @@ -217,7 +232,7 @@ const autocompleteStoryMeta: Meta = { export const Default = (args: FormControlArgs) => { const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) + const {menuArgs, inputArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) const isMultiselect = menuArgs.selectionVariant === 'multiple' const [selectedItemIds, setSelectedItemIds] = useState>([]) const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => { @@ -228,12 +243,19 @@ export const Default = (args: FormControlArgs) => { setSelectedItemIds(newlySelectedItems.map(item => item.id)) } + const autocompleteInput = {...inputArgs, ...textInputArgs} + const formValidationId = 'validation-field' return ( event.preventDefault()}> - + ) => { {captionArgs.children && } {validationArgs.children && validationArgs.variant && ( - + )} diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx index 7cdb0469491..f114d881aee 100644 --- a/packages/react/src/Autocomplete/AutocompleteInput.tsx +++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx @@ -10,11 +10,27 @@ import useSafeTimeout from '../hooks/useSafeTimeout' type InternalAutocompleteInputProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any as?: React.ComponentType> + // When false, the autocomplete menu will not render either on mouse click or + // keyboard focus. + openOnFocus?: boolean } +const ARROW_KEYS_NAV = new Set(['ArrowUp', 'ArrowDown']) + const AutocompleteInput = React.forwardRef( ( - {as: Component = TextInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, ...props}, + { + as: Component = TextInput, + onFocus, + onBlur, + onChange, + onKeyDown, + onKeyUp, + onKeyPress, + value, + openOnFocus = true, + ...props + }, forwardedRef, ) => { const autocompleteContext = useContext(AutocompleteContext) @@ -38,10 +54,12 @@ const AutocompleteInput = React.forwardRef( const handleInputFocus: FocusEventHandler = useCallback( event => { - onFocus && onFocus(event) - setShowMenu(true) + if (openOnFocus) { + onFocus?.(event) + setShowMenu(true) + } }, - [onFocus, setShowMenu], + [onFocus, setShowMenu, openOnFocus], ) const handleInputBlur: FocusEventHandler = useCallback( @@ -83,8 +101,11 @@ const AutocompleteInput = React.forwardRef( setInputValue('') inputRef.current.value = '' } + if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) { + setShowMenu(true) + } }, - [inputRef, setInputValue, setHighlightRemainingText, onKeyDown], + [inputRef, setInputValue, setHighlightRemainingText, onKeyDown, showMenu, setShowMenu], ) const handleInputKeyUp: KeyboardEventHandler = useCallback( diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 8f61ba1a1d1..ffc72811a9e 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -264,7 +264,7 @@ const StyledBanner = styled.div` } &[data-title-hidden=''] .BannerContent { - margin-block: var(--space-small, 0.375rem); + margin-block: var(--base-size-6, 0.375rem); } @media screen and (min-width: 544px) { diff --git a/packages/react/src/FormControl/FormControl.docs.json b/packages/react/src/FormControl/FormControl.docs.json index a4c737b98b6..94dcd39ad7c 100644 --- a/packages/react/src/FormControl/FormControl.docs.json +++ b/packages/react/src/FormControl/FormControl.docs.json @@ -56,6 +56,18 @@ "defaultValue": "'label'", "description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'" }, + { + "name": "requiredText", + "type": "string", + "defaultValue": "'*'", + "description": "The text to display when the field is required" + }, + { + "name": "requiredIndicator", + "type": "boolean", + "defaultValue": "true", + "description": "Whether to show or hide the required text in the accessibility tree, the required text is still shown visually." + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx index 07bb3fecb8d..b8184d635e6 100644 --- a/packages/react/src/FormControl/FormControl.features.stories.tsx +++ b/packages/react/src/FormControl/FormControl.features.stories.tsx @@ -10,6 +10,7 @@ import { Radio, RadioGroup, Select, + Text, TextInput, TextInputWithTokens, Textarea, @@ -306,3 +307,30 @@ export const DisabledInputs = () => ( ) + +export const CustomRequired = () => ( + + + Form Input Label + This is a form field with a custom required indicator + + + + Required fields are marked with an asterisk (*) + + Form Input Label + + This is a form field with a required indicator that is hidden in the accessibility tree + + + + + + + Form Input Label + + This is a form field that is marked as optional, it is not required + + + +) diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/_FormControlLabel.tsx index 62c346d8ff8..8c52c909c52 100644 --- a/packages/react/src/FormControl/_FormControlLabel.tsx +++ b/packages/react/src/FormControl/_FormControlLabel.tsx @@ -8,12 +8,14 @@ export type Props = { * Whether the label should be visually hidden */ visuallyHidden?: boolean + requiredText?: string + requiredIndicator?: boolean id?: string } & SxProp const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, sx, ...props}) => { +> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, ...props}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -26,6 +28,8 @@ const FormControlLabel: React.FC< id, visuallyHidden, required, + requiredText, + requiredIndicator, disabled, sx, ...props, @@ -36,6 +40,8 @@ const FormControlLabel: React.FC< visuallyHidden, htmlFor: htmlFor || formControlId, required, + requiredText, + requiredIndicator, disabled, sx, ...props, diff --git a/packages/react/src/PageHeader/PageHeader.docs.json b/packages/react/src/PageHeader/PageHeader.docs.json index 8c54e2f3ba7..824678e8c0e 100644 --- a/packages/react/src/PageHeader/PageHeader.docs.json +++ b/packages/react/src/PageHeader/PageHeader.docs.json @@ -2,7 +2,7 @@ "id": "drafts_page_header", "name": "PageHeader", "status": "draft", - "a11yReviewed": false, + "a11yReviewed": true, "stories": [], "importPath": "@primer/react/experimental", "props": [ diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx index 273112d3c3a..a9c19f4bba1 100644 --- a/packages/react/src/Stack/Stack.tsx +++ b/packages/react/src/Stack/Stack.tsx @@ -4,15 +4,11 @@ import type {ResponsiveValue} from '../hooks/useResponsiveValue' import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes' const StyledStack = styled.div` - --Stack-gap-whenRegular: var(--stack-gap-normal, 16px); - --Stack-gap-whenNarrow: var(--stack-gap-normal, 16px); - --Stack-gap-whenWide: var(--Stack-gap-whenRegular); - display: flex; flex-flow: column; align-items: stretch; align-content: flex-start; - gap: var(--Stack-gap-whenNarrow); + gap: var(--stack-gap, var(--stack-gap-normal, 1rem)); // non-responsive values @@ -48,17 +44,22 @@ const StyledStack = styled.div` &[data-gap='none'], &[data-gap-narrow='none'] { - --Stack-gap-whenNarrow: 0; + --stack-gap: var(--stack-gap-none, 0); } &[data-gap='condensed'], &[data-gap-narrow='condensed'] { - --Stack-gap-whenNarrow: var(--stack-gap-condensed, 8px); + --stack-gap: var(--stack-gap-condensed, 0.5rem); } &[data-gap='normal'], &[data-gap-narrow='normal'] { - --Stack-gap-whenNarrow: var(--stack-gap-normal, 16px); + --stack-gap: var(--stack-gap-normal, 1rem); + } + + &[data-gap='spacious'], + &[data-gap-narrow='spacious'] { + --stack-gap: var(--stack-gap-spacious, 1.5rem); } &[data-align='start'], @@ -143,19 +144,19 @@ const StyledStack = styled.div` } &[data-gap-regular='none'] { - --Stack-gap-whenRegular: 0; + --stack-gap: var(--stack-gap-none, 0); } &[data-gap-regular='condensed'] { - --Stack-gap-whenRegular: var(--stack-gap-condensed, 8px); + --stack-gap: var(--stack-gap-condensed, 0.5rem); } &[data-gap-regular='normal'] { - --Stack-gap-whenRegular: var(--stack-gap-normal, 16px); + --stack-gap: var(--stack-gap-normal, 1rem); } &[data-gap-regular='spacious'] { - --Stack-gap-whenRegular: var(--stack-gap-spacious, 24px); + --stack-gap: var(--stack-gap-spacious, 1.5rem); } &[data-align-regular='start'] { @@ -205,8 +206,6 @@ const StyledStack = styled.div` // @custom-media --viewportRange-wide @media (min-width: 87.5rem) { - gap: var(--Stack-gap-whenWide); - &[data-padding-wide='none'] { padding: 0; } @@ -232,19 +231,19 @@ const StyledStack = styled.div` } &[data-gap-wide='none'] { - --Stack-gap-whenWide: 0; + --stack-gap: var(--stack-gap-none, 0); } &[data-gap-wide='condensed'] { - --Stack-gap-whenWide: var(--stack-gap-condensed, 8px); + --stack-gap: var(--stack-gap-condensed, 0.5rem); } &[data-gap-wide='normal'] { - --Stack-gap-whenWide: var(--stack-gap-normal, 16px); + --stack-gap: var(--stack-gap-normal, 1rem); } &[data-gap-wide='spacious'] { - --Stack-gap-whenWide: var(--stack-gap-spacious, 24px); + --stack-gap: var(--stack-gap-spacious, 1.5rem); } &[data-align-wide='start'] { diff --git a/packages/react/src/Stack/__tests__/Stack.test.tsx b/packages/react/src/Stack/__tests__/Stack.test.tsx index d4a361aeca5..e4cca6c27d0 100644 --- a/packages/react/src/Stack/__tests__/Stack.test.tsx +++ b/packages/react/src/Stack/__tests__/Stack.test.tsx @@ -98,7 +98,7 @@ describe('Stack', () => { describe('gap', () => { it('should set the default gap to `normal`', () => { render() - expect(screen.getByTestId('stack')).toHaveStyle('gap: var(--Stack-gap-whenNarrow);') + expect(screen.getByTestId('stack')).toHaveStyle('gap: var(--stack-gap,var(--stack-gap-normal,1rem));') }) it('should support specifying the stack gap with the `gap` prop', () => { diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx index 73d02f13d75..639fd6602e7 100644 --- a/packages/react/src/TreeView/TreeView.features.stories.tsx +++ b/packages/react/src/TreeView/TreeView.features.stories.tsx @@ -1040,4 +1040,88 @@ export const LeadingAction: Story = () => { ) } +export const MultilineItems: Story = () => ( + +) + export default meta diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index 53e86b916f5..06aa13321c6 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -67,6 +67,9 @@ export type TreeViewProps = { className?: string } +/* Size of toggle icon in pixels. */ +const TOGGLE_ICON_SIZE = 12 + const UlBox = styled.ul` list-style: none; padding: 0; @@ -105,6 +108,7 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-container { --level: 1; /* default level */ --toggle-width: 1rem; /* 16px */ + --min-item-height: 2rem; /* 32px */ position: relative; display: grid; --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem); @@ -112,7 +116,6 @@ const UlBox = styled.ul` grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr; grid-template-areas: 'spacer leadingAction toggle content'; width: 100%; - min-height: 2rem; /* 32px */ font-size: ${get('fontSizes.1')}; color: ${get('colors.fg.default')}; border-radius: ${get('radii.2')}; @@ -129,7 +132,7 @@ const UlBox = styled.ul` @media (pointer: coarse) { --toggle-width: 1.5rem; /* 24px */ - min-height: 2.75rem; /* 44px */ + --min-item-height: 2.75rem; /* 44px */ } &:has(.PRIVATE_TreeView-item-skeleton):hover { @@ -169,8 +172,11 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-toggle { grid-area: toggle; display: flex; - align-items: center; justify-content: center; + align-items: flex-start; + /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap + across more lines. */ + padding-top: calc(var(--min-item-height) / 2 - ${TOGGLE_ICON_SIZE}px / 2); height: 100%; color: ${get('colors.fg.muted')}; } @@ -187,10 +193,13 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-content { grid-area: content; display: flex; - align-items: center; height: 100%; padding: 0 ${get('space.2')}; gap: ${get('space.2')}; + line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285)); + /* The dynamic top and bottom padding to maintain the minimum item height for single line items */ + padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2); + padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2); } .PRIVATE_TreeView-item-content-text { @@ -204,7 +213,11 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-visual { display: flex; + align-items: center; color: ${get('colors.fg.muted')}; + /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap + across more lines. */ + height: var(--custom-line-height, 1.3rem); } .PRIVATE_TreeView-item-leading-action { @@ -524,7 +537,11 @@ const Item = React.forwardRef( } }} > - {isExpanded ? : } + {isExpanded ? ( + + ) : ( + + )} ) : null}
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 4dbaf3f35d0..73706d20a0d 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -2,6 +2,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` [ + "ActionBar", + "type ActionBarProps", "ActionList", "type ActionListDescriptionProps", "type ActionListDividerProps", diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx index bd2127ae8c2..5e54e4c6b3b 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx @@ -179,6 +179,38 @@ describe('SelectPanel', () => { expect(mockOnSubmit).toHaveBeenCalledTimes(0) }) + it('should not call addEventListener on each render for Escape key handling when onCancel has not changed', async () => { + const onCancel = jest.fn() + const container = render( + + child + , + ) + const addEventListenerSpy = jest.spyOn(globalThis.EventTarget.prototype, 'addEventListener') + const removeEventListenerSpy = jest.spyOn(globalThis.EventTarget.prototype, 'removeEventListener') + + container.rerender( + + child + , + ) + expect(addEventListenerSpy).not.toHaveBeenCalled() + expect(removeEventListenerSpy).not.toHaveBeenCalled() + }) + + it('Escape key closes the dialog and calls onCancel', async () => { + const mockOnSubmit = jest.fn() + const mockOnCancel = jest.fn() + const {container, user} = await getFixtureWithOpenContainer({mockOnSubmit, mockOnCancel}) + selectUnselectedOption(container, user) + + await user.keyboard('{Escape}') + + expect(container.queryByRole('dialog')).toBeNull() + expect(mockOnCancel).toHaveBeenCalledTimes(1) + expect(mockOnSubmit).toHaveBeenCalledTimes(0) + }) + it('SelectPanel within FormControl should be labelled by FormControl.Label', async () => { const component = render() const buttonByRole = component.getByRole('button') diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index c882202602c..ab99dbbe433 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -136,10 +136,10 @@ const Panel: React.FC = ({ if (propsOpen === undefined) setInternalOpen(false) }, [internalOpen, propsOpen]) - const onInternalCancel = () => { + const onInternalCancel = React.useCallback(() => { onInternalClose() if (typeof propsOnCancel === 'function') propsOnCancel() - } + }, [onInternalClose, propsOnCancel]) const onInternalSubmit = (event?: React.FormEvent) => { event?.preventDefault() // there is no event with selectionVariant=instant @@ -199,7 +199,7 @@ const Panel: React.FC = ({ } dialogEl?.addEventListener('keydown', handler) return () => dialogEl?.removeEventListener('keydown', handler) - }) + }, [onInternalCancel]) // Autofocus hack: React doesn't support autoFocus for dialog: https://github.com/facebook/react/issues/23301 // tl;dr: react takes over autofocus instead of letting the browser handle it, diff --git a/packages/react/src/drafts/index.ts b/packages/react/src/drafts/index.ts index b26c9a7abfa..4a869314e36 100644 --- a/packages/react/src/drafts/index.ts +++ b/packages/react/src/drafts/index.ts @@ -67,8 +67,7 @@ export * from './SelectPanel2' export {default as TabPanels} from './TabPanels' export type {TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps} from './TabPanels' export * from '../TooltipV2' -export {default as ActionBar} from './ActionBar' -export * from './ActionBar' +export * from '../ActionBar' export {Stack} from '../Stack' export type {StackProps, StackItemProps} from '../Stack' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index e3148feb8f4..30f2d09c796 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -193,6 +193,9 @@ export type { export {UnderlineNav} from './UnderlineNav' export type {UnderlineNavProps, UnderlineNavItemProps} from './UnderlineNav' +export {ActionBar} from './ActionBar' +export type {ActionBarProps} from './ActionBar' + // eslint-disable-next-line no-restricted-imports export {SSRProvider, useSSRSafeId} from './utils/ssr' export {default as sx, merge} from './sx' diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 68ac9e129c6..e932a4d5418 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -6,6 +6,8 @@ import VisuallyHidden from '../../_VisuallyHidden' type BaseProps = SxProp & { disabled?: boolean required?: boolean + requiredText?: string + requiredIndicator?: boolean visuallyHidden?: boolean id?: string } @@ -28,6 +30,8 @@ const InputLabel: React.FC> = ({ htmlFor, id, required, + requiredText, + requiredIndicator, visuallyHidden, sx, as = 'label', @@ -52,10 +56,10 @@ const InputLabel: React.FC> = ({ }} {...props} > - {required ? ( + {required || requiredText ? ( {children} - * + {requiredText ?? '*'} ) : ( children