Merge pull request #808 from hashicorp/input-icon-support

Input icon support

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-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)

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

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;

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]'));