From 4ace04de7ac099f1c8804ce2fe26d8db5a3b844a Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 5 May 2021 15:42:12 -0400 Subject: [PATCH 01/13] feat: Add condensed style to Rose::Table --- .../addon/components/rose/table/index.hbs | 2 +- .../addon/components/rose/table/row/index.hbs | 2 +- .../styles/rose/components/table/_table.scss | 15 ++ .../rose/tests/dummy/app/templates/index.hbs | 177 +++++++++--------- 4 files changed, 107 insertions(+), 89 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.hbs b/addons/rose/addon/components/rose/table/index.hbs index 655e7dbd4..643a14cfa 100644 --- a/addons/rose/addon/components/rose/table/index.hbs +++ b/addons/rose/addon/components/rose/table/index.hbs @@ -1,4 +1,4 @@ - +
{{#if @caption}} {{/if}} diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index e5bad550e..5267351c8 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/anonymous' tagName='td' diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 0c581393e..7460d2f4d 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -38,4 +38,19 @@ [class*='rose-button'] { margin-bottom: 0; } + + &.rose-table-condensed { + .rose-table-cell { + @include type.type(s); + $lineHeight: 36 / 14; + line-height: $lineHeight; + padding: (sizing.rems(s) / 2) sizing.rems(s); + } + } + + .rose-table-row-visually-hidden { + position: absolute; + top: -9999rem; + left: -9999rem; + } } diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 8bb8b116d..3c7b27e5c 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,93 +1,96 @@ - - +

Condensed Table

- - - Menu item - Menu item - danger - - Button menu item - + + + + Address + Host Set + Name + Description + + + + + 1.1.1.1 + host-set-1, host-set-2 + optional name + description + + + + + Footer + + + - Section - Section - +

Key/Value

+ + + Key + Value + + + Key + Value + + + Key + Value + - - - Menu item - Menu item - danger - Button - default - - Button - danger - - - + {{!-- In actual use, form fields should be yielded from an outer form component --}} + + + + Key + + + + + + Add + + + - - Menu item - Menu item - danger - + + + + Key + + + + + + Remove + + + - Button menu item - Button - danger - + - - Menu item - - - - - Menu item - Button menu item - - - - - -
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
- - - - - - - <:header> -

Authentication Pending

- - <:body> -

Complete authentication in the newly-opened window.

-

Don't see the new window? Try again.

-

Cancel

- - +

Table

+ + + + Address + Host Set + Name + Description + + + + + 1.1.1.1 + host-set-1, host-set-2 + optional name + description + + + + + Footer + + + \ No newline at end of file From 8e1e2b6b3628833e60a7c4678a8df7cef2272d08 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 5 May 2021 17:21:49 -0400 Subject: [PATCH 02/13] feat: Add Rose::Table::Row::Cell for cells to expand/shrink --- .../components/rose/table/row/cell/index.hbs | 1 + .../components/rose/table/row/cell/index.js | 17 +++ .../addon/components/rose/table/row/index.hbs | 13 ++- .../styles/rose/components/table/_table.scss | 7 ++ .../app/components/rose/table/row/cell.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 102 +++++++++++++++++- .../components/rose/table/row/cell-test.js | 26 +++++ 7 files changed, 162 insertions(+), 5 deletions(-) create mode 100644 addons/rose/addon/components/rose/table/row/cell/index.hbs create mode 100644 addons/rose/addon/components/rose/table/row/cell/index.js create mode 100644 addons/rose/app/components/rose/table/row/cell.js create mode 100644 addons/rose/tests/integration/components/rose/table/row/cell-test.js 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'); + }); +}); From 3425dc89be53bc667161d3417bb8515c7b652d34 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 10:00:16 -0400 Subject: [PATCH 03/13] chore: Setup Rose::Table cell alignment config --- .../styles/rose/components/table/_table.scss | 6 +++- .../rose/tests/dummy/app/templates/index.hbs | 34 ++++++++++++++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 0e3305a9a..6fc53e78e 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -39,7 +39,11 @@ // Grow to full available width .rose-table-cell-expand { width: 100%; - border: 1px solid red; + + & > * { + vertical-align: inherit; + margin: 0; + } } [class*='rose-button'] { diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 27c3bbeff..22d4f9e81 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -50,6 +50,31 @@ +

Condensed Table With Right and Center aligned cells

+ + + + Address + Host Set + Name + Description + + + + + 1.1.1.1 + host-set-1, host-set-2 + optional name + description + + + + + Footer + + + +

Condensed Table Key/Value Lookalike

@@ -75,15 +100,8 @@ Key - {{!-- --}} Remove - {{!-- --}} - - - - - {{!-- Remove --}} @@ -135,7 +153,6 @@ Value - {{!-- In actual use, form fields should be yielded from an outer form component --}} @@ -163,7 +180,6 @@ -

Table

From cf40b53fd05042a456ac623fded54d1d175df792 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 10:14:11 -0400 Subject: [PATCH 04/13] chore: Format newly added files in rose --- .../rose/addon/components/rose/table/row/cell/index.js | 9 ++++----- .../rose/addon/styles/rose/components/table/_table.scss | 2 +- addons/rose/app/components/rose/table/row/cell.js | 2 +- .../integration/components/rose/table/row/cell-test.js | 4 ++-- 4 files changed, 8 insertions(+), 9 deletions(-) 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 4a7572db7..0fc901f10 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/addons/rose/addon/components/rose/table/row/cell/index.js @@ -4,12 +4,11 @@ import { computed } from '@ember/object'; export default Component.extend({ layout, - classNameBindings: [ - 'cellStyle', - 'cellSizeStyle', - ], + classNameBindings: ['cellStyle', 'cellSizeStyle'], cellStyle: computed(function () { - return this.tagName.match('th') ? `rose-table-header-cell` : 'rose-table-cell'; + 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/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 6fc53e78e..997ef944a 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -43,7 +43,7 @@ & > * { vertical-align: inherit; margin: 0; - } + } } [class*='rose-button'] { diff --git a/addons/rose/app/components/rose/table/row/cell.js b/addons/rose/app/components/rose/table/row/cell.js index a6ca12293..50e7502b4 100644 --- a/addons/rose/app/components/rose/table/row/cell.js +++ b/addons/rose/app/components/rose/table/row/cell.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/table/row/cell'; \ No newline at end of file +export { default } from 'rose/components/rose/table/row/cell'; 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 9279a81df..c58c9096c 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 @@ -3,10 +3,10 @@ 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) { +module('Integration | Component | rose/table/row/cell', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with this.set('myAction', function(val) { ... }); From a909ba67df6f576c4a44ab48b25c47aace2f31d3 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 14:27:46 -0400 Subject: [PATCH 05/13] chore: Minor cleanup in Rose::Table::Row template --- addons/rose/addon/components/rose/table/row/index.hbs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 52d1f3ba9..5afc830e2 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -11,11 +11,10 @@ cell=(component 'rose/anonymous' tagName='td' class='rose-table-cell' - classNames='{{style}} {{@style}}' ) headerCell=(component 'rose/anonymous' tagName='th' - class='rose-table-header-cell @style {{if @style (concat "rose-table-cell-" @style)}}' + class='rose-table-header-cell' ) )}} --}} From 6b93032a78a3c6ee74e28901a0f0169e7455a5d0 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 16:57:49 -0400 Subject: [PATCH 06/13] style: Update Rose::Table storybook --- .../components/rose/table/index.stories.mdx | 107 +++++++++++++++++- 1 file changed, 101 insertions(+), 6 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index a720bd877..a6a840401 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/addons/rose/addon/components/rose/table/index.stories.mdx @@ -1,11 +1,14 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; +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. +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. + +Cell expansion style should be applied to only one cell in a row. ```htmlbars @@ -24,6 +27,18 @@ A table component to display data in structure of rows and columns. It supports optional name description + + 1.1.1.1 + host-set-2 + optional name + description + + + 1.1.1.1 + host-set-1 + optional name + description + @@ -36,11 +51,11 @@ A table component to display data in structure of rows and columns. It supports {{ template: hbs` - + - + Address - Host Set + Host Set Name Description @@ -48,7 +63,19 @@ A table component to display data in structure of rows and columns. It supports 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 + optional name + description + + + 1.1.1.1 + host-set-1 optional name description @@ -60,6 +87,74 @@ A table component to display data in structure of rows and columns. It supports `, - context: {} + context: { + visuallyHideHeaderRow: boolean('visuallyHideHeaderRow', false), + cellStyle: select( + 'cellStyle', + { + default: '', + 'expand': 'expand' + } + ), + style: select( + 'style', + { + 'default': '', + 'condensed': 'condensed' + } + ) + }, + }} + + + + {{ + template: hbs` + + + + Key + Value + + + + + Key + Value + + + Key + Value + + + Key + Value + + + Key + + + + Add + + + + + Key + + + + Remove + + + + + + + Footer + + + + `, }} From 84051e4b7242a62e8defeddec4178b5d19993b4a Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 17:06:01 -0400 Subject: [PATCH 07/13] chore: Refactor Rose::Table::Row visually-hidden to hidden --- .../components/rose/table/index.stories.mdx | 22 +++++++++---------- .../addon/components/rose/table/row/index.hbs | 2 +- .../rose/tests/dummy/app/templates/index.hbs | 8 +++---- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index a6a840401..d2f56a5b8 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/addons/rose/addon/components/rose/table/index.stories.mdx @@ -10,12 +10,12 @@ A table component to display data in structure of rows and columns. It supports Cell expansion style should be applied to only one cell in a row. -```htmlbars - +```html + - + 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 @@ -53,7 +53,7 @@ Cell expansion style should be applied to only one cell in a row. template: hbs` - + Address Host Set Name @@ -88,7 +88,7 @@ Cell expansion style should be applied to only one cell in a row. `, context: { - visuallyHideHeaderRow: boolean('visuallyHideHeaderRow', false), + hideHeaderRow: boolean('hideHeaderRow', false), cellStyle: select( 'cellStyle', { @@ -112,7 +112,7 @@ Cell expansion style should be applied to only one cell in a row. template: hbs` - + Key Value @@ -150,7 +150,7 @@ Cell expansion style should be applied to only one cell in a row. - + Footer diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 5afc830e2..7431132ea 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' tagName='td') headerCell=(component 'rose/table/row/cell' tagName='th') diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 22d4f9e81..eabd793cb 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -43,7 +43,7 @@ description - + Footer @@ -106,7 +106,7 @@ - + Footer @@ -116,7 +116,7 @@

Condensed Table With Visually Hidden Header & Footer

- + Address Host Set Name @@ -132,7 +132,7 @@ - + Footer From ec9d953bad2a65bd21828724b3573719d5e5f73a Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 6 May 2021 17:36:30 -0400 Subject: [PATCH 08/13] test: Add Rose::Table::Row::Cell tests --- .../components/rose/table/row/cell/index.js | 7 ++-- .../addon/components/rose/table/row/index.hbs | 2 +- .../integration/components/rose/table-test.js | 5 +++ .../components/rose/table/row-test.js | 5 +++ .../components/rose/table/row/cell-test.js | 40 ++++++++++++------- 5 files changed, 41 insertions(+), 18 deletions(-) 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 0fc901f10..01bcb5fd7 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/addons/rose/addon/components/rose/table/row/cell/index.js @@ -4,13 +4,14 @@ import { computed } from '@ember/object'; export default Component.extend({ layout, - classNameBindings: ['cellStyle', 'cellSizeStyle'], - cellStyle: computed(function () { + tagName: 'td', + classNameBindings: ['cellTypeStyle', 'cellStyle'], + cellTypeStyle: computed(function () { return this.tagName.match('th') ? `rose-table-header-cell` : 'rose-table-cell'; }), - cellSizeStyle: computed(function () { + cellStyle: 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 7431132ea..5183c0746 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -1,6 +1,6 @@ {{yield (hash - cell=(component 'rose/table/row/cell' tagName='td') + cell=(component 'rose/table/row/cell') headerCell=(component 'rose/table/row/cell' tagName='th') )}} diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js index 06f2a5b8c..aa78b58eb 100644 --- a/addons/rose/tests/integration/components/rose/table-test.js +++ b/addons/rose/tests/integration/components/rose/table-test.js @@ -43,4 +43,9 @@ module('Integration | Component | rose/table', function (hooks) { `); assert.ok(find('tfoot')); }); + + test('it supports a style class', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-table-condensed')); + }); }); 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 94c57cd08..7e0774504 100644 --- a/addons/rose/tests/integration/components/rose/table/row-test.js +++ b/addons/rose/tests/integration/components/rose/table/row-test.js @@ -32,4 +32,9 @@ module('Integration | Component | rose/table/row', function (hooks) { assert.ok(find('th')); assert.ok(find('.rose-table-header-cell')); }); + + test('it can be hidden', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-table-row-visually-hidden')); + }); }); 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 c58c9096c..48928d3d6 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 @@ -1,26 +1,38 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; 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) { ... }); + assert.expect(2); + await render(hbs` + content + `); + assert.ok(find('td')); + assert.equal(find('.rose-table-cell').textContent.trim(), 'content'); + }); - await render(hbs``); + test('it renders with attributes', async function (assert) { + assert.expect(1); + await render(hbs``); + assert.ok(find('#cell')); + }); - assert.equal(this.element.textContent.trim(), ''); + test('it renders as header cell', async function (assert) { + assert.expect(4); + await render(hbs``); + assert.ok(find('th')); + assert.ok(find('.rose-table-header-cell')); + assert.notOk(find('td')); + assert.notOk(find('.rose-table-cell')); + }); - // Template block usage: - await render(hbs` - - template block text - - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); + test('it adds a style class', async function (assert) { + assert.expect(1); + await render(hbs``); + assert.ok(find('.rose-table-cell-expand')); }); }); From 8feeaa47dc5874d7c6753d8fc919856d1c97328f Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 11 May 2021 15:06:04 -0700 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Refactor=20rose=20?= =?UTF-8?q?table=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We refactor the component adding a condensed variant of the table, refactor the hidden feature. We also provide different alignments for a cell. Updated tests and storybook page --- .../components/rose/table/index.stories.mdx | 32 ++++++++++--------- .../components/rose/table/row/cell/index.js | 11 ++++++- .../addon/components/rose/table/row/index.hbs | 14 -------- .../styles/rose/components/table/_table.scss | 4 +++ .../rose/tests/dummy/app/templates/index.hbs | 14 ++++---- .../components/rose/table/row/cell-test.js | 32 +++++++++++++++++++ 6 files changed, 70 insertions(+), 37 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index d2f56a5b8..f11560e41 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/addons/rose/addon/components/rose/table/index.stories.mdx @@ -30,8 +30,8 @@ Cell expansion style should be applied to only one cell in a row. 1.1.1.1 host-set-2 - optional name - description + optional name + description 1.1.1.1 @@ -54,10 +54,10 @@ Cell expansion style should be applied to only one cell in a row. - Address - Host Set - Name - Description + Address + Host Set + Name + Description @@ -68,16 +68,16 @@ Cell expansion style should be applied to only one cell in a row. description - 1.1.1.1 - host-set-2 - optional name - description + 1.1.1.1 + host-set-2 + optional name + description - 1.1.1.1 - host-set-1 - optional name - description + 1.1.1.1 + host-set-1 + optional name + description @@ -102,7 +102,9 @@ Cell expansion style should be applied to only one cell in a row. 'default': '', 'condensed': 'condensed' } - ) + ), + cellAlignmentCenter: boolean('cellAlignmentCenter', false), + cellAlignmentRight: boolean('cellAlignmentRight', false), }, }} 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 01bcb5fd7..09f5f53dc 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/addons/rose/addon/components/rose/table/row/cell/index.js @@ -5,7 +5,7 @@ import { computed } from '@ember/object'; export default Component.extend({ layout, tagName: 'td', - classNameBindings: ['cellTypeStyle', 'cellStyle'], + classNameBindings: ['cellTypeStyle', 'cellStyle', 'cellAlignmentStyle'], cellTypeStyle: computed(function () { return this.tagName.match('th') ? `rose-table-header-cell` @@ -14,4 +14,13 @@ export default Component.extend({ cellStyle: computed(function () { return this.style ? `rose-table-cell-${this.style}` : ''; }), + cellAlignmentStyle: computed(function () { + if (this.alignRight) { + return 'align-right'; + } + + if (this.alignCenter) { + return 'align-center'; + } + }) }); diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 5183c0746..4b511d869 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -4,17 +4,3 @@ headerCell=(component 'rose/table/row/cell' tagName='th') )}} - - -{{!-- - {{yield (hash - cell=(component 'rose/anonymous' - tagName='td' - class='rose-table-cell' - ) - headerCell=(component 'rose/anonymous' - tagName='th' - class='rose-table-header-cell' - ) - )}} - --}} diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 997ef944a..4f6ea31d8 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -14,6 +14,9 @@ .rose-table-header-cell { vertical-align: middle; white-space: nowrap; + + &.align-right { text-align: right; } + &.align-center { text-align: center; } } .rose-table-header-cell { @@ -57,6 +60,7 @@ line-height: $lineHeight; padding: (sizing.rems(s) / 2) sizing.rems(s); } + } .rose-table-row-visually-hidden { diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index eabd793cb..17cd6861b 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -43,7 +43,7 @@ description - + Footer @@ -63,9 +63,9 @@ 1.1.1.1 - host-set-1, host-set-2 - optional name - description + host-set-1, host-set-2 + optional name + description @@ -106,7 +106,7 @@ - + Footer @@ -116,7 +116,7 @@

Condensed Table With Visually Hidden Header & Footer

- + Address Host Set Name @@ -132,7 +132,7 @@ - + Footer 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 48928d3d6..dcc93e33c 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 @@ -35,4 +35,36 @@ module('Integration | Component | rose/table/row/cell', function (hooks) { await render(hbs``); assert.ok(find('.rose-table-cell-expand')); }); + + test('it renders with align center in a header cell', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.ok(find('.rose-table-header-cell')); + assert.ok(find('.align-center')); + }); + + test('it renders with align center in a body', async function (assert) { + assert.expect(2); + await render(hbs``); + assert.ok(find('.rose-table-cell')); + assert.ok(find('.align-center')); + }); + + test('it renders with align right in a header cell', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.ok(find('.rose-table-header-cell')); + assert.ok(find('.align-right')); + }); + + test('it renders with align right', async function (assert) { + assert.expect(2); + await render(hbs``); + assert.ok(find('.rose-table-cell')); + assert.ok(find('.align-right')); + }); }); From 385ea34c98e86200bcd42be77f6e38c19533b944 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 13 May 2021 09:41:13 -0700 Subject: [PATCH 10/13] Swap @style='expand' to boolean @expand='true' --- .../components/rose/table/index.stories.mdx | 24 +++++++------------ .../components/rose/table/row/cell/index.js | 8 ++++--- .../rose/tests/dummy/app/templates/index.hbs | 10 ++++---- .../components/rose/table/row/cell-test.js | 10 ++++++-- 4 files changed, 27 insertions(+), 25 deletions(-) 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( From ce9503fc5b2e652716206a58b30caec19aab747a Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Fri, 14 May 2021 15:40:18 -0700 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Refactor=20table?= =?UTF-8?q?=20component=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) { From ab668d74eb717ca9d3c3a5d234d6690598e14457 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 19 May 2021 11:16:30 -0700 Subject: [PATCH 12/13] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Delete=20key-value?= =?UTF-8?q?=20row=20and=20other=20tweaks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Delete the recently introduced key-value class for rows, for they key-value lookalike, when editing we want to use 3 colums on the table rather than 2. Some style's tweaks to simplify --- .../components/rose/table/index.stories.mdx | 77 ++++++++----- .../styles/rose/components/table/_table.scss | 23 +--- .../rose/tests/dummy/app/templates/index.hbs | 109 +++++++----------- 3 files changed, 99 insertions(+), 110 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index 7c91f0de4..444419be4 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/addons/rose/addon/components/rose/table/index.stories.mdx @@ -6,9 +6,7 @@ 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, styled for a key/value visualization, cells can be shrinked to its content with, and center/right cell alignment is supported. - -Row `key/value` style should be applied per row. +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, and cells can be shrinked to its content with, and center/right cell alignment is supported. 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. @@ -108,48 +106,71 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce {{ template: hbs` - + - - Key - Value + + Key + Value - - Key - Value - - - Key - Value - - - Key - Value - - + Key - Add + + Remove + - + + Key + + + + Choose an option + Value 1 + Value 2 + Value 3 + + + + + Add + + + Key - Remove + + Add + + + + Key + + + + + Add + - - - Footer + + + Footer @@ -158,8 +179,8 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce style: select( 'style', { - 'default': '', - 'key-value': 'key-value' + 'condensed': 'condensed', + 'default': '' } ) } diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index a3c3bfcdc..f9b7b9daf 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -10,15 +10,12 @@ 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; } - } + // This styles are add to stop the input to apply extra margin (default on forms) + .rose-form-input-field, + .rose-form-select, + .rose-form-input { + margin: 0; + width: 100%; } .rose-table-cell, @@ -58,14 +55,6 @@ 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 f162f9948..e82d02286 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -75,49 +75,72 @@ -

Condensed Table Key/Value Lookalike

+

Condensed Table Key/Value Lookalike (edit mode)

Key - Value + Value - - Key - Value - - - Key - Value - - - Key - Value - - + Key - - Remove + + + Remove + - + + Key + + + + Choose an option + Value 1 + Value 2 + Value 3 + + + + + Add + + + Key - - Add + + + Add + + + + Key + + + + + Add + - Footer + Footer @@ -147,50 +170,6 @@ -

Key/Value

- - - Key - Value - - - Key - Value - - - Key - Value - - - - - - Key - - - - - - Add - - - - - - - - Key - - - - - - Remove - - - - -

Table

From 3133997e78408b6036afa8f05509877f8ad199f6 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Wed, 19 May 2021 13:15:04 -0700 Subject: [PATCH 13/13] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Deleting=20forgot?= =?UTF-8?q?=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Deleting a test that is not need it anymore after last changes --- .../tests/integration/components/rose/table/row-test.js | 6 ------ 1 file changed, 6 deletions(-) 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 c61552778..2a0c1f758 100644 --- a/addons/rose/tests/integration/components/rose/table/row-test.js +++ b/addons/rose/tests/integration/components/rose/table/row-test.js @@ -42,10 +42,4 @@ module('Integration | Component | rose/table/row', function (hooks) { 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')); - }); });
{{@caption}}