diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
index eed07f19d..a660c270d 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.hbs
+++ b/addons/rose/addon/components/rose/form/checkbox/index.hbs
@@ -8,7 +8,7 @@
disabled={{@disabled}}
@type="checkbox"
@checked={{if @checked true false}}
- aria-describedby="{{if @error (concat 'errors-' this.id)}}" />
+ aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+ {{#if @helperText}}
+
+ {{@helperText}}
+
+ {{/if}}
+
{{yield (hash
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
)}}
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
index 539f531c0..4f98fed53 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
@@ -26,6 +26,7 @@ Renders a form input checkbox.
@name={{name}}
@label={{label}}
@description={{description}}
+ @helperText={{helperText}}
@checked={{checked}}
@error={{error}}
@disabled={{disabled}}
@@ -33,7 +34,8 @@ Renders a form input checkbox.
`,
context: {
label: text('text', 'Checkbox 🛎'),
- description: text('description', 'This is an optional description paragraph.'),
+ description: text('description', 'Short description in label'),
+ helperText: text('helperText', 'This is an optional help text.'),
name: text('name', 'checkbox-1'),
checked: boolean('checked', false),
error: boolean('error', 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 588c072cf..a19a38c27 100644
--- a/addons/rose/addon/components/rose/table/row/cell/index.js
+++ b/addons/rose/addon/components/rose/table/row/cell/index.js
@@ -13,16 +13,16 @@ export default Component.extend({
}),
cellShrink: computed(function () {
if (this.shrink) {
- return 'rose-table-cell-shrink'
+ return 'rose-table-cell-shrink';
}
}),
cellAlignmentStyle: computed(function () {
if (this.alignRight) {
return 'align-right';
}
-
+
if (this.alignCenter) {
return 'align-center';
}
- })
+ }),
});
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 2b5008a0b..ec86a0367 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -4,14 +4,17 @@
.rose-form-checkbox {
@include type.type(m);
position: relative;
- margin-bottom: sizing.rems(xs);
- color: var(--ui-gray);
+ margin-bottom: sizing.rems(m);
.rose-form-errors {
margin-top: sizing.rems(xs);
margin-bottom: sizing.rems(xs);
}
+ .rose-form-helper-text {
+ padding-left: sizing.rems(l);
+ }
+
.rose-form-checkbox-label {
// label styles
@include type.type(s, semibold);
@@ -23,6 +26,7 @@
}
.rose-form-checkbox-label-description {
+ margin-bottom: 0;
margin-top: sizing.rems(xs);
}
@@ -54,6 +58,10 @@
}
}
+ .rose-form-helper-text {
+ margin-top: sizing.rems(xs);
+ }
+
.rose-form-checkbox-field {
// mostly this just visually hides the native checkbox
position: absolute;
diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss
index f9b7b9daf..81a815a24 100644
--- a/addons/rose/addon/styles/rose/components/table/_table.scss
+++ b/addons/rose/addon/styles/rose/components/table/_table.scss
@@ -12,9 +12,9 @@
// 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;
+ .rose-form-select,
+ .rose-form-input {
+ margin: 0;
width: 100%;
}
@@ -22,8 +22,12 @@
.rose-table-header-cell {
vertical-align: middle;
- &.align-right { text-align: right; }
- &.align-center { text-align: center; }
+ &.align-right {
+ text-align: right;
+ }
+ &.align-center {
+ text-align: center;
+ }
}
.rose-table-header-cell {
@@ -62,7 +66,6 @@
line-height: $lineHeight;
padding: (sizing.rems(s) / 2) sizing.rems(s);
}
-
}
.rose-table-row-visually-hidden {
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index 12597d3af..594704918 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -9,9 +9,9 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
test('it renders', async function (assert) {
assert.expect(3);
await render(hbs``);
- assert.equal(await find('label').textContent.trim(), 'Label');
- assert.ok(await find('input'));
- assert.notOk(await find('.rose-form-checkbox-label-description'));
+ assert.equal(find('label').textContent.trim(), 'Label');
+ assert.ok(find('input'));
+ assert.notOk(find('.rose-form-checkbox-label-description'));
});
test('it renders optional description paragraph', async function (assert) {
@@ -20,14 +20,25 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
hbs``
);
assert.equal(
- await find('.rose-form-checkbox-label-text').textContent.trim(),
+ find('.rose-form-checkbox-label-text').textContent.trim(),
'Label'
);
assert.equal(
- await find('.rose-form-checkbox-label-description').textContent.trim(),
+ find('.rose-form-checkbox-label-description').textContent.trim(),
+ 'Hello world'
+ );
+ assert.ok(find('input'));
+ });
+
+ test('it renders optional helper text', async function (assert) {
+ assert.expect(1);
+ await render(
+ hbs``
+ );
+ assert.equal(
+ find('.rose-form-helper-text').textContent.trim(),
'Hello world'
);
- assert.ok(await find('input'));
});
test('it displays optional errors', async function (assert) {
@@ -49,26 +60,26 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
test('it is not checked by default', async function (assert) {
await render(hbs``);
- assert.equal(await find('input').checked, false);
+ assert.equal(find('input').checked, false);
});
test('it is not disabled by default', async function (assert) {
await render(hbs``);
- assert.equal(await find('input').disabled, false);
+ assert.equal(find('input').disabled, false);
});
test('it is checked when @checked={{true}}', async function (assert) {
await render(hbs``);
- assert.equal(await find('input').checked, true);
+ assert.equal(find('input').checked, true);
});
test('it marks error when @error={{true}}', async function (assert) {
await render(hbs``);
- assert.ok(await find('.error'));
+ assert.ok(find('.error'));
});
test('it is disabled when @disabled={{true}}', async function (assert) {
await render(hbs``);
- assert.equal(await find('input').disabled, true);
+ assert.equal(find('input').disabled, true);
});
});