diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx index 999b6278f..c2f71d82f 100644 --- a/addons/rose/addon/components/rose/dropdown.stories.mdx +++ b/addons/rose/addon/components/rose/dropdown.stories.mdx @@ -13,6 +13,7 @@ A simple dropdown component with support for links and buttons. Menu item Menu item + Button menu item `, @@ -25,6 +26,7 @@ A simple dropdown component with support for links and buttons. Menu item Menu item + Button menu item `, @@ -46,18 +48,16 @@ Dropdown content can be aligned to right edge of the component instead of the de Menu item Menu item + Button menu item ``` -Dropdown button styles support all `Rose::Button` styles through a `style` attribute. +Dropdown supports `danger` styling through `style` attribute. ```htmlbars - Button menu item - Button - warning - Button - primary - Button - secondary - Button - ghost + Link - danger + Button - danger ``` diff --git a/addons/rose/addon/components/rose/dropdown/button.js b/addons/rose/addon/components/rose/dropdown/button.js new file mode 100644 index 000000000..6f776e15d --- /dev/null +++ b/addons/rose/addon/components/rose/dropdown/button.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/dropdown/button'; + +/** + * A dropdown button component based on simplified rose/button + */ +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/dropdown/link.js b/addons/rose/addon/components/rose/dropdown/link.js new file mode 100644 index 000000000..c6609fe05 --- /dev/null +++ b/addons/rose/addon/components/rose/dropdown/link.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/dropdown/link'; + +/** + * A dropdown link wrapper for LinkTo component. + */ +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss new file mode 100644 index 000000000..bf6dc12c8 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss @@ -0,0 +1,34 @@ +@use '../../variables/sizing'; +@use '../../utilities/type'; + +.rose-dropdown-button { + @include type.type(s, normal); + display: block; + // Targeting min-width of 200 + min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10; + border: 0; + margin: 0; + padding: 0 sizing.rems(s); + color: var(--stark); + background-color: transparent; + // target line height is 36, which is not a standard line height for this + // font size + $lineHeight: 36 / 16; + line-height: $lineHeight; + text-align: left; + text-decoration: none; + cursor: pointer; + + &.rose-dropdown-button-danger { + --background: var(--white); + --color: var(--failure); + + color: var(--color); + background-color: var(--background-color); + + &:hover { + --color: var(--white); + --background-color: var(--failure); + } + } +} \ No newline at end of file diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss similarity index 72% rename from addons/rose/addon/styles/rose/components/_dropdown.scss rename to addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss index 7a1bf9e53..cb3c964eb 100644 --- a/addons/rose/addon/styles/rose/components/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss @@ -1,5 +1,5 @@ -@use '../variables/sizing'; -@use '../utilities/type'; +@use '../../variables/sizing'; +@use '../../utilities/type'; $chevron: "data:image/svg+xml;utf-8,"; @@ -92,42 +92,9 @@ $chevron: "data:image/svg+xml;utf-8, @@ -24,8 +24,9 @@
{{yield (hash - link=(component "link-to" class="rose-dropdown-link") - button=(component "rose/button" classNames="rose-dropdown-button" style=this.style) + link=(component "rose/dropdown/link" style=this.style) + button=(component "rose/dropdown/button" style=this.style) + separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator") )}}
diff --git a/addons/rose/addon/templates/components/rose/dropdown/button.hbs b/addons/rose/addon/templates/components/rose/dropdown/button.hbs new file mode 100644 index 000000000..364a2ef18 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/dropdown/button.hbs @@ -0,0 +1,19 @@ + diff --git a/addons/rose/addon/templates/components/rose/dropdown/link.hbs b/addons/rose/addon/templates/components/rose/dropdown/link.hbs new file mode 100644 index 000000000..6b3bd413a --- /dev/null +++ b/addons/rose/addon/templates/components/rose/dropdown/link.hbs @@ -0,0 +1,8 @@ + + {{yield}} + \ No newline at end of file diff --git a/addons/rose/app/components/rose/dropdown/button.js b/addons/rose/app/components/rose/dropdown/button.js new file mode 100644 index 000000000..0def7a1c0 --- /dev/null +++ b/addons/rose/app/components/rose/dropdown/button.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/dropdown/button'; \ No newline at end of file diff --git a/addons/rose/app/components/rose/dropdown/link.js b/addons/rose/app/components/rose/dropdown/link.js new file mode 100644 index 000000000..99ec355d3 --- /dev/null +++ b/addons/rose/app/components/rose/dropdown/link.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/dropdown/link'; \ 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 72f1657d5..ab7081265 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -4,9 +4,11 @@ Menu item - Menu item + Menu item - danger + Button menu item + Section Section @@ -18,22 +20,19 @@ @icon="user-square-fill" as |dropdown| > Menu item - Menu item + Menu item - danger Button - default - Button - warning - Button - primary - Button - secondary - Button - ghost + + Button - danger Menu item - Menu item + Menu item - danger + + Button menu item - Button - warning - Button - primary - Button - secondary - Button - ghost + Button - danger diff --git a/addons/rose/tests/integration/components/rose/dropdown/button-test.js b/addons/rose/tests/integration/components/rose/dropdown/button-test.js new file mode 100644 index 000000000..11fc945a6 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/dropdown/button-test.js @@ -0,0 +1,38 @@ +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/dropdown/button', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-dropdown-button')); + }); + + test('it is type="button" by default', async function (assert) { + await render(hbs``); + assert.equal(find('button').type, 'button'); + }); + + test('it is type="submit" when @submit={{true}}', async function (assert) { + await render(hbs``); + assert.equal(find('button').type, 'submit'); + }); + + test('it is disabled when @disabled={{true}}', async function (assert) { + await render(hbs``); + assert.equal(find('button').disabled, true); + }); + + test('it adds a style class', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-dropdown-button-warning')); + }); + + test('it supports an icon-only type', async function (assert) { + await render(hbs``); + assert.ok(find('.has-icon-only .rose-icon')); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/dropdown/link-test.js b/addons/rose/tests/integration/components/rose/dropdown/link-test.js new file mode 100644 index 000000000..a64b51bf8 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/dropdown/link-test.js @@ -0,0 +1,31 @@ +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/dropdown/link', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('a')); + assert.ok(find('.rose-dropdown-link')); + }); + + test('it renders with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#dropdown')); + }); + + test('it renders with content', async function (assert) { + await render(hbs` + content + `); + assert.equal(find('.rose-dropdown-link').textContent.trim(), 'content'); + }); + + test('it supports style', async function (assert) { + await render(hbs``); + assert.ok('.rose-dropdown-link-warning'); + }); +}); diff --git a/ui/core/app/templates/scopes/scope/groups/group/index.hbs b/ui/core/app/templates/scopes/scope/groups/group/index.hbs index ffe366e71..e78a0c548 100644 --- a/ui/core/app/templates/scopes/scope/groups/group/index.hbs +++ b/ui/core/app/templates/scopes/scope/groups/group/index.hbs @@ -17,9 +17,9 @@ - + diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs index cb0a4a0cf..6d7c05659 100644 --- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs +++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs @@ -16,20 +16,24 @@ + + + + {{t 'actions.delete-host-catalog'}} + + + + - - - {{t 'actions.delete'}} - diff --git a/ui/core/app/templates/scopes/scope/projects/project/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/index.hbs index 5dccae834..c3bec3790 100644 --- a/ui/core/app/templates/scopes/scope/projects/project/index.hbs +++ b/ui/core/app/templates/scopes/scope/projects/project/index.hbs @@ -16,20 +16,24 @@ + + + + {{t 'actions.delete-project'}} + + + + - - - {{t 'actions.delete'}} - diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs index 9df55380b..397e9f504 100644 --- a/ui/core/app/templates/scopes/scope/roles/role.hbs +++ b/ui/core/app/templates/scopes/scope/roles/role.hbs @@ -11,9 +11,9 @@ - + diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs index 2261fa30b..6392e84f7 100644 --- a/ui/core/app/templates/scopes/scope/users/user/index.hbs +++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs @@ -9,9 +9,9 @@ - + diff --git a/ui/core/tests/acceptance/groups-test.js b/ui/core/tests/acceptance/groups-test.js index b619d09ce..0d622f1f0 100644 --- a/ui/core/tests/acceptance/groups-test.js +++ b/ui/core/tests/acceptance/groups-test.js @@ -133,7 +133,7 @@ module('Acceptance | groups', function (hooks) { assert.expect(1); const groupsCount = this.server.db.groups.length; await visit(groupURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.equal(this.server.db.groups.length, groupsCount - 1); }); @@ -210,7 +210,7 @@ module('Acceptance | groups', function (hooks) { ); }); await visit(groupURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.ok( find('[role="alert"]').textContent.trim(), 'Oops.', diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js index 59bc08dcc..fada1730e 100644 --- a/ui/core/tests/acceptance/host-catalogs-test.js +++ b/ui/core/tests/acceptance/host-catalogs-test.js @@ -80,7 +80,7 @@ module('Acceptance | host catalogs', function (hooks) { authenticateSession({}); await visit(urls.hostCatalog); assert.equal(currentURL(), urls.hostCatalog); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.equal(this.server.db.hostCatalogs.length, hostCatalogsCount - 1); }); @@ -162,7 +162,7 @@ module('Acceptance | host catalogs', function (hooks) { }); authenticateSession({}); await visit(urls.hostCatalog); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); await a11yAudit(); assert.ok( find('[role="alert"]').textContent.trim(), diff --git a/ui/core/tests/acceptance/projects-test.js b/ui/core/tests/acceptance/projects-test.js index ced4a8f13..4af813592 100644 --- a/ui/core/tests/acceptance/projects-test.js +++ b/ui/core/tests/acceptance/projects-test.js @@ -135,7 +135,7 @@ module('Acceptance | projects', function (hooks) { test('can delete project', async function (assert) { assert.expect(1); await visit(existingProjectURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.equal(getProjectScopesCount(), initialProjectScopesCount - 1); }); @@ -212,7 +212,7 @@ module('Acceptance | projects', function (hooks) { ); }); await visit(existingProjectURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.ok( find('[role="alert"]').textContent.trim(), 'Oops.', diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js index 2aa364f1b..14bd45a24 100644 --- a/ui/core/tests/acceptance/roles-test.js +++ b/ui/core/tests/acceptance/roles-test.js @@ -133,7 +133,7 @@ module('Acceptance | roles', function (hooks) { assert.expect(1); const rolesCount = this.server.db.roles.length; await visit(roleURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.equal(this.server.db.roles.length, rolesCount - 1); }); @@ -210,7 +210,7 @@ module('Acceptance | roles', function (hooks) { ); }); await visit(roleURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.ok( find('[role="alert"]').textContent.trim(), 'Oops.', diff --git a/ui/core/tests/acceptance/users-test.js b/ui/core/tests/acceptance/users-test.js index 31fa5c98e..55e4ac108 100644 --- a/ui/core/tests/acceptance/users-test.js +++ b/ui/core/tests/acceptance/users-test.js @@ -133,7 +133,7 @@ module('Acceptance | users', function (hooks) { assert.expect(1); const usersCount = this.server.db.users.length; await visit(userURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.equal(this.server.db.users.length, usersCount - 1); }); @@ -210,7 +210,7 @@ module('Acceptance | users', function (hooks) { ); }); await visit(userURL); - await click('.rose-button-warning'); + await click('.rose-layout-page-actions .rose-dropdown-button-danger'); assert.ok( find('[role="alert"]').textContent.trim(), 'Oops.', diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index 6401bf775..41082f65e 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -12,6 +12,8 @@ actions: delete-user: Delete user delete-group: Delete group delete-role: Delete role + delete-project: Delete project + delete-host-catalog: Delete host catalog auth: titles: no-scopes: No Scopes Available