feat: 🎸 Refactor table component with PR suggestions

Add shrink style to cells and deprecate expand. Add Key/value style for
table rows. Refactor storybook table page with all the changes. Refactor
styles for new feature and simplification.

addons/rose/addon/components/rose/table/index.stories.mdx

@@ -6,37 +6,39 @@ import { boolean, select } from '@storybook/addon-knobs';
 
 # Table
 
-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, cells can be expanded to fit full width, and center/right cell alignment is supported.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, styled for a key/value visualization, cells can be shrinked to its content with, and center/right cell alignment is supported.
 
-Cell expansion style should be applied to only one cell in a row.
+Row `key/value` style should be applied per row.
+
+Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
 
 ```html
 <Rose::Table @style={{style}} as |table|>
   <table.header as |header|>
     <header.row @hidden={{hideHeaderRow}} as |row|>
       <row.headerCell>Address</row.headerCell>
-      <row.headerCell @expand={{cellExpand}}>Host Set</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
-      <row.headerCell>Description</row.headerCell>
+      <row.headerCell @alignCenter={{true}}>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
-      <row.cell @expand={{cellExpand}}>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
+      <row.cell @alignCenter={{true}}>description</row.cell>
     </body.row>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
-      <row.cell @expand={{cellExpand}}>host-set-2</row.cell>
-      <row.cell @alignCenter={{true}}>optional name</row.cell>
+      <row.cell>host-set-2</row.cell>
+      <row.cell @shrink={{true}} @alignCenter={{true}}>optional name</row.cell>
       <row.cell @alignRight={{true}}>description</row.cell>
     </body.row>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
-      <row.cell @expand={{cellExpand}}>host-set-1</row.cell>
-      <row.cell>optional name</row.cell>
+      <row.cell>host-set-1</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
       <row.cell>description</row.cell>
     </body.row>
   </table.body>
@@ -54,29 +56,29 @@ Cell expansion style should be applied to only one cell in a row.
     <Rose::Table @style={{style}} as |table|>
       <table.header as |header|>
         <header.row @hidden={{hideHeaderRow}} as |row|>
-          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
-          <row.headerCell @expand={{cellExpand}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
-          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
+          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
+          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
           <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Description</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
         <body.row as |row|>
-          <row.cell>1.1.1.1</row.cell>
-          <row.cell @expand={{cellExpand}}>host-set-1, host-set-2</row.cell>
-          <row.cell>optional name</row.cell>
+          <row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
+          <row.cell>host-set-1, host-set-2</row.cell>
+          <row.cell @shrink={{cellShrink}}>optional name</row.cell>
           <row.cell>description</row.cell>
         </body.row>
         <body.row as |row|>
-          <row.cell @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
-          <row.cell @expand={{cellExpand}} @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
-          <row.cell @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
           <row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
         </body.row>
         <body.row as |row|>
-          <row.cell @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
-          <row.cell @expand={{cellExpand}} @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
-          <row.cell @alignRight={{cellAlignmentRight}}>optional name</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
+          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>optional name</row.cell>
           <row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
         </body.row>
       </table.body>
@@ -89,7 +91,7 @@ Cell expansion style should be applied to only one cell in a row.
     `,
     context: {
       hideHeaderRow: boolean('hideHeaderRow', false),
-      cellExpand: boolean('cellExpand', false),
+      cellShrink: boolean('cellShrink', false),
       style: select(
         'style',
         {
@@ -110,34 +112,34 @@ Cell expansion style should be applied to only one cell in a row.
         <table.header as |header|>
           <header.row @hidden=true as |row|>
             <row.headerCell>Key</row.headerCell>
-            <row.headerCell @style="expand">Value</row.headerCell>
+            <row.headerCell>Value</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
-          <body.row as |row|>
+          <body.row @style={{style}} as |row|>
             <row.cell>Key</row.cell>
             <row.cell>Value</row.cell>
           </body.row>
-          <body.row as |row|>
+          <body.row @style={{style}} as |row|>
             <row.cell>Key</row.cell>
             <row.cell>Value</row.cell>
           </body.row>
-          <body.row as |row|>
+          <body.row @style={{style}} as |row|>
             <row.cell>Key</row.cell>
             <row.cell>Value</row.cell>
           </body.row>
-          <body.row as |row|>
+          <body.row @style={{style}} as |row|>
             <row.cell>Key</row.cell>
-            <row.cell @style="expand">
+            <row.cell>
               <Rose::Form::Input @contextual={{true}} as |input|>
                 <input.field />
                 <Rose::Button @style="secondary">Add</Rose::Button>
               </Rose::Form::Input>
             </row.cell>
           </body.row>
-          <body.row as |row|>
+          <body.row @style={{style}} as |row|>
             <row.cell>Key</row.cell>
-            <row.cell @style="expand">
+            <row.cell>
               <Rose::Form::Input @contextual={{true}} as |input|>
                 <input.field />
                 <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
@@ -152,5 +154,14 @@ Cell expansion style should be applied to only one cell in a row.
         </table.footer>
       </Rose::Table>
     `,
+    context: {
+      style: select(
+        'style',
+        {
+          'default': '',
+          'key-value': 'key-value'
+        }
+      )
+    }
   }}</Story>
 </Preview>

addons/rose/addon/components/rose/table/row/cell/index.js

@@ -5,15 +5,15 @@ import { computed } from '@ember/object';
 export default Component.extend({
   layout,
   tagName: 'td',
-  classNameBindings: ['cellTypeStyle', 'cellExpand', 'cellAlignmentStyle'],
+  classNameBindings: ['cellTypeStyle', 'cellShrink', 'cellAlignmentStyle'],
   cellTypeStyle: computed(function () {
     return this.tagName.match('th')
       ? `rose-table-header-cell`
       : 'rose-table-cell';
   }),
-  cellExpand: computed(function () {
-    if (this.expand) {
-      return 'rose-table-cell-expand'
+  cellShrink: computed(function () {
+    if (this.shrink) {
+      return 'rose-table-cell-shrink'
     }
   }),
   cellAlignmentStyle: computed(function () {

addons/rose/addon/components/rose/table/row/index.hbs

@@ -1,4 +1,4 @@
-<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}}'>
+<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}} {{if @style (concat "rose-table-row-" @style)}}'>
   {{yield (hash
     cell=(component 'rose/table/row/cell')
     headerCell=(component 'rose/table/row/cell' tagName='th')

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

@@ -10,10 +10,20 @@
     text-align: left;
   }
 
+  .rose-table-row-key-value {
+    td:nth-child(2) {
+      display: flex;
+      input {
+        width: 100%;
+        margin-right: sizing.rems(s);
+      }
+      button { margin-right: 0; }
+    }
+  }
+
   .rose-table-cell,
   .rose-table-header-cell {
     vertical-align: middle;
-    white-space: nowrap;
 
     &.align-right { text-align: right; }
     &.align-center { text-align: center; }
@@ -39,20 +49,23 @@
     }
   }
 
-  // Grow to full available width
-  .rose-table-cell-expand {
-    width: 100%;
-
-    & > * {
-      vertical-align: inherit;
-      margin: 0;
-    }
+  .rose-table-cell-shrink {
+    width: 1%;
+    white-space: nowrap;
   }
 
   [class*='rose-button'] {
     margin-bottom: 0;
   }
 
+  .rose-table-cell {
+    .rose-form-input-field {
+      margin: 0;
+      width: inherit;
+      vertical-align: inherit;
+    }
+  }
+
   &.rose-table-condensed {
     .rose-table-cell {
       @include type.type(s);

addons/rose/tests/dummy/app/templates/index.hbs

@@ -23,24 +23,24 @@
   </table.footer>
 </Rose::Table>
 
-<h2>Condensed Table With Expanded Cells</h2>
+<h2>Condensed Table with Shrink Cells</h2>
 <Rose::Table @style="condensed" as |table|>
   <table.header as |header|>
     <header.row  as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
-      <row.headerCell>Name</row.headerCell>
-      <row.headerCell @expand={{true}}>Description</row.headerCell>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell @shrink={{true}}>Host Set</row.headerCell>
+      <row.headerCell @shrink={{true}}>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>
+      <row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
+      <row.cell @shrink={{true}}>
         <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
       </row.cell>
-      <row.cell @expand={{true}}>description</row.cell>
+      <row.cell>description</row.cell>
     </body.row>
   </table.body>
   <table.footer @hidden={{true}} as |footer|>
@@ -50,12 +50,12 @@
   </table.footer>
 </Rose::Table>
 
-<h2>Condensed Table With Right and Center aligned cells</h2>
+<h2>Condensed Table with Right and Center aligned cells</h2>
 <Rose::Table @style="condensed" as |table|>
   <table.header as |header|>
     <header.row  as |row|>
-      <row.headerCell >Address</row.headerCell>
-      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
       <row.headerCell>Description</row.headerCell>
     </header.row>
@@ -79,29 +79,38 @@
 <Rose::Table @style="condensed" as |table|>
   <table.header as |header|>
     <header.row  as |row|>
-      <row.headerCell>Key</row.headerCell>
-      <row.headerCell @expand={{true}}>Value</row.headerCell>
+      <row.headerCell @shrink={{true}}>Key</row.headerCell>
+      <row.headerCell>Value</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
-    <body.row as |row|>
+    <body.row @style="key-value" as |row|>
       <row.cell>Key</row.cell>
       <row.cell>Value</row.cell>
     </body.row>
-    <body.row as |row|>
+    <body.row @style="key-value" as |row|>
       <row.cell>Key</row.cell>
       <row.cell>Value</row.cell>
     </body.row>
-    <body.row as |row|>
+    <body.row @style="key-value" as |row|>
       <row.cell>Key</row.cell>
       <row.cell>Value</row.cell>
     </body.row>
-    <body.row as |row|>
+    <body.row @style="key-value" as |row|>
       <row.cell>Key</row.cell>
-      <row.cell @expand={{true}}>
+      <row.cell>
         <Rose::Form::Input @contextual={{true}} as |input|>
-          <input.field />
-          <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+            <input.field />
+            <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+        </Rose::Form::Input>
+      </row.cell>
+    </body.row>
+    <body.row @style="key-value" as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+            <input.field />
+            <Rose::Button @style="secondary">Add</Rose::Button>
         </Rose::Form::Input>
       </row.cell>
     </body.row>
@@ -120,7 +129,7 @@
       <row.headerCell >Address</row.headerCell>
       <row.headerCell>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
-      <row.headerCell @expand={{true}}>Description</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>

addons/rose/tests/integration/components/rose/table/row-test.js

@@ -7,17 +7,20 @@ module('Integration | Component | rose/table/row', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
+    assert.expect(2);
     await render(hbs`<Rose::Table::Row />`);
     assert.ok(find('tr'));
     assert.ok(find('.rose-table-row'));
   });
 
   test('it renders with attributes', async function (assert) {
+    assert.expect(1);
     await render(hbs`<Rose::Table::Row id="row"/>`);
     assert.ok(find('#row'));
   });
 
   test('it renders a cell', async function (assert) {
+    assert.expect(2);
     await render(hbs`<Rose::Table::Row as |row|>
       <row.cell />
     </Rose::Table::Row>`);
@@ -26,6 +29,7 @@ module('Integration | Component | rose/table/row', function (hooks) {
   });
 
   test('it renders a header cell', async function (assert) {
+    assert.expect(2);
     await render(hbs`<Rose::Table::Row as |row|>
       <row.headerCell />
     </Rose::Table::Row>`);
@@ -34,7 +38,14 @@ module('Integration | Component | rose/table/row', function (hooks) {
   });
 
   test('it can be hidden', async function (assert) {
+    assert.expect(1);
     await render(hbs`<Rose::Table::Row @hidden=true />`);
     assert.ok(find('.rose-table-row-visually-hidden'));
   });
+
+  test('it can be key/value style', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Table::Row @style="key-value" />`);
+    assert.ok(find('.rose-table-row-key-value'));
+  });
 });

addons/rose/tests/integration/components/rose/table/row/cell-test.js

@@ -30,16 +30,16 @@ module('Integration | Component | rose/table/row/cell', function (hooks) {
     assert.notOk(find('.rose-table-cell'));
   });
 
-  test('it adds expand style class', async function (assert) {
+  test('it adds shrink style class', async function (assert) {
     assert.expect(1);
-    await render(hbs`<Rose::Table::Row::Cell @expand={{true}} />`);
-    assert.ok(find('.rose-table-cell-expand'));
+    await render(hbs`<Rose::Table::Row::Cell @shrink={{true}} />`);
+    assert.ok(find('.rose-table-cell-shrink'));
   });
 
-  test('it does not add expand style class', async function (assert) {
+  test('it does not add expand style class in default cells', async function (assert) {
     assert.expect(1);
     await render(hbs`<Rose::Table::Row::Cell />`);
-    assert.notOk(find('.rose-table-cell-expand'));
+    assert.notOk(find('.rose-table-cell-shrink'));
   });
 
   test('it renders with align center in a header cell', async function (assert) {