refactor: 💡 update scope form to use HDS input and textarea (#1459)

* refactor: 💡 update scope form to use HDS input and textarea

* chore: 🤖 tweak "optional" label text color in dark mode

* fix: 🐛 add HDS field margins and fix form tests

* fix: 🐛 fix acceptance tests and add TextInput event handlers

* fix: 🐛 use input event and fix set-from-event to handle empty

* fix: 🐛 fix linting and add @type='text' on HDS text input

* fix: 🐛 fix HDS field margin overrides

* chore: 🤖 simplify selector

addons/rose/addon/helpers/set-from-event.js

@@ -5,7 +5,7 @@ export function setFromEvent([context, field]) {
   // The Ember `set` function is used here because `field` may be in dotted
   // notation, refering to nested fields within `context`.
   return (event) =>
-    event?.target?.value ? set(context, field, event.target.value) : null;
+    event?.target ? set(context, field, event.target.value) : null;
 }
 
 export default helper(setFromEvent);

addons/rose/addon/styles/addon.scss

@@ -1,2 +1,3 @@
 @import '@hashicorp/design-system-components';
 @import 'hds/themes/dark-mode';
+@import 'hds/overrides';

addons/rose/addon/styles/hds/overrides.scss

@@ -0,0 +1,4 @@
+// field bottom margin (HDS leaves this to implementers)
+[class^='hds-form-field'] {
+  margin-bottom: 1.5rem;
+}

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

@@ -79,6 +79,7 @@
   --token-form-control-base-border-color-default: var(
     --token-color-palette-neutral-200
   );
+  --token-form-indicator-optional-color: var(--token-color-palette-neutral-200);
 }
 
 // HDS Light Mode

addons/rose/app/styles/rose/components/table/_table.scss

@@ -19,8 +19,8 @@
   // This styles are add to stop the input to apply extra margin (default on forms)
   .rose-form-input,
   .rose-form-input-field,
-  .hds-form-select,
-  [class^='hds-form-field-'] .hds-form-select:not(:first-child) {
+  [class^='hds-form-field'],
+  [class^='hds-form-field']:not(:first-child) {
     margin: 0;
     width: 100%;
   }

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

@@ -6,44 +6,47 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.name}}
+    @type='text'
+    name='name'
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
     {{#if @model.errors.name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions

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

@@ -192,6 +192,6 @@ module('Acceptance | scopes', function (hooks) {
     await visit(urls.newOrgScope);
     await click('[type="submit"]');
     assert.dom('.rose-notification-body').hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('.hds-form-error__message').hasText('Name is required.');
   });
 });

ui/admin/tests/acceptance/scopes/update-test.js

@@ -130,7 +130,7 @@ module('Acceptance | scopes | update', function (hooks) {
       'The request was invalid.'
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('.hds-form-error__message').textContent.trim(),
       'Name is required.'
     );
   });