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