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'));
+ });
});