From 595443bccf5369da816025bea071c40ba2e3dbc0 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 16 Feb 2022 13:35:20 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20placeholder=20to=20?=
 =?UTF-8?q?input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form/input/index.hbs     | 2 ++
 .../addon/components/rose/form/input/index.stories.mdx     | 6 +++++-
 .../rose/addon/components/rose/form/input/input/index.hbs  | 1 +
 addons/rose/addon/styles/rose/components/form/_input.scss  | 4 ++++
 ui/admin/app/components/form/host-set/aws/index.hbs        | 7 ++++++-
 ui/admin/app/components/form/host-set/azure/index.hbs      | 7 ++++++-
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
index 524523bbb..96bf0330d 100644
--- a/addons/rose/addon/components/rose/form/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/index.hbs
@@ -15,6 +15,7 @@
       type=@type
       disabled=@disabled
       error=@error
+      placeholder=@placeholder
       aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
     )
     errors=(component 'rose/form/errors'
@@ -48,6 +49,7 @@
         @type={{@type}}
         @disabled={{@disabled}}
         @error={{@error}}
+        @placeholder={{@placeholder}}
         @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
     </div>
     {{yield (hash
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 2eaeb2f99..e84eab87b 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -13,7 +13,7 @@ Renders a simple form input.
 <Rose::Form::Input
   @type="email"
   @name="email"
-  @value="info@example.com"
+  @value=""
   @label="Email"
   @helperText="Enter your email"
   @link='www.example.net'
@@ -22,6 +22,7 @@ Renders a simple form input.
   @disabled={{false}}
   @icon='flight-icons/svg/search-16'
   readonly={{false}}
+  placeholder='this is a placeholder'
 />
 ```
 
@@ -40,6 +41,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
   @error={{false}}
   @disabled={{false}}
   readonly={{false}}
+  placeholder='la la la'
 >
 
 </Rose::Form::Input>
@@ -60,6 +62,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @disabled={{disabled}}
         readonly={{read-only}}
         @icon={{icon}}
+        placeholder={{placeholder}}
         />
     `,
     context: {
@@ -75,6 +78,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
       ),
       value: text('value', 'Value'),
       label: text('label', 'Label'),
+      placeholder: text('placeholder', 'this is a placeholder'),
       helperText: text('helperText', 'Helper text'),
       link: text('link', 'link goes here'),
       linkText: text('linkText', 'link text'),
diff --git a/addons/rose/addon/components/rose/form/input/input/index.hbs b/addons/rose/addon/components/rose/form/input/input/index.hbs
index 95e81a114..802feeea7 100644
--- a/addons/rose/addon/components/rose/form/input/input/index.hbs
+++ b/addons/rose/addon/components/rose/form/input/input/index.hbs
@@ -6,4 +6,5 @@
   name={{@name}}
   @type={{@type}}
   @value={{@value}}
+  placeholder={{@placeholder}}
   aria-describedby={{@aria-describedby}} />
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 214f57734..889c933ef 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -30,6 +30,10 @@
   border-radius: sizing.rems(xxxs);
   box-shadow: inset 0px 3px 1px rgba(var(--stark-components), var(--opacity-4));
 
+  &::placeholder {
+    color: var(--ui-gray-subtler-1);
+  }
+
   &.error {
     color: var(--failure);
     border-color: currentColor;
diff --git a/ui/admin/app/components/form/host-set/aws/index.hbs b/ui/admin/app/components/form/host-set/aws/index.hbs
index 9f21b0097..79782093e 100644
--- a/ui/admin/app/components/form/host-set/aws/index.hbs
+++ b/ui/admin/app/components/form/host-set/aws/index.hbs
@@ -103,6 +103,7 @@
                   @value={{endpoint.value}}
                   @error={{@model.errors.preferred_endpoints}}
                   @contextual={{true}}
+                  @placeholder='cidr:2001:4860:4860::8888/32'
                   as |field|
                 >
                   <field.field />
@@ -128,7 +129,11 @@
 
           <body.row as |row|>
             <row.cell>
-              <form.input @type='text' @value={{@model.preferred_endpoint}} />
+              <form.input
+                @type='text'
+                @value={{@model.preferred_endpoint}}
+                @placeholder='cidr:2001:4860:4860::8888/32'
+              />
             </row.cell>
             <row.cell @shrink={{true}}>
               <Rose::Button
diff --git a/ui/admin/app/components/form/host-set/azure/index.hbs b/ui/admin/app/components/form/host-set/azure/index.hbs
index 4cc9cfb4c..b31f8e7df 100644
--- a/ui/admin/app/components/form/host-set/azure/index.hbs
+++ b/ui/admin/app/components/form/host-set/azure/index.hbs
@@ -103,6 +103,7 @@
                   @value={{endpoint.value}}
                   @error={{@model.errors.preferred_endpoints}}
                   @contextual={{true}}
+                  @placeholder='cidr:2001:4860:4860::8888/32'
                   as |field|
                 >
                   <field.field />
@@ -128,7 +129,11 @@
 
           <body.row as |row|>
             <row.cell>
-              <form.input @type='text' @value={{@model.preferred_endpoint}} />
+              <form.input
+                @type='text'
+                @value={{@model.preferred_endpoint}}
+                @placeholder='cidr:2001:4860:4860::8888/32'
+              />
             </row.cell>
             <row.cell @shrink={{true}}>
               <Rose::Button