Merge branch 'develop' into ICU-562-remove-host-set-within-a-target

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

@@ -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" @showCaret={{showCaret}} 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: {
+      showCaret: boolean('showCaret', true),
+    },
   }}</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 `showCaret` attribute.
+
+```html
+<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,6 +57,12 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
       }
     }
 
+    &.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
     // Webkit / Chromium
     &::-webkit-details-marker {

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 this.showCaret "show-caret"}}"
     title={{@text}}
   >
 

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

@@ -40,6 +40,14 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.ok(find('.rose-dropdown-right'));
   });
 
+  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) {
     await render(hbs`<Rose::Dropdown @text="Click me" as |dropdown|>
       <dropdown.link @route="about"/>