diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs index a660c270d..d9b655458 100644 --- a/addons/rose/addon/components/rose/form/checkbox/index.hbs +++ b/addons/rose/addon/components/rose/form/checkbox/index.hbs @@ -1,4 +1,4 @@ -
+
+ + +```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), + inline: boolean('inline', 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| > +
+ + +```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 + ), + inline: boolean('inline', false) + } + }} + \ No newline at end of file diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss index ec86a0367..6dd2c6802 100644 --- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss +++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss @@ -2,6 +2,10 @@ @use '../../utilities/type'; .rose-form-checkbox { + &.inline { + display: inline-block; + margin-right: sizing.rems(s); + } @include type.type(m); position: relative; margin-bottom: sizing.rems(m); diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss index 860c39ca5..3c94ac816 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio.scss @@ -21,8 +21,13 @@ $radio-svg: ( ); $data-svg-prefix: 'data:image/svg+xml;utf-8,'; - .rose-form-radio { + &.inline { + display: inline-block; + .rose-form-radio-label { + margin-right: sizing.rems(s); + } + } @include type.type(m); position: relative; margin-bottom: sizing.rems(xs);