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" }
+ }
}
}