CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 💡 rose dialog cleanup (#2831)

Browse Source
This commit is contained in:
Priya Patel authored and GitHub committed 2025-05-20 09:40:57 -05:00
1 parent 80ffa856bd
commit 376787fda1
12 files changed
-371
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/.template-lintrc.js
-6
View File
@@ -15,12 +15,6 @@ module.exports = {
'no-yield-only': false,
},
},
{
files: ['addon/components/rose/dialog/index.hbs'],
rules: {
'no-duplicate-landmark-elements': false,
},
},
{
files: ['addon/components/rose/form/actions/index.hbs'],
rules: {
addons/rose/addon/components/rose/dialog/body/index.hbs
-8
View File
@@ -1,8 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
<div class='rose-dialog-body' tabindex='0'>
{{yield}}
</div>
addons/rose/addon/components/rose/dialog/index.hbs
-99
View File
@@ -1,99 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
{{#if @modal}}
<div class='rose-dialog-modal-overlay'></div>
<section
...attributes
role='dialog'
class='rose-dialog
{{if @style (concat "rose-dialog-" @style)}}
{{if @modal "modal"}}'
id={{this.id}}
aria-describedby={{concat 'dialog-header-' this.id}}
{{focus-trap}}
>
<header class='rose-dialog-header' id={{concat 'dialog-header-' this.id}}>
{{#if @icon}}
<Hds::Icon @name={{@icon}} />
{{/if}}
<Hds::Text::Display
@tag='h2'
class='rose-dialog-heading'
>{{@heading}}</Hds::Text::Display>
<button
type='button'
class='rose-dialog-dismiss'
title={{@dismissButtonText}}
{{on 'click' (fn this.dismiss @dismiss)}}
>
<Hds::Icon @name='x' />
</button>
</header>
{{yield
(hash
body=(component 'rose/dialog/body')
footer=(component
'rose/anonymous' tagName='footer' class='rose-dialog-footer'
)
)
}}
</section>
{{else}}
<section
...attributes
role='dialog'
class='rose-dialog
{{if @style (concat "rose-dialog-" @style)}}
{{if @modal "modal"}}'
>
{{#if @heading}}
{{! template-lint-disable no-duplicate-landmark-elements }}
<header class='rose-dialog-header'>
{{#if @icon}}
<Hds::Icon @name={{@icon}} />
{{/if}}
<Hds::Text::Display
@tag='h2'
class='rose-dialog-heading'
>{{@heading}}</Hds::Text::Display>
<button
type='button'
class='rose-dialog-dismiss'
title={{@dismissButtonText}}
{{on 'click' (fn this.dismiss @dismiss)}}
>
<Hds::Icon @name='x' />
</button>
</header>
{{/if}}
{{yield
(hash
body=(component 'rose/dialog/body')
footer=(component
'rose/anonymous' tagName='footer' class='rose-dialog-footer'
)
)
}}
</section>
{{/if}}
addons/rose/addon/components/rose/dialog/index.js
-30
View File
@@ -1,30 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import Component from '@glimmer/component';
import { generateComponentID } from '../../../utilities/component-auto-id';
import { action } from '@ember/object';
export default class RoseDialogComponent extends Component {
// =attributes
/**
* @type {string}
*/
id = generateComponentID();
// =methods
/**
* Calls the passed dismiss function. This approach is convenient
* in case an external dismiss function is not passed into the component,
* a template error will not be thrown.
* @param {Function} fn
*/
@action
dismiss(fn) {
fn();
}
}
addons/rose/app/components/rose/dialog.js
-6
View File
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/dialog';
addons/rose/app/components/rose/dialog/body.js
-6
View File
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'rose/components/rose/dialog/body';
addons/rose/app/styles/rose/components/_index.scss
-1
View File
@@ -9,7 +9,6 @@
@use 'card';
@use 'cards';
@use 'code-editor';
@use 'dialog';
@use 'dropdown';
@use 'form';
@use 'frame';
addons/rose/app/styles/rose/components/dialog/_dialog.scss
-136
View File
@@ -1,136 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
@use '../../variables/sizing';
@use '../../utilities/type';
@use '../../variables/media';
$m: sizing.rems(m); // 16
$s: sizing.rems(s); // 12
$xs: sizing.rems(xs); // 8
$xxs: sizing.rems(xxs); // 4
$xxxs: sizing.rems(xxxs); // 2
$xxxxs: sizing.rems(xxxxs); // 1
.rose-dialog {
--header-color: var(--ui-gray-starker-3);
--header-icon-color: var(--header-color);
--header-background-color: var(--ui-gray-subtler-5);
--header-border-color: var(--ui-gray-subtler-2);
border-radius: $xxxs;
background-color: var(--subtle);
box-shadow:
0 $xs $s rgba(var(--stark-components), var(--opacity-2)),
0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3));
&.rose-dialog-success {
--header-color: var(--success-starker-1);
--header-icon-color: var(--success);
--header-background-color: var(--success-subtler-2);
--header-border-color: var(--success);
}
&.rose-dialog-warning {
--header-color: var(--warning-starker-1);
--header-icon-color: var(--warning);
--header-background-color: var(--warning-subtler-2);
--header-border-color: var(--warning);
}
&.rose-dialog-error {
--header-color: var(--failure-starker-1);
--header-icon-color: var(--failure);
--header-background-color: var(--failure-subtler-2);
--header-border-color: var(--failure);
}
.rose-dialog-header {
display: flex;
align-items: center;
padding: ($xs + $xxxs) $m;
min-height: sizing.rems(l);
color: var(--header-color);
background-color: var(--header-background-color);
border: $xxxxs solid var(--header-border-color);
border-top-left-radius: $xxxs;
border-top-right-radius: $xxxs;
.rose-dialog-heading {
@include type.type(m, semibold);
flex-grow: 1;
margin: 0;
padding: 0;
color: currentcolor;
}
.rose-dialog-dismiss {
border: $xxxxs solid var(--ui-gray-subtler-2);
border-radius: $xxxs;
color: var(--ui-gray);
background-color: transparent;
padding: 0;
margin: 0;
height: sizing.rems(l);
width: sizing.rems(l);
&:hover {
border-color: currentcolor;
}
}
}
.rose-dialog-body {
border-left: $xxxxs solid var(--ui-gray-subtler-2);
border-right: $xxxxs solid var(--ui-gray-subtler-2);
padding: sizing.rems(l);
}
.rose-dialog-footer {
padding: $m;
border: $xxxxs solid var(--ui-gray-subtler-2);
border-bottom-left-radius: $xxxs;
border-bottom-right-radius: $xxxs;
background-color: var(--ui-gray-subtler-5);
button {
margin-bottom: 0;
}
}
&.modal {
display: flex;
flex-direction: column;
position: fixed;
left: calc(50% - 300px);
top: 5%;
max-height: 85%;
max-width: 80vw;
width: 650px;
@media (width <= (media.width(small))) {
left: 5%;
}
.rose-dialog-body {
overflow-y: auto;
}
}
}
// overlay
.rose-dialog-modal-overlay {
content: ' ';
background-color: var(--black);
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0.5;
}
addons/rose/app/styles/rose/components/dialog/_index.scss
-6
View File
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
@use 'dialog';
addons/rose/tests/integration/components/rose/dialog-test.js
-32
View File
@@ -1,32 +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, click } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | rose/dialog', function (hooks) {
setupRenderingTest(hooks);
test('it renders and handles dismiss actions', async function (assert) {
assert.expect(5);
this.dismiss = () => assert.ok(true, 'dismissed');
await render(hbs`
<Rose::Dialog
@dismiss={{this.dismiss}}
@heading="Heading"
as |dialog|>
<dialog.body>Dialog</dialog.body>
<dialog.footer>Dialog</dialog.footer>
</Rose::Dialog>
`);
assert.ok(find('.rose-dialog'));
assert.ok(find('.rose-dialog-header'));
assert.ok(find('.rose-dialog-body'));
assert.ok(find('.rose-dialog-footer'));
await click('button');
});
});
addons/rose/tests/integration/components/rose/dialog/body-test.js
-31
View File
@@ -1,31 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | rose/dialog/body', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
await render(hbs`<Rose::Dialog::Body />`);
assert.strictEqual(this.element.textContent.trim(), '');
// Template block usage:
await render(hbs`
<Rose::Dialog::Body>
template block text
</Rose::Dialog::Body>
`);
assert.strictEqual(this.element.textContent.trim(), 'template block text');
});
});
ui/desktop/app/styles/app.scss
-10
View File
@@ -226,16 +226,6 @@
text-align: center;
}
// Rose dialog - positioned above modal overlay
.rose-dialog {
z-index: 6000;
}
// Overlay above everything - including notifications
.rose-dialog-modal-overlay {
z-index: 5500;
}
// Hidden secret component (app/components/hidden-secret)
.hidden-secret {
display: flex;