diff --git a/.changeset/chilled-crabs-bow.md b/.changeset/chilled-crabs-bow.md new file mode 100644 index 00000000000..b508afeeddb --- /dev/null +++ b/.changeset/chilled-crabs-bow.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Modules under an internal export pattern are not able to be imported from outside @primer/react diff --git a/.changeset/strange-yaks-wink.md b/.changeset/strange-yaks-wink.md new file mode 100644 index 00000000000..2c78509526d --- /dev/null +++ b/.changeset/strange-yaks-wink.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update PageLayout.Pane to provide a warning instead of an error when overflow is detected and no label has been provided diff --git a/.github/workflows/docs_migration.yml b/.github/workflows/docs_migration.yml deleted file mode 100644 index 7e631e93c6d..00000000000 --- a/.github/workflows/docs_migration.yml +++ /dev/null @@ -1,13 +0,0 @@ -name: Docs migration tracking -on: [push] -jobs: - docs-migration: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 - cache: 'npm' - - run: npm ci - - run: node script/docs-migration.js >> $GITHUB_STEP_SUMMARY diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png index 1edb20cbc5a..706caa8285a 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png index 1edb20cbc5a..706caa8285a 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png index 97c5f0ea65a..6956edef44f 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png index 4dce540aaaa..2b4badaa3cb 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png index 65c846e5876..208a02bff24 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Leading-and-Trailing-Actions-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png new file mode 100644 index 00000000000..62a4d121c68 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png new file mode 100644 index 00000000000..6ef37308b14 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png new file mode 100644 index 00000000000..92702935401 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png new file mode 100644 index 00000000000..c794b92e8c7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png new file mode 100644 index 00000000000..62a4d121c68 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png new file mode 100644 index 00000000000..93e2abf1792 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png new file mode 100644 index 00000000000..d12fc62607d Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png new file mode 100644 index 00000000000..173af5d8721 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png new file mode 100644 index 00000000000..93e2abf1792 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..5207b32b079 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..668a6cc90ba Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..32364b59bb3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png new file mode 100644 index 00000000000..4427de4169b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5207b32b079 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..4adc2354afb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..eb3a4b80d7f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png new file mode 100644 index 00000000000..21e890a560a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..4adc2354afb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png new file mode 100644 index 00000000000..d1da4890a0e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png new file mode 100644 index 00000000000..33f76f69ade Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png new file mode 100644 index 00000000000..8165bfe0bf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png new file mode 100644 index 00000000000..ecaf4bfeaf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d1da4890a0e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png new file mode 100644 index 00000000000..dbd02eabaa8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png new file mode 100644 index 00000000000..f325d139c96 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png new file mode 100644 index 00000000000..050fc6e26b6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png new file mode 100644 index 00000000000..dbd02eabaa8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png new file mode 100644 index 00000000000..12420c24b7f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png new file mode 100644 index 00000000000..b6b4c11b5e7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9af5cce2051 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png new file mode 100644 index 00000000000..1c45d34c3e2 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8652f5be69f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png new file mode 100644 index 00000000000..7da2310b237 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png new file mode 100644 index 00000000000..54f1fcf895b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png new file mode 100644 index 00000000000..8589749cc9a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png new file mode 100644 index 00000000000..4d52424a967 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..e32bca6a587 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..8700158a2e7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..36cc6a8692a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png new file mode 100644 index 00000000000..9b52a6555cf Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e32bca6a587 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..c2725cbd0be Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..c5585014a8b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png new file mode 100644 index 00000000000..21e00e98a3f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..c2725cbd0be Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..4341a310c57 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..9e5e802185f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1d153dfcdd8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png new file mode 100644 index 00000000000..2194b8c710d Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4341a310c57 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..b266d36baeb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..cc4b42b37d5 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png new file mode 100644 index 00000000000..fde519ac54e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..b266d36baeb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..8abc3555290 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..9414d5dc412 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f73cf005f9b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png new file mode 100644 index 00000000000..279e0637b11 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8abc3555290 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..819bf67ddf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..348c3376fc3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png new file mode 100644 index 00000000000..a4f3d0c6e25 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..819bf67ddf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png index d59972c931c..ea31c45f01b 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png index 06c7ef2248e..db2d06f6907 100644 Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png differ diff --git a/contributor-docs/adrs/adr-016-internal-modules.md b/contributor-docs/adrs/adr-016-internal-modules.md index cc91c68e3f3..eadc8c9d053 100644 --- a/contributor-docs/adrs/adr-016-internal-modules.md +++ b/contributor-docs/adrs/adr-016-internal-modules.md @@ -5,7 +5,7 @@ | Stage | Status | | -------- | ------ | | Approved | ✅ | -| Adopted | 🚧 | +| Adopted | ✅ | ## Context @@ -13,17 +13,17 @@ Currently all files live under the `src` directory. In the `npm` package for `@p ```json5 { - "exports": { + exports: { // ... - "./lib-esm/*": { - "import": [ + './lib-esm/*': { + import: [ // ... ], - "require": [ + require: [ // ... - ] - } - } + ], + }, + }, } ``` @@ -37,10 +37,10 @@ In the `"exports"` field of our `npm` package, we can then add the following pat ```json5 { - "exports": { + exports: { // ... - "./lib-esm/internal/*": null - } + './lib-esm/internal/*': null, + }, } ``` @@ -57,7 +57,6 @@ This pattern would remove any files and folders within `src/internal` from the p } ``` - ### Impact - Update the `"exports"` field in `package.json` to exclude `./lib-esm/internal` from usage diff --git a/e2e/components/PageLayout.test.ts b/e2e/components/PageLayout.test.ts new file mode 100644 index 00000000000..3263e89d17b --- /dev/null +++ b/e2e/components/PageLayout.test.ts @@ -0,0 +1,268 @@ +import {test, expect} from '@playwright/test' +import type {Page} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const isInViewPort = (page: Page, boundingBox: {x: number; y: number; width: number; height: number}) => { + let width + let height + const viewportSize = page.viewportSize() + if (viewportSize !== null) { + width = viewportSize.width + height = viewportSize.height + } + + return ( + width !== undefined && + height !== undefined && + boundingBox.x >= 0 && + boundingBox.y >= 0 && + boundingBox.x + boundingBox.width <= width && + boundingBox.y + boundingBox.height <= height + ) +} + +test.describe('PageLayout', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Pull Request', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--pull-request', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Pull Request.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--pull-request', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Sticky Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Sticky Pane.${theme}.png`) + + const content = page.getByTestId('content3') + content.scrollIntoViewIfNeeded() + + const paragraphRect = await page.getByTestId('paragraph0').boundingBox() + if (paragraphRect) { + expect(isInViewPort(page, paragraphRect)).toBe(true) + } + }) + + test('non sticky pane', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + args: { + sticky: false, + numParagraphsInPane: '6', + numParagraphsInContent: '30', + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot() + + const content3 = page.getByTestId('content3') + await content3.scrollIntoViewIfNeeded() + const paragraphRect = await page.getByTestId('paragraph0').boundingBox() + if (paragraphRect) { + expect(isInViewPort(page, paragraphRect)).toBe(true) + } + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Nested Scroll Container', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--nested-scroll-container', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Nested Scroll Container.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--nested-scroll-container', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Custom Sticky Header', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--custom-sticky-header', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Custom Sticky Header.${theme}.png`) + + const content = page.getByTestId('content3') + content.scrollIntoViewIfNeeded() + + const paragraphBoundaries = await page.getByTestId('paragraph0').boundingBox() + const stickyHeaderBoundaries = await page.getByTestId('sticky-header').boundingBox() + if (paragraphBoundaries) { + expect(isInViewPort(page, paragraphBoundaries)).toBe(true) + } + + if (stickyHeaderBoundaries) { + expect(isInViewPort(page, stickyHeaderBoundaries)).toBe(true) + } + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--custom-sticky-header', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Resizable Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--resizable-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Resizable Pane.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--resizable-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Scroll Container Within Page Layout Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot( + `PageLayout.Scroll Container Within Page Layout Pane.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/generated/components.json b/generated/components.json index cd2307492bd..5b0b4a5f931 100644 --- a/generated/components.json +++ b/generated/components.json @@ -243,6 +243,7 @@ { "name": "direction", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", + "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." }, { diff --git a/package-lock.json b/package-lock.json index 634f35d0c2e..fa1363a02bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "focus-visible": "^5.2.0", "fzy.js": "0.4.1", "history": "^5.0.0", - "react-intersection-observer": "9.4.1", + "react-intersection-observer": "9.4.3", "styled-system": "^5.1.5" }, "devDependencies": { @@ -128,7 +128,7 @@ "jest": "29.4.2", "jest-axe": "7.0.1", "jest-environment-jsdom": "29.4.3", - "jest-fail-on-console": "3.0.2", + "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.2.2", @@ -165,7 +165,7 @@ "ts-toolbelt": "9.6.0", "typescript": "4.9.5", "unist-util-find": "1.0.2", - "unist-util-find-before": "3.0.0", + "unist-util-find-before": "3.0.1", "unist-util-flat-filter": "2.0.0", "webpack": "5.77.0", "yaml": "2.2.1" @@ -41446,9 +41446,9 @@ } }, "node_modules/jest-fail-on-console": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/jest-fail-on-console/-/jest-fail-on-console-3.0.2.tgz", - "integrity": "sha512-8vpH03d9n41jKCF/rcQz/nf0ksK2hlnOXTY5VUMqliPHPfT9F7L9CYOyhFNSQ+o6Aszsuja0GAXt1jz6sfDM8w==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/jest-fail-on-console/-/jest-fail-on-console-3.1.1.tgz", + "integrity": "sha512-g9HGhKcWOz8lHeZhLCXGg+RD/7upngiKkkBrHimsO/tGB0qi++QZffOgybjeI2bDW1qgdFiJJEG6t/WeTlfmOw==", "dev": true, "dependencies": { "chalk": "^4.1.0" @@ -50246,9 +50246,9 @@ } }, "node_modules/react-intersection-observer": { - "version": "9.4.1", - "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz", - "integrity": "sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==", + "version": "9.4.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz", + "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==", "peerDependencies": { "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } @@ -54375,9 +54375,9 @@ } }, "node_modules/unist-util-find-before": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unist-util-find-before/-/unist-util-find-before-3.0.0.tgz", - "integrity": "sha512-+FOagPMJICMK3kO0sZSptWxzCZLI11O7Ej7XnmFVim+0hhA7dmTGKB2ouihsFe3/1tzYzTdUrawxNHlz3Q+CuA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/unist-util-find-before/-/unist-util-find-before-3.0.1.tgz", + "integrity": "sha512-teGlW6zc5yFIZxZdOEAPrBXYTXfucZ/ubAM+UDn6wdKLAnCT6GWTp4pPOFfCbg6QnQ43tMl3iAtGDhP0vhZPow==", "dev": true, "dependencies": { "@types/unist": "^2.0.0", @@ -87210,9 +87210,9 @@ } }, "jest-fail-on-console": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/jest-fail-on-console/-/jest-fail-on-console-3.0.2.tgz", - "integrity": "sha512-8vpH03d9n41jKCF/rcQz/nf0ksK2hlnOXTY5VUMqliPHPfT9F7L9CYOyhFNSQ+o6Aszsuja0GAXt1jz6sfDM8w==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/jest-fail-on-console/-/jest-fail-on-console-3.1.1.tgz", + "integrity": "sha512-g9HGhKcWOz8lHeZhLCXGg+RD/7upngiKkkBrHimsO/tGB0qi++QZffOgybjeI2bDW1qgdFiJJEG6t/WeTlfmOw==", "dev": true, "requires": { "chalk": "^4.1.0" @@ -93723,9 +93723,9 @@ } }, "react-intersection-observer": { - "version": "9.4.1", - "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz", - "integrity": "sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==", + "version": "9.4.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz", + "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==", "requires": {} }, "react-is": { @@ -96922,9 +96922,9 @@ } }, "unist-util-find-before": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unist-util-find-before/-/unist-util-find-before-3.0.0.tgz", - "integrity": "sha512-+FOagPMJICMK3kO0sZSptWxzCZLI11O7Ej7XnmFVim+0hhA7dmTGKB2ouihsFe3/1tzYzTdUrawxNHlz3Q+CuA==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/unist-util-find-before/-/unist-util-find-before-3.0.1.tgz", + "integrity": "sha512-teGlW6zc5yFIZxZdOEAPrBXYTXfucZ/ubAM+UDn6wdKLAnCT6GWTp4pPOFfCbg6QnQ43tMl3iAtGDhP0vhZPow==", "dev": true, "requires": { "@types/unist": "^2.0.0", diff --git a/package.json b/package.json index 95e5f43e8a4..0f68fa657a0 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "./lib/*.js", "./lib/*/index.js" ] - } + }, + "./lib-esm/internal/*": null }, "typings": "lib/index.d.ts", "sideEffects": false, @@ -109,7 +110,7 @@ "focus-visible": "^5.2.0", "fzy.js": "0.4.1", "history": "^5.0.0", - "react-intersection-observer": "9.4.1", + "react-intersection-observer": "9.4.3", "styled-system": "^5.1.5" }, "devDependencies": { @@ -206,7 +207,7 @@ "jest": "29.4.2", "jest-axe": "7.0.1", "jest-environment-jsdom": "29.4.3", - "jest-fail-on-console": "3.0.2", + "jest-fail-on-console": "3.1.1", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.2.2", @@ -243,7 +244,7 @@ "ts-toolbelt": "9.6.0", "typescript": "4.9.5", "unist-util-find": "1.0.2", - "unist-util-find-before": "3.0.0", + "unist-util-find-before": "3.0.1", "unist-util-flat-filter": "2.0.0", "webpack": "5.77.0", "yaml": "2.2.1" diff --git a/script/docs-migration.js b/script/docs-migration.js deleted file mode 100644 index ee21625dba3..00000000000 --- a/script/docs-migration.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-disable no-console */ -const glob = require('fast-glob') -const fs = require('node:fs') - -const introduction = `# Docs migration tracking - -We're moving towards a [unified IA](https://github.com/github/primer/issues/1354) for Primer docs that will combine React and Rails component documentation. To implement this unified IA, we need to access Primer React component metadata from outside the primer/react repo. - -The first step to making Primer React component metadata more accessible is to move the prop metadata currently stored in MDX files into structured JSON files per component (example: [TreeView](https://github.com/primer/react/blob/main/src/TreeView/TreeView.docs.json)). These component JSON files are automatically compiled into a file called [generated/components.json](https://github.com/primer/react/blob/main/generated/components.json) that can be imported from outside the primer/react repo. - -This script tracks our progress as we move the source of truth for component metadata from MDX files to JSON files. -` - -console.log(introduction) - -const mdxFiles = glob - .sync('docs/content/**/[A-Z]*.{mdx,md}') - // Ignore deprecated components for now - .filter(file => !file.includes('/deprecated/')) - -const migratedMdxFiles = mdxFiles.filter(file => { - const content = fs.readFileSync(file, 'utf8') - - // We consider an .mdx file "migrated" if it imports a corresponding .docs.json file - return /import .* from ['"].*\.docs\.json['"]/.test(content) -}) - -console.log(`![Progress bar](https://geps.dev/progress/${Math.ceil((migratedMdxFiles.length / mdxFiles.length) * 100)}) -`) - -console.log(`## Migrated MDX files - -${migratedMdxFiles.length} of ${mdxFiles.length} MDX files have corresponding JSON files. - -${migratedMdxFiles.map(file => `- [x] [${file}](https://github.com/primer/react/blob/main/${file})`).join('\n')} -`) - -console.log(`## Not-yet migrated MDX files - -${mdxFiles.length - migratedMdxFiles.length} of ${mdxFiles.length} MDX files do not have corresponding JSON files. - -${mdxFiles - .filter(file => !migratedMdxFiles.includes(file)) - .map(file => `- [ ] [${file}](https://github.com/primer/react/blob/main/${file})`) - .join('\n')} -`) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 4c16f9408b0..0aefdba82f2 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -813,6 +813,41 @@ const components = new Map([ ], }, ], + [ + 'PageLayout', + { + stories: [ + { + id: 'components-pagelayout--default', + name: 'Default', + }, + { + id: 'components-pagelayout-features--pull-request', + name: 'Pull Request', + }, + { + id: 'components-pagelayout-features--sticky-pane', + name: 'Sticky Pane', + }, + { + id: 'components-pagelayout-features--nested-scroll-container', + name: 'Nested Scroll Container', + }, + { + id: 'components-pagelayout-features--custom-sticky-header', + name: 'Custom Sticky Header', + }, + { + id: 'components-pagelayout-features--resizable-pane', + name: 'Resizable Pane', + }, + { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + name: 'Scroll Container Within Page Layout Pane', + }, + ], + }, + ], [ 'Popover', { diff --git a/script/props-mdx-to-json.mjs b/script/props-mdx-to-json.mjs deleted file mode 100644 index 04053d22e64..00000000000 --- a/script/props-mdx-to-json.mjs +++ /dev/null @@ -1,267 +0,0 @@ -'use strict' - -// Temporary script to migrate React component metadata -// from .mdx files to .doc.json files. - -// TODO: Remove this script after the migration is complete. - -import glob from 'fast-glob' -import {fromMarkdown} from 'mdast-util-from-markdown' -import {frontmatterFromMarkdown} from 'mdast-util-frontmatter' -import {mdxFromMarkdown} from 'mdast-util-mdx' -import {frontmatter} from 'micromark-extension-frontmatter' -import {mdxjs} from 'micromark-extension-mdxjs' -import fs from 'node:fs' -import find from 'unist-util-find' -import {parse as parseYaml} from 'yaml' -import flatFilter from 'unist-util-flat-filter' -import {toString} from 'mdast-util-to-string' -import {findBefore} from 'unist-util-find-before' -import {snakeCase} from 'change-case' -import path from 'node:path' - -const srcMap = new Map([ - ['docs/content/ActionList.mdx', 'src/ActionList/List.tsx'], - ['docs/content/deprecated/ActionList.mdx', 'src/deprecated/ActionList/List.tsx'], - ['docs/content/deprecated/Buttons.mdx', 'src/deprecated/Button/Button.tsx'], - ['docs/content/drafts/UnderlineNav2.mdx', 'src/UnderlineNav2/UnderlineNav.tsx'], -]) - -// Get all source code files -const srcFiles = glob - .sync('src/**/[A-Z]*.tsx') - // Filter out tests and stories - .filter(filePath => !filePath.includes('.test.') && !filePath.includes('.stories.')) - -// Get all component mdx files -const mdxFiles = glob - .sync('docs/content/**/[A-Z]*.{md,mdx}') - // Filter out deprecated components for now - .filter(file => !file.includes('/deprecated/')) - -const components = mdxFiles.map(mdxPath => { - // Get the component name from the file name - const name = mdxPath.split('/').pop()?.split('.')[0] - - const id = snakeCase(mdxPath.replace('docs/content/', '').replace(/.mdx?/, '')) - - // Find the corresponding source code file - const srcPath = srcFiles.find(srcPath => srcPath.endsWith(`/${name}.tsx`)) - - // Read the contents of the MDX file - const mdxContent = fs.readFileSync(mdxPath, 'utf-8') - - // Parse the MDX file - const ast = fromMarkdown(mdxContent, { - extensions: [mdxjs(), frontmatter(['yaml'])], - mdastExtensions: [mdxFromMarkdown(), frontmatterFromMarkdown(['yaml'])], - }) - - // Get the status and a11yReviewed flag from the frontmatter - const {status, a11yReviewed = false} = parseYaml(find(ast, {type: 'yaml'}).value ?? '') - - // Get prop data by parsing usage of the component - const allComponentProps = flatFilter(ast, {type: 'mdxJsxFlowElement', name: 'PropsTable'})?.children.map(node => { - const name = toString(findBefore(ast, find(ast, node), {type: 'heading', depth: 3})) - - const props = - flatFilter(node, {type: 'mdxJsxFlowElement', name: 'PropsTableRow'})?.children.map(node => { - const name = node.attributes.find(attr => attr.name === 'name')?.value - const type = jsxToMd(node.attributes.find(attr => attr.name === 'type')?.value) - .replace(/`/g, '') - .replace(/</g, '<') - .replace(/>/g, '>') - .replace(/\[([^)]+)\]\([^)]*\)/, '$1') - const description = jsxToMd(node.attributes.find(attr => attr.name === 'description')?.value) - const defaultValue = jsxToMd(node.attributes.find(attr => attr.name === 'defaultValue')?.value) - const required = node.attributes.find(attr => attr.name === 'required')?.value - const deprecated = node.attributes.find(attr => attr.name === 'deprecated')?.value - - return { - name, - type, - defaultValue, - deprecated: deprecated !== false && deprecated !== undefined ? true : undefined, - required: required !== false && required !== undefined ? true : undefined, - description, - } - }) ?? [] - - let passthrough - - // If the component has an `sx` prop, add it to the list of props - const sxPropRow = find(node, {type: 'mdxJsxFlowElement', name: 'PropsTableSxRow'}) - - if (sxPropRow) { - props.push({name: 'sx', type: 'SystemStyleObject'}) - } - - // If the component has a `ref` prop, add it to the list of props - const refPropRow = find(node, {type: 'mdxJsxFlowElement', name: 'PropsTableRefRow'}) - - if (refPropRow) { - const refType = jsxToMd(refPropRow.attributes.find(attr => attr.name === 'refType')?.value) - - props.push({name: 'ref', type: `React.RefObject<${refType}>`}) - } - - // If the component has am `as` prop, add it to the list of props - const asPropRow = find(node, {type: 'mdxJsxFlowElement', name: 'PropsTableAsRow'}) - - if (asPropRow) { - const defaultElementType = jsxToMd(asPropRow.attributes.find(attr => attr.name === 'defaultElementType')?.value) - const isComponent = defaultElementType[0].toUpperCase() === defaultElementType[0] - props.push({ - name: 'as', - type: 'React.ElementType', - defaultValue: isComponent ? defaultElementType : `"${defaultElementType}"`, - }) - } - - const passthroughRow = find(node, {type: 'mdxJsxFlowElement', name: 'PropsTablePassthroughPropsRow'}) - - if (passthroughRow) { - const element = jsxToMd(passthroughRow.attributes.find(attr => attr.name === 'elementName')?.value) - const url = jsxToMd(passthroughRow.attributes.find(attr => attr.name === 'passthroughPropsLink')?.value) - .replace(/^.*\(/, '') - .replace(/\)$/, '') - - passthrough = {element, url} - } - - const basePropRows = find(node, {type: 'mdxJsxFlowElement', name: 'PropsTableBasePropRows'}) - - if (basePropRows) { - const refType = jsxToMd(basePropRows.attributes.find(attr => attr.name === 'refType')?.value) - const elementType = jsxToMd(basePropRows.attributes.find(attr => attr.name === 'elementType')?.value) - const passthroughPropsLink = jsxToMd( - basePropRows.attributes.find(attr => attr.name === 'passthroughPropsLink')?.value, - ) - .replace(/^.*\(/, '') - .replace(/\)$/, '') - .trim() - const isPolymorphic = jsxToMd(basePropRows.attributes.find(attr => attr.name === 'isPolymorphic')?.value) - - if (refType) { - props.push({name: 'ref', type: `React.RefObject<${refType}>`}) - } - - if (elementType) { - passthrough = {element: elementType, url: passthroughPropsLink} - } - - if (isPolymorphic !== false && isPolymorphic !== undefined ? true : undefined) { - const isComponent = elementType[0].toUpperCase() === elementType[0] - props.push({ - name: 'as', - type: 'React.ElementType', - defaultValue: isComponent ? elementType : `"${elementType}"`, - }) - } - - props.push({name: 'sx', type: 'SystemStyleObject'}) - } - - return {name, props, passthrough} - }) - - // Separate the props for the current component from the props for subcomponents - const props = allComponentProps?.find(component => component.name === name)?.props ?? [] - const passthrough = allComponentProps?.find(component => component.name === name)?.passthrough - const subcomponents = allComponentProps?.filter(component => component.name !== name) ?? [] - - return { - id, - name, - mdxPath, - mdxContent, - srcPath, - status: status.toLowerCase(), - a11yReviewed, - stories: [], - props, - passthrough, - subcomponents, - } -}) - -const componentsWithoutProps = components.filter(component => component.props.length === 0) - -const componentsWithoutSrcPath = components.filter(component => !component.srcPath && !srcMap.has(component.mdxPath)) - -console.log( - 'Components without props', - componentsWithoutProps.map(component => component.name), -) - -console.log( - 'Components wihout props (count)', - `${componentsWithoutProps.length} / ${components.length}`, - `${((componentsWithoutProps.length / components.length) * 100).toFixed(2)}%`, -) - -console.log( - 'Components without srcPath', - componentsWithoutSrcPath.map(component => component.mdxPath), -) - -for (const component of components) { - const docPath = - component.srcPath?.replace('.tsx', '.docs.json') || - `${srcMap.get(component.mdxPath)?.replace(/\/[^/]*$/, '')}/${component.name}.docs.json` - - let existingFile = {} - - if (fs.existsSync(docPath)) { - existingFile = JSON.parse(fs.readFileSync(docPath, 'utf-8')) - } - - const newFile = { - ...existingFile, - id: component.id, - name: component.name, - status: component.status, - a11yReviewed: component.a11yReviewed, - stories: component.stories.length > 0 ? component.stories : existingFile.stories || [], - props: component.props.length > 0 ? component.props : existingFile.props || [], - subcomponents: component.subcomponents.length > 0 ? component.subcomponents : existingFile.subcomponents || [], - } - - fs.writeFileSync(docPath, JSON.stringify(newFile, null, 2)) - - const relativeDocPath = path.relative(component.mdxPath, docPath).replace(/^\.\.\//, '') - - if (component.props.length > 0 && !component.mdxContent.includes(`import data from '${relativeDocPath}'`)) { - let newMdxContent = component.mdxContent.replace(/\n---\n/, `\n---\n\nimport data from '${relativeDocPath}'\n`) - - const propsHeadingIndex = newMdxContent.indexOf('## Props') - const nextHeadingIndex = newMdxContent.indexOf('\n## ', propsHeadingIndex + 1) - - newMdxContent = `${newMdxContent.slice( - 0, - propsHeadingIndex, - )}## Props\n\n\n\n${newMdxContent.slice(nextHeadingIndex)}` - - fs.writeFileSync(component.mdxPath, newMdxContent) - } -} - -// Helper functions - -/** Convert JSX string to markdown string */ -function jsxToMd(node) { - if (typeof node === 'string') return node - - return toString(node) - .replace(//g, '`') - .replace(/<\/InlineCode>/g, '`') - .replace(/<>/g, '') - .replace(/<\/>/g, '') - .replace(/\{' '\}/g, ' ') - .replace(/\s+/g, ' ') - .replace(/(.+?)<\/Link>/g, '[$2]($1)') - .replace(/(.+?)<\/a>/g, '[$2]($1)') - .replace(/</g, '<') - .replace(/>/g, '>') - .trim() -} diff --git a/script/test-e2e b/script/test-e2e index 00b7ebd25b7..bee9e91ad98 100755 --- a/script/test-e2e +++ b/script/test-e2e @@ -6,5 +6,5 @@ docker run --rm \ --network host \ -v $(pwd):/workspace \ -w /workspace \ - -it mcr.microsoft.com/playwright:v1.30.0-focal \ + -it mcr.microsoft.com/playwright:v1.32.0-focal \ /bin/bash -c "npm install && STORYBOOK_URL=http://host.docker.internal:6006 npx playwright test $@" diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 620850c4419..1371a428779 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -136,6 +136,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme '&:has([data-component="ButtonCounter"])': { color: 'accent.fg', }, + '&:disabled[data-no-visuals]': { + color: 'primer.fg.disabled', + '[data-component=ButtonCounter]': { + color: 'inherit', + }, + }, }, outline: { color: 'btn.outline.text', diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx index b3857e0721e..bfa899e2be2 100644 --- a/src/DataTable/Table.tsx +++ b/src/DataTable/Table.tsx @@ -11,7 +11,7 @@ import {Column, CellAlignment} from './column' import {UniqueRow} from './row' import {SortDirection} from './sorting' import {useTableLayout} from './useTable' -import {useOverflow} from '../hooks/useOverflow' +import {useOverflow} from '../internal/hooks/useOverflow' // ---------------------------------------------------------------------------- // Table diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx new file mode 100644 index 00000000000..9a168985c56 --- /dev/null +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -0,0 +1,342 @@ +import React from 'react' +import {ComponentMeta, Story} from '@storybook/react' +import {PageLayout} from './PageLayout' +import {Placeholder} from '../Placeholder' +import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..' + +export default { + title: 'Components/PageLayout/Features', + component: PageLayout, +} as ComponentMeta + +export const PullRequestPage = () => ( + + + + + + Input validation styles #1831 + + + Open + + + mperrotti + {' '} + wants to merge 3 commits into main from{' '} + mp/validation-styles + + + + + + Conversation + + Commits + Checks + Files changed + + + + + + + This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When + this overflows, it should not break to overall page layout! + + + + + + Assignees + + No one –{' '} + + assign yourself + + + + + + Labels + None yet + + + + +) + +export const StickyPane: Story = args => ( + + + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + + ) + })} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. + + + ) + })} + + + + + + +) + +StickyPane.args = { + sticky: true, + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +StickyPane.argTypes = { + sticky: { + type: 'boolean', + }, + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const NestedScrollContainer: Story = args => ( + + + + + + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + ))} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. + + ))} + + + + + + + + + +) + +NestedScrollContainer.args = { + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +NestedScrollContainer.argTypes = { + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const CustomStickyHeader: Story = args => ( + // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component + + + Custom sticky header + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae orci et magna consectetur + ullamcorper eget ac purus. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante + quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec + pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus. Nunc sem + lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut + blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam + tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + + ) + })} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius + tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec + sit amet massa purus. + + + ) + })} + + + + + + + +) + +CustomStickyHeader.args = { + sticky: true, + offsetHeader: '8rem', + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +CustomStickyHeader.argTypes = { + sticky: { + type: 'boolean', + }, + offsetHeader: { + type: 'string', + }, + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const ResizablePane: Story = () => ( + + + + + + + + + + + + + + +) + +export const ScrollContainerWithinPageLayoutPane: Story = () => ( + + + + + + + + + + + + + + + + + + + + +) diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index c749d50161a..a55c409d213 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,6 +1,5 @@ import React from 'react' import {Meta, Story} from '@storybook/react' -import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..' import {Placeholder} from '../Placeholder' import {PageLayout} from './PageLayout' @@ -422,336 +421,4 @@ const Template: Story = args => ( ) export const Default = Template.bind({}) - -export const PullRequestPage = () => ( - - - - - - Input validation styles #1831 - - - Open - - - mperrotti - {' '} - wants to merge 3 commits into main from{' '} - mp/validation-styles - - - - - - Conversation - - Commits - Checks - Files changed - - - - - - - This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When - this overflows, it should not break to overall page layout! - - - - - - Assignees - - No one –{' '} - - assign yourself - - - - - - Labels - None yet - - - - -) - -export const StickyPane: Story = args => ( - - - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - - ) - })} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. - - - ) - })} - - - - - - -) - -StickyPane.args = { - sticky: true, - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -StickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const NestedScrollContainer: Story = args => ( - - - - - - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - ))} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. - - ))} - - - - - - - - - -) - -NestedScrollContainer.args = { - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -NestedScrollContainer.argTypes = { - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const CustomStickyHeader: Story = args => ( - // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component - - - Custom sticky header - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae orci et magna consectetur - ullamcorper eget ac purus. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante - quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec - pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus. Nunc sem - lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut - blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam - tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - - ) - })} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius - tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec - sit amet massa purus. - - - ) - })} - - - - - - - -) - -CustomStickyHeader.args = { - sticky: true, - offsetHeader: '8rem', - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -CustomStickyHeader.argTypes = { - sticky: { - type: 'boolean', - }, - offsetHeader: { - type: 'string', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const ResizablePane: Story = () => ( - - - - - - - - - - - - - - -) - -export const ScrollContainerWithinPageLayoutPane: Story = () => ( - - - - - - - - - - - - - - - - - - - - -) - export default meta diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index b00ae151710..fe50d009a0b 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -8,8 +8,8 @@ import {useSlots} from '../hooks/useSlots' import {BetterSystemStyleObject, merge, SxProp} from '../sx' import {Theme} from '../ThemeProvider' import {canUseDOM} from '../utils/environment' -import {invariant} from '../utils/invariant' -import {useOverflow} from '../utils/useOverflow' +import {useOverflow} from '../internal/hooks/useOverflow' +import {warning} from '../utils/warning' import VisuallyHidden from '../_VisuallyHidden' import {useStickyPaneHeight} from './useStickyPaneHeight' @@ -652,13 +652,19 @@ const Pane = React.forwardRef has overflow and `aria-label` or `aria-labelledby` has not been set. ' + + 'Please provide `aria-label` or `aria-labelledby` to in order to label this ' + + 'region.', + ) + if (labelledBy) { - labelProp = {'aria-labelledby': labelledBy} - } else { - labelProp = {'aria-label': label} + labelProp['aria-labelledby'] = labelledBy + } else if (label) { + labelProp['aria-label'] = label } } diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx deleted file mode 100644 index 9b5b92b1237..00000000000 --- a/src/PageLayout/interaction.stories.tsx +++ /dev/null @@ -1,438 +0,0 @@ -import {Meta} from '@storybook/react' -import {StickyPane, CustomStickyHeader} from './PageLayout.stories' -import {within} from '@storybook/testing-library' -import {expect} from '@storybook/jest' - -const meta: Meta = { - title: 'Components/PageLayout/Interactions', - // component: PageLayout, - parameters: { - layout: 'fullscreen', - controls: {expanded: true}, - }, - args: { - // Debug controls - 'Render header?': true, - 'Render pane?': true, - 'Render footer?': true, - 'Header placeholder height': 64, - 'Pane placeholder height': 200, - 'Content placeholder height': 400, - 'Footer placeholder height': 64, - containerWidth: 'xlarge', - padding: 'normal', - rowGap: 'normal', - columnGap: 'normal', - 'Header.divider.regular': 'none', - 'Header.divider.narrow': 'none', - 'Header.divider.wide': 'none', - 'Header.padding': 'none', - 'Header.hidden.regular': false, - 'Header.hidden.narrow': false, - 'Header.hidden.wide': false, - 'Content.width': 'full', - 'Content.padding': 'none', - 'Content.hidden.regular': false, - 'Content.hidden.narrow': false, - 'Content.hidden.wide': false, - 'Pane.position.regular': 'end', - 'Pane.position.narrow': 'end', - 'Pane.position.wide': 'end', - 'Pane.width': 'medium', - 'Pane.sticky': false, - 'Pane.padding': 'none', - 'Pane.divider.regular': 'none', - 'Pane.divider.narrow': 'none', - 'Pane.divider.wide': 'none', - 'Footer.divider.regular': 'none', - 'Footer.divider.narrow': 'none', - 'Footer.divider.wide': 'none', - 'Footer.padding': 'none', - 'Footer.hidden.regular': false, - 'Footer.hidden.narrow': false, - 'Footer.hidden.wide': false, - }, - argTypes: { - // Debug controls - 'Render header?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Render pane?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Render footer?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Header placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Pane placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Content placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Footer placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - - // PageLayout prop controls - containerWidth: { - type: { - name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - padding: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - rowGap: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - columnGap: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - - // Header prop controls - 'Header.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Header props'}, - }, - 'Header.hidden.regular': { - type: 'boolean', - table: {category: 'Header props'}, - }, - 'Header.hidden.narrow': { - type: 'boolean', - table: {category: 'Header props'}, - }, - 'Header.hidden.wide': { - type: 'boolean', - table: {category: 'Header props'}, - }, - - // Content prop controls - 'Content.width': { - type: { - name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'], - }, - control: {type: 'radio'}, - table: {category: 'Content props'}, - }, - 'Content.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Content props'}, - }, - 'Content.hidden.regular': { - type: 'boolean', - table: {category: 'Content props'}, - }, - 'Content.hidden.narrow': { - type: 'boolean', - table: {category: 'Content props'}, - }, - 'Content.hidden.wide': { - type: 'boolean', - table: {category: 'Content props'}, - }, - - // Pane prop controls - 'Pane.position.regular': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.narrow': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.wide': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.width': { - type: { - name: 'enum', - value: ['small', 'medium', 'large'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.sticky': { - type: 'boolean', - table: {category: 'Pane props'}, - }, - 'Pane.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - - // Footer prop controls - 'Footer.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Footer props'}, - }, - 'Footer.hidden.regular': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - 'Footer.hidden.narrow': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - 'Footer.hidden.wide': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - }, -} - -StickyPane.args = { - sticky: true, - numParagraphsInPane: 3, - numParagraphsInContent: 30, -} - -StickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -const isInViewPort = (boundingRect: {top: number; left: number; right: number; bottom: number}) => { - return ( - boundingRect.top >= 0 && - boundingRect.left >= 0 && - boundingRect.right <= document.documentElement.clientWidth && - boundingRect.bottom <= document.documentElement.clientHeight - ) -} - -StickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const content3 = await canvas.getByTestId('content3') - content3.scrollIntoView() - const paragraph0 = await canvas.getByTestId('paragraph0') - const paragraphRect = paragraph0.getBoundingClientRect() - await expect(isInViewPort(paragraphRect)).toBe(true) -} - -const NonStickyPane = StickyPane.bind({}) - -NonStickyPane.args = { - sticky: false, - numParagraphsInPane: 6, - numParagraphsInContent: 30, -} - -NonStickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const content3 = await canvas.getByTestId('content3') - content3.scrollIntoView() - const paragraph0 = await canvas.getByTestId('paragraph0') - const paragraphRect = paragraph0.getBoundingClientRect() - await expect(isInViewPort(paragraphRect)).toBe(false) -} - -CustomStickyHeader.args = { - sticky: true, - offsetHeader: '8rem', - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -CustomStickyHeader.argTypes = { - sticky: { - type: 'boolean', - }, - offsetHeader: { - type: 'string', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -CustomStickyHeader.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const contentToScroll = await canvas.getByTestId('content3') - contentToScroll.scrollIntoView() - - const stickyPaneFirstParagraph = await canvas.getByTestId('paragraph0') - const paragraphBoundaries = stickyPaneFirstParagraph.getBoundingClientRect() - const stickyHeader = await canvas.getByTestId('sticky-header') - const stickyHeaderBoundaries = stickyHeader.getBoundingClientRect() - await expect(isInViewPort(paragraphBoundaries)).toBe(true) - await expect(isInViewPort(stickyHeaderBoundaries)).toBe(true) -} -export default meta -export {StickyPane, NonStickyPane, CustomStickyHeader} diff --git a/src/Tooltip.docs.json b/src/Tooltip.docs.json index d4b88a8c6ec..3fd7e5d6c69 100644 --- a/src/Tooltip.docs.json +++ b/src/Tooltip.docs.json @@ -12,6 +12,7 @@ { "name": "direction", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", + "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." }, { diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index 0650867f2a9..58a254a85f8 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/__tests__/__snapshots__/Button.test.tsx.snap @@ -1627,6 +1627,14 @@ exports[`Button styles invisible button appropriately 1`] = ` color: accent.fg; } +.c0:disabled[data-no-visuals] { + color: primer.fg.disabled; +} + +.c0:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + @media (forced-colors:active) { .c0:focus { outline: solid 1px transparent; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 085b35d792a..7188ef0de6b 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1469,6 +1469,14 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: #0969da; } +.c4:disabled[data-no-visuals] { + color: #8c959f; +} + +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c4[data-size="small"][data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; @@ -2108,6 +2116,14 @@ exports[`TextInput renders trailingAction text button 1`] = ` color: #0969da; } +.c3:disabled[data-no-visuals] { + color: #8c959f; +} + +.c3:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c3[data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; @@ -2502,6 +2518,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: #0969da; } +.c4:disabled[data-no-visuals] { + color: #8c959f; +} + +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { + color: inherit; +} + .c4[data-no-visuals="true"] { padding-top: 2px; padding-right: 4px; diff --git a/src/hooks/useOverflow.ts b/src/internal/hooks/useOverflow.ts similarity index 100% rename from src/hooks/useOverflow.ts rename to src/internal/hooks/useOverflow.ts diff --git a/src/utils/useOverflow.ts b/src/utils/useOverflow.ts deleted file mode 100644 index c54e00a134d..00000000000 --- a/src/utils/useOverflow.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {useEffect, useState} from 'react' - -export function useOverflow(ref: React.RefObject) { - const [hasOverflow, setHasOverflow] = useState(false) - - useEffect(() => { - if (ref.current === null) return - - const observer = new ResizeObserver(entries => { - for (const entry of entries) { - setHasOverflow( - entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth, - ) - } - }) - - observer.observe(ref.current) - return () => { - observer.disconnect() - } - }, [ref]) - - return hasOverflow -}