diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs index 47621405d..edecc3ba8 100644 --- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs +++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs @@ -22,7 +22,11 @@ {{/if}} {{@label}} - + {{#if @helperText}} + + {{@helperText}} + + {{/if}} {{yield}} diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx index 63e873862..613952aff 100644 --- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx +++ b/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}} /> `, 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', diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss index 3c94ac816..32be9a8c5 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio.scss +++ b/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);