fix: 🐛 add placeholder to input

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

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

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}} />

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;

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

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