Icu 9412 refactor rose form actions to use hds buttons (#1697)

* refactor: 💡 use hds buttons in rose form actions

✅ Closes: ICU-9412

* test: 💍 fix form actions tests

* docs: ✏️ add new hds button attribute to storybook

* refactor: 💡 add ...attributes back in

* Update addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs

Co-authored-by: Randall Morey <randall@randallmorey.com>

* Update addons/rose/addon/components/rose/form/actions/index.hbs

Co-authored-by: Randall Morey <randall@randallmorey.com>

* refactor: 💡 remove @submitIsFullWidth option & add css instead

---------

Co-authored-by: Randall Morey <randall@randallmorey.com>

addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs

@@ -4,7 +4,9 @@
 }}
 
 <div class='rose-form-actions' ...attributes>
-  <Rose::Button @style='secondary' {{on 'click' @enableEdit}}>
+  <Hds::Button
-    {{@enableEditText}}
+    @text={{@enableEditText}}
-  </Rose::Button>
+    @color='secondary'
+    {{on 'click' @enableEdit}}
+  />
 </div>

addons/rose/addon/components/rose/form/actions/index.hbs

@@ -3,19 +3,18 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<div class='rose-form-actions' ...attributes>
+<Hds::ButtonSet class='rose-form-actions' ...attributes>
-  {{! template-lint-disable no-passed-in-event-handlers }}
+  <Hds::Button
-  <Rose::Button @disabled={{@submitDisabled}} @submit={{true}} @style='primary'>
+    @text={{@submitText}}
-    {{@submitText}}
+    disabled={{@submitDisabled}}
-  </Rose::Button>
+    type='submit'
-
+  />
   {{#if this.showCancel}}
-    <Rose::Button
+    <Hds::Button
-      @disabled={{@cancelDisabled}}
+      @text={{@cancelText}}
-      @style='secondary'
+      @color='secondary'
+      disabled={{@cancelDisabled}}
       {{on 'click' @cancel}}
-    >
+    />
-      {{@cancelText}}
-    </Rose::Button>
   {{/if}}
-</div>
+</Hds::ButtonSet>

addons/rose/addon/components/rose/form/actions/index.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
 
 /**
  * A set of two form action buttons for submit and cancel.
@@ -22,7 +21,6 @@ export default class RoseFormActionsComponent extends Component {
   /**
    * @type {boolean}
    */
-  @computed('args.showCancel')
   get showCancel() {
     return this.args.showCancel ?? true;
   }

addons/rose/addon/styles/hds/themes/dark-mode/index.scss

@@ -102,6 +102,9 @@
     --token-color-palette-neutral-200
   );
   --token-form-indicator-optional-color: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(
+    --token-color-palette-neutral-700
+  );
 }
 
 @media (prefers-color-scheme: dark) {

addons/rose/tests/integration/components/rose/form/actions-test.js

@@ -14,7 +14,9 @@ module('Integration | Component | rose/form/actions', function (hooks) {
   test('it renders a submit button and a regular button', async function (assert) {
     assert.expect(2);
     this.cancel = () => {};
-    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    await render(
+      hbs`{{rose/form/actions cancel=this.cancel submitText='Save' cancelText='Cancel'}}`
+    );
     assert.ok(find('[type="submit"]'));
     assert.ok(find('button:not([type="submit"])'));
   });
@@ -23,7 +25,7 @@ module('Integration | Component | rose/form/actions', function (hooks) {
     assert.expect(2);
     this.cancel = () => {};
     await render(
-      hbs`{{rose/form/actions cancel=this.cancel submitDisabled=true cancelDisabled=true}}`
+      hbs`{{rose/form/actions cancel=this.cancel submitDisabled=true cancelDisabled=true submitText='Save' cancelText='Cancel'}}`
     );
     assert.ok(find('[type="submit"]:disabled'));
     assert.ok(find('button:not([type="submit"]):disabled'));
@@ -31,7 +33,7 @@ module('Integration | Component | rose/form/actions', function (hooks) {
 
   test('it optionally does not render the cancel button', async function (assert) {
     assert.expect(2);
-    await render(hbs`{{rose/form/actions showCancel=false}}`);
+    await render(hbs`{{rose/form/actions submitText='Save' showCancel=false}}`);
     assert.ok(find('[type="submit"]'));
     assert.notOk(find('button:not([type="submit"])'));
   });
@@ -39,7 +41,9 @@ module('Integration | Component | rose/form/actions', function (hooks) {
   test('it executes a function on cancel click', async function (assert) {
     assert.expect(1);
     this.cancel = () => assert.ok(true, 'cancel was clicked');
-    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    await render(
+      hbs`{{rose/form/actions cancel=this.cancel submitText='Save' cancelText='Cancel'}}`
+    );
     await click('button:not([type="submit"])');
   });
 });

addons/rose/tests/integration/components/rose/form/actions/edit-toggle-test.js

@@ -17,7 +17,7 @@ module(
       assert.expect(1);
       this.enableEdit = () => {};
       await render(
-        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit}}`
+        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit enableEditText='Edit'}}`
       );
       assert.ok(find('button'));
     });
@@ -26,7 +26,7 @@ module(
       assert.expect(1);
       this.enableEdit = () => assert.ok(true, 'edit was clicked');
       await render(
-        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit}}`
+        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit enableEditText='Edit'}}`
       );
       await click('button');
     });

ui/admin/app/components/form/onboarding/index.hbs

@@ -3,7 +3,12 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Rose::Form class='full-width' @cancel={{@cancel}} @onSubmit={{this.submit}}>
+<Rose::Form
+  class='full-width'
+  @cancel={{@cancel}}
+  @onSubmit={{this.submit}}
+  as |form|
+>
   <div class='create-resources-form'>
     <Hds::Form::TextInput::Field
       name='targetAddress'
@@ -55,14 +60,8 @@
     <F.Control><Image @name='ssh-target-creation' /></F.Control>
   </Hds::Form::Fieldset>
 
-  <Hds::ButtonSet>
+  <form.actions
-    <Hds::Button @text='{{t "actions.save"}}' type='submit' />
+    @submitText={{t 'actions.save'}}
-    <Hds::Button
+    @cancelText={{t 'actions.do-this-later'}}
-      @text='{{t "actions.do-this-later"}}'
+  />
-      @color='secondary'
-      name='cancel'
-      {{on 'click' @cancel}}
-    />
-  </Hds::ButtonSet>
-
 </Rose::Form>

ui/admin/app/styles/app.scss

@@ -169,14 +169,8 @@
 
 .rose-frame {
   .rose-form-actions {
-    .rose-button-primary {
+    .hds-button {
-      display: block;
-      margin: 0;
       width: 100%;
-
-      .rose-button-wrapper {
-        display: inline;
-      }
     }
   }
 }

ui/admin/tests/acceptance/onboarding/onboarding-test.js

@@ -42,7 +42,7 @@ module('Acceptance | onboarding', function (hooks) {
   test('redirect user to orgs screen when click do this later', async function (assert) {
     assert.expect(1);
     await visit(urls.onboarding);
-    await click('[name="cancel"]');
+    await click('.rose-form-actions [type="button"]');
     assert.strictEqual(currentURL(), urls.orgs);
   });
 });

ui/desktop/app/styles/app.scss

@@ -288,14 +288,8 @@
   }
 
   .rose-form-actions {
-    .rose-button-primary {
+    .hds-button {
-      display: block;
-      margin: 0;
       width: 100%;
-
-      .rose-button-wrapper {
-        display: inline;
-      }
     }
   }
 }