feat: Add Rose::Table::Row::Cell for cells to expand/shrink

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

@@ -0,0 +1 @@
+{{yield}}

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

@@ -0,0 +1,17 @@
+import Component from '@ember/component';
+import layout from './index';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  classNameBindings: [
+    'cellStyle',
+    'cellSizeStyle',
+  ],
+  cellStyle: computed(function () {
+    return this.tagName.match('th') ? `rose-table-header-cell` : 'rose-table-cell';
+  }),
+  cellSizeStyle: computed(function () {
+    return this.style ? `rose-table-cell-${this.style}` : '';
+  }),
+});

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

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

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

@@ -13,6 +13,7 @@
   .rose-table-cell,
   .rose-table-header-cell {
     vertical-align: middle;
+    white-space: nowrap;
   }
 
   .rose-table-header-cell {
@@ -35,6 +36,12 @@
     }
   }
 
+  // Grow to full available width
+  .rose-table-cell-expand {
+    width: 100%;
+    border: 1px solid red;
+  }
+
   [class*='rose-button'] {
     margin-bottom: 0;
   }

addons/rose/app/components/rose/table/row/cell.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row/cell';

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

@@ -1,9 +1,8 @@
 <h2>Condensed Table</h2>
-
 <Rose::Table @style="condensed" as |table|>
   <table.header as |header|>
-    <header.row @visually-hidden=true as |row|>
-      <row.headerCell>Address</row.headerCell>
+    <header.row  as |row|>
+      <row.headerCell >Address</row.headerCell>
       <row.headerCell>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
       <row.headerCell>Description</row.headerCell>
@@ -24,6 +23,103 @@
   </table.footer>
 </Rose::Table>
 
+<h2>Condensed Table With Expanded 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 @style="expand">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>
+        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+      </row.cell>
+      <row.cell @style="expand">description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @visually-hidden=true as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
+<h2>Condensed Table Key/Value Lookalike</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row  as |row|>
+      <row.headerCell>Key</row.headerCell>
+      <row.headerCell @style="expand">Value</row.headerCell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell>Value</row.cell>
+    </body.row>
+    <body.row as |row|>
+      <row.cell>Key</row.cell>
+      <row.cell @style="expand">
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          {{!-- <row.cell @style="expand"> --}}
+          <input.field />
+          <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+          {{!-- </row.cell> --}}
+        </Rose::Form::Input>
+      </row.cell>
+      <row.cell>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          {{!-- <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button> --}}
+        </Rose::Form::Input>
+      </row.cell>
+    </body.row>
+  </table.body>
+  <table.footer @visually-hidden=true as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
+<h2>Condensed Table With Visually Hidden Header & Footer</h2>
+<Rose::Table @style="condensed" as |table|>
+  <table.header as |header|>
+    <header.row @visually-hidden=true as |row|>
+      <row.headerCell >Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell @style="expand">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>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row @visually-hidden=true as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
+
 <h2>Key/Value</h2>
 <Rose::List::KeyValue as |list|>
   <list.item as |item|>

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

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/table/row/cell', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Rose::Table::Row::Cell />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Rose::Table::Row::Cell>
+        template block text
+      </Rose::Table::Row::Cell>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});