fix(input): add hasPlaceholder prop to react input

Kajabi · Apr 13, 2022 · 51bef77 · 51bef77
1 parent 5cd64ff
commit 51bef77
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git 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
@@ -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}