feat: 🎸 add icon support to input field

addons/rose/addon/components/rose/form/input/index.hbs

@@ -34,16 +34,22 @@
       </Rose::Form::HelperText>
     {{/if}}
 
-    <Rose::Form::Input::Input
-      ...attributes
-      @id={{this.id}}
-      @name={{@name}}
-      @value={{@value}}
-      @type={{@type}}
-      @disabled={{@disabled}}
-      @error={{@error}}
-      @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
-
+    <div class="rose-input-icon-wrapper">
+       {{#if @icon}}
+          <Rose::Icon
+            @name={{@icon}}
+            @size="medium" />
+       {{/if}}
+      <Rose::Form::Input::Input
+        ...attributes
+        @id={{this.id}}
+        @name={{@name}}
+        @value={{@value}}
+        @type={{@type}}
+        @disabled={{@disabled}}
+        @error={{@error}}
+        @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+    </div>
     {{yield (hash
       errors=(component 'rose/form/errors'
         id=(concat 'errors-' this.id)
@@ -51,4 +57,4 @@
     )}}
 
   </div>
-{{/if}}
+{{/if}}

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',
+      },
+      ),
     }
   }}</Story>
 </Preview>

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;

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`<Rose::Form::Input @icon="flight-icons/svg/search-16" />`);
+    assert.ok(find('.rose-icon'));
+  });
+
   test('it supports readonly attribute', async function (assert) {
     await render(hbs`<Rose::Form::Input readonly={{true}} />`);
     assert.ok(await find('[readonly]'));

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -15,7 +15,6 @@
   <page.body>
 
     {{#if @model}}
-
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>