diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx index 1f3545707..1ee5d754a 100644 --- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx +++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx @@ -1,6 +1,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; -import { boolean } from '@storybook/addon-knobs'; +import { boolean, object } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; @@ -123,8 +124,8 @@ Dropdown indicator can be hidden using `showCaret` attribute. ``` -Dropdowns also support radio buttons. Currently, this is the only supported -form field. +Dropdowns also support radio buttons and checkboxes. Currently, radio buttons and checkboxes are the only supported +form fields. ```html @@ -144,6 +145,67 @@ form field. ``` +```html + + + + + + + + + + +``` + + + + {{ + template: hbs` + + + + + + + + + + `, + context: { + disabled: boolean('disabled', false), + items: object('items', [ + { id: 1, name: 'Foo' }, + { id: 2, name: 'Bar' }, + { id: 3, name: 'Baz' }, + ]), + selectedItems: object('selectedItems', []), + onChange: action('changed'), + } + }} + + + + Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with. ```html diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs index e23e52c0b..18f637ea3 100644 --- a/addons/rose/addon/components/rose/form/index.hbs +++ b/addons/rose/addon/components/rose/form/index.hbs @@ -17,6 +17,7 @@ {{yield (hash radioGroup=(component 'rose/form/radio/group' disabled=this.disabled) checkbox=(component 'rose/form/checkbox' disabled=this.disabled) + checkboxGroup=(component 'rose/form/checkbox/group' disabled=this.disabled) input=(component 'rose/form/input' disabled=this.disabled) select=(component 'rose/form/select' disabled=this.disabled) textarea=(component 'rose/form/textarea' disabled=this.disabled) diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss index 2d9634e42..96e29dd5a 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss @@ -69,4 +69,78 @@ $checkmark: url("data:image/svg+xml;utf-8,