Merge pull request #565 from hashicorp/feature-checkbox-helper-text

feat: 🎸 add helper text option to checkbox component

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)}}" />
 
   <label class="rose-form-checkbox-label" for={{this.id}}>
     <span class="rose-form-checkbox-label-text">{{@label}}</span>
@@ -17,6 +17,12 @@
     {{/if}}
   </label>
 
+  {{#if @helperText}}
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
+      {{@helperText}}
+    </Rose::Form::HelperText>
+  {{/if}}
+
   {{yield (hash
     errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
   )}}

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),

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

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;

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 {

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`<Rose::Form::Checkbox @label="Label" />`);
-    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`<Rose::Form::Checkbox @label="Label" @description="Hello world" />`
     );
     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`<Rose::Form::Checkbox @label="Label" @helperText="Hello world" />`
+    );
+    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`<Rose::Form::Checkbox />`);
-    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`<Rose::Form::Checkbox />`);
-    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`<Rose::Form::Checkbox @checked={{true}} />`);
-    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`<Rose::Form::Checkbox @error={{true}} />`);
-    assert.ok(await find('.error'));
+    assert.ok(find('.error'));
   });
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox @disabled={{true}} />`);
-    assert.equal(await find('input').disabled, true);
+    assert.equal(find('input').disabled, true);
   });
 });