diff --git a/addons/rose/addon/components/rose/table/row/cell/index.hbs b/addons/rose/addon/components/rose/table/row/cell/index.hbs
new file mode 100644
index 000000000..fb5c4b157
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/row/cell/index.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/table/row/cell/index.js b/addons/rose/addon/components/rose/table/row/cell/index.js
new file mode 100644
index 000000000..4a7572db7
--- /dev/null
+++ b/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}` : '';
+ }),
+});
diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs
index 5267351c8..52d1f3ba9 100644
--- a/addons/rose/addon/components/rose/table/row/index.hbs
+++ b/addons/rose/addon/components/rose/table/row/index.hbs
@@ -1,12 +1,21 @@
+ {{yield (hash
+ cell=(component 'rose/table/row/cell' tagName='td')
+ headerCell=(component 'rose/table/row/cell' tagName='th')
+ )}}
+
+
+
+{{!--
{{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)}}'
)
)}}
-
+ --}}
diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss
index 7460d2f4d..0e3305a9a 100644
--- a/addons/rose/addon/styles/rose/components/table/_table.scss
+++ b/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;
}
diff --git a/addons/rose/app/components/rose/table/row/cell.js b/addons/rose/app/components/rose/table/row/cell.js
new file mode 100644
index 000000000..a6ca12293
--- /dev/null
+++ b/addons/rose/app/components/rose/table/row/cell.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row/cell';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3c7b27e5c..27c3bbeff 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,9 +1,8 @@
Condensed Table
-
-
- Address
+
+ Address
Host Set
Name
Description
@@ -24,6 +23,103 @@
+Condensed Table With Expanded Cells
+
+
+
+ Address
+ Host Set
+ Name
+ Description
+
+
+
+
+ 1.1.1.1
+ host-set-1, host-set-2
+
+ Remove
+
+ description
+
+
+
+
+ Footer
+
+
+
+
+Condensed Table Key/Value Lookalike
+
+
+
+ Key
+ Value
+
+
+
+
+ Key
+ Value
+
+
+ Key
+ Value
+
+
+ Key
+ Value
+
+
+ Key
+
+
+ {{!-- --}}
+
+ Remove
+ {{!-- --}}
+
+
+
+
+ {{!-- Remove --}}
+
+
+
+
+
+
+ Footer
+
+
+
+
+Condensed Table With Visually Hidden Header & Footer
+
+
+
+ Address
+ Host Set
+ Name
+ Description
+
+
+
+
+ 1.1.1.1
+ host-set-1, host-set-2
+ optional name
+ description
+
+
+
+
+ Footer
+
+
+
+
Key/Value
diff --git a/addons/rose/tests/integration/components/rose/table/row/cell-test.js b/addons/rose/tests/integration/components/rose/table/row/cell-test.js
new file mode 100644
index 000000000..9279a81df
--- /dev/null
+++ b/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``);
+
+ assert.equal(this.element.textContent.trim(), '');
+
+ // Template block usage:
+ await render(hbs`
+
+ template block text
+
+ `);
+
+ assert.equal(this.element.textContent.trim(), 'template block text');
+ });
+});