fix: Input and InsetInput styles [MDS-642] (#2438)

next-docs/public/examples/insetInput/Default.tsx

@@ -1,7 +1,7 @@
 import { InsetInput } from '@heathmont/moon-core-tw';
 
 const Example = () => (
-  <InsetInput placeholder="Placeholder">
+  <InsetInput placeholder="Placeholder" autoComplete="country-name">
     <InsetInput.Label>Label</InsetInput.Label>
   </InsetInput>
 );

workspaces/core/src/input/Input.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import type InputProps from './private/types/InputProps';
 import getMaxDate from './private/utils/getMaxDate';
 import getSizeStyles from './private/utils/getSizeStyles';
+import getTypeStyles from './private/utils/getTypeStyles';
 import useFormContext from '../form/private/utils/useFormContext';
 import useFormItemContext from '../form/private/utils/useFormItemContext';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
@@ -14,7 +15,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       size: inputSize,
       error: inputError,
       disabled: inputDisabled,
-      isRtl,
       id,
       ...rest
     },
@@ -37,26 +37,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         max={getMaxDate(type)}
         className={mergeClassnames(
-          'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]',
-          'bg-goku shadow-input hover:shadow-input-hov',
-          'focus:shadow-input-focus focus:outline-none',
-          'focus-visible::shadow-input-focus focus-visible::outline-none',
+          'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma',
+          'transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov',
+          'focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus',
+          'focus-visible::outline-none before:box-border after:box-border placeholder:delay-75',
+          'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity',
+          'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed',
+          'read-only:hover:shadow-input read-only:focus:shadow-input',
+          'read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err',
+          'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err',
+          getSizeStyles(size),
+          getTypeStyles(type),
           error &&
             'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err',
-          getSizeStyles(size),
-          'before:box-border after:box-border',
-          'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75',
-          'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input',
-          type === 'number' && 'input-number-clear',
-          type === 'date' && 'input-d',
-          type === 'date' && isRtl && 'input-d-rtl',
-          type === 'time' && 'input-t',
-          type === 'time' && isRtl && 'input-t-rtl',
-          type === 'datetime-local' && 'input-d',
-          type === 'datetime-local' && isRtl && 'input-dt-local-rtl',
-          size === 'lg' && 'input-lg-dt-shared',
-          'input-dt-shared',
-          'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
           disabled && 'opacity-60 cursor-not-allowed',
           className && className
         )}

workspaces/core/src/input/private/utils/getSizeStyles.ts

@@ -1,15 +1,13 @@
 import type InputProps from '../types/InputProps';
 
-const getSizeStyles = (size?: InputProps['size'] | 'xl'): string => {
+const getSizeStyles = (size?: InputProps['size']): string => {
   switch (size) {
-    case 'xl':
-      return 'h-14 leading-[3.5rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
     case 'lg':
-      return 'h-12 leading-[3rem] rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
+      return 'h-12 leading-[3rem] rounded-moon-i-sm input-lg-dt-shared';
     case 'sm':
-      return 'h-8 leading-8 rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs ltr:invalid:rounded-moon-i-xs';
+      return 'h-8 leading-8 rounded-moon-i-xs input-dt-shared';
     default:
-      return 'h-10 leading-10 rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm';
+      return 'h-10 leading-10 rounded-moon-i-sm input-dt-shared';
   }
 };
 

workspaces/core/src/input/private/utils/getTypeStyles.ts

@@ -0,0 +1,18 @@
+import type InputProps from '../types/InputProps';
+
+const getTypeStyles = (type?: InputProps['type']): string | undefined => {
+  switch (type) {
+    case 'number':
+      return 'input-number-clear';
+    case 'date':
+      return 'ltr:input-d rtl:input-d-rtl';
+    case 'time':
+      return 'ltr:input-t rtl:input-t-rtl';
+    case 'datetime-local':
+      return 'ltr:input-d rtl:input-dt-local-rtl';
+    default:
+      return;
+  }
+};
+
+export default getTypeStyles;

workspaces/core/src/insetInput/InsetInput.tsx

@@ -5,6 +5,7 @@ import InsetInputContext from './private/utils/InsetInputContext';
 import useInsetInputContext from './private/utils/useInsetInputContext';
 import useFormItemContext from '../form/private/utils/useFormItemContext';
 import getMaxDate from '../input/private/utils/getMaxDate';
+import getTypeStyles from '../input/private/utils/getTypeStyles';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import useRegisterChild from '../private/utils/useRegisterChild';
 
@@ -32,26 +33,21 @@ const InsetInputRoot = forwardRef<HTMLInputElement, InsetInputProps>(
             disabled={disabled}
             max={getMaxDate(rest.type)}
             className={mergeClassnames(
-              'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2]',
-              'bg-transparent shadow-input hover:shadow-input-hov',
-              'focus:shadow-input-focus focus:outline-none',
+              'block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma',
+              'transition-shadow box-border relative z-[2] bg-transparent shadow-input',
+              'hover:shadow-input-hov focus:shadow-input-focus focus:outline-none',
               'focus-visible:shadow-input-focus focus-visible::outline-none',
               error &&
                 'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err',
-              'h-14 leading-[3.5rem] rounded-moon-i-sm',
-              'rtl:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm',
-              'ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus-visible:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm',
-              'before:box-border after:box-border',
-              'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75',
-              'read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input',
-              rest.type === 'number' && 'input-number-clear',
-              rest.type === 'date' && 'ltr:input-d rtl:input-d-rtl',
-              rest.type === 'time' && 'ltr:input-t rtl:input-t-rtl',
-              rest.type === 'datetime-local' &&
-                'ltr:input-d rtl:input-dt-local-rtl',
-              'input-xl-dt-shared',
+              'h-14 leading-[3.5rem] rounded-moon-i-sm before:box-border after:box-border',
+              'placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity',
+              'placeholder:delay-75 read-only:outline-0 read-only:border-none',
+              'read-only:cursor-not-allowed read-only:hover:shadow-input',
+              'read-only:focus:shadow-input read-only:focus-visible:shadow-input',
+              'invalid:shadow-input-err invalid:hover:shadow-input-err input-xl-dt-shared',
+              'invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
+              getTypeStyles(rest.type),
               isLabel && 'input-xl pt-[1.125rem] input-xl-dt-label',
-              'invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err',
               disabled && 'opacity-60 cursor-not-allowed'
             )}
             {...rest}
@@ -71,7 +67,7 @@ const Label = ({ children, className }: LabelProps) => {
   return (
     <label
       className={mergeClassnames(
-        'absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200',
+        'absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200',
         'start-4',
         className
       )}