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 fe92b59ec..11405c643 100644 --- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx @@ -16,7 +16,6 @@ Renders a form input checkbox. @checked={{false}} @error={{false}} @disabled={{false}} - @inline={{true}} /> ``` @@ -69,3 +68,60 @@ Renders a form input checkbox. } }} + + +```htmlbars + +``` + + + {{ + template: hbs` + + + + `, + context: { + description: text('description', 'Short description in label'), + helperText: text('helperText', 'This is an optional help text.'), + checked: boolean('checked', false), + error: boolean('error', false), + disabled: boolean('disabled', false), + } + }} + + diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs index fc34bd1cc..de2b010b6 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.hbs +++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs @@ -1,3 +1,3 @@ {{yield (hash - radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed) -)}} + radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline) +)}} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx index bafffaaa4..515c7ca35 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx @@ -15,6 +15,7 @@ Renders a form radiofield group. @name={{name}} @selectedValue="disagree" @changed={{fn}} + @inline={{false}} as |radioGroup| > ``` @@ -55,3 +54,70 @@ Renders a form radiofield. } }} + + +```htmlbars + +``` + + + {{ + template: hbs` + + + + `, + context: { + error: boolean('error', false), + value: text('value', 'value and selectedValue must match to select radiofield'), + selectedValue: text( + 'selectedValue', + 'value and selectedValue must match to select radiofield' + ), + disabled: boolean('disabled', false), + icon: select( + 'icon', + { + 'none': null, + 'user-organization': 'user-organization', + 'copy-action': 'copy-action', + 'unfold-more': 'unfold-more', + 'unfold-less': 'unfold-less', + }, + null + ), + } + }} + \ No newline at end of file diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss index 723407017..f248d0b7a 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio.scss @@ -21,14 +21,17 @@ $radio-svg: ( ); $data-svg-prefix: 'data:image/svg+xml;utf-8,'; -.radio-group-inline { - display: flex; - .rose-form-radio { + .rose-form-radio { + &.inline { + display: inline-block; + .rose-form-radio-label { + margin-right: sizing.rems(s); + } + } + .radio-group-inline { + display: flex; margin-right: sizing.rems(s); } -} - -.rose-form-radio { @include type.type(m); position: relative; margin-bottom: sizing.rems(xs);