From b2bf1e2943cd157ecc5fbc6fa61f1c675784d05f Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 23 Jul 2020 15:45:58 -0400 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20badge=20compo?= =?UTF-8?q?nent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/components/rose/badge.js | 7 ++ .../addon/components/rose/badge.stories.mdx | 77 ++++++++++++++++ .../addon/styles/rose/components/_badge.scss | 89 +++++++++++++++++++ .../addon/styles/rose/components/_index.scss | 1 + .../addon/templates/components/rose/badge.hbs | 14 +++ addons/rose/app/components/rose/badge.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 28 ++++-- .../integration/components/rose/badge-test.js | 50 +++++++++++ 8 files changed, 259 insertions(+), 8 deletions(-) create mode 100644 addons/rose/addon/components/rose/badge.js create mode 100644 addons/rose/addon/components/rose/badge.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/_badge.scss create mode 100644 addons/rose/addon/templates/components/rose/badge.hbs create mode 100644 addons/rose/app/components/rose/badge.js create mode 100644 addons/rose/tests/integration/components/rose/badge-test.js diff --git a/addons/rose/addon/components/rose/badge.js b/addons/rose/addon/components/rose/badge.js new file mode 100644 index 000000000..8a5cbcec5 --- /dev/null +++ b/addons/rose/addon/components/rose/badge.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/rose/badge'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/badge.stories.mdx b/addons/rose/addon/components/rose/badge.stories.mdx new file mode 100644 index 000000000..5e7bc89f9 --- /dev/null +++ b/addons/rose/addon/components/rose/badge.stories.mdx @@ -0,0 +1,77 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, select } from '@storybook/addon-knobs'; + + + +# Badge + +A badge component that supports icons and predefined styles. +When style definition isn't supplied, a default style will be supplied. + +Styles: outline, light, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline + +```html + +``` + + + {{ + template: hbs` + {{text}} + `, + context: { + text: text('text', 'Badge'), + style: select('style', { + 'none': 'none', + 'outline': 'outline', + 'light': 'light', + 'dark': 'dark', + 'informational': 'informational', + 'informational-outline': 'informational-outline', + 'success': 'success', + 'success-outline': 'success-outline', + 'alert': 'alert', + 'alert-outline': 'alert-outline', + 'error': 'error', + 'error-outline': 'error-outline', + 'warning': 'warning', + 'warning-outline': 'warning-outline', + }, + 'none' + ), + icon: select('icon', { + 'user-organization': 'user-organization', + 'partner': 'partner', + 'gift-fill': 'gift-fill', + }, + 'user-organization' + ), + } + }} + + + + {{ + template: hbs` + default style + outline + default style with icon + light + dark + informational + informational-outline + alert + alert-outline + error + error-outline + success + success-outline + warning + warning-outline + `, + }} + diff --git a/addons/rose/addon/styles/rose/components/_badge.scss b/addons/rose/addon/styles/rose/components/_badge.scss new file mode 100644 index 000000000..2ff4b16b7 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/_badge.scss @@ -0,0 +1,89 @@ +@use '../utilities/type'; +@use '../variables/sizing'; + +.rose-badge { + @include type.type(s); + padding: sizing.rems(xxs); + border-radius: sizing.rems(xxxs); + border-width: thin; + border-style: solid; + display: inline-block; + + --color: var(--ui-gray-starker-1); + --border-color: var(--ui-gray-subtler-5); + --background-color: none; + + color: var(--color); + border-color: var(--border-color); + background-color: var(--background-color); + + &.rose-badge-outline { + --border-color: var(--ui-gray-starker-1); + } + + &.rose-badge-light { + --border-color: var(--ui-gray-subtler-5); + --background-color: var(--ui-gray-starker-5); + } + + &.rose-badge-dark { + --color: var(--ui-gray-subtler-6); + --border-color: var(--ui-gray-starker-1); + --background-color: var(--ui-gray-starker-1); + } + + &.rose-badge-active { + --color: var(--info); + } + + &.rose-badge-informational { + --color: var(--info-starker-1); + --border-color: var(--info-subtler-2); + --background-color: var(--info-subtler-2); + } + + &.rose-badge-informational-outline { + --color: var(--info-starker-1); + --border-color: var(--info-starker-1); + } + + &.rose-badge-alert { + --color: var(--alert-starker-1); + --background-color: var(--alert-subtler-1); + } + + &.rose-badge-alert-outline { + --color: var(--alert-starker-1); + --border-color: var(--alert-starker-1); + } + + &.rose-badge-error { + --color: var(--failure-starker-1); + --background-color: var(--failure-subtler-1); + } + + &.rose-badge-error-outline { + --color: var(--failure-starker-1); + --border-color: var(--failure-starker-1); + } + + &.rose-badge-success { + --color: var(--success-starker-1); + --background-color: var(--success-subtler-1); + } + + &.rose-badge-success-outline { + --color: var(--success-starker-1); + --border-color: var(--success-starker-1); + } + + &.rose-badge-warning { + --color: var(--warning-starker-1); + --background-color: var(--warning-subtler-1); + } + + &.rose-badge-warning-outline { + --color: var(--warning-starker-1); + --border-color: var(--warning-starker-1); + } +} diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index 6c0e6f1df..dd35e9d22 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -13,3 +13,4 @@ @import 'table'; @import 'message'; @import 'link-button'; +@import 'badge'; diff --git a/addons/rose/addon/templates/components/rose/badge.hbs b/addons/rose/addon/templates/components/rose/badge.hbs new file mode 100644 index 000000000..6ef77906f --- /dev/null +++ b/addons/rose/addon/templates/components/rose/badge.hbs @@ -0,0 +1,14 @@ + + {{#if @icon}} + + {{/if}} + + + {{yield}} + + diff --git a/addons/rose/app/components/rose/badge.js b/addons/rose/app/components/rose/badge.js new file mode 100644 index 000000000..a9f224c09 --- /dev/null +++ b/addons/rose/app/components/rose/badge.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/badge'; \ No newline at end of file diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 2422caa03..95220225a 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,9 +1,21 @@ -Primary -Secondary -Warning -Ghost -
+Default +Default Outline +Default with Icon -Left Icon -Right Icon - +Light +Dark + +Informational +Informational Outline + +Alert +Alert Outline + +Error +Error Outline + +Success +Success Outline + +Warning +Warning Outline diff --git a/addons/rose/tests/integration/components/rose/badge-test.js b/addons/rose/tests/integration/components/rose/badge-test.js new file mode 100644 index 000000000..91f906f26 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/badge-test.js @@ -0,0 +1,50 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/badge', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + await render(hbs``); + assert.ok(find('.rose-badge')); + }); + + test('it renders with content', async function(assert) { + await render(hbs`host-catalog-1`); + assert.equal(find('.rose-badge').textContent.trim(), 'host-catalog-1'); + }); + + test('it renders an icon using @icon', async function(assert) { + await render(hbs``); + assert.ok(find('.rose-icon')); + }); + + test('it styles content using @style', async function(assert) { + let styles = [ + 'outline', + 'light', + 'dark', + 'informational', + 'informational-outline', + 'alert', + 'alert-outline', + 'warning', + 'warning-outline', + 'error', + 'error-outline', + 'success', + 'success-outline', + 'warning', + 'warning-outline' + ]; + + await render(hbs``); + + styles.forEach((style) => { + this.set('style', style); + assert.ok(find(`.rose-badge-${style}`), `defines style: ${style}`); + }); + }); +}); From 37880833a0d2d136744b8c52d35f8d6da09a8808 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 28 Jul 2020 09:00:05 -0400 Subject: [PATCH 2/6] =?UTF-8?q?style:=20=F0=9F=92=84=20tweak=20badge=20sty?= =?UTF-8?q?les?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/styles/rose/components/_badge.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/_badge.scss b/addons/rose/addon/styles/rose/components/_badge.scss index 2ff4b16b7..7d495e55e 100644 --- a/addons/rose/addon/styles/rose/components/_badge.scss +++ b/addons/rose/addon/styles/rose/components/_badge.scss @@ -2,10 +2,10 @@ @use '../variables/sizing'; .rose-badge { - @include type.type(s); - padding: sizing.rems(xxs); + @include type.type(s, semibold); + padding: sizing.rems(xxxs) sizing.rems(xxs); border-radius: sizing.rems(xxxs); - border-width: thin; + border-width: sizing.rems(xxxxs); border-style: solid; display: inline-block; From c230d6da290a39991fa3d6ea6e918a4f8d450b0f Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 29 Jul 2020 16:02:10 -0400 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Remove=20rose-badge?= =?UTF-8?q?=20light=20style=20definition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After discussing with designer, badge style does not need a defined "light" style. --- addons/rose/addon/components/rose/badge.stories.mdx | 6 ++---- addons/rose/addon/styles/rose/components/_badge.scss | 5 ----- addons/rose/tests/integration/components/rose/badge-test.js | 1 - 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/addons/rose/addon/components/rose/badge.stories.mdx b/addons/rose/addon/components/rose/badge.stories.mdx index 5e7bc89f9..1f91c7beb 100644 --- a/addons/rose/addon/components/rose/badge.stories.mdx +++ b/addons/rose/addon/components/rose/badge.stories.mdx @@ -10,10 +10,10 @@ import { text, select } from '@storybook/addon-knobs'; A badge component that supports icons and predefined styles. When style definition isn't supplied, a default style will be supplied. -Styles: outline, light, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline +Styles: outline, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline ```html - +Badge ``` @@ -28,7 +28,6 @@ Styles: outline, light, dark, informational, informational-outline, success, suc style: select('style', { 'none': 'none', 'outline': 'outline', - 'light': 'light', 'dark': 'dark', 'informational': 'informational', 'informational-outline': 'informational-outline', @@ -60,7 +59,6 @@ Styles: outline, light, dark, informational, informational-outline, success, suc default style outline default style with icon - light dark informational informational-outline diff --git a/addons/rose/addon/styles/rose/components/_badge.scss b/addons/rose/addon/styles/rose/components/_badge.scss index 7d495e55e..716c97122 100644 --- a/addons/rose/addon/styles/rose/components/_badge.scss +++ b/addons/rose/addon/styles/rose/components/_badge.scss @@ -21,11 +21,6 @@ --border-color: var(--ui-gray-starker-1); } - &.rose-badge-light { - --border-color: var(--ui-gray-subtler-5); - --background-color: var(--ui-gray-starker-5); - } - &.rose-badge-dark { --color: var(--ui-gray-subtler-6); --border-color: var(--ui-gray-starker-1); diff --git a/addons/rose/tests/integration/components/rose/badge-test.js b/addons/rose/tests/integration/components/rose/badge-test.js index 91f906f26..16e968e69 100644 --- a/addons/rose/tests/integration/components/rose/badge-test.js +++ b/addons/rose/tests/integration/components/rose/badge-test.js @@ -24,7 +24,6 @@ module('Integration | Component | rose/badge', function(hooks) { test('it styles content using @style', async function(assert) { let styles = [ 'outline', - 'light', 'dark', 'informational', 'informational-outline', From ce98b64d204c002cf85243eb3fe1f9eb47963eef Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 29 Jul 2020 16:02:40 -0400 Subject: [PATCH 4/6] =?UTF-8?q?style:=20=F0=9F=92=84=20"yarn=20format"=20t?= =?UTF-8?q?ouched=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/components/rose/dropdown.js | 2 -- addons/rose/app/components/rose/badge.js | 2 +- addons/rose/app/components/rose/dropdown.js | 2 +- .../rose/app/components/rose/layout/sidebar.js | 2 +- .../integration/components/rose/badge-test.js | 12 ++++++------ .../integration/components/rose/dropdown-test.js | 9 ++------- .../components/rose/layout/sidebar-test.js | 2 +- .../components/rose/link-button-test.js | 16 ++++++++++++---- 8 files changed, 24 insertions(+), 23 deletions(-) diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js index 76723d8bf..07e9ba14b 100644 --- a/addons/rose/addon/components/rose/dropdown.js +++ b/addons/rose/addon/components/rose/dropdown.js @@ -3,7 +3,6 @@ import layout from '../../templates/components/rose/dropdown'; import { action } from '@ember/object'; export default Component.extend({ - // =attributes layout, @@ -22,5 +21,4 @@ export default Component.extend({ close(element) { if (element.open) element.open = false; }, - }); diff --git a/addons/rose/app/components/rose/badge.js b/addons/rose/app/components/rose/badge.js index a9f224c09..6a69f03c6 100644 --- a/addons/rose/app/components/rose/badge.js +++ b/addons/rose/app/components/rose/badge.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/badge'; \ No newline at end of file +export { default } from 'rose/components/rose/badge'; diff --git a/addons/rose/app/components/rose/dropdown.js b/addons/rose/app/components/rose/dropdown.js index f51c98374..a0154aec2 100644 --- a/addons/rose/app/components/rose/dropdown.js +++ b/addons/rose/app/components/rose/dropdown.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/dropdown'; \ No newline at end of file +export { default } from 'rose/components/rose/dropdown'; diff --git a/addons/rose/app/components/rose/layout/sidebar.js b/addons/rose/app/components/rose/layout/sidebar.js index f078ea1c6..47c59c143 100644 --- a/addons/rose/app/components/rose/layout/sidebar.js +++ b/addons/rose/app/components/rose/layout/sidebar.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/layout/sidebar'; \ No newline at end of file +export { default } from 'rose/components/rose/layout/sidebar'; diff --git a/addons/rose/tests/integration/components/rose/badge-test.js b/addons/rose/tests/integration/components/rose/badge-test.js index 16e968e69..8665085e7 100644 --- a/addons/rose/tests/integration/components/rose/badge-test.js +++ b/addons/rose/tests/integration/components/rose/badge-test.js @@ -3,25 +3,25 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/badge', function(hooks) { +module('Integration | Component | rose/badge', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { await render(hbs``); assert.ok(find('.rose-badge')); }); - test('it renders with content', async function(assert) { + test('it renders with content', async function (assert) { await render(hbs`host-catalog-1`); assert.equal(find('.rose-badge').textContent.trim(), 'host-catalog-1'); }); - test('it renders an icon using @icon', async function(assert) { + test('it renders an icon using @icon', async function (assert) { await render(hbs``); assert.ok(find('.rose-icon')); }); - test('it styles content using @style', async function(assert) { + test('it styles content using @style', async function (assert) { let styles = [ 'outline', 'dark', @@ -36,7 +36,7 @@ module('Integration | Component | rose/badge', function(hooks) { 'success', 'success-outline', 'warning', - 'warning-outline' + 'warning-outline', ]; await render(hbs``); diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js index 1b4e0240a..4d9ce49d0 100644 --- a/addons/rose/tests/integration/components/rose/dropdown-test.js +++ b/addons/rose/tests/integration/components/rose/dropdown-test.js @@ -12,19 +12,14 @@ module('Integration | Component | rose/dropdown', function (hooks) { }); test('it renders with html attributes', async function (assert) { - await render( - hbs`` - ); + await render(hbs``); assert.ok(find('#custom-id')); assert.ok(find('.custom-class')); }); test('it renders with trigger', async function (assert) { await render(hbs``); - assert.equal( - find('.rose-dropdown-trigger').textContent.trim(), - 'Click me' - ); + assert.equal(find('.rose-dropdown-trigger').textContent.trim(), 'Click me'); }); test('it supports an icon', async function (assert) { diff --git a/addons/rose/tests/integration/components/rose/layout/sidebar-test.js b/addons/rose/tests/integration/components/rose/layout/sidebar-test.js index 727710ca1..a186775a5 100644 --- a/addons/rose/tests/integration/components/rose/layout/sidebar-test.js +++ b/addons/rose/tests/integration/components/rose/layout/sidebar-test.js @@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/layout/sidebar', function(hooks) { +module('Integration | Component | rose/layout/sidebar', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { diff --git a/addons/rose/tests/integration/components/rose/link-button-test.js b/addons/rose/tests/integration/components/rose/link-button-test.js index 617f76ed0..ac2be94aa 100644 --- a/addons/rose/tests/integration/components/rose/link-button-test.js +++ b/addons/rose/tests/integration/components/rose/link-button-test.js @@ -19,7 +19,9 @@ module('Integration | Component | rose/link-button', function (hooks) { }); test('it renders with content', async function (assert) { - await render(hbs`Link button content`); + await render( + hbs`Link button content` + ); assert.ok( find('.rose-link-button').textContent.trim(), 'Link button content' @@ -32,19 +34,25 @@ module('Integration | Component | rose/link-button', function (hooks) { }); test('it supports left icon with @iconLeft', async function (assert) { - await render(hbs``); + await render( + hbs`` + ); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-left')); }); test('it supports left icon with @iconRight', async function (assert) { - await render(hbs``); + await render( + hbs`` + ); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-right')); }); test('it supports only icon with @iconOnly', async function (assert) { - await render(hbs``); + await render( + hbs`` + ); assert.ok(find('.rose-icon')); assert.ok(find('.has-icon-only')); }); From 647420f3ab6240c9cac2579dcca3179f30cc2473 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Jul 2020 18:11:44 -0400 Subject: [PATCH 5/6] chore: add on-click-inside modifier --- .../rose/addon/modifiers/on-click-inside.js | 20 ++++++++++ addons/rose/app/modifiers/on-click-inside.js | 1 + .../modifiers/on-click-inside-test.js | 37 +++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 addons/rose/addon/modifiers/on-click-inside.js create mode 100644 addons/rose/app/modifiers/on-click-inside.js create mode 100644 addons/rose/tests/integration/modifiers/on-click-inside-test.js diff --git a/addons/rose/addon/modifiers/on-click-inside.js b/addons/rose/addon/modifiers/on-click-inside.js new file mode 100644 index 000000000..ec64ff5f7 --- /dev/null +++ b/addons/rose/addon/modifiers/on-click-inside.js @@ -0,0 +1,20 @@ +import { modifier } from 'ember-modifier'; + +/** + * Used to detect clicks occuring _inside_ the modified element. + * This is useful especially for dropdowns to toggle content visibility + * when the user clicks an item. + */ +export default modifier((element, [callback]) => { + function handleClick(event) { + if (element.contains(event.target)) { + callback(element, event); + } + } + + element.addEventListener('click', handleClick, false); + + return () => { + element.removeEventListener('click', handleClick, false); + }; +}); diff --git a/addons/rose/app/modifiers/on-click-inside.js b/addons/rose/app/modifiers/on-click-inside.js new file mode 100644 index 000000000..c137452fe --- /dev/null +++ b/addons/rose/app/modifiers/on-click-inside.js @@ -0,0 +1 @@ +export { default } from 'rose/modifiers/on-click-inside'; diff --git a/addons/rose/tests/integration/modifiers/on-click-inside-test.js b/addons/rose/tests/integration/modifiers/on-click-inside-test.js new file mode 100644 index 000000000..8197a2258 --- /dev/null +++ b/addons/rose/tests/integration/modifiers/on-click-inside-test.js @@ -0,0 +1,37 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, click } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Modifier | on-click-inside', function (hooks) { + setupRenderingTest(hooks); + + test('it fires event when inside is clicked', async function (assert) { + assert.expect(2); + this.set('clickedInside', (element) => { + assert.ok(element); + assert.equal(element.id, 'inside'); + }); + await render(hbs` +
+
+
+
+ `); + await click('#item'); + }); + + test('it does not fire event when outside is clicked', async function (assert) { + assert.expect(0); + this.set('clickedInside', () => { + assert.ok(true); + }); + await render(hbs` +
+
+
+
+ `); + await click('#outside'); + }); +}); From 372cf202f82357325901ae1906184bec5d4dc13f Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 29 Jul 2020 18:19:43 -0400 Subject: [PATCH 6/6] apply on-click-inside modifier to dropdown component --- addons/rose/addon/components/rose/dropdown.js | 8 +++++--- .../addon/templates/components/rose/dropdown.hbs | 2 +- .../integration/components/rose/dropdown-test.js | 13 +++++++++++++ 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js index 07e9ba14b..4e6ffea81 100644 --- a/addons/rose/addon/components/rose/dropdown.js +++ b/addons/rose/addon/components/rose/dropdown.js @@ -12,13 +12,15 @@ export default Component.extend({ /** * Closes the details element by setting its `open` attribute to `false`. - * While the details element handles open/close functionality without - * JavaScript, we include this helper action to ensure that when the user - * clicks _outside_ of the element, it still closes. + * While the details element handles open/close functionality when clicking + * directly on the summar elemenet without JavaScript, we include this helper + * action to ensure that when the user clicks _outside_ of the element, + * or _inside_ the content, it still closes. * @param {HTMLElement} element */ @action close(element) { if (element.open) element.open = false; + if (element.parentElement.open) element.parentElement.open = false; }, }); diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs index 51b429435..c65c640ba 100644 --- a/addons/rose/addon/templates/components/rose/dropdown.hbs +++ b/addons/rose/addon/templates/components/rose/dropdown.hbs @@ -22,7 +22,7 @@ -
+
{{yield (hash link=(component "link-to" class="rose-dropdown-link") button=(component "rose/button" style="dropdown") diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js index 4d9ce49d0..3d4597c95 100644 --- a/addons/rose/tests/integration/components/rose/dropdown-test.js +++ b/addons/rose/tests/integration/components/rose/dropdown-test.js @@ -67,4 +67,17 @@ module('Integration | Component | rose/dropdown', function (hooks) { await click('#wrapper'); assert.notOk(find('#dropdown').open); }); + + test('it is closed when inside content is clicked', async function (assert) { + await render(hbs` + + Button + + `); + + await click('summary'); + assert.ok(find('.rose-dropdown').open); + await click('button'); + assert.notOk(find('.rose-dropdown').open); + }); });