fix: primefaces#7195 (primefaces#7226)

- Pass invalid prop to `InputText` - Ensure template tailwind styling takes the `invalid` property into account - use triple equals instead of double equals where appropriate
melloware · Sep 20, 2024 · 618b7ce · 618b7ce
1 parent 7d497f5
commit 618b7ce
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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' },