diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx
index f11560e41..0a70f24e8 100644
--- a/addons/rose/addon/components/rose/table/index.stories.mdx
+++ b/addons/rose/addon/components/rose/table/index.stories.mdx
@@ -15,7 +15,7 @@ Cell expansion style should be applied to only one cell in a row.
Address
- Host Set
+ Host Set
Name
Description
@@ -23,19 +23,19 @@ Cell expansion style should be applied to only one cell in a row.
1.1.1.1
- host-set-1, host-set-2
+ host-set-1, host-set-2
optional name
description
1.1.1.1
- host-set-2
+ host-set-2
optional name
description
1.1.1.1
- host-set-1
+ host-set-1
optional name
description
@@ -55,7 +55,7 @@ Cell expansion style should be applied to only one cell in a row.
Address
- Host Set
+ Host Set
Name
Description
@@ -63,19 +63,19 @@ Cell expansion style should be applied to only one cell in a row.
1.1.1.1
- host-set-1, host-set-2
+ host-set-1, host-set-2
optional name
description
1.1.1.1
- host-set-2
+ host-set-2
optional name
description
1.1.1.1
- host-set-1
+ host-set-1
optional name
description
@@ -89,13 +89,7 @@ Cell expansion style should be applied to only one cell in a row.
`,
context: {
hideHeaderRow: boolean('hideHeaderRow', false),
- cellStyle: select(
- 'cellStyle',
- {
- default: '',
- 'expand': 'expand'
- }
- ),
+ cellExpand: boolean('cellExpand', false),
style: select(
'style',
{
diff --git a/addons/rose/addon/components/rose/table/row/cell/index.js b/addons/rose/addon/components/rose/table/row/cell/index.js
index 09f5f53dc..4d0a04897 100644
--- a/addons/rose/addon/components/rose/table/row/cell/index.js
+++ b/addons/rose/addon/components/rose/table/row/cell/index.js
@@ -5,14 +5,16 @@ import { computed } from '@ember/object';
export default Component.extend({
layout,
tagName: 'td',
- classNameBindings: ['cellTypeStyle', 'cellStyle', 'cellAlignmentStyle'],
+ classNameBindings: ['cellTypeStyle', 'cellExpand', 'cellAlignmentStyle'],
cellTypeStyle: computed(function () {
return this.tagName.match('th')
? `rose-table-header-cell`
: 'rose-table-cell';
}),
- cellStyle: computed(function () {
- return this.style ? `rose-table-cell-${this.style}` : '';
+ cellExpand: computed(function () {
+ if (this.expand) {
+ return 'rose-table-cell-expand'
+ }
}),
cellAlignmentStyle: computed(function () {
if (this.alignRight) {
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 17cd6861b..c7c91cea6 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -30,7 +30,7 @@
Address
Host Set
Name
- Description
+ Description
@@ -40,7 +40,7 @@
Remove
- description
+ description
@@ -80,7 +80,7 @@
Key
- Value
+ Value
@@ -98,7 +98,7 @@
Key
-
+
Remove
@@ -120,7 +120,7 @@
Address
Host Set
Name
- Description
+ Description
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
index dcc93e33c..65fa7083f 100644
--- a/addons/rose/tests/integration/components/rose/table/row/cell-test.js
+++ b/addons/rose/tests/integration/components/rose/table/row/cell-test.js
@@ -30,12 +30,18 @@ module('Integration | Component | rose/table/row/cell', function (hooks) {
assert.notOk(find('.rose-table-cell'));
});
- test('it adds a style class', async function (assert) {
+ test('it adds expand style class', async function (assert) {
assert.expect(1);
- await render(hbs``);
+ await render(hbs``);
assert.ok(find('.rose-table-cell-expand'));
});
+ test('it does not add expand style class', async function (assert) {
+ assert.expect(1);
+ await render(hbs``);
+ assert.notOk(find('.rose-table-cell-expand'));
+ });
+
test('it renders with align center in a header cell', async function (assert) {
assert.expect(2);
await render(