From 667dfe1721df798a295b56ca043939a7d8d40884 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Fri, 20 Sep 2024 11:21:09 +0800 Subject: [PATCH] fix: #7195 - Pass invalid prop to `InputText` - Ensure template tailwind styling takes the `invalid` property into account - use triple equals instead of double equals where appropriate --- .../doc/inputmask/theming/tailwinddoc.js | 26 +++++++++++- .../doc/inputtext/theming/tailwinddoc.js | 26 ++++++++---- components/lib/inputmask/InputMask.js | 1 + components/lib/passthrough/tailwind/index.js | 40 +++++++++++++++---- 4 files changed, 77 insertions(+), 16 deletions(-) diff --git a/components/doc/inputmask/theming/tailwinddoc.js b/components/doc/inputmask/theming/tailwinddoc.js index 6755b17a4f..66e56e33cb 100644 --- a/components/doc/inputmask/theming/tailwinddoc.js +++ b/components/doc/inputmask/theming/tailwinddoc.js @@ -7,7 +7,31 @@ export function TailwindDoc(props) { basic: ` const Tailwind = { inputmask: { - root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' + root: ({ props, context }) => ({ + className: classNames( + 'm-0', + 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg', + { + 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': + !context.disabled, + 'hover:border-blue-500': !props.invalid && !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled, + 'border-gray-300 dark:border-blue-900/40': !props.invalid, + 'border-red-500 hover:border-red-500/80 focus:border-red-500': + props.invalid && !context.disabled, + 'border-red-500/50': props.invalid && context.disabled, + }, + { + 'text-lg px-4 py-4': props.size === 'large', + 'text-xs px-2 py-2': props.size === 'small', + 'p-3 text-base': !props.size || typeof props.size === 'number' + }, + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' + } + ), + }), } } ` diff --git a/components/doc/inputtext/theming/tailwinddoc.js b/components/doc/inputtext/theming/tailwinddoc.js index 345db0ded3..2409be0049 100644 --- a/components/doc/inputtext/theming/tailwinddoc.js +++ b/components/doc/inputtext/theming/tailwinddoc.js @@ -10,18 +10,28 @@ const Tailwind = { root: ({ props, context }) => ({ className: classNames( 'm-0', - 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg', + 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg', { - 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': + !context.disabled, + 'hover:border-blue-500': !props.invalid && !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled, + 'border-gray-300 dark:border-blue-900/40': !props.invalid, + 'border-red-500 hover:border-red-500/80 focus:border-red-500': + props.invalid && !context.disabled, + 'border-red-500/50': props.invalid && context.disabled, }, { - 'text-lg px-4 py-4': props.size == 'large', - 'text-xs px-2 py-2': props.size == 'small', - 'p-3 text-base': props.size == null + 'text-lg px-4 py-4': props.size === 'large', + 'text-xs px-2 py-2': props.size === 'small', + 'p-3 text-base': !props.size || typeof props.size === 'number' + }, + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' } - ) - }) + ), + }), } } ` diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js index 26f26a8bd9..505bda234b 100644 --- a/components/lib/inputmask/InputMask.js +++ b/components/lib/inputmask/InputMask.js @@ -641,6 +641,7 @@ export const InputMask = React.memo( maxLength={props.maxLength} tabIndex={props.tabIndex} disabled={props.disabled} + invalid={props.invalid} readOnly={props.readOnly} onFocus={onFocus} onBlur={onBlur} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 36c9ba56d3..2a658b456d 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -790,14 +790,18 @@ const Tailwind = { root: ({ props, context }) => ({ className: classNames( 'm-0', - 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg', - { - 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled, - 'opacity-60 select-none pointer-events-none cursor-default': context.disabled + 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg', + { + 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled, + 'hover:border-blue-500': !props.invalid && !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled, + 'border-gray-300 dark:border-blue-900/40': !props.invalid, + 'border-red-500 hover:border-red-500/80 focus:border-red-500': props.invalid && !context.disabled, + 'border-red-500/50': props.invalid && context.disabled }, { - 'text-lg px-4 py-4': props.size == 'large', - 'text-xs px-2 py-2': props.size == 'small', + 'text-lg px-4 py-4': props.size === 'large', + 'text-xs px-2 py-2': props.size === 'small', 'p-3 text-base': !props.size || typeof props.size === 'number' }, { @@ -923,7 +927,29 @@ const Tailwind = { }) }, inputmask: { - root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' + root: ({ props, context }) => ({ + className: classNames( + 'm-0', + 'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg', + { + 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled, + 'hover:border-blue-500': !props.invalid && !context.disabled, + 'opacity-60 select-none pointer-events-none cursor-default': context.disabled, + 'border-gray-300 dark:border-blue-900/40': !props.invalid, + 'border-red-500 hover:border-red-500/80 focus:border-red-500': props.invalid && !context.disabled, + 'border-red-500/50': props.invalid && context.disabled + }, + { + 'text-lg px-4 py-4': props.size === 'large', + 'text-xs px-2 py-2': props.size === 'small', + 'p-3 text-base': !props.size || typeof props.size === 'number' + }, + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' + } + ) + }) }, inputotp: { root: { className: 'flex items-center gap-2' },