diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index 9bf8003e3..889ca0639 100644
--- a/addons/rose/addon/components/rose/form/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/index.hbs
@@ -34,16 +34,22 @@
{{/if}}
-
-
+
+ {{#if @icon}}
+
+ {{/if}}
+
+
{{yield (hash
errors=(component 'rose/form/errors'
id=(concat 'errors-' this.id)
diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx
index 041507976..a0b6080f2 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -18,6 +18,7 @@ Renders a simple form input.
@helperText="Enter your email"
@error={{false}}
@disabled={{false}}
+ @icon='flight-icons/svg/search-16'
readonly={{false}}
/>
```
@@ -52,6 +53,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
@error={{false}}
@disabled={{disabled}}
readonly={{read-only}}
+ @icon={{icon}}
/>
`,
context: {
@@ -70,6 +72,14 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
helperText: text('helperText', 'Helper text'),
disabled: boolean('disabled', false),
'read-only': boolean('readonly', false),
+ icon: select(
+ 'icon',
+ {
+ 'none': null,
+ 'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
+ },
+ 'flight-icons/svg/search-16',
+ ),
}
}}
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index bdfd5fff9..214f57734 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -5,6 +5,18 @@
margin-bottom: sizing.rems(m);
}
+.rose-input-wrapper {
+ position: relative;
+ .rose-icon {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ }
+ .rose-icon + .rose-form-input-field {
+ padding-left: 30px;
+ }
+}
+
.rose-form-input-field {
@include type.type(m);
display: inline-block;
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 2f6c6cc56..d053698ab 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -58,6 +58,11 @@ module('Integration | Component | rose/form/input', function (hooks) {
assert.ok(await find('[disabled]'));
});
+ test('it supports an icon using @icon', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('.rose-icon'));
+ });
+
test('it supports readonly attribute', async function (assert) {
await render(hbs``);
assert.ok(await find('[readonly]'));