Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
- Pass invalid prop to `InputText`
- Ensure template tailwind styling takes the `invalid` property into account
- use triple equals instead of double equals where appropriate
  • Loading branch information
gcko committed Sep 20, 2024
1 parent 7d497f5 commit 667dfe1
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 16 deletions.
26 changes: 25 additions & 1 deletion components/doc/inputmask/theming/tailwinddoc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
),
}),
}
}
`
Expand Down
26 changes: 18 additions & 8 deletions components/doc/inputtext/theming/tailwinddoc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
)
})
),
}),
}
}
`
Expand Down
1 change: 1 addition & 0 deletions components/lib/inputmask/InputMask.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
40 changes: 33 additions & 7 deletions components/lib/passthrough/tailwind/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
},
{
Expand Down Expand Up @@ -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' },
Expand Down

0 comments on commit 667dfe1

Please sign in to comment.