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:
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
@@ -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}}
|
||||
Reference in new issue
Block a user