Replace Rose::Button with Hds::Button (#2771)

* refactor btn

* refactor scope/workers/index.hbs

* refactor add-members, add-principals

* refactor btns, fix tests

* update json-secret-skeleton btn

* remove class from app.scss
This commit is contained in:
Lauren authored and GitHub committed 2025-04-22 16:25:12 -04:00
1 parent 5786b86521
commit 36db2d3f1d
11 files changed
+61 -70

No files matched your search

@@ -31,16 +31,4 @@ $xxxxs: sizing.rems(xxxxs); // 1
display: flex;
width: auto;
}
.rose-button-inline-link-action {
@include type.type(button, semibold);
color: var(--stark);
display: inline-block;
vertical-align: middle;
$y-padding: sizing.rems(xxs) + sizing.rems(xxxs);
padding: $y-padding sizing.rems(m);
}
}
@@ -11,13 +11,13 @@
</Form::Field::JsonSecret::Skeleton>
{{else if this.isActionable}}
<Form::Field::JsonSecret::Skeleton>
<Rose::Button
@iconLeft='flight-icons/svg/pencil-tool-16'
@style='secret-editor-skeleton-button'
<Hds::Button
class='secret-editor-skeleton-button'
@icon='pencil-tool'
@color='secondary'
@text={{t 'form.secret-editor.edit'}}
{{on 'click' this.enableEditing}}
>
{{t 'form.secret-editor.edit'}}
</Rose::Button>
/>
</Form::Field::JsonSecret::Skeleton>
{{else}}
<Rose::CodeEditor as |c|>
@@ -29,14 +29,12 @@
<input.field title={{t 'form.grant.help'}} />
</item.cell>
<item.cell>
<Rose::Button
@onSubmit={{true}}
@disabled={{this.cannotSave}}
@style='secondary'
title={{t 'actions.add'}}
>
{{t 'actions.add'}}
</Rose::Button>
<Hds::Button
type='submit'
disabled={{this.cannotSave}}
@color='secondary'
@text={{t 'actions.add'}}
/>
</item.cell>
</form.input>
</list.item>
@@ -82,14 +80,14 @@
</form.input>
<item.cell>
{{#if (can 'setGrants role' @model)}}
<Rose::Button
@style='secondary'
@iconOnly='flight-icons/svg/trash-16'
title={{t 'actions.remove'}}
<Hds::Button
@color='secondary'
@icon='trash'
@isIconOnly={{true}}
@text={{t 'actions.remove'}}
type='button'
{{on 'click' (fn @removeGrant grant.value)}}
>
{{t 'actions.remove'}}
</Rose::Button>
/>
{{/if}}
</item.cell>
</list.item>
+16 -14
View File
@@ -430,19 +430,21 @@
z-index: 1;
}
.rose-button-secret-editor-skeleton-button {
background: var(--secret-editor-body);
border: sizing.rems(xxxxs) solid var(--ui-gray);
border-radius: sizing.rems(xxxs);
box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) var(--button-shadow);
// using ui-gray directly so it does not change when
// user is in dark mode since the secret editor
// does not change theme colors between light and dark
color: #{color(ui-gray, 050)};
font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
height: sizing.rems(xl);
padding: 0 sizing.rems(l);
.secret-editor-skeleton-button {
@media (prefers-color-scheme: light) {
.ember-application:not(.rose-theme-dark) & {
background: var(--token-color-palette-neutral-600);
color: var(--token-color-palette-neutral-50);
border-color: var(--token-color-palette-neutral-50);
}
}
.ember-application.rose-theme-light & {
background: var(--token-color-palette-neutral-600);
color: var(--token-color-palette-neutral-50);
border-color: var(--token-color-palette-neutral-50);
}
}
}
@@ -1095,4 +1097,4 @@
li.indentation {
margin-left: 1.5rem;
}
}
}
@@ -74,12 +74,12 @@
'scopes.scope.groups.group.add-members' 'scope'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
<Hds::Button
@size='small'
@icon='x'
@text={{t 'actions.clear-all-filters'}}
{{on 'click' this.callClearAllFilters}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
/>
{{/if}}
</Rose::Form>
</toolbar.primary>
@@ -74,12 +74,12 @@
'scopes.scope.roles.role.add-principals' 'scope'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
<Hds::Button
@size='small'
@icon='x'
@text={{t 'actions.clear-all-filters'}}
{{on 'click' this.callClearAllFilters}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
/>
{{/if}}
</Rose::Form>
</toolbar.primary>
@@ -80,12 +80,12 @@
'scopes.scope.workers.index' 'tags'
)
}}
<Rose::Button
@style='inline-link-action'
@iconLeft='flight-icons/svg/x-16'
<Hds::Button
@size='small'
@icon='x'
@text={{t 'actions.clear-all-filters'}}
{{on 'click' this.callClearAllFilters}}
>{{t 'actions.clear-all-filters'}}
</Rose::Button>
/>
{{/if}}
</Rose::Form>
</toolbar.primary>
+1 -1
View File
@@ -50,7 +50,7 @@ export const FIELD_NEW_GRANT_ADD_BTN = 'form:nth-child(1) [type="submit"]';
export const FIELD_GRANT = 'form:nth-child(2) [name="grant"]';
export const FIELD_GRANT_VALUE = 'ids=123,action=delete';
export const FIELD_GRANT_REMOVE_BTN =
'form:nth-child(2) button[title="Remove"]';
'form:nth-child(2) button[type="button"]';
export const GRANTS_FORM = 'form:nth-child(2)';
// We need to use a different selector for the grants form because the
// grants form has multiple submit buttons
@@ -21,7 +21,6 @@ module(
{{this.value}}
</Form::Field::JsonSecret::Skeleton>
`);
assert.dom('.secret-editor-skeleton-wrapper').isVisible();
assert.dom('.secret-editor-skeleton-message').hasText('Skeleton Message');
});
+5 -3
View File
@@ -12,9 +12,11 @@
</Rose::Layout::Centered>
<Rose::Layout::Centered>
<Rose::Button @style='primary' {{on 'click' this.appUtilities.disconnect}}>
{{t 'actions.disconnect'}}
</Rose::Button>
<Hds::Button
@color='primary'
@text={{t 'actions.disconnect'}}
{{on 'click' this.appUtilities.disconnect}}
/>
</Rose::Layout::Centered>
</main>
@@ -24,8 +24,10 @@
</Rose::Layout::Centered>
<Rose::Layout::Centered>
<Rose::Button @style='primary' {{on 'click' this.appUtilities.disconnect}}>
{{t 'actions.disconnect'}}
</Rose::Button>
<Hds::Button
@color='primary'
@text={{t 'actions.disconnect'}}
{{on 'click' this.appUtilities.disconnect}}
/>
</Rose::Layout::Centered>
{{/unless}}