fix(tailwind): fix animation-loader class

Update packages/orbit-components/src/Loading/index.tsx Co-authored-by: Daniel Sil <daniel.sil@kiwi.com> Update packages/orbit-components/src/Loading/index.tsx Co-authored-by: Daniel Sil <daniel.sil@kiwi.com>
kiwicom · Oct 2, 2023 · c33ea88 · c33ea88
1 parent 53aa0df
commit c33ea88
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/orbit-components/src/Loading/index.tsx b/packages/orbit-components/src/Loading/index.tsx
@@ -10,7 +10,7 @@ import useTheme from "../hooks/useTheme";
 const CircleLoader = ({ animationDelay }: { animationDelay?: string }) => {
   return (
     <div
-      className="animate-loader rounded-circle bg-cloud-dark h-xs w-xs me-[6px] [&>*:nth-child(3)]:my-0"
+      className="animate-loader rounded-circle bg-cloud-dark h-xs w-xs me-[6px] [&:nth-child(3)]:m-0"
       style={{ animationDelay }}
     />
   );
@@ -99,7 +99,7 @@ const Loading = ({
             type === TYPE_OPTIONS.BOX_LOADER && "h-[80px] justify-center",
             type === TYPE_OPTIONS.PAGE_LOADER && "h-[120px] flex-col justify-center",
           ])}
-          style={{ height: `${customSize}px` }}
+          style={{ height: customSize }}
           data-test={dataTest}
           id={id}
         >

diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
@@ -484,7 +484,7 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "animation": {
       "bounce": "bounce 1s infinite",
-      "loader": "loader 1s 1.25s infinite ease-in-out",
+      "loader": "loader 1.25s infinite ease-in-out",
       "none": "none",
       "ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
       "pulse": "pulse 1.5s infinite",

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -202,7 +202,7 @@ const cfg = (options?: Options): Config => {
         animation: {
           "pulse-slow": "slow-pulse 2s ease-in-out 0.5s infinite",
           spinner: "spinner 0.75s linear infinite",
-          loader: "loader 1s 1.25s infinite ease-in-out",
+          loader: "loader 1.25s infinite ease-in-out",
           pulse: "pulse 1.5s infinite",
         },
         textColor: Object.entries(getForegroundColors()).reduce((acc, [key, value]) => {