Merge pull request #120 from hashicorp/ICU-480-simplified-table-styles

Simplified table styles

addons/rose/addon/styles/rose/components/table/_index.scss

@@ -1,17 +1 @@
-@use '../../variables/sizing';
-@use '../../utilities/type';
-
-.rose-table {
-  @include type.type(s, normal);
-  width: 100%;
-
-  .rose-table-header {
-    background-color: var(--ui-gray-subtler-5);
-    text-align: left;
-  }
-
-  .rose-table-cell {
-    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-    padding: sizing.rems(xs) sizing.rems(xxs);
-  }
-}
+@import 'table';

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

@@ -0,0 +1,37 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-table {
+  @include type.type(s, normal);
+  width: 100%;
+
+  .rose-table-row {
+    border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    text-align: left;
+  }
+
+  .rose-table-cell,
+  .rose-table-header-cell {
+    vertical-align: middle;
+  }
+
+  .rose-table-header-cell {
+    @include type.type(s, semibold);
+    color: var(--ui-gray);
+  }
+
+  .rose-table-header,
+  .rose-table-footer {
+    .rose-table-cell,
+    .rose-table-header-cell {
+      padding: sizing.rems(s);
+    }
+  }
+
+  .rose-table-body {
+    .rose-table-cell,
+    .rose-table-header-cell {
+      padding: sizing.rems(l) sizing.rems(s);
+    }
+  }
+}

addons/rose/addon/templates/components/rose/table.hbs

@@ -12,6 +12,6 @@
       classNames='rose-table-body')
     footer=(component 'rose/table/section'
       tagName='tfoot'
-      classNames='rose-table-foot')
+      classNames='rose-table-footer')
   )}}
 </table>

ui/core/app/templates/scopes/scope/users/index.hbs

@@ -21,21 +21,21 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t 'form.label.name'}}</row.cell>
-            <row.cell>{{t 'form.label.description'}}</row.cell>
+            <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+            <row.headerCell>{{t 'form.label.description'}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |user|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.users.user"
                   @model={{user}}
                 >
                   {{user.name}}
                 </LinkTo>
-              </row.cell>
+              </row.headerCell>
               <row.cell>{{user.description}}</row.cell>
             </body.row>
           {{/each}}