diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index 7d6eaf6c..0bc5c848 100644 --- 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 index b0c5c391..c90fb7c8 100644 --- 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,9 +32,14 @@ const InputRoot = function InputRoot({ classes, elementRef, hasError, + feedback, ...htmlAttributes }: InputRootProps) { + if (feedback === undefined && hasError) { + feedback = 'error'; + } + if (!htmlAttributes.id && !htmlAttributes['aria-label']) { console.warn( '`Input` component should have either an `id` or an `aria-label` attribute', @@ -46,7 +56,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-2': !!feedback, + 'ring-red-error': feedback === 'error', + '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 index 092747e6..4f2cc4d1 100644 --- 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 . + + + + Set feedback to indicate that there is an + associated error or warning for the Input. + + + + {`"error"`} | {`"warning"`} + + + + {`undefined`} + + + + +
+ +
+
+ +
+
+
- Set hasError to indicate that there is an - associated error for the Input. + + Use {`feedback="error"`} instead. {`boolean`}