diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index 9bf8003e3..e9f1c6ced 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)
@@ -51,4 +57,4 @@
)}}
-{{/if}}
+{{/if}}
\ No newline at end of file
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..c9decc5fd 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}}
/>
```
@@ -70,6 +71,10 @@ 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', {
+ '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..7a397d484 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-icon-wrapper {
+ position: relative;
+ .rose-icon.medium {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ }
+ .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]'));
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 297c68a70..2c1e54891 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -15,7 +15,6 @@
{{#if @model}}
-