Merge pull request #901 from hashicorp/feat-radio-helper-text

Feat: Add support for helper text to radios

addons/rose/addon/components/rose/form/radio/radio/index.hbs

@@ -22,7 +22,11 @@
     {{/if}}
 
     {{@label}}
-
+     {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
   </label>
 
   {{yield}}

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -29,12 +29,14 @@ Renders a form radiofield.
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
         @icon={{icon}}
+        @helperText={{helperText}}
         />
     `,
     context: {
       label: text('text', 'Radiofield'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
+      helperText: text('helperText', 'Helper text'),
       selectedValue: text(
         'selectedValue',
         'value and selectedValue must match to select radiofield'
@@ -63,6 +65,7 @@ Renders a form radiofield.
   @disabled={{false}}
   @changed={{fn}}
   @inline={{true}}
+  @helperText={{helperText}}
   />
 ```
 
@@ -77,6 +80,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield2'
@@ -86,6 +90,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield3'
@@ -95,6 +100,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
     `,
     context: {
@@ -104,6 +110,7 @@ Renders a form radiofield.
         'selectedValue',
         'value and selectedValue must match to select radiofield'
       ),
+      helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       icon: select(
         'icon',

addons/rose/addon/styles/rose/components/form/_radio.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use '../../variables/typography';
 
 $radio-svg: (
   'default':
@@ -34,9 +35,18 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   color: var(--ui-gray);
 
   .rose-form-radio-label {
+    display: flex;
+    align-items: center;
+    .rose-form-helper-text {
+      font-weight: normal;
+      margin-left: sizing.rems(xxs);
+      margin-bottom: 0;
+    }
+
     @include type.type(s, semibold);
     color: currentColor;
     padding-left: sizing.rems(l);
+    padding-top: sizing.rems(xxxs);
 
     .rose-icon {
       margin-right: sizing.rems(xxs);