diff --git a/.changeset/dirty-cooks-clap.md b/.changeset/dirty-cooks-clap.md new file mode 100644 index 00000000000..ac23467ab87 --- /dev/null +++ b/.changeset/dirty-cooks-clap.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +PageLayout: Add `PageLayout.Sidebar` sub-component diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-colorblind-linux.png new file mode 100644 index 00000000000..a259f85c39a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-dimmed-linux.png new file mode 100644 index 00000000000..ef1143cbec2 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-high-contrast-linux.png new file mode 100644 index 00000000000..28e4aa6cbab Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-linux.png new file mode 100644 index 00000000000..a259f85c39a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a259f85c39a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-colorblind-linux.png new file mode 100644 index 00000000000..5212619423f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-high-contrast-linux.png new file mode 100644 index 00000000000..998bd5a25c0 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-linux.png new file mode 100644 index 00000000000..5212619423f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-tritanopia-linux.png new file mode 100644 index 00000000000..5212619423f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Sidebar-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-colorblind-linux.png new file mode 100644 index 00000000000..3db75fd5fb6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-dimmed-linux.png new file mode 100644 index 00000000000..7ed99d93250 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-high-contrast-linux.png new file mode 100644 index 00000000000..70809ee94ec Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-linux.png new file mode 100644 index 00000000000..3db75fd5fb6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3db75fd5fb6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-colorblind-linux.png new file mode 100644 index 00000000000..1677a519dba Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-high-contrast-linux.png new file mode 100644 index 00000000000..6a4ab2ec769 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-linux.png new file mode 100644 index 00000000000..1677a519dba Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-tritanopia-linux.png new file mode 100644 index 00000000000..1677a519dba Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-End-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png new file mode 100644 index 00000000000..c3c5ad6f003 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png new file mode 100644 index 00000000000..35c647c71bf Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png new file mode 100644 index 00000000000..ffd4c3de5ac Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png new file mode 100644 index 00000000000..c3c5ad6f003 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png new file mode 100644 index 00000000000..35c647c71bf Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e5312dff252 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png new file mode 100644 index 00000000000..ffd4c3de5ac Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png new file mode 100644 index 00000000000..ac60600e279 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-colorblind-linux.png new file mode 100644 index 00000000000..c858e538987 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-dimmed-linux.png new file mode 100644 index 00000000000..cac023341e9 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b422d998573 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-linux.png new file mode 100644 index 00000000000..c858e538987 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-tritanopia-linux.png new file mode 100644 index 00000000000..c858e538987 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-colorblind-linux.png new file mode 100644 index 00000000000..8239541fbfb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-high-contrast-linux.png new file mode 100644 index 00000000000..096c279f54f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-linux.png new file mode 100644 index 00000000000..8239541fbfb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-tritanopia-linux.png new file mode 100644 index 00000000000..8239541fbfb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-Start-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-colorblind-linux.png new file mode 100644 index 00000000000..942d8608b74 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-dimmed-linux.png new file mode 100644 index 00000000000..cdd6dab3f1c Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-high-contrast-linux.png new file mode 100644 index 00000000000..be8d82eb288 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-linux.png new file mode 100644 index 00000000000..942d8608b74 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-tritanopia-linux.png new file mode 100644 index 00000000000..942d8608b74 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-colorblind-linux.png new file mode 100644 index 00000000000..259cd3fb6e0 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-high-contrast-linux.png new file mode 100644 index 00000000000..d3dbebffe6f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-linux.png new file mode 100644 index 00000000000..259cd3fb6e0 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-tritanopia-linux.png new file mode 100644 index 00000000000..259cd3fb6e0 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sidebar-With-Pane-Resizable-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-colorblind-linux.png new file mode 100644 index 00000000000..a0c95f7ed4f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-dimmed-linux.png new file mode 100644 index 00000000000..e934920bcd6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-high-contrast-linux.png new file mode 100644 index 00000000000..28aef2ab8a0 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-linux.png new file mode 100644 index 00000000000..a0c95f7ed4f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a0c95f7ed4f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-colorblind-linux.png new file mode 100644 index 00000000000..757a098fafb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-high-contrast-linux.png new file mode 100644 index 00000000000..9ed7cb09f9f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-linux.png new file mode 100644 index 00000000000..757a098fafb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-tritanopia-linux.png new file mode 100644 index 00000000000..757a098fafb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Sidebar-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..be1dcdfcac2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..77ef2cababe Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..96d00805eed Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-linux.png new file mode 100644 index 00000000000..be1dcdfcac2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..be1dcdfcac2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..cd1903cfe5d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..401693bd944 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-linux.png new file mode 100644 index 00000000000..cd1903cfe5d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..cd1903cfe5d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-colorblind-linux.png new file mode 100644 index 00000000000..6c5ca1dc6bb Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-dimmed-linux.png new file mode 100644 index 00000000000..a0487f75f31 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0ead5558326 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-linux.png new file mode 100644 index 00000000000..b0707724fd9 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-tritanopia-linux.png new file mode 100644 index 00000000000..b0707724fd9 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-colorblind-linux.png new file mode 100644 index 00000000000..be44143326c Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-high-contrast-linux.png new file mode 100644 index 00000000000..ed13a47db40 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-linux.png new file mode 100644 index 00000000000..95302b71858 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-tritanopia-linux.png new file mode 100644 index 00000000000..95302b71858 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Settings-Page-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png new file mode 100644 index 00000000000..6306befe815 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png new file mode 100644 index 00000000000..a1d5031e19e Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png new file mode 100644 index 00000000000..eed948e2341 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png new file mode 100644 index 00000000000..c74b624f287 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png new file mode 100644 index 00000000000..c74b624f287 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png new file mode 100644 index 00000000000..2c60ada5988 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png new file mode 100644 index 00000000000..b2cd6ae2ee8 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png new file mode 100644 index 00000000000..f487dfc4b8d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png new file mode 100644 index 00000000000..f487dfc4b8d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-Responsive-Variant-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png new file mode 100644 index 00000000000..6306befe815 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png new file mode 100644 index 00000000000..a1d5031e19e Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png new file mode 100644 index 00000000000..eed948e2341 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png new file mode 100644 index 00000000000..c74b624f287 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png new file mode 100644 index 00000000000..c74b624f287 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png new file mode 100644 index 00000000000..2c60ada5988 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png new file mode 100644 index 00000000000..b2cd6ae2ee8 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png new file mode 100644 index 00000000000..f487dfc4b8d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png new file mode 100644 index 00000000000..f487dfc4b8d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-Sidebar-Fullscreen-When-Narrow-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-colorblind-linux.png new file mode 100644 index 00000000000..87ceb64e127 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-dimmed-linux.png new file mode 100644 index 00000000000..db1ff3d6d36 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-high-contrast-linux.png new file mode 100644 index 00000000000..38373039283 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-linux.png new file mode 100644 index 00000000000..9780ac9acbf Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-tritanopia-linux.png new file mode 100644 index 00000000000..9780ac9acbf Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-colorblind-linux.png new file mode 100644 index 00000000000..00d7ea428dc Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-high-contrast-linux.png new file mode 100644 index 00000000000..caafcf492dc Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-linux.png new file mode 100644 index 00000000000..7c1775606e9 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-tritanopia-linux.png new file mode 100644 index 00000000000..7c1775606e9 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Resizable-Sidebar-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..eddef656fb4 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..fc1a008a318 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..fbc535555de Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-linux.png new file mode 100644 index 00000000000..4c57d190560 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4c57d190560 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..caaf5c22648 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..78d84899482 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-linux.png new file mode 100644 index 00000000000..8ddbe556fb2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..8ddbe556fb2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-And-Resizable-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-colorblind-linux.png new file mode 100644 index 00000000000..5dd8a17f771 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-dimmed-linux.png new file mode 100644 index 00000000000..439087cf741 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7fb0bc8a9e4 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-linux.png new file mode 100644 index 00000000000..56620f132a8 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-tritanopia-linux.png new file mode 100644 index 00000000000..56620f132a8 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-colorblind-linux.png new file mode 100644 index 00000000000..263f4b75c7e Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-high-contrast-linux.png new file mode 100644 index 00000000000..a3da490e2fa Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-linux.png new file mode 100644 index 00000000000..f11aa03ce74 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-tritanopia-linux.png new file mode 100644 index 00000000000..f11aa03ce74 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-End-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-colorblind-linux.png new file mode 100644 index 00000000000..93512669180 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-dimmed-linux.png new file mode 100644 index 00000000000..1ee361aa95c Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-high-contrast-linux.png new file mode 100644 index 00000000000..4af332e9095 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-linux.png new file mode 100644 index 00000000000..364f29df9f2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-tritanopia-linux.png new file mode 100644 index 00000000000..364f29df9f2 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-colorblind-linux.png new file mode 100644 index 00000000000..46d4f81bc70 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-high-contrast-linux.png new file mode 100644 index 00000000000..dca2bff1876 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-linux.png new file mode 100644 index 00000000000..38b1f73dc4d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-tritanopia-linux.png new file mode 100644 index 00000000000..38b1f73dc4d Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sidebar-Start-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-colorblind-linux.png new file mode 100644 index 00000000000..fb7e9909c84 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-dimmed-linux.png new file mode 100644 index 00000000000..d145009899a Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-high-contrast-linux.png new file mode 100644 index 00000000000..aa2b6a62bf3 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-linux.png new file mode 100644 index 00000000000..e356de4a390 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e356de4a390 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-colorblind-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-colorblind-linux.png new file mode 100644 index 00000000000..b1fb8b407ca Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-high-contrast-linux.png new file mode 100644 index 00000000000..42f2270caec Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-linux.png new file mode 100644 index 00000000000..0488e790854 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-tritanopia-linux.png new file mode 100644 index 00000000000..0488e790854 Binary files /dev/null and b/.playwright/snapshots/components/SplitPageLayout.test.ts-snapshots/SplitPageLayout-With-Sticky-Sidebar-light-tritanopia-linux.png differ diff --git a/e2e/components/PageLayout.test.ts b/e2e/components/PageLayout.test.ts index f549c7c1778..9dcdfd45469 100644 --- a/e2e/components/PageLayout.test.ts +++ b/e2e/components/PageLayout.test.ts @@ -47,6 +47,30 @@ const stories = [ id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', title: 'Scroll Container Within Page Layout Pane', }, + { + id: 'components-pagelayout-features--sidebar-start', + title: 'Sidebar Start', + }, + { + id: 'components-pagelayout-features--sidebar-end', + title: 'Sidebar End', + }, + { + id: 'components-pagelayout-features--resizable-sidebar', + title: 'Resizable Sidebar', + }, + { + id: 'components-pagelayout-features--sidebar-with-pane-resizable', + title: 'Sidebar With Pane Resizable', + }, + { + id: 'components-pagelayout-features--sticky-sidebar', + title: 'Sticky Sidebar', + }, + { + id: 'components-pagelayout-features--sidebar-fullscreen-responsive-variant', + title: 'Sidebar Fullscreen Responsive Variant', + }, ] as const test.describe('PageLayout', () => { diff --git a/e2e/components/SplitPageLayout.test.ts b/e2e/components/SplitPageLayout.test.ts new file mode 100644 index 00000000000..d86b53a5db8 --- /dev/null +++ b/e2e/components/SplitPageLayout.test.ts @@ -0,0 +1,62 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const stories = [ + { + id: 'components-splitpagelayout--default', + title: 'Default', + }, + { + id: 'components-splitpagelayout-features--settings-page', + title: 'Settings Page', + }, + { + id: 'components-splitpagelayout-features--with-sidebar-start', + title: 'With Sidebar Start', + }, + { + id: 'components-splitpagelayout-features--with-sidebar-end', + title: 'With Sidebar End', + }, + { + id: 'components-splitpagelayout-features--with-resizable-sidebar', + title: 'With Resizable Sidebar', + }, + { + id: 'components-splitpagelayout-features--with-sidebar-and-resizable-pane', + title: 'With Sidebar And Resizable Pane', + }, + { + id: 'components-splitpagelayout-features--with-sticky-sidebar', + title: 'With Sticky Sidebar', + }, + { + id: 'components-splitpagelayout-features--sidebar-fullscreen-responsive-variant', + title: 'Sidebar Fullscreen Responsive Variant', + }, +] as const + +test.describe('SplitPageLayout', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `SplitPageLayout.${story.title}.${theme}.png`, + ) + }) + }) + } + }) + } +}) diff --git a/packages/react/src/PageLayout/PageLayout.docs.json b/packages/react/src/PageLayout/PageLayout.docs.json index 1133a6100cc..11eacd89da9 100644 --- a/packages/react/src/PageLayout/PageLayout.docs.json +++ b/packages/react/src/PageLayout/PageLayout.docs.json @@ -42,6 +42,24 @@ }, { "id": "components-pagelayout-features--resizable-pane-with-controlled-width" + }, + { + "id": "components-pagelayout-features--sidebar-start" + }, + { + "id": "components-pagelayout-features--sidebar-end" + }, + { + "id": "components-pagelayout-features--resizable-sidebar" + }, + { + "id": "components-pagelayout-features--sidebar-with-pane-resizable" + }, + { + "id": "components-pagelayout-features--sticky-sidebar" + }, + { + "id": "components-pagelayout-features--sidebar-fullscreen-responsive-variant" } ], "importPath": "@primer/react", @@ -251,6 +269,75 @@ } ] }, + { + "name": "PageLayout.Sidebar", + "props": [ + { + "name": "aria-label", + "type": "string | undefined", + "description": "A unique label for the sidebar region." + }, + { + "name": "aria-labelledby", + "type": "string | undefined", + "description": "An id to an element which uniquely labels the sidebar region." + }, + { + "name": "position", + "type": "'start' | 'end'", + "defaultValue": "'start'", + "description": "Position of the sidebar relative to the page layout. The sidebar spans the full height of the layout, adjacent to the header, content, and footer." + }, + { + "name": "width", + "type": "| 'small' | 'medium' | 'large' | { min: string max: string default: string }", + "defaultValue": "'medium'", + "description": "The width of the sidebar. If using custom widths, provide an object with keys 'min', 'max' and 'default'." + }, + { + "name": "minWidth", + "type": "number", + "defaultValue": "256", + "description": "Minimum width of the sidebar when resizable." + }, + { + "name": "resizable", + "type": "boolean", + "defaultValue": "false", + "description": "When true, the sidebar may be resized by the user. Width is persisted to localStorage by default." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'none'", + "description": "The amount of padding inside the sidebar." + }, + { + "name": "divider", + "type": "| 'none' | 'line'", + "defaultValue": "'none'", + "description": "Divider style between the sidebar and the rest of the layout." + }, + { + "name": "sticky", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the sidebar sticks to the viewport when scrolling. When enabled, the sidebar uses position: sticky with top: 0 and height: 100vh." + }, + { + "name": "responsiveVariant", + "type": "| 'default' | 'fullscreen'", + "defaultValue": "'default'", + "description": "Controls sidebar behavior at narrow viewport widths (below 768px). 'default' retains its normal inline layout. 'fullscreen' expands to cover the full viewport like a dialog overlay." + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the sidebar is hidden." + } + ] + }, { "name": "PageLayout.Footer", "props": [ diff --git a/packages/react/src/PageLayout/PageLayout.features.stories.tsx b/packages/react/src/PageLayout/PageLayout.features.stories.tsx index bd0d76f5f31..910c3fc242a 100644 --- a/packages/react/src/PageLayout/PageLayout.features.stories.tsx +++ b/packages/react/src/PageLayout/PageLayout.features.stories.tsx @@ -361,6 +361,129 @@ export const WithCustomPaneHeading: StoryFn = () => ( ) +export const SidebarStart: StoryFn = () => ( + + + + + + + + + + + + + + +) + +export const SidebarEnd: StoryFn = () => ( + + + + + + + + + + + + + + +) + +export const ResizableSidebar: StoryFn = () => ( + + + + + + + + + + + + + + + + + +) + +export const SidebarWithPaneResizable: StoryFn = () => ( + + + + + + + + + + + + + + + + + +) + +export const StickySidebar: StoryFn = () => ( + + + + + + + + + + + + + + +) + +export const SidebarFullscreenResponsiveVariant: StoryFn = () => ( + + + + + + + + + + + + + + +) export const ResizablePaneWithoutPersistence: StoryFn = () => { const [currentWidth, setCurrentWidth] = React.useState(defaultPaneWidth.medium) diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css index 5466fce1d67..0e9d2effe27 100644 --- a/packages/react/src/PageLayout/PageLayout.module.css +++ b/packages/react/src/PageLayout/PageLayout.module.css @@ -4,6 +4,8 @@ paneMaxWidthDiffBreakpoint: 1280; /* Default value for --pane-max-width-diff below the breakpoint */ paneMaxWidthDiffDefault: 511; + /* Default value for --sidebar-max-width-diff (constant across all viewports) */ + sidebarMaxWidthDiffDefault: 256; } .PageLayoutRoot { @@ -29,6 +31,8 @@ --pane-width-large: 100%; /* NOTE: This value is exported via :export for use in usePaneWidth.ts */ --pane-max-width-diff: 511px; + /* Sidebar uses a smaller diff since it doesn't need to reserve space for a file tree pane */ + --sidebar-max-width-diff: 256px; @media screen and (min-width: 768px) { --pane-width-small: 240px; @@ -596,7 +600,7 @@ width: 100%; @media screen and (min-width: 768px) { - /* + /* * --pane-max-width is set by JS on mount and updated on resize (debounced). * JS calculates viewport - margin to avoid scrollbar discrepancy with 100vw. */ @@ -742,3 +746,141 @@ contain: layout style paint; pointer-events: none; } + +/* Sidebar */ +.PageLayoutRoot:where([data-has-sidebar]) { + /* Note: Sidebar styles are only applied when the PageLayout has a Sidebar child + via `[data-has-sidebar`]` on the root element + */ + display: flex; + /* + Current layout structure for Sidebar support: + -- [Sidebar] | [Header + Content + Footer] | [Sidebar] -- + */ + flex-direction: row; +} + +:where([data-has-sidebar]) > .PageLayoutWrapper { + flex-shrink: 1; + min-width: 0; +} + +.SidebarWrapper { + /* Current layout structure: + -- [Sidebar] | [Resizable Divider] -- + */ + display: flex; + flex-direction: row; + flex-shrink: 0; + height: 100%; + + &:where([data-is-hidden='true']) { + display: none; + } + + /* Position: start (left side) */ + &:where([data-position='start']) { + order: -1; + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing-column); + } + + /* Position: end (right side) */ + &:where([data-position='end']) { + order: 1; + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing-column); + } + + /* Sticky sidebar */ + &:where([data-sticky]) { + position: sticky; + top: 0; + height: 100vh; + } + + /* Narrow viewport */ + @media (--viewportRange-narrow) { + &:where([data-is-hidden-narrow='true']) { + display: none; + } + + /* Fullscreen mode at narrow viewport */ + &:where([data-responsive-variant='fullscreen']) { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + min-width: unset; + max-width: unset; + border-radius: 0; + z-index: 999; + background-color: var(--bgColor-default); + } + } + + /* Regular viewport */ + @media (--viewportRange-regular) { + &:where([data-is-hidden-regular='true']) { + display: none; + } + } + + /* Wide viewport */ + @media (--viewportRange-wide) { + &:where([data-is-hidden-wide='true']) { + display: none; + } + } +} + +.Sidebar { + width: var(--pane-width-size); + height: 100%; + overflow: auto; + + &:where([data-resizable]) { + width: 100%; + + @media screen and (min-width: 768px) { + width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width)); + } + } + + /* In fullscreen mode at narrow, sidebar takes full available space */ + @media (--viewportRange-narrow) { + :where([data-responsive-variant='fullscreen']) > & { + width: 100%; + height: 100%; + min-width: unset; + max-width: unset; + } + } +} + +.SidebarVerticalDivider { + height: auto; + /* Base position (non-responsive) */ + &:where([data-position='start']) { + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--spacing-column); + } + + &:where([data-position='end']) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--spacing-column); + } + + /* Hide divider in fullscreen mode at narrow viewport */ + @media (--viewportRange-narrow) { + :where([data-responsive-variant='fullscreen']) > & { + display: none; + } + } +} + +.Sidebar[data-dragging='true'] { + contain: layout style paint; + pointer-events: none; +} diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx index 52bc50c9874..1e0a02a3941 100644 --- a/packages/react/src/PageLayout/PageLayout.test.tsx +++ b/packages/react/src/PageLayout/PageLayout.test.tsx @@ -272,4 +272,96 @@ describe('PageLayout', async () => { expect(container.firstChild?.nodeName).toEqual('DIV') }) }) + + describe('PageLayout.Sidebar', () => { + it('SidebarWrapper should prevent shrinking', () => { + const {container} = render( + + Content + + Sidebar + + , + ) + + const sidebarWrapper = container.querySelector('[class*="SidebarWrapper"]') + expect(sidebarWrapper).not.toBeNull() + + const style = getComputedStyle(sidebarWrapper!) + expect(style.flexShrink).toBe('0') + }) + + it('renders a resize handle and supports keyboard interaction when resizable', () => { + render( + + Content + + Sidebar + + , + ) + + const handle = screen.getByRole('slider') + expect(handle).toBeInTheDocument() + + // Exercise keyboard handler (e.g. arrow keys) without asserting + // exact width math, to avoid coupling to implementation details. + handle.focus() + fireEvent.keyDown(handle, {key: 'ArrowLeft'}) + fireEvent.keyDown(handle, {key: 'ArrowRight'}) + fireEvent.keyDown(handle, {key: 'Home'}) + fireEvent.keyDown(handle, {key: 'End'}) + }) + + it('respects different position values (start, end)', () => { + const {rerender, container} = render( + + Sidebar + Content + , + ) + + let sidebarWrapper = container.querySelector('[class*="SidebarWrapper"]') + expect(sidebarWrapper).not.toBeNull() + expect(sidebarWrapper?.getAttribute('data-position') ?? 'start').toBe('start') + + rerender( + + Sidebar + Content + , + ) + + sidebarWrapper = container.querySelector('[class*="SidebarWrapper"]') + expect(sidebarWrapper).not.toBeNull() + expect(sidebarWrapper?.getAttribute('data-position') ?? 'end').toBe('end') + }) + + it('supports sticky positioning', () => { + const {container} = render( + + Content + Sidebar + , + ) + + const sidebarWrapper = container.querySelector('[class*="SidebarWrapper"]') + expect(sidebarWrapper).not.toBeNull() + + const style = getComputedStyle(sidebarWrapper!) + expect(style.position === 'sticky' || style.position === 'webkit-sticky').toBe(true) + }) + + it('can render fullscreen when narrow with responsiveVariant="fullscreen"', () => { + const {container} = render( + + Content + Sidebar + , + ) + + const sidebarWrapper = container.querySelector('[class*="SidebarWrapper"]') + expect(sidebarWrapper).not.toBeNull() + }) + }) }) diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx index c20e93049ff..1120e8c6895 100644 --- a/packages/react/src/PageLayout/PageLayout.tsx +++ b/packages/react/src/PageLayout/PageLayout.tsx @@ -18,6 +18,8 @@ import { isPaneWidth, ARROW_KEY_STEP, type PaneWidthValue, + type PaneWidth, + type CustomWidthOptions, } from './usePaneWidth' import {setDraggingStyles, removeDraggingStyles} from './paneUtils' @@ -46,12 +48,16 @@ const PageLayoutContext = React.createContext<{ columnGap: keyof typeof SPACING_MAP paneRef: React.RefObject contentWrapperRef: React.RefObject + sidebarRef: React.RefObject + sidebarContentWrapperRef: React.RefObject }>({ padding: 'normal', rowGap: 'normal', columnGap: 'normal', paneRef: {current: null}, contentWrapperRef: {current: null}, + sidebarRef: {current: null}, + sidebarContentWrapperRef: {current: null}, }) // ---------------------------------------------------------------------------- @@ -66,7 +72,7 @@ export type PageLayoutProps = { columnGap?: keyof typeof SPACING_MAP /** Private prop to allow SplitPageLayout to customize slot components */ - _slotsConfig?: Record<'header' | 'footer', React.ElementType> + _slotsConfig?: Record<'header' | 'footer' | 'sidebar', React.ElementType> className?: string style?: React.CSSProperties } @@ -92,8 +98,10 @@ const Root: React.FC> = ({ }) => { const paneRef = useRef(null) const contentWrapperRef = useRef(null) + const sidebarRef = useRef(null) + const sidebarContentWrapperRef = useRef(null) - const [slots, rest] = useSlots(children, slotsConfig ?? {header: Header, footer: Footer}) + const [slots, rest] = useSlots(children, slotsConfig ?? {header: Header, footer: Footer, sidebar: Sidebar}) const memoizedContextValue = React.useMemo(() => { return { @@ -102,13 +110,16 @@ const Root: React.FC> = ({ columnGap, paneRef, contentWrapperRef, + sidebarRef, + sidebarContentWrapperRef, } - }, [padding, rowGap, columnGap, paneRef, contentWrapperRef]) + }, [padding, rowGap, columnGap, paneRef, contentWrapperRef, sidebarRef, sidebarContentWrapperRef]) return ( - -
+ + {slots.sidebar} +
{slots.header}
{rest}
{slots.footer} @@ -124,7 +135,8 @@ const RootWrapper = memo( padding, children, className, - }: React.PropsWithChildren>) => { + hasSidebar, + }: React.PropsWithChildren & {hasSidebar?: boolean}>) => { return (
{children}
@@ -196,6 +209,114 @@ const VerticalDivider = memo>( VerticalDivider.displayName = 'VerticalDivider' +type SidebarDividerProps = { + position: 'start' | 'end' + divider: 'none' | 'line' + resizable: boolean + minPaneWidth: number + maxPaneWidth: number + currentWidth: number + currentWidthRef: React.MutableRefObject + handleRef: React.RefObject + sidebarRef: React.RefObject + dragStartClientXRef: React.MutableRefObject + dragStartWidthRef: React.MutableRefObject + dragMaxWidthRef: React.MutableRefObject + getMaxPaneWidth: () => number + getDefaultWidth: () => number + saveWidth: (width: number) => void +} + +const SidebarDivider = memo(function SidebarDivider({ + position, + divider, + resizable, + minPaneWidth, + maxPaneWidth, + currentWidth, + currentWidthRef, + handleRef, + sidebarRef, + dragStartClientXRef, + dragStartWidthRef, + dragMaxWidthRef, + getMaxPaneWidth, + getDefaultWidth, + saveWidth, +}) { + const {columnGap} = React.useContext(PageLayoutContext) + + return ( + + {resizable ? ( + { + dragStartClientXRef.current = clientX + dragStartWidthRef.current = sidebarRef.current?.getBoundingClientRect().width ?? currentWidthRef.current! + dragMaxWidthRef.current = getMaxPaneWidth() + }} + onDrag={(value, isKeyboard) => { + const maxWidth = isKeyboard ? getMaxPaneWidth() : dragMaxWidthRef.current + + if (isKeyboard) { + // For position='end': invert the delta so arrow keys feel natural + // ArrowRight should shrink (move divider right), ArrowLeft should expand + const delta = position === 'end' ? -value : value + const newWidth = Math.max(minPaneWidth, Math.min(maxWidth, currentWidthRef.current! + delta)) + if (newWidth !== currentWidthRef.current) { + currentWidthRef.current = newWidth + sidebarRef.current?.style.setProperty('--pane-width', `${newWidth}px`) + updateAriaValues(handleRef.current, {current: newWidth, max: maxWidth}) + } + } else { + if (sidebarRef.current) { + const deltaX = value - dragStartClientXRef.current + // For position='end': cursor moving left (negative delta) increases width + // For position='start': cursor moving right (positive delta) increases width + const directedDelta = position === 'end' ? -deltaX : deltaX + const newWidth = dragStartWidthRef.current + directedDelta + + const clampedWidth = Math.max(minPaneWidth, Math.min(maxWidth, newWidth)) + + if (Math.round(clampedWidth) !== Math.round(currentWidthRef.current!)) { + sidebarRef.current.style.setProperty('--pane-width', `${clampedWidth}px`) + currentWidthRef.current = clampedWidth + updateAriaValues(handleRef.current, {current: Math.round(clampedWidth), max: maxWidth}) + } + } + } + }} + onDragEnd={() => { + saveWidth(currentWidthRef.current!) + }} + onDoubleClick={() => { + const resetWidth = getDefaultWidth() + if (sidebarRef.current) { + sidebarRef.current.style.setProperty('--pane-width', `${resetWidth}px`) + currentWidthRef.current = resetWidth + updateAriaValues(handleRef.current, {current: resetWidth}) + } + saveWidth(resetWidth) + }} + /> + ) : null} + + ) +}) + type DragHandleProps = { /** Ref for imperative ARIA updates during drag */ handleRef: React.RefObject @@ -918,6 +1039,242 @@ Pane.displayName = 'PageLayout.Pane' // ---------------------------------------------------------------------------- // PageLayout.Footer +// ---------------------------------------------------------------------------- +// PageLayout.Sidebar + +export type PageLayoutSidebarProps = { + /** + * A unique label for the sidebar region + */ + 'aria-label'?: React.AriaAttributes['aria-label'] + + /** + * An id to an element which uniquely labels the sidebar region + */ + 'aria-labelledby'?: React.AriaAttributes['aria-labelledby'] + + /** + * Position of the sidebar relative to the page layout + * @default 'start' + */ + position?: 'start' | 'end' + + /** + * Width configuration for the sidebar + */ + width?: PaneWidth | CustomWidthOptions + + /** + * Minimum width of the sidebar when resizable + * @default 256 + */ + minWidth?: number + + /** + * Whether the sidebar can be resized + * @default false + */ + resizable?: boolean + + /** + * localStorage key used to persist the sidebar width across sessions. + * Only applies when `resizable` is `true`. + * When omitted, localStorage is not used. + */ + widthStorageKey?: string + + /** + * Padding inside the sidebar + */ + padding?: keyof typeof SPACING_MAP + + /** + * Divider style between sidebar and content + */ + divider?: 'none' | 'line' + + /** + * Whether the sidebar sticks to the viewport when scrolling. + * When enabled, the sidebar uses `position: sticky` with `top: 0` and `height: 100vh`. + * @default false + */ + sticky?: boolean + + /** + * Controls sidebar behavior at narrow viewport widths (below 768px). + * - `'default'`: the sidebar retains its normal inline layout. + * - `'fullscreen'`: the sidebar expands to cover the full viewport like a dialog overlay. + * @default 'default' + */ + responsiveVariant?: 'default' | 'fullscreen' + + /** + * Whether the sidebar is hidden + */ + hidden?: boolean | ResponsiveValue + + /** + * Optional id for the sidebar element + */ + id?: string + + className?: string + style?: React.CSSProperties +} + +const Sidebar = React.forwardRef>( + ( + { + 'aria-label': label, + 'aria-labelledby': labelledBy, + position = 'start', + width = 'medium', + minWidth = 256, + padding = 'none', + resizable = false, + widthStorageKey, + divider = 'none', + sticky = false, + responsiveVariant = 'default', + hidden: responsiveHidden = false, + children, + id, + className, + style, + }, + forwardRef, + ) => { + const {columnGap, sidebarRef, sidebarContentWrapperRef} = React.useContext(PageLayoutContext) + + // Ref to the drag handle for updating ARIA attributes + const handleRef = React.useRef(null) + + // Cache drag start values to calculate relative delta during drag + const dragStartClientXRef = React.useRef(0) + const dragStartWidthRef = React.useRef(0) + const dragMaxWidthRef = React.useRef(0) + + const {currentWidth, currentWidthRef, minPaneWidth, maxPaneWidth, getMaxPaneWidth, saveWidth, getDefaultWidth} = + usePaneWidth({ + width, + minWidth, + resizable, + widthStorageKey, + paneRef: sidebarRef, + handleRef, + contentWrapperRef: sidebarContentWrapperRef, + constrainToViewport: true, + }) + + useRefObjectAsForwardedRef(forwardRef, sidebarRef) + + const hasOverflow = useOverflow(sidebarRef) + + const sidebarId = useId(id) + + const labelProp: {'aria-labelledby'?: string; 'aria-label'?: string} = {} + if (hasOverflow) { + warning( + label === undefined && labelledBy === undefined, + 'The 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 if (label) { + labelProp['aria-label'] = label + } + } + + return ( +
+ {position === 'end' && ( + + )} +
+ {children} +
+ {position === 'start' && ( + + )} +
+ ) + }, +) + +Sidebar.displayName = 'PageLayout.Sidebar' + +// ---------------------------------------------------------------------------- +// PageLayout.Footer + export type PageLayoutFooterProps = { /** * A unique label for the rendered contentinfo landmark @@ -1014,10 +1371,12 @@ export const PageLayout = Object.assign(Root, { Header, Content, Pane: Pane as WithSlotMarker, + Sidebar: Sidebar as WithSlotMarker, Footer, }) Header.__SLOT__ = Symbol('PageLayout.Header') Content.__SLOT__ = Symbol('PageLayout.Content') ;(Pane as WithSlotMarker).__SLOT__ = Symbol('PageLayout.Pane') +;(Sidebar as WithSlotMarker).__SLOT__ = Symbol('PageLayout.Sidebar') Footer.__SLOT__ = Symbol('PageLayout.Footer') diff --git a/packages/react/src/PageLayout/usePaneWidth.test.ts b/packages/react/src/PageLayout/usePaneWidth.test.ts index 7c558522a6a..b31fcc38162 100644 --- a/packages/react/src/PageLayout/usePaneWidth.test.ts +++ b/packages/react/src/PageLayout/usePaneWidth.test.ts @@ -9,6 +9,7 @@ import { updateAriaValues, defaultPaneWidth, DEFAULT_MAX_WIDTH_DIFF, + DEFAULT_SIDEBAR_MAX_WIDTH_DIFF, SSR_DEFAULT_MAX_WIDTH, ARROW_KEY_STEP, } from './usePaneWidth' @@ -1141,14 +1142,23 @@ describe('helper functions', () => { }) describe('getPaneMaxWidthDiff', () => { - it('should return default when element is null', () => { + it('should return default pane diff when element is null', () => { expect(getPaneMaxWidthDiff(null)).toBe(DEFAULT_MAX_WIDTH_DIFF) }) - it('should return default when CSS variable is not set', () => { + it('should return default sidebar diff when element is null and isSidebar is true', () => { + expect(getPaneMaxWidthDiff(null, true)).toBe(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF) + }) + + it('should return default pane diff when CSS variable is not set', () => { const element = document.createElement('div') expect(getPaneMaxWidthDiff(element)).toBe(DEFAULT_MAX_WIDTH_DIFF) }) + + it('should return default sidebar diff when CSS variable is not set and isSidebar is true', () => { + const element = document.createElement('div') + expect(getPaneMaxWidthDiff(element, true)).toBe(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF) + }) }) describe('updateAriaValues', () => { @@ -1187,6 +1197,7 @@ describe('helper functions', () => { describe('constants', () => { it('should export expected constants', () => { expect(DEFAULT_MAX_WIDTH_DIFF).toBe(511) + expect(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF).toBe(256) expect(SSR_DEFAULT_MAX_WIDTH).toBe(600) expect(ARROW_KEY_STEP).toBe(3) expect(defaultPaneWidth).toEqual({small: 256, medium: 296, large: 320}) diff --git a/packages/react/src/PageLayout/usePaneWidth.ts b/packages/react/src/PageLayout/usePaneWidth.ts index b52b99fdd41..a27cb50eb04 100644 --- a/packages/react/src/PageLayout/usePaneWidth.ts +++ b/packages/react/src/PageLayout/usePaneWidth.ts @@ -26,10 +26,17 @@ export type UsePaneWidthOptions = { width: PaneWidthValue minWidth: number resizable: boolean - widthStorageKey: string + /** localStorage key for persisting width. When undefined, localStorage is not used. */ + widthStorageKey?: string paneRef: React.RefObject handleRef: React.RefObject contentWrapperRef: React.RefObject + /** + * When true, custom max width values are capped to the viewport-based max. + * This prevents overflow in non-wrapping flex layouts (e.g., Sidebar). + * @default false + */ + constrainToViewport?: boolean /** Callback fired when a resize operation ends (drag release or keyboard key up) */ onResizeEnd?: (width: number) => void /** Current/controlled width value in pixels (used instead of internal state; default from `width` is still used for reset) */ @@ -62,6 +69,12 @@ export type UsePaneWidthResult = { */ export const DEFAULT_MAX_WIDTH_DIFF = Number(cssExports.paneMaxWidthDiffDefault) +/** + * Default value for --sidebar-max-width-diff CSS variable. + * Unlike --pane-max-width-diff, this is constant across all viewport sizes. + */ +export const DEFAULT_SIDEBAR_MAX_WIDTH_DIFF = Number(cssExports.sidebarMaxWidthDiffDefault) + // --pane-max-width-diff changes at this breakpoint in PageLayout.module.css. const DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT = Number(cssExports.paneMaxWidthDiffBreakpoint) /** @@ -100,14 +113,17 @@ export const getDefaultPaneWidth = (w: PaneWidthValue): number => { } /** - * Gets the --pane-max-width-diff CSS variable value from a pane element. - * This value is set by CSS media queries and controls the max pane width constraint. + * Gets the max-width-diff CSS variable value from a pane element. + * For sidebars, reads --sidebar-max-width-diff (constant across viewports). + * For panes, reads --pane-max-width-diff (changes at 1280px breakpoint). * Note: This calls getComputedStyle which forces layout - cache the result when possible. */ -export function getPaneMaxWidthDiff(paneElement: HTMLElement | null): number { - if (!paneElement) return DEFAULT_MAX_WIDTH_DIFF - const value = parseInt(getComputedStyle(paneElement).getPropertyValue('--pane-max-width-diff'), 10) - return value > 0 ? value : DEFAULT_MAX_WIDTH_DIFF +export function getPaneMaxWidthDiff(paneElement: HTMLElement | null, isSidebar = false): number { + const defaultValue = isSidebar ? DEFAULT_SIDEBAR_MAX_WIDTH_DIFF : DEFAULT_MAX_WIDTH_DIFF + const cssVar = isSidebar ? '--sidebar-max-width-diff' : '--pane-max-width-diff' + if (!paneElement) return defaultValue + const value = parseInt(getComputedStyle(paneElement).getPropertyValue(cssVar), 10) + return value > 0 ? value : defaultValue } // Helper to update ARIA slider attributes via direct DOM manipulation @@ -171,6 +187,7 @@ export function usePaneWidth({ paneRef, handleRef, contentWrapperRef, + constrainToViewport = false, onResizeEnd, currentWidth: controlledWidth, }: UsePaneWidthOptions): UsePaneWidthResult { @@ -190,14 +207,20 @@ export function usePaneWidth({ }) // Cache the CSS variable value to avoid getComputedStyle during drag (causes layout thrashing) // Updated on mount and resize when breakpoints might change - const maxWidthDiffRef = React.useRef(DEFAULT_MAX_WIDTH_DIFF) + const maxWidthDiffRef = React.useRef(constrainToViewport ? DEFAULT_SIDEBAR_MAX_WIDTH_DIFF : DEFAULT_MAX_WIDTH_DIFF) - // Calculate max width constraint - for custom widths this is fixed, otherwise viewport-dependent + // Calculate max width constraint - for custom widths this is capped to viewport bounds + // when constrainToViewport is set (e.g., Sidebar), otherwise it uses the custom max directly. + // For preset widths, max is always viewport-dependent. const getMaxPaneWidth = React.useCallback(() => { - if (customMaxWidth !== null) return customMaxWidth const viewportWidth = window.innerWidth - return viewportWidth > 0 ? Math.max(minPaneWidth, viewportWidth - maxWidthDiffRef.current) : minPaneWidth - }, [customMaxWidth, minPaneWidth]) + const viewportMax = + viewportWidth > 0 ? Math.max(minPaneWidth, viewportWidth - maxWidthDiffRef.current) : minPaneWidth + if (customMaxWidth !== null) { + return constrainToViewport ? Math.min(customMaxWidth, viewportMax) : customMaxWidth + } + return viewportMax + }, [customMaxWidth, minPaneWidth, constrainToViewport]) const defaultWidth = useMemo(() => getDefaultPaneWidth(width), [width]) // --- State --- @@ -213,7 +236,7 @@ export function usePaneWidth({ } // Try localStorage if onResizeEnd is not provided (default persistence behavior) // Read directly here instead of via persister to satisfy react-hooks/refs lint rule - const shouldUseLocalStorage = onResizeEnd === undefined && resizable === true + const shouldUseLocalStorage = onResizeEnd === undefined && resizable === true && widthStorageKey !== undefined if (shouldUseLocalStorage) { const storedWidth = localStoragePersister.get(widthStorageKey) if (storedWidth !== null) { @@ -289,8 +312,8 @@ export function usePaneWidth({ return } - // Handle localStorage persistence when resizable === true and not controlled - if (resizable) { + // Handle localStorage persistence when resizable === true, not controlled, and key is provided + if (resizable && widthStorageKeyRef.current) { localStoragePersister.save(widthStorageKeyRef.current, rounded) } }, @@ -324,7 +347,7 @@ export function usePaneWidth({ lastViewportWidth = currentViewportWidth if (crossedBreakpoint) { - maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current) + maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current, constrainToViewport) } const actualMax = getMaxPaneWidthRef.current() @@ -352,14 +375,14 @@ export function usePaneWidth({ } // Initial calculation on mount - maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current) + maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current, constrainToViewport) const initialMax = getMaxPaneWidthRef.current() setMaxPaneWidth(initialMax) paneRef.current?.style.setProperty('--pane-max-width', `${initialMax}px`) updateAriaValues(handleRef.current, {min: minPaneWidth, max: initialMax, current: currentWidthRef.current}) - // For custom widths, max is fixed - no need to listen to resize - if (customMaxWidth !== null) return + // For custom widths that aren't viewport-constrained, max is fixed - no need to listen to resize + if (customMaxWidth !== null && !constrainToViewport) return // Throttle approach for window resize - provides immediate visual feedback for small DOMs // while still limiting update frequency @@ -419,7 +442,7 @@ export function usePaneWidth({ endResizeOptimizations() window.removeEventListener('resize', handleResize) } - }, [resizable, customMaxWidth, minPaneWidth, paneRef, handleRef, contentWrapperRef]) + }, [resizable, customMaxWidth, constrainToViewport, minPaneWidth, paneRef, handleRef, contentWrapperRef]) return { currentWidth, diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.docs.json b/packages/react/src/SplitPageLayout/SplitPageLayout.docs.json index 91d1abdfd77..f8dcba56e78 100644 --- a/packages/react/src/SplitPageLayout/SplitPageLayout.docs.json +++ b/packages/react/src/SplitPageLayout/SplitPageLayout.docs.json @@ -9,6 +9,24 @@ }, { "id": "components-splitpagelayout-features--settings-page" + }, + { + "id": "components-splitpagelayout-features--with-sidebar-start" + }, + { + "id": "components-splitpagelayout-features--with-sidebar-end" + }, + { + "id": "components-splitpagelayout-features--with-resizable-sidebar" + }, + { + "id": "components-splitpagelayout-features--with-sidebar-and-resizable-pane" + }, + { + "id": "components-splitpagelayout-features--with-sticky-sidebar" + }, + { + "id": "components-splitpagelayout-features--sidebar-fullscreen-responsive-variant" } ], "importPath": "@primer/react", @@ -180,6 +198,75 @@ } ] }, + { + "name": "SplitPageLayout.Sidebar", + "props": [ + { + "name": "aria-label", + "type": "string | undefined", + "description": "A unique label for the sidebar region." + }, + { + "name": "aria-labelledby", + "type": "string | undefined", + "description": "An id to an element which uniquely labels the sidebar region." + }, + { + "name": "position", + "type": "'start' | 'end'", + "defaultValue": "'start'", + "description": "Position of the sidebar relative to the page layout. The sidebar spans the full height of the layout, adjacent to the header, content, and footer." + }, + { + "name": "width", + "type": "| 'small' | 'medium' | 'large' | { min: string max: string default: string }", + "defaultValue": "'medium'", + "description": "The width of the sidebar. If using custom widths, provide an object with keys 'min', 'max' and 'default'." + }, + { + "name": "minWidth", + "type": "number", + "defaultValue": "256", + "description": "Minimum width of the sidebar when resizable." + }, + { + "name": "resizable", + "type": "boolean", + "defaultValue": "false", + "description": "When true, the sidebar may be resized by the user. Width is persisted to localStorage by default." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the sidebar." + }, + { + "name": "divider", + "type": "| 'none' | 'line'", + "defaultValue": "'line'", + "description": "Divider style between the sidebar and the rest of the layout." + }, + { + "name": "sticky", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the sidebar sticks to the viewport when scrolling. When enabled, the sidebar uses position: sticky with top: 0 and height: 100vh." + }, + { + "name": "responsiveVariant", + "type": "| 'default' | 'fullscreen'", + "defaultValue": "'default'", + "description": "Controls sidebar behavior at narrow viewport widths (below 768px). 'default' retains its normal inline layout. 'fullscreen' expands to cover the full viewport like a dialog overlay." + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the sidebar is hidden." + } + ] + }, { "name": "SplitPageLayout.Footer", "props": [ diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.module.css b/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.module.css index c9fb3fe1076..c96e6f59d2a 100644 --- a/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.module.css +++ b/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.module.css @@ -31,3 +31,21 @@ font-size: var(--text-body-size-medium); color: var(--fgColor-muted); } + +.SidebarContent { + padding: var(--base-size-16); + background-color: var(--bgColor-muted); + border-radius: var(--borderRadius-medium); + height: 100%; +} + +.SidebarHeading { + font-size: var(--text-body-size-medium); + font-weight: var(--base-text-weight-semibold); + margin-bottom: var(--base-size-8); +} + +.SidebarText { + font-size: var(--text-body-size-small); + color: var(--fgColor-muted); +} diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.tsx index 3660b498ed8..9a97519d31c 100644 --- a/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.tsx +++ b/packages/react/src/SplitPageLayout/SplitPageLayout.features.stories.tsx @@ -1,6 +1,6 @@ import type {StoryFn, Meta} from '@storybook/react-vite' -import {Button, Heading, Text} from '..' +import {Button, Heading} from '..' import {NavList} from '../NavList' import {SplitPageLayout} from '../SplitPageLayout' import classes from './SplitPageLayout.features.stories.module.css' @@ -28,14 +28,208 @@ export const SettingsPage: StoryFn = () => (
- Delete account - +

Delete account

+

Are you sure you don't want to just downgrade your account to a free account? We won't charge your credit card anymore. - +

) + +export const WithSidebarStart: StoryFn = () => ( + + +
+

Sidebar

+

+ This sidebar spans the full height of the layout, adjacent to the header, content, and footer. +

+
+ + + Page Title + + + + Profile + + Account + + Emails + Notifications + + + + + Danger zone + +
+
+

Delete account

+

+ Are you sure you don't want to just downgrade your account to a free account? We won't charge your + credit card anymore. +

+
+ +
+ + +

Footer content

+ + +) + +export const WithSidebarEnd: StoryFn = () => ( + + +
+

Inspector

+

+ This sidebar is positioned at the end (right side) and spans the full height. +

+
+ + + Page Title + + + + Profile + + Account + + Emails + Notifications + + + + + Account Settings + +

Main content area

+ + +

Footer content

+ + +) + +export const WithResizableSidebar: StoryFn = () => ( + + +
+

Resizable Sidebar

+

+ Drag the edge to resize this sidebar. The width will be persisted across sessions. +

+
+ + + Page Title + + + + Main Content + +

This layout has a resizable sidebar that can be dragged to adjust its width.

+ + +

Footer content

+ + +) + +export const WithSidebarAndResizablePane: StoryFn = () => ( + + +
+

Sidebar

+

Full-height resizable sidebar

+
+ + + Page Title + + +
+

Details Pane

+

This pane is also resizable and sits beside the content.

+
+ + + + Main Content + +

+ This layout demonstrates using both a full-height sidebar and a resizable pane together. The sidebar spans the + entire height while the pane sits adjacent to the content area only. +

+ + +

Footer content

+ + +) + +export const WithStickySidebar: StoryFn = () => ( + + +
+

Sticky Sidebar

+

This sidebar stays fixed in the viewport as you scroll the page content.

+
+ + + Page Title + + + + Scrollable Content + + {Array.from({length: 20}).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. +

+ ))} + + +

Footer content

+ + +) + +export const SidebarFullscreenResponsiveVariant: StoryFn = () => ( + + +
+

Fullscreen on Narrow

+

+ Resize the viewport below 768px to see this sidebar expand to fill the entire screen. +

+
+ + + Page Title + + + + Main Content + +

This content is hidden behind the sidebar at narrow viewports.

+ + +

Footer content

+ + +) diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx index 1e902129248..8eeb4a9203d 100644 --- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx +++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx @@ -4,6 +4,7 @@ import type { PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneProps, + PageLayoutSidebarProps, } from '../PageLayout' import {PageLayout} from '../PageLayout' @@ -22,6 +23,7 @@ export const Root: React.FC> = pro _slotsConfig={{ header: Header, footer: Footer, + sidebar: Sidebar, }} {...props} /> @@ -85,6 +87,22 @@ export const Pane: React.FC> = } Pane.displayName = 'SplitPageLayout.Pane' +// ---------------------------------------------------------------------------- +// SplitPageLayout.Sidebar + +export type SplitPageLayoutSidebarProps = PageLayoutSidebarProps + +export const Sidebar: React.FC> = ({ + position = 'start', + padding = 'normal', + divider = 'line', + ...props +}) => { + return +} + +Sidebar.displayName = 'SplitPageLayout.Sidebar' + // ---------------------------------------------------------------------------- // SplitPageLayout.Footer @@ -108,5 +126,6 @@ export const SplitPageLayout = Object.assign(Root, { Header, Content, Pane, + Sidebar, Footer, })