diff --git a/src/Sheet/README.md b/src/Sheet/README.md index c7c99bf183..806463f361 100644 --- a/src/Sheet/README.md +++ b/src/Sheet/README.md @@ -20,9 +20,11 @@ notes: | const [blocking, setBlocking] = useState(false); const [dark, setDark] = useState(false); const [position, setPosition] = useState('bottom'); + const [width, setWidth] = useState('md'); const [show, setShow] = useState(false); const positions = ['left', 'right', 'top', 'bottom']; + const widths = ['sm', 'md', 'lg']; return ( <> @@ -35,6 +37,15 @@ notes: | {position} ))}
+ + {widths.map((width) => ( + {width} + ))} +
{' '} @@ -47,6 +58,7 @@ notes: | ', () => { expect(sheetElement).toHaveClass('pgn__sheet-component'); expect(sheetElement).toHaveClass(sheetClass); }); + + it('renders with correct width classes', () => { + const { unmount } = render(); + const sheetSm = screen.getByRole('alert'); + + expect(sheetSm).toHaveClass('pgn__sheet-width-sm'); + + unmount(); + + render(); + const sheetLg = screen.getByRole('alert'); + + expect(sheetLg).toHaveClass('pgn__sheet-width-lg'); + }); + + it('renders default width (md) when no width is provided', () => { + render(); + const sheet = screen.getByRole('alert'); + expect(sheet).toHaveClass('pgn__sheet-width-md'); + }); }); }); diff --git a/src/Sheet/__snapshots__/Sheet.test.jsx.snap b/src/Sheet/__snapshots__/Sheet.test.jsx.snap index 214d14e086..673f279f9a 100644 --- a/src/Sheet/__snapshots__/Sheet.test.jsx.snap +++ b/src/Sheet/__snapshots__/Sheet.test.jsx.snap @@ -23,7 +23,7 @@ exports[` snapshots blocking, left snapshot 1`] = `
snapshots dark, right snapshot 1`] = `
snapshots default args snapshot: bottom, show, light 1`] = `
{}, variant: VARIANTS.light, diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss index 1420578d55..5f13562d76 100644 --- a/src/Sheet/index.scss +++ b/src/Sheet/index.scss @@ -81,8 +81,20 @@ &.left, &.right { - max-width: 272px; height: 100%; top: 0; + width: 100%; + + &.pgn__sheet-width-sm { + max-width: var(--pgn-width-sheet-sm); + } + + &.pgn__sheet-width-md { + max-width: var(--pgn-width-sheet-md); + } + + &.pgn__sheet-width-lg { + max-width: var(--pgn-width-sheet-lg); + } } } diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index f09f812f15..64cd8f5231 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -123,6 +123,9 @@ --pgn-size-search-field-border-width-base: 0.0625rem; --pgn-size-search-field-border-width-focus: 0.3125rem; --pgn-size-search-field-border-radius: 0; + --pgn-width-sheet-sm: 400px; + --pgn-width-sheet-md: 500px; + --pgn-width-sheet-lg: 800px; --pgn-size-spinner-base-width: 2rem; --pgn-size-spinner-base-border-width: 0.25em; --pgn-size-spinner-sm-width: 1rem; diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json index 12f8cb0c1b..9ccbca78ef 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -7,5 +7,13 @@ "main": { "source": "$zindex-sheet", "$value": "1032" } } } + }, + "width": { + "$type": "dimension", + "sheet": { + "sm": { "$value": "400px" }, + "md": { "$value": "500px" }, + "lg": { "$value": "800px" } + } } }