From 6258cd9738a88697d38f7b22a9f8112989a77a9d Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Tue, 18 Dec 2018 13:05:32 -0600
Subject: [PATCH 1/2] fix(dialog): Fix dialog corners

The dialog styles added by @sophi-est weren't being loaded into the compiled stylesheet. I've added
them to the elements index file and moved the rounded corners styles into and `.is-rounded` modifier
class.
---
 docs/dialogs.stories.js    |  4 +++-
 scss/elements/_index.scss  | 17 +++++++++--------
 scss/elements/dialogs.scss |  9 ++++++---
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
index bff7961..fcec4c6 100644
--- a/docs/dialogs.stories.js
+++ b/docs/dialogs.stories.js
@@ -8,8 +8,10 @@ stories.addDecorator(withKnobs);
 
 stories.add('dialog', () => {
   const open = boolean('open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [isRounded];
 
-  return `<dialog ${open}>
+  return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
       <p class="title">Dialog</p>
       <p>Alert: this is a dialog.</p>
   </div>`;
diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
index 32059dc..44e6caa 100644
--- a/scss/elements/_index.scss
+++ b/scss/elements/_index.scss
@@ -1,11 +1,12 @@
 @charset "utf-8";
 
-@import "buttons.scss";
-@import "containers.scss";
-@import "radios.scss";
-@import "checkboxes.scss";
-@import "lists.scss";
-@import "balloons.scss";
-@import "tables.scss";
-@import "progress.scss";
 @import "avatar.scss";
+@import "balloons.scss";
+@import "buttons.scss";
+@import "checkboxes.scss";
+@import "containers.scss";
+@import "dialogs.scss";
+@import "lists.scss";
+@import "progress.scss";
+@import "radios.scss";
+@import "tables.scss";
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
index e12e544..d7f62fa 100644
--- a/scss/elements/dialogs.scss
+++ b/scss/elements/dialogs.scss
@@ -1,8 +1,5 @@
 .nes-dialog {
   padding: 1.5rem 2rem;
-  color: $base-color;
-  border: none;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
 
   > .backdrop,
   &::backdrop {
@@ -12,4 +9,10 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  &.is-rounded {
+    color: $base-color;
+    border: none;
+    box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+  }
 }

From d0c67464fae4d489859212e3f11c8934e4137e8c Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Wed, 19 Dec 2018 13:25:33 -0600
Subject: [PATCH 2/2] fix(dialogs.scss): Separate dialog text color from border
 color

Previously, we were using the `color` property to determine the color of the border around `<dialog
/>` elements. The issue with this is that it requires the text color to match the border color. I've
fixed this by moving the border color declarations into the `box-shadow` property.
---
 scss/elements/dialogs.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
index d7f62fa..4e2e8e3 100644
--- a/scss/elements/dialogs.scss
+++ b/scss/elements/dialogs.scss
@@ -11,8 +11,7 @@
   }
 
   &.is-rounded {
-    color: $base-color;
     border: none;
-    box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+    box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
   }
 }