Add feedback prop to input to support dynamic styling

hypothesis · Aug 16, 2023 · 0a6fbb3 · 0a6fbb3
1 parent 2f472c4
commit 0a6fbb3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -5,8 +5,13 @@ import { downcastRef } from '../../util/typing';
 import InputRoot from './InputRoot';
 
 type ComponentProps = {
-  hasError?: boolean;
   type?: 'email' | 'search' | 'text' | 'url';
+  feedback?: 'error' | 'warning';
+
+  /**
+   * @deprecated Use feedback="error" instead
+   */
+  hasError?: boolean;
 };
 
 export type InputProps = PresentationalProps &
@@ -18,8 +23,9 @@ export type InputProps = PresentationalProps &
  */
 const Input = function Input({
   elementRef,
-  hasError,
   type = 'text',
+  feedback,
+  hasError,
 
   ...htmlAttributes
 }: InputProps) {
@@ -28,6 +34,7 @@ const Input = function Input({
       data-component="Input"
       elementRef={downcastRef(elementRef)}
       type={type}
+      feedback={feedback}
       hasError={hasError}
       {...htmlAttributes}
     />

diff --git a/src/components/input/InputRoot.tsx b/src/components/input/InputRoot.tsx
@@ -7,6 +7,11 @@ import { inputGroupStyles } from './InputGroup';
 
 type RootComponentProps = {
   element?: 'input' | 'select';
+  feedback?: 'error' | 'warning';
+
+  /**
+   * @deprecated Use feedback="error" instead
+   */
   hasError?: boolean;
 };
 
@@ -27,6 +32,7 @@ const InputRoot = function InputRoot({
   classes,
   elementRef,
   hasError,
+  feedback,
 
   ...htmlAttributes
 }: InputRootProps) {
@@ -46,7 +52,11 @@ const InputRoot = function InputRoot({
         'focus-visible-ring ring-inset border rounded w-full p-2',
         'bg-grey-0 focus:bg-white disabled:bg-grey-1',
         'placeholder:text-color-grey-5 disabled:placeholder:color-grey-6',
-        { 'ring-inset ring-2 ring-red-error': hasError },
+        {
+          'ring-inset ring-2': !!feedback || hasError,
+          'ring-red-error': feedback === 'error' || hasError,
+          'ring-yellow-notice': feedback === 'warning',
+        },
         // Adapt styles when this component is inside an InputGroup
         inputGroupStyles,
         classes,

diff --git a/src/pattern-library/components/patterns/input/InputPage.tsx b/src/pattern-library/components/patterns/input/InputPage.tsx
@@ -69,11 +69,44 @@ export default function InputPage() {
             presentational component props
           </Library.Link>
           .
+          <Library.Example title="feedback">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Set <code>feedback</code> to indicate that there is an
+                associated error or warning for the <code>Input</code>.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>
+                  {`"error"`} | {`"warning"`}
+                </code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>{`undefined`}</code>
+              </Library.InfoItem>
+            </Library.Info>
+
+            <Library.Demo withSource>
+              <div className="w-[350px]">
+                <Input
+                  aria-label="Input with error"
+                  feedback="error"
+                  value="something invalid"
+                />
+              </div>
+              <div className="w-[350px]">
+                <Input
+                  aria-label="Input with warning"
+                  feedback="warning"
+                  value="something invalid"
+                />
+              </div>
+            </Library.Demo>
+          </Library.Example>
           <Library.Example title="hasError">
             <Library.Info>
               <Library.InfoItem label="description">
-                Set <code>hasError</code> to indicate that there is an
-                associated error for the <code>Input</code>.
+                <Library.StatusChip status="deprecated" />
+                Use <code>{`feedback="error"`}</code> instead.
               </Library.InfoItem>
               <Library.InfoItem label="type">
                 <code>{`boolean`}</code>