feat: Update 'hideDropdownIndicator' to 'showCaret'

addons/rose/addon/components/rose/dropdown.js

@@ -10,6 +10,7 @@ export default Component.extend({
 
   layout,
   tagName: '',
+  showCaret: true,
 
   // =actions
 

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>

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

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}}
   >
 

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>

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) {