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';
@@ -10,13 +11,16 @@ A simple dropdown component with support for links and buttons.
{{
template: hbs`
-
+ Menu itemMenu itemButton menu item
`,
+ context: {
+ hideDropdownIndicator: boolean('hideDropdownIndicator', false),
+ },
}}
@@ -34,7 +38,7 @@ A simple dropdown component with support for links and buttons.
-```htmlbars
+```html
Menu itemMenu item
@@ -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
Menu itemMenu item
@@ -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
Link - dangerButton - danger
```
+
+Dropdown indicator can be hidden using `hideDropdownIndicator` attribute.
+
+```html
+
+ Menu item
+ Button menu item
+
+```
\ 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,
+
+
+ Menu item
+ Button menu item
+
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``);
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`
+
+ `);
+ assert.ok(find('.hide-dropdown-indicator'));
+ });
+
test('it renders with content', async function (assert) {
await render(hbs`