From 5c091e1b72c4e47a46d89cc916813486a67627db Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 18 Oct 2021 14:55:40 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20input=20updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/input/index.hbs      |  2 +-
 .../rose/form/input/index.stories.mdx         | 54 +++++++++++++++++--
 .../styles/rose/components/form/_input.scss   |  2 +-
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index e31ab046d..efbd55a4e 100644
--- a/addons/rose/addon/components/rose/form/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/index.hbs
@@ -34,7 +34,7 @@
       </Rose::Form::HelperText>
     {{/if}}
 
-    <div class="rose-input-wrapper">
+    <div class="rose-input-wrapper {{if @icon 'icon'}}">
       {{#if @icon}}
         <Rose::Icon
           @name={{@icon}}
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 b819c2b5f..45324c820 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -53,6 +53,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
+        @icon={{icon}}
         />
     `,
     context: {
@@ -71,15 +72,60 @@ 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',
-      },
-        'flight-icons/svg/search-16
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
+        },
+        'flight-icons/svg/search-16',
       ),
     }
   }}</Story>
 </Preview>
 
+<Preview>
+  <Story name="Basic Input with Icon">{{
+    template: hbs`
+      <Rose::Form::Input
+        @type={{type}}
+        @name={{type}}
+        @label={{label}}
+        @helperText={{helperText}}
+        @error={{false}}
+        @disabled={{disabled}}
+        readonly={{read-only}}
+        @icon={{icon}}
+        />
+    `,
+    context: {
+      type: select(
+        'type',
+        {
+          text: 'text',
+          email: 'email',
+          number: 'number',
+          password: 'password',
+        },
+        'text'
+      ),
+      label: text('label', 'Label'),
+      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',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
+
+
 <Preview>
   <Story name="Field with Errors">{{
     template: hbs`
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index cc9b12904..cade58db3 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -5,7 +5,7 @@
   margin-bottom: sizing.rems(m);
 }
 
-.rose-input-wrapper {
+.rose-input-wrapper.icon {
   position: relative;
   .rose-icon {
     position: absolute;