From ce9503fc5b2e652716206a58b30caec19aab747a Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 14 May 2021 15:40:18 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Refactor=20table=20compo?= =?UTF-8?q?nent=20with=20PR=20suggestions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../components/rose/table/index.stories.mdx | 75 +++++++++++-------- .../components/rose/table/row/cell/index.js | 8 +- .../addon/components/rose/table/row/index.hbs | 2 +- .../styles/rose/components/table/_table.scss | 31 +++++--- .../rose/tests/dummy/app/templates/index.hbs | 51 +++++++------ .../components/rose/table/row-test.js | 11 +++ .../components/rose/table/row/cell-test.js | 10 +-- 7 files changed, 116 insertions(+), 72 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index 0a70f24e8..7c91f0de4 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/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 Address - Host Set + Host Set Name - Description + Description 1.1.1.1 - host-set-1, host-set-2 - optional name - description + host-set-1, host-set-2 + optional name + description 1.1.1.1 - host-set-2 - optional name + host-set-2 + optional name description 1.1.1.1 - host-set-1 - optional name + host-set-1 + optional name description @@ -54,29 +56,29 @@ Cell expansion style should be applied to only one cell in a row. - Address - Host Set - Name + Address + Host Set + Name Description - 1.1.1.1 - host-set-1, host-set-2 - optional name + 1.1.1.1 + host-set-1, host-set-2 + optional name description - 1.1.1.1 - host-set-2 - optional name + 1.1.1.1 + host-set-2 + optional name description - 1.1.1.1 - host-set-1 - optional name + 1.1.1.1 + host-set-1 + optional name description @@ -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. Key - Value + Value - + Key Value - + Key Value - + Key Value - + Key - + Add - + Key - + Remove @@ -152,5 +154,14 @@ Cell expansion style should be applied to only one cell in a row. `, + context: { + style: select( + 'style', + { + 'default': '', + 'key-value': 'key-value' + } + ) + } }} 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 4d0a04897..588c072cf 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/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 () { diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 4b511d869..65fb90e81 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -1,4 +1,4 @@ - + {{yield (hash cell=(component 'rose/table/row/cell') headerCell=(component 'rose/table/row/cell' tagName='th') diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 4f6ea31d8..a3c3bfcdc 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/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); diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index c7c91cea6..f162f9948 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -23,24 +23,24 @@ -

Condensed Table With Expanded Cells

+

Condensed Table with Shrink Cells

- Address - Host Set - Name - Description + Address + Host Set + Name + Description 1.1.1.1 - host-set-1, host-set-2 - + host-set-1, host-set-2 + Remove - description + description @@ -50,12 +50,12 @@ -

Condensed Table With Right and Center aligned cells

+

Condensed Table with Right and Center aligned cells

- Address - Host Set + Address + Host Set Name Description @@ -79,29 +79,38 @@ - Key - Value + Key + Value - + Key Value - + Key Value - + Key Value - + Key - + - - Remove + + Remove + + + + + Key + + + + Add @@ -120,7 +129,7 @@ Address Host Set Name - Description + Description diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js index 7e0774504..c61552778 100644 --- a/addons/rose/tests/integration/components/rose/table/row-test.js +++ b/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``); assert.ok(find('tr')); assert.ok(find('.rose-table-row')); }); test('it renders with attributes', async function (assert) { + assert.expect(1); await render(hbs``); assert.ok(find('#row')); }); test('it renders a cell', async function (assert) { + assert.expect(2); await render(hbs` `); @@ -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` `); @@ -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``); assert.ok(find('.rose-table-row-visually-hidden')); }); + + test('it can be key/value style', async function (assert) { + assert.expect(1); + await render(hbs``); + assert.ok(find('.rose-table-row-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 index 65fa7083f..4b8c3332d 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,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``); - assert.ok(find('.rose-table-cell-expand')); + await render(hbs``); + 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``); - 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) {