Merge pull request #343 from hashicorp/chore-dialog-style

chore: 🤖 add support for dialog style and button text options

addons/rose/addon/components/rose/dialog/index.hbs

@@ -4,30 +4,28 @@
   <section
     ...attributes
     role="dialog"
-    class="rose-dialog{{if @modal ' modal'}}"
+    class="rose-dialog {{if  @style (concat "rose-dialog-" @style)}} {{if @modal 'modal'}}"
     {{focus-trap}}
   >
 
-    {{#if @heading}}
-      <header class="rose-dialog-header">
+    <header class="rose-dialog-header">
 
-        {{#if @icon}}
-          <Rose::Icon @name={{@icon}} @size="medium" />
-        {{/if}}
+      {{#if @icon}}
+        <Rose::Icon @name={{@icon}} @size="medium" />
+      {{/if}}
 
-        <h2 class="rose-dialog-heading">{{@heading}}</h2>
+      <h2 class="rose-dialog-heading">{{@heading}}</h2>
 
-        <button
-          type="button"
-          class="rose-dialog-dismiss"
-          title="Dismiss"
-          {{on "click" (fn this.dismiss @dismiss)}}
-        >
-          <Rose::Icon @name="cancel-plain" @size="small" />
-        </button>
+      <button
+        type="button"
+        class="rose-dialog-dismiss"
+        title={{@dismissButtonText}}
+        {{on "click" (fn this.dismiss @dismiss)}}
+      >
+        <Rose::Icon @name="cancel-plain" @size="small" />
+      </button>
 
-      </header>
-    {{/if}}
+    </header>
 
     {{yield (hash
       body=(component 'rose/dialog/body')
@@ -41,7 +39,7 @@
   <section
     ...attributes
     role="dialog"
-    class="rose-dialog{{if @modal ' modal'}}"
+    class="rose-dialog {{if  @style (concat "rose-dialog-" @style)}} {{if @modal 'modal'}}"
   >
 
     {{#if @heading}}
@@ -56,7 +54,7 @@
         <button
           type="button"
           class="rose-dialog-dismiss"
-          title="Dismiss"
+          title={{@dismissButtonText}}
           {{on "click" (fn this.dismiss @dismiss)}}
         >
           <Rose::Icon @name="cancel-plain" @size="small" />

addons/rose/addon/components/rose/dialog/index.stories.mdx

@@ -17,7 +17,9 @@ A dialog component with optional modal capabilities.
         @modal={{modal}}
         @dismiss={{dismiss}}
         @icon={{icon}}
-        @heading={{headingText}}
+        @heading={{heading}}
+        @dismissButtonText={{dismissButtonText}}
+        @style={{style}}
       as |dialog|>
         <dialog.body>
           Dialog Body
@@ -29,7 +31,8 @@ A dialog component with optional modal capabilities.
     `,
     context: {
       modal: boolean('modal', false),
-      headingText: text('headingText', 'Dialog Heading Text'),
+      heading: text('heading', 'Dialog Heading Text'),
+      dismissButtonText: text('dismissButtonText', 'Dismiss'),
       icon: select(
         'icon',
         {
@@ -40,6 +43,13 @@ A dialog component with optional modal capabilities.
         },
         'check-circle-outline'
       ),
+      style: select(
+        'style',
+        {
+          'default': '',
+          'warning': 'warning'
+        }
+      )
       dismiss: action('dismiss'),
     },
   }}</Story>
@@ -52,6 +62,7 @@ A dialog component with optional modal capabilities.
   @dismiss={{@dismissFn}}
   @icon="check-circle-outline"
   @heading="Heading"
+  @dismissButtonText="Dismiss"
 as |dialog|>
   <dialog.body>
     Dialog Body

addons/rose/addon/styles/rose/components/_dialog.scss

@@ -10,23 +10,36 @@ $xxxs: sizing.rems(xxxs); // 2
 $xxxxs: sizing.rems(xxxxs); // 1
 
 .rose-dialog {
-  border: $xxxxs solid var(--ui-gray-subtler-3);
-  border-radius: 2px;
+  --headerColor: var(--ui-gray-starker-3);
+  --headerIconColor: var(--headerColor);
+  --headerBackgroundColor: var(--ui-gray-subtler-5);
+  --headerBorderColor: var(--ui-gray-subtler-2);
+
+  border-radius: $xxxs;
   background-color: var(--subtle);
   box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-2)),
     0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3));
 
+  &.rose-dialog-warning {
+    --headerColor: var(--warning-starker-1);
+    --headerIconColor: var(--warning);
+    --headerBackgroundColor: var(--warning-subtler-2);
+    --headerBorderColor: var(--warning);
+  }
+
   .rose-dialog-header {
     display: flex;
     align-items: center;
     padding: ($xs + $xxxs) $m;
     min-height: sizing.rems(l);
-    color: var(--ui-gray-starker-3);
-    background-color: var(--ui-gray-subtler-5);
-    border-bottom: $xxxxs solid var(--ui-gray-subtler-2);
+    color: var(--headerColor);
+    background-color: var(--headerBackgroundColor);
+    border: $xxxxs solid var(--headerBorderColor);
+    border-top-left-radius: $xxxs;
+    border-top-right-radius: $xxxs;
 
     .rose-icon {
-      color: currentColor;
+      color: var(--headerIconColor);
       margin-right: $xxs + $xxxs;
 
       svg {
@@ -55,12 +68,12 @@ $xxxxs: sizing.rems(xxxxs); // 1
       width: sizing.rems(l);
 
       &:hover {
-        color: var(--ui-gray-starker-2);
         border-color: currentColor;
       }
 
       .rose-icon {
         margin: 0;
+        color: var(--ui-gray);
 
         svg {
           top: $xxxs;
@@ -70,12 +83,16 @@ $xxxxs: sizing.rems(xxxxs); // 1
   }
 
   .rose-dialog-body {
-    margin: sizing.rems(l);
+    border-left: $xxxxs solid var(--ui-gray-subtler-2);
+    border-right: $xxxxs solid var(--ui-gray-subtler-2);
+    padding: sizing.rems(l);
   }
 
   .rose-dialog-footer {
     padding: $m;
-    border-top: $xxxxs solid var(--ui-gray-subtler-2);
+    border: $xxxxs solid var(--ui-gray-subtler-2);
+    border-bottom-left-radius: $xxxs;
+    border-bottom-right-radius: $xxxs;
     background-color: var(--ui-gray-subtler-5);
 
     button {