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>
2023-06-05 13:38:41 -07:00
1 parent de10b275d3
commit 6e96676beb
@@ -4,7 +4,9 @@
 }}

 <div class='rose-form-actions' ...attributes>
-  <Rose::Button @style='secondary' {{on 'click' @enableEdit}}>
-    {{@enableEditText}}
-  </Rose::Button>
+  <Hds::Button
+    @text={{@enableEditText}}
+    @color='secondary'
+    {{on 'click' @enableEdit}}
+  />
 </div>
@@ -3,19 +3,18 @@
  SPDX-License-Identifier: MPL-2.0
 }}

-<div class='rose-form-actions' ...attributes>
-  {{! template-lint-disable no-passed-in-event-handlers }}
-  <Rose::Button @disabled={{@submitDisabled}} @submit={{true}} @style='primary'>
-    {{@submitText}}
-  </Rose::Button>
-
+<Hds::ButtonSet class='rose-form-actions' ...attributes>
+  <Hds::Button
+    @text={{@submitText}}
+    disabled={{@submitDisabled}}
+    type='submit'
+  />
  {{#if this.showCancel}}
-    <Rose::Button
-      @disabled={{@cancelDisabled}}
-      @style='secondary'
+    <Hds::Button
+      @text={{@cancelText}}
+      @color='secondary'
+      disabled={{@cancelDisabled}}
      {{on 'click' @cancel}}
-    >
-      {{@cancelText}}
-    </Rose::Button>
+    />
  {{/if}}
-</div>
+</Hds::ButtonSet>
@@ -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;
  }
@@ -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) {
@@ -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"])');
  });
 });
@@ -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');
    });
@@ -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>
-    <Hds::Button @text='{{t "actions.save"}}' type='submit' />
-    <Hds::Button
-      @text='{{t "actions.do-this-later"}}'
-      @color='secondary'
-      name='cancel'
-      {{on 'click' @cancel}}
-    />
-  </Hds::ButtonSet>
-
+  <form.actions
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.do-this-later'}}
+  />
 </Rose::Form>
@@ -169,14 +169,8 @@

 .rose-frame {
  .rose-form-actions {
-    .rose-button-primary {
-      display: block;
-      margin: 0;
+    .hds-button {
      width: 100%;
-
-      .rose-button-wrapper {
-        display: inline;
-      }
    }
  }
 }
@@ -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);
  });
 });
@@ -288,14 +288,8 @@
  }

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