Skip to content

Fix drawer-sheet not respecting start/end placement #42755

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
wasinger wants to merge 1 commit into
base: v6-dev
Choose a base branch
from
+68 −13
Open

Fix drawer-sheet not respecting start/end placement #42755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
63 changes: 51 additions & 12 deletions scss/_drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,19 +251,58 @@ $drawer-backdrop-tokens: defaults(

// Sheet variant: flush-to-edge panel with no inset, border-radius, or shadow.
// Overrides tokens so placement transforms (which use calc() with --drawer-inset)
// automatically position the drawer at the viewport edge.
// automatically position the drawer at the viewport edge. Placement-aware:
// bottom/top sheets are full-bleed horizontally (capped at a max-width on
// large screens), start/end sheets are full-bleed vertically (capped at a
// max-height on large screens).
.drawer-sheet {
right: 0;
bottom: 0;
left: 0;
width: 100vw;
margin-inline: auto;
margin-bottom: calc(-1 * var(--drawer-border-width));
border-end-start-radius: 0;
border-end-end-radius: 0;

@include media-breakpoint-up(lg) {
max-width: var(--drawer-sheet-width, 760px);
&:where(.drawer-bottom, .drawer-top) {
right: 0;
left: 0;
width: 100vw;
margin-inline: auto;

@include media-breakpoint-up(lg) {
max-width: var(--drawer-sheet-width, 760px);
}
}

&:where(.drawer-bottom) {
bottom: 0;
margin-bottom: calc(-1 * var(--drawer-border-width));
border-end-start-radius: 0;
border-end-end-radius: 0;
}

&:where(.drawer-top) {
top: 0;
margin-top: calc(-1 * var(--drawer-border-width));
border-start-start-radius: 0;
border-start-end-radius: 0;
}

&:where(.drawer-start, .drawer-end) {
inset-block: 0;
height: 100vh;
margin-block: auto;

@include media-breakpoint-up(lg) {
max-height: var(--drawer-sheet-height, 760px);
}
}

&:where(.drawer-start) {
inset-inline-start: 0;
margin-inline-start: calc(-1 * var(--drawer-border-width));
border-start-start-radius: 0;
border-end-start-radius: 0;
}

&:where(.drawer-end) {
inset-inline-end: 0;
margin-inline-end: calc(-1 * var(--drawer-border-width));
border-start-end-radius: 0;
border-end-end-radius: 0;
}
}

Expand Down
18 changes: 17 additions & 1 deletion site/src/content/docs/components/drawer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ Add `.drawer-translucent` to the drawer panel to blur and saturate the backgroun

## Sheet

Add `.drawer-sheet` to render the panel flush against the viewport edge. The sheet variant removes the drawer’s inset, border, border-radius, and box-shadow, so it sits edge-to-edge like a traditional offcanvas. It works with any placement.
Add `.drawer-sheet` to render the panel flush against the viewport edge. The sheet variant removes the drawer’s inset, border, border-radius, and box-shadow, so it sits edge-to-edge like a traditional offcanvas. It works with any placement: combine it with `.drawer-bottom`/`.drawer-top` for a full-bleed panel capped by `--drawer-sheet-width`, or with `.drawer-start`/`.drawer-end` for a full-bleed panel capped by `--drawer-sheet-height`.

<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="drawer" data-bs-target="#drawerSheet" aria-controls="drawerSheet">
Toggle sheet drawer
Expand All @@ -192,6 +192,22 @@ Add `.drawer-sheet` to render the panel flush against the viewport edge. The she
</div>
</dialog>`} />

`.drawer-sheet` also works with `.drawer-end` (or `.drawer-start`), pinning the panel flush against the right (or left) edge of the viewport instead:

<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="drawer" data-bs-target="#drawerSheetEnd" aria-controls="drawerSheetEnd">
Toggle sheet drawer
</button>

<dialog class="drawer drawer-end drawer-sheet" tabindex="-1" id="drawerSheetEnd" aria-labelledby="drawerSheetEndLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="drawerSheetEndLabel">Sheet drawer</h5>
<CloseButton dismiss="drawer" />
</div>
<div class="drawer-body">
Content for the sheet drawer goes here. It sits flush to the edge with no inset, border, rounded corners, or shadow.
</div>
</dialog>`} />

## Responsive

Responsive drawer classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.lg:drawer` hides content in a drawer below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive drawer classes are available for each breakpoint.
Expand Down