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 ebdb50560..e6c750487 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
@@ -1,6 +1,6 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
@@ -41,6 +41,7 @@ Renders a form radiofield group.
{{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 91d256e9a..425ea6e53 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
@@ -1,6 +1,6 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
@@ -27,6 +27,7 @@ Renders a form radiofield.
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
+ @icon={{icon}}
/>
`,
context: {
@@ -38,6 +39,17 @@ Renders a form radiofield.
'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
+ ),
}
}}
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index f20d53a1b..860c39ca5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -33,6 +33,11 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
color: currentColor;
padding-left: sizing.rems(l);
+ .rose-icon {
+ margin-right: sizing.rems(xxs);
+ margin-left: sizing.rems(xxs);
+ }
+
&::before {
position: absolute;
top: sizing.rems(xs);
diff --git a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
index f3aa7df11..9f1677571 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
@@ -17,6 +17,11 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
assert.equal(await find('label').textContent.trim(), 'Label');
});
+ test('it supports an icon', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('svg'));
+ });
+
test('it is checked when @value and @selectedValue values match', async function (assert) {
await render(
hbs``