New dialog size options

diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index eafc838c35ae49b5b839c20899857fe8cac9aead..9989dba3e4f66fce55b6bfdd9ffd284e0e0325f4 100644 (file)
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -1,5 +1,7 @@
+@use "sass:map";
 @use "config" as *;
 @use "variables" as *;
+@use "layout/breakpoints" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
 @use "mixins/transition" as *;
@@ -11,6 +13,9 @@
 // scss-docs-start dialog-css-vars
 $dialog-padding:                1rem !default;
 $dialog-width:                  500px !default;
+$dialog-width-sm:               280px !default;
+$dialog-width-lg:               800px !default;
+$dialog-width-xl:               1140px !default;
 $dialog-margin:                 1.75rem !default;
 $dialog-color:                  var(--#{$prefix}fg-body) !default;
 $dialog-bg:                     var(--#{$prefix}bg-body) !default;
@@ -149,6 +154,44 @@ $dialog-footer-gap:             .5rem !default;
     }
   }
 
+  // Dialog sizes
+  .dialog-sm { --#{$prefix}dialog-width: #{$dialog-width-sm}; }
+  .dialog-lg { --#{$prefix}dialog-width: #{$dialog-width-lg}; }
+  .dialog-xl { --#{$prefix}dialog-width: #{$dialog-width-xl}; }
+
+  // Fullscreen dialog
+  .dialog-fullscreen {
+    --#{$prefix}dialog-width: 100vw;
+    --#{$prefix}dialog-margin: 0;
+    --#{$prefix}dialog-border-radius: 0;
+
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    max-height: none;
+  }
+
+  // Responsive fullscreen dialogs
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $postfix: if($infix != "", #{$infix}-down, "");
+
+    @if $postfix != "" {
+      @include media-breakpoint-down($breakpoint) {
+        .dialog-fullscreen#{$postfix} {
+          --#{$prefix}dialog-width: 100vw;
+          --#{$prefix}dialog-margin: 0;
+          --#{$prefix}dialog-border-radius: 0;
+
+          width: 100%;
+          max-width: none;
+          height: 100%;
+          max-height: none;
+        }
+      }
+    }
+  }
+
   // Dialog header
   .dialog-header {
     display: flex;

diff --git a/site/src/content/docs/components/dialog.mdx b/site/src/content/docs/components/dialog.mdx
index b19c7077be151c7ab8b1e036a44c6e6aa6353007..486c32b21eb26a63890c2c209b05c53ae80959b5 100644 (file)
--- a/site/src/content/docs/components/dialog.mdx
+++ b/site/src/content/docs/components/dialog.mdx
@@ -299,6 +299,118 @@ const dialog = new bootstrap.Dialog('#myDialog', { modal: false })
 dialog.show()
 ```
 
+## Optional sizes
+
+Dialogs have three optional sizes, available via modifier classes to be placed on a `.dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
+
+<BsTable>
+  | Size | Class | Dialog max-width |
+  | --- | --- | --- |
+  | Small | `.dialog-sm` | `300px` |
+  | Default | — | `500px` |
+  | Large | `.dialog-lg` | `800px` |
+  | Extra large | `.dialog-xl` | `1140px` |
+</BsTable>
+
+<dialog class="dialog dialog-xl" id="exampleDialogXl">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Extra large dialog</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
+  </div>
+  <div class="dialog-body">
+    <p>This is an extra large dialog using the <code>.dialog-xl</code> class.</p>
+  </div>
+</dialog>
+
+<dialog class="dialog dialog-lg" id="exampleDialogLg">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Large dialog</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
+  </div>
+  <div class="dialog-body">
+    <p>This is a large dialog using the <code>.dialog-lg</code> class.</p>
+  </div>
+</dialog>
+
+<dialog class="dialog dialog-sm" id="exampleDialogSm">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Small dialog</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
+  </div>
+  <div class="dialog-body">
+    <p>This is a small dialog using the <code>.dialog-sm</code> class.</p>
+  </div>
+</dialog>
+
+<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogXl">
+  Extra large dialog
+</button>
+<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogLg">
+  Large dialog
+</button>
+<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogSm">
+  Small dialog
+</button>`} />
+
+```html
+<dialog class="dialog dialog-xl">...</dialog>
+<dialog class="dialog dialog-lg">...</dialog>
+<dialog class="dialog dialog-sm">...</dialog>
+```
+
+## Fullscreen dialog
+
+Use `.dialog-fullscreen` to make the dialog cover the entire viewport.
+
+<dialog class="dialog dialog-fullscreen" id="exampleDialogFullscreen">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Fullscreen dialog</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
+  </div>
+  <div class="dialog-body">
+    <p>This dialog covers the entire viewport.</p>
+  </div>
+  <div class="dialog-footer">
+    <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+  </div>
+</dialog>
+
+<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreen">
+  Fullscreen dialog
+</button>`} />
+
+Responsive fullscreen variants are also available. These make the dialog fullscreen only below a specific breakpoint.
+
+| Class | Fullscreen below |
+| --- | --- |
+| `.dialog-fullscreen` | Always |
+| `.dialog-fullscreen-sm-down` | `576px` |
+| `.dialog-fullscreen-md-down` | `768px` |
+| `.dialog-fullscreen-lg-down` | `1024px` |
+| `.dialog-fullscreen-xl-down` | `1280px` |
+| `.dialog-fullscreen-2xl-down` | `1536px` |
+
+<dialog class="dialog dialog-fullscreen-lg-down" id="exampleDialogFullscreenLg">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Fullscreen below lg</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
+  </div>
+  <div class="dialog-body">
+    <p>This dialog is fullscreen below the <code>lg</code> breakpoint.</p>
+  </div>
+  <div class="dialog-footer">
+    <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+  </div>
+</dialog>
+
+<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreenLg">
+  Fullscreen below lg
+</button>`} />
+
+```html
+<dialog class="dialog dialog-fullscreen-lg-down">...</dialog>
+```
+
 ## JavaScript behavior
 
 ### Via data attributes