fix: InsetInput focus style [MDS-1016] (#2557)

* fix: InsetInput focus style [MDS-1016] * fix: error focau state of Input [MDS-1016]
coingaming · Feb 28, 2024 · aacde18 · aacde18
1 parent 1f35f61
commit aacde18
Show file tree

Hide file tree

Showing 10 changed files with 414 additions and 425 deletions.
diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/form/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/group/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/next-docs/public/examples/input/Controled.tsx b/next-docs/public/examples/input/Controled.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@heathmont/moon-core-tw';
+import { Hint, Input } from '@heathmont/moon-core-tw';
 import { useState } from 'react';
 
 const Example = () => {
@@ -12,9 +12,7 @@ const Example = () => {
           setColor(e.target.value);
         }}
       />
-      <p className="text-moon-18 pt-2">
-        <b>Result:</b> {color}
-      </p>
+      <Hint>Result: {color}</Hint>
     </div>
   );
 };

diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/insetInput/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/workspaces/core/src/input/Input.tsx b/workspaces/core/src/input/Input.tsx
@@ -39,8 +39,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         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 before:box-border after:box-border placeholder:delay-75',
+          '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',

diff --git a/workspaces/core/src/input/private/utils/getTypeStyles.ts b/workspaces/core/src/input/private/utils/getTypeStyles.ts
@@ -5,11 +5,11 @@ const getTypeStyles = (type?: InputProps['type']): string | undefined => {
     case 'number':
       return 'input-number-clear';
     case 'date':
-      return 'ltr:input-d rtl:input-d-rtl [&::-webkit-datetime-edit]:text-trunks';
+      return 'ltr:input-d rtl:input-d-rtl ';
     case 'time':
-      return 'ltr:input-t rtl:input-t-rtl [&::-webkit-datetime-edit]:text-trunks';
+      return 'ltr:input-t rtl:input-t-rtl ';
     case 'datetime-local':
-      return 'ltr:input-d rtl:input-dt-local-rtl [&::-webkit-datetime-edit]:text-trunks';
+      return 'ltr:input-d rtl:input-dt-local-rtl';
     default:
       return;
   }

diff --git a/workspaces/core/src/insetInput/InsetInput.tsx b/workspaces/core/src/insetInput/InsetInput.tsx
@@ -36,16 +36,15 @@ const InsetInputRoot = forwardRef<HTMLInputElement, InsetInputProps>(
               'block 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',
-              'focus-visible:shadow-input-err h-14 leading-[3.5rem] rounded-moon-i-sm',
-              'before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100',
+              'focus-visible:shadow-input-focus focus-visible:outline-none h-14 leading-[3.5rem]',
+              'rounded-moon-i-sm 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',
               error &&
-                'shadow-input-err hover:shadow-input-err focus:shadow-input-err',
+                'shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err',
               getTypeStyles(rest.type),
               isLabel && 'input-xl pt-[1.125rem] input-xl-dt-label'
             )}