refactor: 💡 removed whitespace from layout in add-members view (#1673)

* refactor: 💡 removed whitespace from layout in add-members view

Removed whitespace from layout in `add-members` view by replacing
`Rose::Table` with `Hds::Table`.

✅ Closes: ICU-5986

* refactor: 💡 refactor table

Added custom styling to remove margin bottom from radio card field. That
is causing 1st column to not be valign center.

✅ Closes: ICU-5986

* refactor: 💡 refactor stylings to override.scss

Moved Hds custom syles to `overrides.scss`

✅ Closes: ICU-5986

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

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

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

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

* refactor: 💡 refactored app.scss for admin

Removed custom css for `.key-value-list` selector that is now being
served in `overrides.scss` globally.

* refactor: 💡 patched overrides

Ported Hds overrides from other repository.

---------

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

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

@@ -16,3 +16,18 @@
     }
   }
 }
+
+.hds-table {
+  border-collapse: revert;
+
+  [class^='hds-form-field'],
+  [class^='hds-form-group'] {
+    margin-bottom: 0;
+  }
+}
+
+.hds-dropdown {
+  .hds-dropdown-toggle-icon {
+    color: inherit;
+  }
+}

ui/admin/app/components/form/group/add-members/index.hbs

@@ -3,7 +3,6 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{! template-lint-disable no-whitespace-for-layout  }}
 {{#if this.availableUsers}}
   <Rose::Form
     class='full-width'
@@ -17,45 +16,38 @@
       @submitText={{t 'resources.group.actions.add-members'}}
       @cancelText={{t 'actions.cancel'}}
     />
-
+    <Hds::Table
-    <Rose::Table as |table|>
+      @model={{this.availableUsers}}
-      <table.header as |header|>
+      @columns={{array
-        <header.row as |row|>
+        (hash label=(t 'form.name.label'))
-          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+        (hash label=(t 'form.id.label'))
-          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+        (hash label=(t 'resources.scope.title'))
-          <row.headerCell>{{t 'resources.scope.title'}}</row.headerCell>
+        (hash label=(t 'form.description.label'))
-          <row.headerCell>{{t 'form.description.label'}}</row.headerCell>
+      }}
-        </header.row>
+      @valign='middle'
-      </table.header>
+    >
-      <table.body as |body|>
+      <:body as |B|>
-        {{#each this.availableUsers as |user|}}
+        <B.Tr>
-          <body.row as |row|>
+          <B.Td>
-            <row.headerCell>
+            <Hds::Form::Checkbox::Field
-              <form.checkbox
+              {{on 'change' (fn this.toggleMember B.data)}}
-                @label={{user.displayName}}
+              as |F|
-                @onChange={{fn this.toggleMember user}}
+            >
-              />
+              <F.Label>{{B.data.displayName}}</F.Label>
-              {{#if user.accountName}}
+              {{#if B.data.accountName}}
-                {{!
+                <F.HelperText>
-                  The following is a formatting hack since we don't have a great
+                  <Hds::Badge @text={{B.data.accountName}} />
-                  way to manage micro-whitespace or alignment among separate
+                </F.HelperText>
-                  components without resorting to heavy-handed grids
-                  or contextualization.  This is a one-off.
-                }}
-                <br />
-                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
-                <Hds::Badge @text={{user.accountName}} />
               {{/if}}
-            </row.headerCell>
+            </Hds::Form::Checkbox::Field>
-            <row.cell><code>{{user.id}}</code></row.cell>
+          </B.Td>
-            <row.cell>
+          <B.Td><code>{{B.data.id}}</code></B.Td>
-              <ScopeBadge @scope={{user.scopeModel}} />
+          <B.Td><ScopeBadge @scope={{B.data.scopeModel}} /></B.Td>
-            </row.cell>
+          <B.Td>{{B.data.description}}</B.Td>
-            <row.cell>{{user.description}}</row.cell>
+        </B.Tr>
-          </body.row>
+
-        {{/each}}
+      </:body>
-      </table.body>
+    </Hds::Table>
-    </Rose::Table>
 
   </Rose::Form>
 {{/if}}

ui/admin/app/styles/app.scss

@@ -675,12 +675,6 @@
         width: 1%;
         white-space: nowrap;
       }
-
-      // Reset field margins to rely instead on cell paddings
-      .hds-form-field--layout-vertical,
-      .hds-form-text-input {
-        margin: 0;
-      }
     }
   }
   /* stylelint-enable selector-class-pattern */