Skip to content

feat: implement using size prop for sheet component #4075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
filippovskii09 wants to merge 7 commits into
base: release-23.x
Choose a base branch
from
+71 −6
Open

feat: implement using size prop for sheet component #4075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
09d32aa
feat: implement using size prop for sheet component
filippovskii09 Jan 7, 2026
fd8a86d
fix: space fixes
filippovskii09 Jan 8, 2026
03d8aac
fix: some refactor after review
filippovskii09 Jan 12, 2026
642553e
fix: best practice for test
filippovskii09 Jan 12, 2026
730ddb3
fix: some fixed after review
filippovskii09 Jan 13, 2026
d9d6768
fix: run tokens build command
filippovskii09 Jan 15, 2026
76bfac4
chore: trigger ci retry
filippovskii09 Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/Sheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ notes: |
const [blocking, setBlocking] = useState(false);
const [dark, setDark] = useState(false);
const [position, setPosition] = useState('bottom');
const [size, setSize] = useState('md');
const [show, setShow] = useState(false);

const positions = ['left', 'right', 'top', 'bottom'];
const sizes = ['sm', 'md', 'lg'];

return (
<>
Expand All @@ -35,6 +37,15 @@ notes: |
<Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
))}
</DropdownButton><br />
<DropdownButton
id="size-dropdown-btn"
onSelect={setSize}
title={`Size: ${size}`}
>
{sizes.map((size) => (
<Dropdown.Item key={size} eventKey={size}>{size}</Dropdown.Item>
))}
</DropdownButton><br />
<Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
Show the Sheet
</Button>{' '}
Expand All @@ -47,6 +58,7 @@ notes: |

<Sheet
position={position}
size={size}
show={show}
blocking={blocking}
variant={dark ? 'dark' : 'light'}
Expand Down
22 changes: 21 additions & 1 deletion src/Sheet/Sheet.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';

import Sheet, { POSITIONS, VARIANTS } from '.';

Expand Down Expand Up @@ -113,5 +113,25 @@ describe('<Sheet />', () => {
expect(sheetElement).toHaveClass('pgn__sheet-component');
expect(sheetElement).toHaveClass(sheetClass);
});

it('renders with correct size classes', () => {
const { unmount } = render(<Sheet size="sm" />);
const sheetSm = screen.getByRole('alert');

expect(sheetSm).toHaveClass('pgn__sheet-sm');

unmount();

render(<Sheet size="lg" />);
const sheetLg = screen.getByRole('alert');

expect(sheetLg).toHaveClass('pgn__sheet-lg');
});

it('renders default size (md) when no size is provided', () => {
render(<Sheet />);
const sheet = screen.getByRole('alert');
expect(sheet).toHaveClass('pgn__sheet-md');
});
});
});
6 changes: 3 additions & 3 deletions src/Sheet/__snapshots__/Sheet.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
<div
aria-atomic="true"
aria-live="polite"
className="pgn__sheet-component pgn__sheet__light left"
className="pgn__sheet-component pgn__sheet__light pgn__sheet-md left"
role="alert"
>
<div
Expand Down Expand Up @@ -57,7 +57,7 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
<div
aria-atomic="true"
aria-live="polite"
className="pgn__sheet-component pgn__sheet__dark right"
className="pgn__sheet-component pgn__sheet__dark pgn__sheet-md right"
role="alert"
>
<div
Expand Down Expand Up @@ -91,7 +91,7 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
<div
aria-atomic="true"
aria-live="polite"
className="pgn__sheet-component pgn__sheet__light bottom"
className="pgn__sheet-component pgn__sheet__light pgn__sheet-md bottom"
role="alert"
>
<div
Expand Down
12 changes: 11 additions & 1 deletion src/Sheet/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ export const POSITIONS = {
bottom: 'bottom',
};

export const SIZES = {
sm: 'sm',
md: 'md',
lg: 'lg',
};

export const VARIANTS = {
light: 'light',
dark: 'dark',
Expand All @@ -27,13 +33,14 @@ class Sheet extends React.Component {

renderSheet() {
const {
children, position, variant, className,
children, position, variant, className, size,
} = this.props;
return (
<div
className={classNames(
'pgn__sheet-component',
`pgn__sheet__${variant}`,
`pgn__sheet-${size}`,
position,
className,
)}
Expand Down Expand Up @@ -95,6 +102,8 @@ Sheet.propTypes = {
POSITIONS.top,
POSITIONS.bottom,
]),
/** Size of sheet to render */
size: PropTypes.oneOf(Object.values(SIZES)),
/** Boolean used to control whether the Sheet shows. */
show: PropTypes.bool,
/** Specifies function that controls `show` value. */
Expand All @@ -107,6 +116,7 @@ Sheet.defaultProps = {
blocking: false,
children: undefined,
position: POSITIONS.bottom,
size: SIZES.md,
show: true,
onClose: () => {},
variant: VARIANTS.light,
Expand Down
14 changes: 13 additions & 1 deletion src/Sheet/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,20 @@

&.left,
&.right {
max-width: 272px;
height: 100%;
top: 0;
width: 100%;
Copy link
Contributor

@brian-smith-tcril brian-smith-tcril Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not clear to me why this is needed now when it wasn't before.


&.pgn__sheet-sm {
max-width: var(--pgn-size-sheet-sm);
Copy link
Contributor

@brian-smith-tcril brian-smith-tcril Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going along with @PKulkoRaccoonGang's comment #4075 (review) about if we want to

support the size prop for the top and bottom positions

If this is specifically width, then we should call this width instead of size.

}

&.pgn__sheet-md {
max-width: var(--pgn-size-sheet-md);
}

&.pgn__sheet-lg {
max-width: var(--pgn-size-sheet-lg);
}
}
}
3 changes: 3 additions & 0 deletions styles/css/core/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-size-sheet-sm: 400px;
--pgn-size-sheet-md: 500px;
--pgn-size-sheet-lg: 800px;
--pgn-size-spinner-base-width: 2rem;
--pgn-size-spinner-base-border-width: 0.25em;
--pgn-size-spinner-sm-width: 1rem;
Expand Down
8 changes: 8 additions & 0 deletions tokens/src/core/components/Sheet.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,13 @@
"main": { "source": "$zindex-sheet", "$value": "1032" }
}
}
},
"size": {
"$type": "dimension",
"sheet": {
"sm": { "$value": "400px" },
"md": { "$value": "500px" },
"lg": { "$value": "800px" }
}
}
}