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)}}" /> {{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. ``` @@ -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' > @@ -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| > @@ -128,7 +129,11 @@ - + @@ -128,7 +129,11 @@ - +