From ac1affcb6bd65afd901de3312ea0f161493fa3fc Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 27 Aug 2020 12:13:58 -0400
Subject: [PATCH 1/2] feat: Add option to hide dropdown indicator icon

---
 .../components/rose/dropdown.stories.mdx      | 21 +++++++++++++++----
 .../rose/components/dropdown/_dropdown.scss   |  5 +++++
 .../templates/components/rose/dropdown.hbs    |  2 +-
 .../rose/tests/dummy/app/templates/index.hbs  |  5 +++++
 .../components/rose/dropdown-test.js          |  8 +++++++
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index c2f71d82f..9cb71ca99 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
+import { boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />
 
@@ -10,13 +11,16 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @hideDropdownIndicator={{hideDropdownIndicator}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
+    context: {
+      hideDropdownIndicator: boolean('hideDropdownIndicator', false),
+    },
   }}</Story>
 </Preview>
 
@@ -34,7 +38,7 @@ A simple dropdown component with support for links and buttons.
 </Preview>
 
 
-```htmlbars
+```html
   <Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.link @route="about">Menu item</dropdown.link>
@@ -44,7 +48,7 @@ A simple dropdown component with support for links and buttons.
 
 Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
 
-```htmlbars
+```html
   <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @dropdownRight={{true}} as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.link @route="about">Menu item</dropdown.link>
@@ -55,9 +59,18 @@ Dropdown content can be aligned to right edge of the component instead of the de
 
 Dropdown supports `danger` styling through `style` attribute.
 
-```htmlbars
+```html
 <Rose::Dropdown @text="Dropdown" as |dropdown|>
   <dropdown.link @style="danger">Link - danger</dropdown.link>
   <dropdown.button @style="danger">Button - danger</dropdown.button>
 </Rose::Dropdown>
 ```
+
+Dropdown indicator can be hidden using `hideDropdownIndicator` attribute.
+
+```html
+<Rose::Dropdown @hideDropdownIndicator={{true}} @icon="more-horizontal" as |dropdown|>
+    <dropdown.link @route="index">Menu item</dropdown.link>
+    <dropdown.button>Button menu item</dropdown.button>
+</Rose::Dropdown>
+```
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index 34b2753b0..c0804ea97 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -58,6 +58,11 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
       }
     }
 
+    &.hide-dropdown-indicator {
+      background: none;
+      padding-right: sizing.rems(s);
+    }
+
     // Hide default twistie triangle
     // Webkit / Chromium
     &::-webkit-details-marker {
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 991bdf085..ba821c09f 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -5,7 +5,7 @@
 >
 
   <summary
-    class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}}"
+    class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}} {{if @hideDropdownIndicator "hide-dropdown-indicator"}}"
     title={{@text}}
   >
 
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 529b6c7c5..840ae42fa 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -36,3 +36,8 @@
   <dropdown.button>Button menu item</dropdown.button>
   <dropdown.button @style="danger">Button - danger</dropdown.button>
 </Rose::Dropdown>
+
+<Rose::Dropdown @hideDropdownIndicator={{true}} @icon="more-horizontal" as |dropdown|>
+  <dropdown.link @route="index">Menu item</dropdown.link>
+  <dropdown.button>Button menu item</dropdown.button>
+</Rose::Dropdown>
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 0c0c22695..51c34cf7d 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/addons/rose/tests/integration/components/rose/dropdown-test.js
@@ -10,6 +10,7 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     await render(hbs`<Rose::Dropdown />`);
     assert.ok(find('.rose-dropdown'));
     assert.notOk(find('.rose-dropdown-right'));
+    assert.notOk(find('.hide-dropdown-indicator'));
   });
 
   test('it renders with html attributes', async function (assert) {
@@ -40,6 +41,13 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.ok(find('.rose-dropdown-right'));
   });
 
+  test('it supports hiding dropdown indicator', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown @hideDropdownIndicator={{true}} />
+    `);
+    assert.ok(find('.hide-dropdown-indicator'));
+  });
+
   test('it renders with content', async function (assert) {
     await render(hbs`<Rose::Dropdown @text="Click me" as |dropdown|>
       <dropdown.link @route="about"/>

From fec4178970dfa1d7953981d6c9cc830ccdfafa06 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 27 Aug 2020 14:58:43 -0400
Subject: [PATCH 2/2] feat: Update 'hideDropdownIndicator' to 'showCaret'

---
 addons/rose/addon/components/rose/dropdown.js        |  1 +
 .../rose/addon/components/rose/dropdown.stories.mdx  |  8 ++++----
 .../styles/rose/components/dropdown/_dropdown.scss   | 10 +++++-----
 .../addon/templates/components/rose/dropdown.hbs     |  2 +-
 addons/rose/tests/dummy/app/templates/index.hbs      |  2 +-
 .../integration/components/rose/dropdown-test.js     | 12 ++++++------
 6 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js
index 8ae6f56e6..645c888be 100644
--- a/addons/rose/addon/components/rose/dropdown.js
+++ b/addons/rose/addon/components/rose/dropdown.js
@@ -10,6 +10,7 @@ export default Component.extend({
 
   layout,
   tagName: '',
+  showCaret: true,
 
   // =actions
 
diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 9cb71ca99..7191f7479 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -11,7 +11,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @hideDropdownIndicator={{hideDropdownIndicator}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @showCaret={{showCaret}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
@@ -19,7 +19,7 @@ A simple dropdown component with support for links and buttons.
       </Rose::Dropdown>
     `,
     context: {
-      hideDropdownIndicator: boolean('hideDropdownIndicator', false),
+      showCaret: boolean('showCaret', true),
     },
   }}</Story>
 </Preview>
@@ -66,10 +66,10 @@ Dropdown supports `danger` styling through `style` attribute.
 </Rose::Dropdown>
 ```
 
-Dropdown indicator can be hidden using `hideDropdownIndicator` attribute.
+Dropdown indicator can be hidden using `showCaret` attribute.
 
 ```html
-<Rose::Dropdown @hideDropdownIndicator={{true}} @icon="more-horizontal" as |dropdown|>
+<Rose::Dropdown @showCaret={{true}} @icon="more-horizontal" as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index c0804ea97..0194a485c 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -16,9 +16,8 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     display: flex;
     align-items: center;
     $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
-    padding: $yPadding sizing.rems(xl) $yPadding sizing.rems(l);
+    padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l);
     color: var(--black);
-    background: url($chevron) no-repeat right sizing.rems(m) center;
     border-radius: sizing.rems(xxxs);
 
     // Hide default twistie triangle
@@ -58,9 +57,10 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
       }
     }
 
-    &.hide-dropdown-indicator {
-      background: none;
-      padding-right: sizing.rems(s);
+    &.show-caret {
+      padding-right: sizing.rems(xl);
+      background: url($chevron) no-repeat right sizing.rems(m) center ;
+      background-size: sizing.rems(m);
     }
 
     // Hide default twistie triangle
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index ba821c09f..7a0ed82db 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -5,7 +5,7 @@
 >
 
   <summary
-    class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}} {{if @hideDropdownIndicator "hide-dropdown-indicator"}}"
+    class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}} {{if this.showCaret "show-caret"}}"
     title={{@text}}
   >
 
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 840ae42fa..146a49749 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -37,7 +37,7 @@
   <dropdown.button @style="danger">Button - danger</dropdown.button>
 </Rose::Dropdown>
 
-<Rose::Dropdown @hideDropdownIndicator={{true}} @icon="more-horizontal" as |dropdown|>
+<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
   <dropdown.link @route="index">Menu item</dropdown.link>
   <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 51c34cf7d..24d4d7758 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/addons/rose/tests/integration/components/rose/dropdown-test.js
@@ -10,7 +10,6 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     await render(hbs`<Rose::Dropdown />`);
     assert.ok(find('.rose-dropdown'));
     assert.notOk(find('.rose-dropdown-right'));
-    assert.notOk(find('.hide-dropdown-indicator'));
   });
 
   test('it renders with html attributes', async function (assert) {
@@ -41,11 +40,12 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.ok(find('.rose-dropdown-right'));
   });
 
-  test('it supports hiding dropdown indicator', async function (assert) {
-    await render(hbs`
-      <Rose::Dropdown @hideDropdownIndicator={{true}} />
-    `);
-    assert.ok(find('.hide-dropdown-indicator'));
+  test('it supports hiding dropdown caret', async function (assert) {
+    await render(hbs`<Rose::Dropdown />`);
+    assert.ok(find('.show-caret'));
+
+    await render(hbs`<Rose::Dropdown @showCaret={{false}}/>`);
+    assert.notOk(find('.show-caret'));
   });
 
   test('it renders with content', async function (assert) {