Add spacing for children of header and footer dialog elements (#288)

This PR introduces some basic spacing between child elements within the header and footer elements.
sebnitu · Aug 6, 2020 · 9214313 · 9214313
1 parent 9e83fa5
commit 9214313
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 37 deletions.
diff --git a/docs/_packages/dialog.md b/docs/_packages/dialog.md
@@ -31,7 +31,7 @@ usage:
 
 {% include demo_open.html %}
 <div class="dialog">
-  <button class="dialog__close icon-action icon-action_color_fade">
+  <button class="dialog__close icon-action">
     {% include icon.html icon="x" %}
   </button>
   <div class="dialog__body">
@@ -41,7 +41,7 @@ usage:
 {% include demo_switch.html %}
 ```html
 <div class="dialog">
-  <button class="dialog__close icon-action icon-action_color_fade">
+  <button class="dialog__close icon-action">
     <svg role="img" class="icon">
       <use xlink:href="#x"></use>
     </svg>
@@ -57,7 +57,7 @@ usage:
 
 {% include demo_open.html %}
 <div class="dialog">
-  <button class="dialog__close icon-action icon-action_color_fade">
+  <button class="dialog__close icon-action">
     {% include icon.html icon="x" %}
   </button>
   <div class="dialog__body spacing">
@@ -68,10 +68,12 @@ usage:
 {% include demo_switch.html %}
 ```html
 <div class="dialog">
-  <button class="dialog__close">...</button>
+  <button class="dialog__close">
+    ...
+  </button>
   <div class="dialog__body">
     <h2 class="dialog__title">...</h2>
-    ...
+    <p>...</p>
   </div>
 </div>
 ```
@@ -83,18 +85,16 @@ usage:
 <div class="dialog">
   <div class="dialog__header">
     <h2 class="dialog__title">Dialog Title</h2>
-    <button class="dialog__close icon-action icon-action_color_fade">
+    <button class="dialog__close icon-action">
       {% include icon.html icon="x" %}
     </button>
   </div>
   <div class="dialog__body">
     <p>This is some dialog content...</p>
   </div>
   <div class="dialog__footer">
-    <div class="button-group">
-      <button class="button button_color_primary">Accept</button>
-      <button class="button">Cancel</button>
-    </div>
+    <button class="button button_color_primary">Accept</button>
+    <button class="button">Cancel</button>
   </div>
 </div>
 {% include demo_switch.html %}
@@ -124,13 +124,13 @@ The dialog is a very flexible component and can be used in many different contex
   <div class="dialog__header">
     <h2 class="dialog__title">New Message</h2>
     <div class="dialog__group">
-      <button class="dialog__group-item icon-action icon-action_color_fade">
+      <button class="dialog__group-item icon-action">
         {% include icon.html icon="minus" %}
       </button>
-      <button class="dialog__group-item icon-action icon-action_color_fade">
+      <button class="dialog__group-item icon-action">
         {% include icon.html icon="maximize-2" %}
       </button>
-      <button class="dialog__group-item dialog__close icon-action icon-action_color_fade">
+      <button class="dialog__group-item dialog__close icon-action">
         {% include icon.html icon="x" %}
       </button>
     </div>
@@ -193,10 +193,8 @@ The dialog is a very flexible component and can be used in many different contex
     <p>You wrote "I have attached" in your message, but there are no files attached. Send anyway?</p>
   </div>
   <div class="dialog__footer flex-justify-end">
-    <div class="button-group">
-      <button class="button">Cancel</button>
-      <button class="button button_color_primary">Send</button>
-    </div>
+    <button class="button">Cancel</button>
+    <button class="button button_color_primary">Send</button>
   </div>
 </div>
 {% include demo_switch.html %}
@@ -206,9 +204,7 @@ The dialog is a very flexible component and can be used in many different contex
     ...
   </div>
   <div class="dialog__footer flex-justify-end">
-    <div class="button-group">
-      ...
-    </div>
+    ...
   </div>
 </div>
 ```

diff --git a/docs/dist/styles.css b/docs/dist/styles.css
diff --git a/docs/dist/styles.css.map b/docs/dist/styles.css.map
diff --git a/docs/dist/styles.min.css b/docs/dist/styles.min.css
diff --git a/docs/dist/styles.min.css.map b/docs/dist/styles.min.css.map
diff --git a/packages/dialog/dist/styles.css b/packages/dialog/dist/styles.css
diff --git a/packages/dialog/dist/styles.css.map b/packages/dialog/dist/styles.css.map
diff --git a/packages/dialog/dist/styles.min.css b/packages/dialog/dist/styles.min.css
diff --git a/packages/dialog/dist/styles.min.css.map b/packages/dialog/dist/styles.min.css.map
diff --git a/packages/dialog/src/_dialog.scss b/packages/dialog/src/_dialog.scss
@@ -32,6 +32,10 @@ $_e: var.$prefix-element;
   align-items: center;
   background: var.$background;
   vertical-align: middle;
+
+  > * + * {
+    margin-left: var.$spacing;
+  }
 }
 
 .#{$_b}dialog#{$_e}header {
@@ -61,8 +65,8 @@ $_e: var.$prefix-element;
 
 .#{$_b}dialog > .#{$_b}dialog#{$_e}close {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: var.$padding;
+  right: var.$padding;
 
   + .#{$_b}dialog#{$_e}body {
     padding-right: 3.5em;

diff --git a/packages/dialog/src/_variables.scss b/packages/dialog/src/_variables.scss
@@ -7,6 +7,7 @@ $prefix-modifier-value: core.$prefix-modifier-value !default;
 
 $zindex: 500 !default;
 $padding: 1em !default;
+$spacing: 0.5em !default;
 $background: core.$white !default;
 $border: null !default;
 $sep-border: core.$border !default;

diff --git a/packages/vrembem/dist/styles.css b/packages/vrembem/dist/styles.css
diff --git a/packages/vrembem/dist/styles.css.map b/packages/vrembem/dist/styles.css.map
diff --git a/packages/vrembem/dist/styles.min.css b/packages/vrembem/dist/styles.min.css
diff --git a/packages/vrembem/dist/styles.min.css.map b/packages/vrembem/dist/styles.min.css.map