[Retire] Rose::Button (#2838)
* remove rose::button files and imports * remove rose btn utilities * remove btn class from app.scss * delete rose btn styling, component files * update test * remove playground.hbs, team agreed * refactor dummy/app/templates/index.hbs to use hds btn
This commit is contained in:
Lauren authored and 
GitHub committed
1 parent
1ef7d9b5a7
commit
8f3cccce32
12 files changed
+5
-474
No files matched your search
@@ -1,33 +0,0 @@
|
||||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: BUSL-1.1
|
||||
}}
|
||||
|
||||
<button
|
||||
...attributes
|
||||
type={{if @onSubmit 'submit' 'button'}}
|
||||
disabled={{if @disabled 'disabled'}}
|
||||
class='{{if @style (concat "rose-button-" @style)}}
|
||||
{{if @iconLeft "has-icon-left"}}
|
||||
{{if @iconRight "has-icon-right"}}
|
||||
{{if @iconOnly "has-icon-only"}}'
|
||||
>
|
||||
|
||||
<span class='rose-button-wrapper'>
|
||||
{{#if @iconLeft}}
|
||||
<Hds::Icon @name={{@iconLeft}} @isInline={{true}} />
|
||||
{{/if}}
|
||||
|
||||
<span class='rose-button-body'>
|
||||
{{yield}}
|
||||
</span>
|
||||
|
||||
{{#if @iconOnly}}
|
||||
<Hds::Icon @name={{@iconOnly}} @isInline={{true}} />
|
||||
{{/if}}
|
||||
|
||||
{{#if @iconRight}}
|
||||
<Hds::Icon @name={{@iconRight}} @isInline={{true}} />
|
||||
{{/if}}
|
||||
</span>
|
||||
</button>
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
export { default } from 'rose/components/rose/button';
|
||||
@@ -1,153 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
@use '../utilities/button';
|
||||
@use '../utilities/type' as typography;
|
||||
@use '../variables/sizing';
|
||||
|
||||
$size-xs: sizing.rems(xs); // 8
|
||||
$size-xxs: sizing.rems(xxs); // 4
|
||||
$size-xxxs: sizing.rems(xxxs); // 2
|
||||
$size-xxxxs: sizing.rems(xxxxs); // 1
|
||||
|
||||
@include button.button-style(
|
||||
'primary',
|
||||
(
|
||||
color: var(--white),
|
||||
background-color: var(--info),
|
||||
border-color: var(--info-starker-2),
|
||||
box-shadow: 0 $size-xxs $size-xxs
|
||||
rgba(var(--stark-components), var(--opacity-2)),
|
||||
text-shadow: 0 $size-xxxxs $size-xxxxs
|
||||
rgba(var(--black-components), var(--opacity-2)),
|
||||
),
|
||||
(
|
||||
background-color: var(--info-subtler-1),
|
||||
box-shadow: (
|
||||
0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-3)),
|
||||
0 $size-xxs $size-xs rgba(var(--stark-components), var(--opacity-4)),
|
||||
),
|
||||
),
|
||||
(
|
||||
background-color: var(--info-starker-1),
|
||||
box-shadow: none,
|
||||
),
|
||||
(
|
||||
opacity: var(--opacity-1),
|
||||
box-shadow: none,
|
||||
)
|
||||
);
|
||||
|
||||
@include button.button-style(
|
||||
'secondary',
|
||||
(
|
||||
color: var(--ui-gray-starker-3),
|
||||
background-color: var(--ui-gray-subtler-5),
|
||||
border-color: var(--ui-gray-subtler-2),
|
||||
box-shadow: 0 $size-xxs $size-xxs
|
||||
rgba(var(--stark-components), var(--opacity-2)),
|
||||
),
|
||||
(
|
||||
color: var(--ui-gray-starker-4),
|
||||
background-color: var(--subtle),
|
||||
border-color: var(--ui-gray-starker-1),
|
||||
box-shadow: (
|
||||
0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-3)),
|
||||
0 $size-xxs $size-xs rgba(var(--stark-components), var(--opacity-4)),
|
||||
),
|
||||
),
|
||||
(
|
||||
color: var(--ui-gray-starker-4),
|
||||
background-color: var(--ui-gray-subtler-3),
|
||||
border-color: var(--ui-gray-starker-1),
|
||||
box-shadow: none,
|
||||
),
|
||||
(
|
||||
opacity: var(--opacity-1),
|
||||
box-shadow: none,
|
||||
)
|
||||
);
|
||||
|
||||
@include button.button-style(
|
||||
'warning',
|
||||
(
|
||||
color: var(--failure),
|
||||
background-color: var(--subtle),
|
||||
border-color: var(--failure),
|
||||
box-shadow: 0 $size-xxs $size-xxs
|
||||
rgba(var(--stark-components), var(--opacity-2)),
|
||||
),
|
||||
(
|
||||
color: var(--white),
|
||||
border-color: var(--failure-starker-1),
|
||||
background-color: var(--failure),
|
||||
box-shadow: (
|
||||
0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-3)),
|
||||
0 $size-xxs $size-xs rgba(var(--stark-components), var(--opacity-4)),
|
||||
),
|
||||
text-shadow: 0 $size-xxxxs $size-xxxxs
|
||||
rgba(var(--black-components), var(--opacity-2)),
|
||||
),
|
||||
(
|
||||
color: var(--white),
|
||||
border-color: var(--ui-gray-starker-2),
|
||||
background-color: var(--failure-starker-1),
|
||||
box-shadow: (
|
||||
0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-3)),
|
||||
0 $size-xxs $size-xs rgba(var(--stark-components), var(--opacity-4)),
|
||||
),
|
||||
text-shadow: 0 $size-xxxxs $size-xxxxs
|
||||
rgba(var(--black-components), var(--opacity-2)),
|
||||
),
|
||||
(
|
||||
border-color: var(--ui-gray-subtler-2),
|
||||
opacity: var(--opacity-1),
|
||||
box-shadow: none,
|
||||
)
|
||||
);
|
||||
|
||||
@include button.button-style(
|
||||
'ghost',
|
||||
(
|
||||
color: var(--info),
|
||||
border-color: transparent,
|
||||
background-color: var(--subtle),
|
||||
),
|
||||
(
|
||||
background-color: var(--ui-gray-subtler-5),
|
||||
),
|
||||
(
|
||||
background-color: var(--ui-gray-subtler-4),
|
||||
),
|
||||
(
|
||||
opacity: var(--opacity-1),
|
||||
)
|
||||
);
|
||||
|
||||
.rose-button-inline-link-action {
|
||||
@include typography.type(m, semibold);
|
||||
|
||||
color: var(--info);
|
||||
border: 0;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: var(--opacity-1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--info-starker-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,6 @@
|
||||
|
||||
// This list is sorted in ascending order to improve readability
|
||||
|
||||
@use 'button';
|
||||
@use 'card';
|
||||
@use 'cards';
|
||||
@use 'code-editor';
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
*/
|
||||
|
||||
@use 'dropdown';
|
||||
@use 'button';
|
||||
@use 'link';
|
||||
@use 'item';
|
||||
@use 'section';
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
@use 'sass:map';
|
||||
@use 'type' as typography;
|
||||
@use '../variables/sizing';
|
||||
|
||||
@mixin button {
|
||||
@include typography.type(button, semibold);
|
||||
|
||||
display: inline-block;
|
||||
margin-bottom: sizing.rems(l);
|
||||
margin-right: sizing.rems(xs);
|
||||
padding: sizing.rems(off-xs) sizing.rems(l);
|
||||
border-radius: sizing.rems(xxxs);
|
||||
border: sizing.rems(xxxxs) solid;
|
||||
background: none;
|
||||
|
||||
.rose-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.has-icon-left .hds-icon:first-child {
|
||||
margin-left: -(sizing.rems(xs));
|
||||
margin-right: sizing.rems(xxs);
|
||||
}
|
||||
|
||||
&.has-icon-right .hds-icon:last-child {
|
||||
margin-left: sizing.rems(xxs);
|
||||
margin-right: -(sizing.rems(xs));
|
||||
}
|
||||
|
||||
&.has-icon-only {
|
||||
padding-right: sizing.rems(s);
|
||||
padding-left: sizing.rems(s);
|
||||
|
||||
.rose-button-body {
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-style($name, $default, $hover: &, $active: &, $disabled: &) {
|
||||
.rose-button-#{$name} {
|
||||
@include button;
|
||||
|
||||
border-color: map.get($default, border-color);
|
||||
color: map.get($default, color);
|
||||
background-color: map.get($default, background-color);
|
||||
@if map.get($default, 'box-shadow') {
|
||||
box-shadow: map.get($default, 'box-shadow');
|
||||
}
|
||||
@if map.get($default, 'text-shadow') {
|
||||
text-shadow: map.get($default, 'text-shadow');
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
@if $hover {
|
||||
&:hover {
|
||||
@if map.get($hover, 'border-color') {
|
||||
border-color: map.get($hover, 'border-color');
|
||||
}
|
||||
@if map.get($hover, 'color') {
|
||||
color: map.get($hover, 'color');
|
||||
}
|
||||
@if map.get($hover, 'background-color') {
|
||||
background-color: map.get($hover, 'background-color');
|
||||
}
|
||||
@if map.get($hover, 'box-shadow') {
|
||||
box-shadow: map.get($hover, 'box-shadow');
|
||||
}
|
||||
@if map.get($hover, 'text-shadow') {
|
||||
text-shadow: map.get($hover, 'text-shadow');
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $active {
|
||||
&:active {
|
||||
@if map.get($active, 'border-color') {
|
||||
border-color: map.get($active, 'border-color');
|
||||
}
|
||||
@if map.get($active, 'color') {
|
||||
color: map.get($active, 'color');
|
||||
}
|
||||
@if map.get($active, 'background-color') {
|
||||
background-color: map.get($active, 'background-color');
|
||||
}
|
||||
@if map.get($active, 'box-shadow') {
|
||||
box-shadow: map.get($active, 'box-shadow');
|
||||
}
|
||||
@if map.get($active, 'text-shadow') {
|
||||
text-shadow: map.get($active, 'text-shadow');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $disabled {
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
@if map.get($disabled, 'border-color') {
|
||||
border-color: map.get($disabled, 'border-color');
|
||||
}
|
||||
@if map.get($disabled, 'opacity') {
|
||||
opacity: map.get($disabled, 'opacity');
|
||||
}
|
||||
@if map.get($disabled, 'box-shadow') {
|
||||
box-shadow: map.get($disabled, 'box-shadow');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
@forward 'button';
|
||||
@@ -4,33 +4,16 @@
|
||||
}}
|
||||
|
||||
<Rose::Toolbar as |toolbar|>
|
||||
<Rose::Button @style='inline-link-action' @iconLeft='flight-icons/svg/x-16'>
|
||||
Clear something
|
||||
</Rose::Button>
|
||||
<Hds::Button @icon='x' @isInline={{true}} @text='Clear something' />
|
||||
<toolbar.primary>
|
||||
<Rose::Form>
|
||||
<Rose::Button
|
||||
@style='inline-link-action'
|
||||
@iconLeft='flight-icons/svg/x-16'
|
||||
>
|
||||
Clear something
|
||||
</Rose::Button>
|
||||
<Rose::Button
|
||||
@style='inline-link-action'
|
||||
@iconLeft='flight-icons/svg/x-16'
|
||||
>
|
||||
Clear something
|
||||
</Rose::Button>
|
||||
<Hds::Button@icon='x' @isInline={{true}} @text='Clear something' />
|
||||
<Hds::Button @icon='x' @isInline={{true}} @text='Clear something' />
|
||||
</Rose::Form>
|
||||
</toolbar.primary>
|
||||
<toolbar.secondary>
|
||||
<Rose::Form>
|
||||
<Rose::Button
|
||||
@style='inline-link-action'
|
||||
@iconLeft='flight-icons/svg/x-16'
|
||||
>
|
||||
Refresh
|
||||
</Rose::Button>
|
||||
<Hds::Button @icon='x' @isInline={{true}} @text='Refresh' />
|
||||
</Rose::Form>
|
||||
</toolbar.secondary>
|
||||
</Rose::Toolbar>
|
||||
@@ -1,75 +0,0 @@
|
||||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: BUSL-1.1
|
||||
}}
|
||||
|
||||
<Rose::Layout::Global as |layout|>
|
||||
<layout.header>
|
||||
<Rose::Header as |header|>
|
||||
|
||||
<header.brand @logo='logo' @text='Product Name' />
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text='org-name' as |dropdown|>
|
||||
<dropdown.link @route='index'>Menu item</dropdown.link>
|
||||
<dropdown.link @route='about'>Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
</header.nav>
|
||||
|
||||
<header.utilities as |utilities|>
|
||||
<utilities.dropdown
|
||||
@text='user@example.net'
|
||||
@iconOnly={{true}}
|
||||
@icon='flight-icons/svg/user-circle-16'
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.link @route='index'>Menu item</dropdown.link>
|
||||
<dropdown.link @route='about'>Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
|
||||
</Rose::Header>
|
||||
</layout.header>
|
||||
|
||||
<layout.body>
|
||||
|
||||
<Rose::Layout::Sidebar as |layout|>
|
||||
|
||||
<layout.sidebar>
|
||||
<Rose::Nav::Sidebar @title='Title' as |nav|>
|
||||
<nav.link @route='index'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
</Rose::Nav::Sidebar>
|
||||
</layout.sidebar>
|
||||
|
||||
<layout.body @tagName='main'>
|
||||
|
||||
<Rose::List::KeyValue as |list|>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
<list.item as |item|>
|
||||
<item.key>Key</item.key>
|
||||
<item.cell>Value</item.cell>
|
||||
</list.item>
|
||||
</Rose::List::KeyValue>
|
||||
|
||||
</layout.body>
|
||||
|
||||
<layout.footer>
|
||||
footer content
|
||||
</layout.footer>
|
||||
|
||||
</Rose::Layout::Sidebar>
|
||||
|
||||
</layout.body>
|
||||
</Rose::Layout::Global>
|
||||
@@ -1,52 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, find } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | rose/button', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`<Rose::Button>Button</Rose::Button>`);
|
||||
assert.strictEqual(this.element.textContent.trim(), 'Button');
|
||||
});
|
||||
|
||||
test('it is type="button" by default', async function (assert) {
|
||||
await render(hbs`<Rose::Button>Button</Rose::Button>`);
|
||||
assert.strictEqual(find('button').type, 'button');
|
||||
});
|
||||
|
||||
test('it is type="submit" when @onSubmit={{true}}', async function (assert) {
|
||||
await render(hbs`<Rose::Button @onSubmit={{true}} />`);
|
||||
assert.strictEqual(find('button').type, 'submit');
|
||||
});
|
||||
|
||||
test('it is disabled when @disabled={{true}}', async function (assert) {
|
||||
await render(hbs`<Rose::Button @disabled={{true}} />`);
|
||||
assert.true(find('button').disabled);
|
||||
});
|
||||
|
||||
test('it adds a style class', async function (assert) {
|
||||
await render(hbs`<Rose::Button @style="primary" />`);
|
||||
assert.ok(find('.rose-button-primary'));
|
||||
await render(hbs`<Rose::Button @style="secondary" />`);
|
||||
assert.ok(find('.rose-button-secondary'));
|
||||
});
|
||||
|
||||
test('it supports left and right icons', async function (assert) {
|
||||
await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
|
||||
assert.dom('.has-icon-left .hds-icon').isVisible();
|
||||
await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
|
||||
assert.dom('.has-icon-right .hds-icon').isVisible();
|
||||
});
|
||||
|
||||
test('it supports an icon-only type', async function (assert) {
|
||||
await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
|
||||
assert.dom('.has-icon-only .hds-icon').isVisible();
|
||||
});
|
||||
});
|
||||
@@ -297,7 +297,7 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
|
||||
instances.hostSet.authorized_actions =
|
||||
instances.hostSet.authorized_actions.filter((item) => item !== 'update');
|
||||
await visit(urls.hostSet);
|
||||
assert.notOk(find('.rose-layout-page-actions .rose-button-secondary'));
|
||||
assert.notOk(find('.rose-layout-page-actions .hds-button-secondary'));
|
||||
});
|
||||
|
||||
test('can cancel changes to existing host-set', async function (assert) {
|
||||
|
||||
@@ -386,10 +386,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rose-button-ghost {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.credential-name,
|
||||
|
||||
Reference in new issue
Block a user