feat(lightbox-dialog): added narrow modifier

eBay · Jul 31, 2023 · 64252bc · 64252bc
1 parent c1543d0
commit 64252bc
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 0 deletions.
diff --git a/dist/alert-dialog/alert-dialog.css b/dist/alert-dialog/alert-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .alert-dialog[role="alertdialog"] {
   background-color: var(--dialog-scrim-color-show);

diff --git a/dist/confirm-dialog/confirm-dialog.css b/dist/confirm-dialog/confirm-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .confirm-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);

diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .drawer-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);

diff --git a/dist/fullscreen-dialog/fullscreen-dialog.css b/dist/fullscreen-dialog/fullscreen-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .fullscreen-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);

diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .lightbox-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
@@ -169,6 +170,9 @@ button.icon-btn.lightbox-dialog__close {
   .lightbox-dialog__window {
     max-width: calc(88% - 32px);
   }
+  .lightbox-dialog--narrow .lightbox-dialog__window {
+    max-width: var(--dialog-lightbox-narrow-max-width);
+  }
   .lightbox-dialog__window .lightbox-dialog__footer {
     flex-direction: row;
     justify-content: flex-end;

diff --git a/dist/panel-dialog/panel-dialog.css b/dist/panel-dialog/panel-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .panel-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);

diff --git a/dist/snackbar-dialog/snackbar-dialog.css b/dist/snackbar-dialog/snackbar-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .snackbar-dialog {
   background-color: var(--snackbar-dialog-background-color, var(--color-background-inverse));

diff --git a/dist/toast-dialog/toast-dialog.css b/dist/toast-dialog/toast-dialog.css
@@ -3,6 +3,7 @@
   --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
   --dialog-lightbox-max-width: 616px;
   --dialog-lightbox-wide-max-width: 896px;
+  --dialog-lightbox-narrow-max-width: 480px;
 }
 .toast-dialog {
   background-color: var(--toast-dialog-background-color, var(--color-background-information));

diff --git a/docs/_includes/lightbox-dialog.html b/docs/_includes/lightbox-dialog.html
@@ -154,6 +154,58 @@ <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
 </div>
     {% endhighlight %}
 
+    <h3 id="lightbox-narrow">Narrow Lightbox</h3>
+    <p>To have a thinner lightbox add  <span class="highlight">lightbox-dialog--narrow</span> to the dialog</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="btn btn--primary dialog-button" data-makeup-for="lightbox-dialog-narrow" type="button">Open Lightbox</button>
+            <div aria-labelledby="dialog-title-narrow" aria-modal="true" class="lightbox-dialog lightbox-dialog--narrow" hidden id="lightbox-dialog-narrow" role="dialog">
+                <div class="lightbox-dialog__window">
+                    <div class="lightbox-dialog__header">
+                        <h2 id="dialog-title-narrow" class="large-text-1 bold-text">Lightbox Dialog</h2>
+                        <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
+                            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                                {% include symbol.html name="close-16" %}
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="lightbox-dialog__main">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+                            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        <p><a href="https://www.ebay.com">www.ebay.com</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% highlight html %}
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--narrow" hidden role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
+            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p><a href="https://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+    {% endhighlight %}
+
+
+
     <h3 id="lightbox-transitioned">Transitioned Lightbox</h3>
     <p>Any lightbox can be transitioned in and out, using the <span class="highlight">lightbox-dialog__window--fade</span> and <span class="highlight">lightbox-dialog--mask-fade</span> modifiers.</p>
     <p>The default fade duration is 16ms.<p>

diff --git a/src/less/lightbox-dialog/lightbox-dialog.less b/src/less/lightbox-dialog/lightbox-dialog.less
@@ -132,6 +132,10 @@ button.icon-btn.lightbox-dialog__close {
         max-width: calc(88% - @spacing-400);
     }
 
+    .lightbox-dialog--narrow .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-narrow-max-width);
+    }
+
     .lightbox-dialog__window .lightbox-dialog__footer {
         .dialog-footer-content-large();
     }

diff --git a/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js b/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js
@@ -279,6 +279,29 @@ export const wide = () => `
 </div>
 `;
 
+export const narrow = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--narrow" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;
+
 export const expressiveWide = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide lightbox-dialog--expressive" role="dialog">
     <div class="lightbox-dialog__window">

diff --git a/src/less/mixins/private/dialog-mixins.less b/src/less/mixins/private/dialog-mixins.less
@@ -5,6 +5,7 @@
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
     --dialog-lightbox-max-width: 616px;
     --dialog-lightbox-wide-max-width: 896px;
+    --dialog-lightbox-narrow-max-width: 480px;
 }
 
 .dialog-base() {