Form Input - Design System

src/design-system/index.css

@@ -14,3 +14,4 @@
 @import './abbreviate.css';
 @import './keyboard-input.css';
 @import './preformattedText.css';
+@import './form-input.css';

src/design-system/tokens.json

@@ -14,12 +14,15 @@
   "border-color-action-hover-primary": "#3f51c9",
   "border-color-action-hover-secondary": "#454545",
   "border-color-action-hover-tertiary": "transparent",
+  "border-color-formcontrol": "#000",
   "border-radius-action": "6px",
   "border-radius-formcontrol": "4px",
   "border-radius-formcontrol-floating": "4px",
   "border-radius-abbreviate": "3px",
   "border-style-action": "solid",
   "border-width-action": "1px",
+  "border-width-formcontrol": "1px",
+  "border-width-formcontrol-floating": "1px",
   "box-shadow-action": "0px 8px 15px rgba(0, 0, 0, 0.1)",
   "color-background-action-active-primary": "#3f51c9",
   "color-background-action-active-secondary": "transparent",
@@ -40,6 +43,9 @@
   "color-background-formcontrol-floating": "transparent",
   "color-background-formcontrol_label": "transparent",
   "color-background-formcontrol_label-floating": "white",
+  "color-background-formcontrol_label-floating-filled": "#f5f5f5",
+  "color-background-formcontrol_suffix": "#CFD1D0",
+  "color-background-formcontrol_prefix": "#CFD1D0",
   "color-background-highlight_body": "yellow",
   "color-background-pre_box": "transparent",
   "color-chevron-formcontrol": "#000",
@@ -117,6 +123,7 @@
   "font-formcontrol_label-size-floating": "14px",
   "font-size-body": "16px",
   "font-size-formcontrol_label": "16px",
+  "font-size-formcontrol_label-floating": "16px",
   "font-size-highlight_body": "12px",
   "font-size-paragraph": "12px",
   "font-size-pre_body": "16px",
@@ -138,4 +145,3 @@
   "spacing-y-abbreviate": "0px",
   "spacing-x-abbreviate": "0px"
 }
-

src/formInput/FormInput.tsx

@@ -129,8 +129,14 @@ type FormInputProps = {
    * tab index value
    */
   tabIndex?: number;
+  /**
+   * if a variant floating is specified it will add a class 'dcx-floating-label' for supporting a floating label feature
+   */
+  variant?: 'floating' | 'floating-filled' | 'normal';
 };
 
+const floatVariants = ['floating', 'floating-filled'];
+
 export enum ErrorPosition {
   BEFORE_LABEL = 'before-label',
   BOTTOM = 'bottom',
@@ -165,6 +171,7 @@ export const FormInput = ({
   labelClassName,
   required,
   hint,
+  variant = 'normal',
   inputDivProps = { style: { display: 'flex' } },
   tabIndex = 0,
 }: FormInputProps) => {
@@ -197,7 +204,12 @@ export const FormInput = ({
   };
 
   const ErrorMessage = () => (
-    <div {...errorProps}>
+    <div
+      {...{
+        ...errorProps,
+        className: classNames(['dcx-error-message', errorProps?.className]),
+      }}
+    >
       {staticErrorMessage !== undefined ? (
         <div role={Roles.error} {...errorMessage}>
           {staticErrorMessage}
@@ -230,22 +242,34 @@ export const FormInput = ({
     />
   );
 
+  const labelEl: JSX.Element = (
+    <Label
+      label={label}
+      labelProperties={labelProps}
+      htmlFor={inputProps?.id}
+      className={labelClassName}
+    />
+  );
+
+  const containerClasses = classNames([
+    'dcx-form-input',
+    containerClassName,
+    {
+      'dcx-form-input--filled': !!value,
+      'dcx-error-bottom': errorPosition === ErrorPosition.BOTTOM,
+      'dcx-hint-bottom': hint?.position && hint?.position !== 'above',
+      'dcx-floating-label': floatVariants.includes(variant),
+      'dcx-floating-label-filled': variant === 'floating-filled',
+      [`dcx-form-input--error ${containerClassNameError}`]: isStaticOrDynamicError(),
+    },
+  ]);
+
   return (
-    <div
-      className={classNames([
-        containerClassName,
-        { [`${containerClassNameError}`]: isStaticOrDynamicError() },
-      ])}
-    >
+    <div className={containerClasses}>
       {errorPosition && errorPosition === ErrorPosition.BEFORE_LABEL && (
         <ErrorMessage />
       )}
-      <Label
-        label={label}
-        labelProperties={labelProps}
-        htmlFor={inputProps?.id}
-        className={labelClassName}
-      />
+      {!floatVariants.includes(variant) && labelEl}
       {errorPosition && errorPosition === ErrorPosition.AFTER_LABEL && (
         <ErrorMessage />
       )}
@@ -256,13 +280,45 @@ export const FormInput = ({
       {prefix || suffix ? (
         <div {...inputDivProps}>
           {prefix && !isEmpty(prefix) && (
-            <div {...prefix.properties}>{prefix.content}</div>
+            <div
+              {...{
+                ...prefix.properties,
+                className: classNames([
+                  'dcx-form-input__prefix',
+                  prefix.properties?.className,
+                ]),
+              }}
+            >
+              {prefix.content}
+            </div>
+          )}
+          {floatVariants.includes(variant) ? (
+            <div className="dcx-wrapper-label">
+              {labelEl}
+              {inputEl}
+            </div>
+          ) : (
+            inputEl
           )}
-          {inputEl}
           {suffix && !isEmpty(suffix) && (
-            <div {...suffix.properties}>{suffix.content}</div>
+            <div
+              {...{
+                ...suffix.properties,
+                className: classNames([
+                  'dcx-form-input__suffix',
+                  suffix.properties?.className,
+                ]),
+              }}
+            >
+              {suffix.content}
+            </div>
           )}
         </div>
+      ) : floatVariants.includes(variant) ? (
+        <div className="dcx-wrapper-label">
+          {labelEl}
+          {inputEl}
+        </div>
       ) : (
         inputEl
       )}

stories/Input/Documentation.mdx → stories/FormInput/Documentation.mdx

@@ -80,6 +80,7 @@ An example with all the available properties is:
   staticErrorMessage="static error message"
   containerClassNameError="containerClassNameError"
   tabIndex={0}
+  variant="floating"
 />
 ```