UI: HDS adoption replace <Button> in lib/core (2) (#24122)

* first four buttons

* swap button in object list input and update styling

* swap search select buttons

* string list input

* update text file

* toggle button

* add comment

* swap eye-con

* revert toggle button, add deprecation note

* cleanup css for object list input

* fix test

* revert toggle changes

* add margin

ui/app/styles/core/control.scss

@@ -51,14 +51,15 @@
       padding-right: 10em;
     }
   }
+}
 
-  &.is-align-end {
-    display: flex;
-    align-self: end;
+.control {
+  &.is-expanded {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  &.is-narrow {
+    flex: none;
+    width: 6%;
   }
 }
-
-.control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
-}

ui/app/styles/core/element-styling.scss

@@ -194,3 +194,8 @@ label {
     cursor: not-allowed;
   }
 }
+
+// TODO remove when HDS has released fix
+.hds-form-masked-input .hds-form-masked-input__toggle-button {
+  margin-right: $spacing-12;
+}

ui/lib/core/addon/components/form-field.hbs

@@ -239,16 +239,14 @@
             @example={{@attr.options.example}}
           >
             {{#if @attr.options.allowReset}}
-              <button
-                type="button"
-                class="toolbar-link"
+              <Hds::Button
+                @text="Clear"
+                @icon="reload"
+                class="toolbar-button"
                 disabled={{not value}}
-                onClick={{this.setAndBroadcast}}
+                {{on "click" this.setAndBroadcast}}
                 data-test-json-clear-button
-              >
-                Clear
-                <Icon @name="reload" />
-              </button>
+              />
             {{/if}}
           </JsonEditor>
         {{/let}}

ui/lib/core/addon/components/json-editor.hbs

@@ -16,16 +16,14 @@
         <ToolbarActions>
           {{yield}}
           {{#if @example}}
-            <button
-              type="button"
-              class="toolbar-link"
+            <Hds::Button
+              class="toolbar-button"
+              @icon="reload"
+              @text="Restore example"
               disabled={{not @value}}
               {{on "click" this.restoreExample}}
               data-test-restore-example
-            >
-              Restore example
-              <Icon @name="reload" />
-            </button>
+            />
           {{/if}}
           <div class="toolbar-separator"></div>
           <Hds::Copy::Button

ui/lib/core/addon/components/kv-object-editor.hbs

@@ -53,21 +53,19 @@
             />
           {{/if}}
         </div>
-        <div class="column is-narrow">
+        <div class="column is-1">
           {{#if (eq this.kvData.length (inc index))}}
-            <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-kv-add-row={{index}}>
-              Add
-            </button>
+            <Hds::Button @text="Add" {{on "click" this.addRow}} data-test-kv-add-row={{index}} @isFullWidth={{true}} />
           {{else}}
-            <button
-              class="button has-text-grey is-expanded is-icon"
-              type="button"
-              {{action "deleteRow" row index}}
-              aria-label="Delete row"
+            <Hds::Button
+              @text="Delete row"
+              @color="secondary"
+              {{on "click" (fn this.deleteRow row index)}}
+              @icon="trash"
+              @isIconOnly={{true}}
+              @isFullWidth={{true}}
               data-test-kv-delete-row={{index}}
-            >
-              <Icon @name="trash" />
-            </button>
+            />
           {{/if}}
         </div>
       </div>

ui/lib/core/addon/components/masked-input.hbs

@@ -54,16 +54,15 @@
       {{on "click" (fn (mut this.modalOpen) true)}}
     />
   {{/if}}
-  <button
-    onclick={{this.toggleMask}}
-    type="button"
-    aria-label={{if this.showValue "mask value" "show value"}}
-    title={{if this.showValue "mask value" "show value"}}
-    class="masked-input-toggle button"
+  <Hds::Button
+    @text={{if this.showValue "hide value" "show value"}}
+    @icon={{if this.showValue "eye-off" "eye"}}
+    @isIconOnly={{true}}
+    @color="tertiary"
+    class="has-padding-xxs"
     data-test-button="toggle-masked"
-  >
-    <Icon @name={{if this.showValue "eye" "eye-off"}} />
-  </button>
+    {{on "click" this.toggleMask}}
+  />
 </div>
 
 {{! CONFIRM DOWNLOAD MODAL }}

ui/lib/core/addon/components/object-list-input.hbs

@@ -6,10 +6,10 @@
 {{yield}}
 {{#each this.inputList as |row index|}}
   {{#let (get @validationErrors index) as |rowValidations|}}
-    <div class="field is-grouped">
+    <div class="columns">
       {{#each-in row as |inputKey value|}}
         {{#let (find-by "key" inputKey @objectKeys) as |field|}}
-          <div class="control is-expanded">
+          <div class="column">
             {{#if (eq index 0)}}
               <h2 data-test-object-list-label={{inputKey}}>{{field.label}}</h2>
             {{/if}}
@@ -26,37 +26,38 @@
                 {{on "input" (fn this.handleInput index)}}
               />
               {{#if (and (not inputError.isValid) inputError.errors)}}
-                <AlertInline @type="danger" @message={{inputError.errors}} @paddingTop={{true}} />
+                <Hds::Alert class="has-top-margin-xxs" @type="compact" @color="critical" as |A|>
+                  <A.Description>
+                    {{inputError.errors}}
+                  </A.Description>
+                </Hds::Alert>
               {{/if}}
             {{/let}}
           </div>
         {{/let}}
       {{/each-in}}
-      <div class="control {{if (includes false (map-by 'isValid' rowValidations)) '' 'is-align-end'}}">
+      <div class="column is-1">
         {{#if (eq index 0)}}
           <br />
         {{/if}}
         {{#if (eq (inc index) this.inputList.length)}}
-          <button
+          <Hds::Button
             data-test-object-list-add-button
-            type="button"
-            class="button is-outlined is-primary"
+            @text="Add"
             disabled={{this.disableAdd}}
-            aria-label="add"
             {{on "click" this.addRow}}
-          >
-            Add
-          </button>
+            @isFullWidth={{true}}
+          />
         {{else}}
-          <button
-            data-test-object-list-delete-button={{index}}
-            type="button"
-            class="button is-icon"
-            aria-label="remove"
+          <Hds::Button
+            @text="delete row"
+            @icon="trash"
+            @color="secondary"
+            @isIconOnly={{true}}
+            @isFullWidth={{true}}
             {{on "click" (fn this.removeRow index)}}
-          >
-            <Icon @name="trash" />
-          </button>
+            data-test-object-list-delete-button={{index}}
+          />
         {{/if}}
       </div>
     </div>

ui/lib/core/addon/components/search-select-with-modal.hbs

@@ -71,14 +71,14 @@
             </div>
           {{/if}}
           <div class="control">
-            <button
-              type="button"
-              class="button is-ghost"
+            <Hds::Button
+              @icon="trash"
+              @text="delete selection"
+              @isIconOnly={{true}}
+              @color="tertiary"
               data-test-selected-list-button="delete"
               {{on "click" (fn this.discardSelection selected)}}
-            >
-              <Icon @name="trash" class="has-text-grey" />
-            </button>
+            />
           </div>
         </li>
       {{/each}}

ui/lib/core/addon/components/search-select.hbs

@@ -88,14 +88,14 @@
                 {{selected.addTooltip}}
               </InfoTooltip>
             {{/if}}
-            <button
-              type="button"
-              class="button is-ghost"
+            <Hds::Button
+              @icon="trash"
+              @text="delete selection"
+              @isIconOnly={{true}}
+              @color="tertiary"
               data-test-selected-list-button="delete"
               {{on "click" (fn this.discardSelection selected)}}
-            >
-              <Icon @name="trash" class="has-text-grey" />
-            </button>
+            />
           </div>
         </li>
       {{/each}}

ui/lib/core/addon/components/string-list.hbs

@@ -37,25 +37,19 @@
           {{on "change" (action "inputChanged" index)}}
         />
       </div>
-      <div class="control">
+      <div class="control is-narrow">
         {{#if (eq (inc index) this.inputList.length)}}
-          <button
-            type="button"
-            class="button is-outlined is-primary"
-            data-test-string-list-button="add"
-            {{on "click" this.addInput}}
-          >
-            Add
-          </button>
+          <Hds::Button @text="Add" data-test-string-list-button="add" {{on "click" this.addInput}} @isFullWidth={{true}} />
         {{else}}
-          <button
-            type="button"
-            class="button is-expanded is-icon"
+          <Hds::Button
+            @text="delete row"
+            @icon="trash"
+            @isIconOnly={{true}}
+            @color="secondary"
+            @isFullWidth={{true}}
             data-test-string-list-button="delete"
             {{on "click" (fn this.removeInput index)}}
-          >
-            <Icon @name="trash" />
-          </button>
+          />
         {{/if}}
       </div>
       {{#if (includes index this.indicesWithComma)}}

ui/lib/core/addon/components/text-file.hbs

@@ -18,75 +18,41 @@
       </label>
     </div>
     <div class="level-right">
-      <div class="control is-flex">
-        <Input
-          data-test-text-toggle
-          id="use-text-{{this.elementId}}"
-          class="toggle is-success is-small"
-          @type="checkbox"
-          @checked={{this.showTextArea}}
-          {{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}}
-        />
-        <label for="use-text-{{this.elementId}}" class="has-text-weight-bold is-size-8">
-          Enter as text
-        </label>
-      </div>
+      <Input
+        data-test-text-toggle
+        id="use-text-{{this.elementId}}"
+        class="toggle is-success is-small"
+        @type="checkbox"
+        @checked={{this.showTextArea}}
+        {{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}}
+      />
+      <label for="use-text-{{this.elementId}}" class="has-text-weight-bold is-size-8">
+        Enter as text
+      </label>
     </div>
   </div>
 {{/unless}}
 <div class="field text-file box is-fullwidth is-marginless is-shadowless is-paddingless" data-test-component="text-file">
   {{#if this.showTextArea}}
-    <div class="control has-icon-right">
-      <Textarea
-        id="input-{{this.elementId}}"
-        @value={{this.content}}
-        class="textarea {{if (and (not this.showValue) this.content) 'masked-font'}}"
-        {{on "input" this.handleTextInput}}
-        data-test-text-file-textarea
-      />
-      <button
-        type="button"
-        class="masked-input-toggle button is-compact"
-        data-test-button="toggle-masked"
-        {{on "click" (fn (mut this.showValue) (not this.showValue))}}
-      >
-        <Icon @name={{if this.showValue "eye" "eye-off"}} @stretched={{true}} />
-      </button>
-    </div>
-    <p class="help has-text-grey">Enter the value as text</p>
+    <Hds::Form::MaskedInput::Field
+      id="input-{{this.elementId}}"
+      @value={{this.content}}
+      @isMultiline={{true}}
+      {{on "input" this.handleTextInput}}
+      data-test-text-file-textarea
+      as |F|
+    >
+      <F.HelperText>Enter the value as text </F.HelperText>
+    </Hds::Form::MaskedInput::Field>
   {{else}}
-    <div class="control is-expanded">
-      <div class="file is-fullwidth">
-        <div class="file-label" aria-label="Choose a file">
-          <Input
-            id="file-input-{{this.elementId}}"
-            class="file-input"
-            @type="file"
-            {{on "change" this.handleFileUpload}}
-            data-test-text-file-input
-          />
-          <label for="file-input-{{this.elementId}}" class="file-cta button">
-            <Icon @name="upload" class="has-light-grey-text" />
-            Choose a file…
-          </label>
-          <span class="file-name has-text-grey-dark" data-test-text-file-input-label>
-            {{or this.filename "No file chosen"}}
-          </span>
-          {{#if this.filename}}
-            <button
-              type="button"
-              class="file-delete-button"
-              aria-label="Clear file selection"
-              {{on "click" this.clearFile}}
-              data-test-text-clear
-            >
-              <Icon @name="x-circle" />
-            </button>
-          {{/if}}
-        </div>
-      </div>
-    </div>
-    <p class="help has-text-grey">Select a file from your computer</p>
+    <Hds::Form::FileInput::Field
+      id="file-input-{{this.elementId}}"
+      {{on "change" this.handleFileUpload}}
+      data-test-text-file-input
+      as |F|
+    >
+      <F.HelperText>Select a file from your computer</F.HelperText>
+    </Hds::Form::FileInput::Field>
     {{#if (or @validationError this.uploadError)}}
       <AlertInline
         @type="danger"

ui/lib/core/addon/components/text-file.js

@@ -30,7 +30,6 @@ export default class TextFileComponent extends Component {
   @tracked content = '';
   @tracked filename = '';
   @tracked uploadError = '';
-  @tracked showValue = false;
   @tracked showTextArea = false;
   elementId = guidFor(this);
 

ui/lib/core/addon/components/toggle-button.hbs

@@ -3,6 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
+{{! DEPRECATED use <Hds::Reveal /> instead https://helios.hashicorp.design/components/reveal }}
 <button type="button" class="button is-transparent has-text-info" {{on "click" (fn @onClick (not @isOpen))}} ...attributes>
   {{#if @isOpen}}
     <Icon @name="chevron-up" />{{this.openLabel}}

ui/lib/core/addon/templates/components/confirm/message.hbs

@@ -27,7 +27,7 @@
     </div>
   {{/maybe-in-element}}
 {{/if}}
-
+{{! TODO Hds::Button replacement - skipping because modal will replace this confirm inline-popup menu }}
 <button
   type="button"
   class="link is-destroy"

ui/tests/integration/components/form-field-test.js

@@ -110,9 +110,6 @@ module('Integration | Component | form field', function (hooks) {
     assert.ok(component.hasTextFile, 'renders the text-file component');
     await click('[data-test-text-toggle]');
     await fillIn('[data-test-text-file-textarea]', 'hello world');
-    assert.dom('[data-test-text-file-textarea]').hasClass('masked-font');
-    await click('[data-test-button="toggle-masked"]');
-    assert.dom('[data-test-text-file-textarea]').doesNotHaveClass('masked-font');
   });
 
   test('it renders: editType ttl', async function (assert) {