diff --git a/.changeset/quiet-sidebar-padding.md b/.changeset/quiet-sidebar-padding.md new file mode 100644 index 00000000000..f7d0deb0b3e --- /dev/null +++ b/.changeset/quiet-sidebar-padding.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix `PageLayout.Sidebar` so its `padding` prop applies independently of the root layout padding. diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css index 526fa6d8ee5..d2ca689e1f2 100644 --- a/packages/react/src/PageLayout/PageLayout.module.css +++ b/packages/react/src/PageLayout/PageLayout.module.css @@ -840,6 +840,8 @@ .Sidebar { width: var(--pane-width-size); height: 100%; + /* stylelint-disable-next-line primer/spacing */ + padding: var(--spacing); overflow: auto; &:where([data-resizable]) { diff --git a/packages/react/src/PageLayout/PageLayout.sidebar-padding.test.tsx b/packages/react/src/PageLayout/PageLayout.sidebar-padding.test.tsx new file mode 100644 index 00000000000..09082ce4f0d --- /dev/null +++ b/packages/react/src/PageLayout/PageLayout.sidebar-padding.test.tsx @@ -0,0 +1,18 @@ +import {describe, it, expect} from 'vitest' +import {render} from '@testing-library/react' +import {PageLayout} from './PageLayout' + +describe('PageLayout.Sidebar padding', () => { + it('applies sidebar padding when the root has no padding', () => { + const {container} = render( + + Content + Sidebar + , + ) + + const sidebar = container.querySelector('[data-component="PageLayout.Sidebar"]') + expect(sidebar).not.toBeNull() + expect(getComputedStyle(sidebar!).paddingTop).toBe('16px') + }) +})