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(