From 51bef77e621b02ff02feda2a5f75b9fa7ca212be Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica@kajabi.com>
Date: Mon, 11 Apr 2022 16:11:51 -0500
Subject: [PATCH] fix(input): add hasPlaceholder prop to react input

---
 packages/sage-react/lib/Input/Input.jsx       | 4 ++++
 packages/sage-react/lib/Input/Input.story.jsx | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/packages/sage-react/lib/Input/Input.jsx b/packages/sage-react/lib/Input/Input.jsx
index ebff759c5f..5973c2c467 100644
--- a/packages/sage-react/lib/Input/Input.jsx
+++ b/packages/sage-react/lib/Input/Input.jsx
@@ -7,6 +7,7 @@ import { SageTokens } from '../configs';
 export const Input = ({
   className,
   hasError,
+  hasPlaceholder,
   icon,
   id,
   label,
@@ -28,6 +29,7 @@ export const Input = ({
     className,
     {
       'sage-form-field--error': hasError,
+      'sage-form-field--showplaceholder': hasPlaceholder,
       'sage-input--prefixed': prefix,
       'sage-input--suffixed': suffix,
       'sage-input--standalone': standalone,
@@ -121,6 +123,7 @@ export const Input = ({
 Input.defaultProps = {
   className: null,
   hasError: false,
+  hasPlaceholder: false,
   icon: null,
   label: null,
   message: null,
@@ -137,6 +140,7 @@ Input.propTypes = {
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
   id: PropTypes.string.isRequired,
   hasError: PropTypes.bool,
+  hasPlaceholder: PropTypes.bool,
   label: PropTypes.string,
   message: PropTypes.string,
   onChange: PropTypes.func,
diff --git a/packages/sage-react/lib/Input/Input.story.jsx b/packages/sage-react/lib/Input/Input.story.jsx
index 656f62adc2..5bbd1b2423 100644
--- a/packages/sage-react/lib/Input/Input.story.jsx
+++ b/packages/sage-react/lib/Input/Input.story.jsx
@@ -28,6 +28,7 @@ export const Default = (args) => {
       className={args.className}
       disabled={args.disabled}
       hasError={args.hasError}
+      hasPlaceholder={args.hasPlaceholder}
       icon={args.icon}
       id={args.id}
       label={args.label}
@@ -53,6 +54,7 @@ export const InputWithStaticIcon = (args) => {
       className={args.className}
       disabled={args.disabled}
       hasError={args.hasError}
+      hasPlaceholder={args.hasPlaceholder}
       icon={args.icon}
       id={args.id}
       label={args.label}
@@ -78,6 +80,7 @@ export const InputWithPopover = (args) => {
       className={args.className}
       disabled={args.disabled}
       hasError={args.hasError}
+      hasPlaceholder={args.hasPlaceholder}
       icon={args.icon}
       id={args.id}
       label={args.label}