fix: input group [MDS-699] (#2452)

* fix: input group [MDS-699] * fix: tests [MDS-699]
coingaming · Oct 30, 2023 · 491a22f · 491a22f
1 parent 278ebfd
commit 491a22f
Show file tree

Hide file tree

Showing 7 changed files with 330 additions and 291 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
@@ -316,7 +316,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Select label
                 </label>
@@ -387,7 +387,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Select label
               </label>
@@ -515,7 +515,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Label
                 </label>
@@ -586,7 +586,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Label
               </label>
@@ -714,7 +714,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Error
                 </label>
@@ -775,7 +775,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Disabled
                 </label>
@@ -837,7 +837,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   Without placeholder (nullable)
                 </label>
@@ -897,7 +897,7 @@ Object {
                   value=""
                 />
                 <label
-                  class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                  class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
                 >
                   List options width
                 </label>
@@ -968,7 +968,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Error
               </label>
@@ -1029,7 +1029,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Disabled
               </label>
@@ -1091,7 +1091,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Without placeholder (nullable)
               </label>
@@ -1151,7 +1151,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 List options width
               </label>
@@ -3607,7 +3607,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Select label
               </label>
@@ -3674,7 +3674,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Select label
             </label>
@@ -3798,7 +3798,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Label
               </label>
@@ -3865,7 +3865,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Label
             </label>
@@ -3989,7 +3989,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Error
               </label>
@@ -4050,7 +4050,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Disabled
               </label>
@@ -4112,7 +4112,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 Without placeholder (nullable)
               </label>
@@ -4172,7 +4172,7 @@ Object {
                 value=""
               />
               <label
-                class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+                class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
               >
                 List options width
               </label>
@@ -4239,7 +4239,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Error
             </label>
@@ -4300,7 +4300,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Disabled
             </label>
@@ -4362,7 +4362,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               Without placeholder (nullable)
             </label>
@@ -4422,7 +4422,7 @@ Object {
               value=""
             />
             <label
-              class="absolute text-moon-12 text-trunks z-[2] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
+              class="absolute text-moon-12 text-trunks z-[1] transition-all ease-in-out duration-200 start-4 w-auto -top-0.5 !inset-x-0 whitespace-nowrap overflow-x-hidden"
             >
               List options width
             </label>

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
@@ -571,7 +571,7 @@ Object {
                 placeholder="Your username..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
               >
                 Username
               </label>
@@ -594,7 +594,7 @@ Object {
                 placeholder="Your Email..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
               >
                 Email
               </label>
@@ -611,7 +611,7 @@ Object {
                 placeholder="Your password..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
               >
                 Password
               </label>
@@ -628,7 +628,7 @@ Object {
                 placeholder="Repeat password..."
               />
               <label
-                class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+                class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
               >
                 Password
               </label>
@@ -678,7 +678,7 @@ Object {
               placeholder="Your username..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Username
             </label>
@@ -701,7 +701,7 @@ Object {
               placeholder="Your Email..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Email
             </label>
@@ -718,7 +718,7 @@ Object {
               placeholder="Your password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -735,7 +735,7 @@ Object {
               placeholder="Repeat password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -1378,7 +1378,7 @@ Object {
               placeholder="Your username..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Username
             </label>
@@ -1401,7 +1401,7 @@ Object {
               placeholder="Your Email..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Email
             </label>
@@ -1418,7 +1418,7 @@ Object {
               placeholder="Your password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -1435,7 +1435,7 @@ Object {
               placeholder="Repeat password..."
             />
             <label
-              class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+              class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
             >
               Password
             </label>
@@ -1481,7 +1481,7 @@ Object {
             placeholder="Your username..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
           >
             Username
           </label>
@@ -1504,7 +1504,7 @@ Object {
             placeholder="Your Email..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
           >
             Email
           </label>
@@ -1521,7 +1521,7 @@ Object {
             placeholder="Your password..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>
@@ -1538,7 +1538,7 @@ Object {
             placeholder="Repeat password..."
           />
           <label
-            class="absolute text-moon-12 text-trunks top-3 z-[2] transition-all ease-in-out duration-200 start-4"
+            class="absolute text-moon-12 text-trunks top-3 z-[1] transition-all ease-in-out duration-200 start-4"
           >
             Password
           </label>