fix(tailwind): remove redundant classes

chore(ButtonPrimitive): replace size classes to correct chore(TextLink): replace h-button to h-form-box
kiwicom · Oct 2, 2023 · 6fe0c97 · 6fe0c97
1 parent 2df2285
commit 6fe0c97
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 52 deletions.
diff --git a/packages/orbit-components/src/TextLink/index.tsx b/packages/orbit-components/src/TextLink/index.tsx
@@ -71,7 +71,7 @@ const TextLink = ({
       className={cx(
         "orbit-text-link font-base duration-fast inline-flex cursor-pointer items-center font-medium transition-colors delay-0 ease-in-out hover:no-underline hover:outline-none active:no-underline active:outline-none",
         type === "secondary" && "orbit-text-link--secondary",
-        standAlone && "h-button-normal",
+        standAlone && "h-form-box-normal",
         typeClasses[type],
         size != null && sizeClasses[size],
         noUnderline ? "no-underline" : "underline",

diff --git a/packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts b/packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts
@@ -1,9 +1,9 @@
 import type { Size } from "./types";
 
 export const sizeStyles: Record<Size, string> = {
-  small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small",
-  normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium",
-  large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large",
+  small: "h-form-box-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small",
+  normal: "h-form-box-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium",
+  large: "h-form-box-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large",
 };
 
 export const paddingNoIconsStyles: Record<Size, string> = {
@@ -31,13 +31,13 @@ export const paddingBothIconsStyles: Record<Size, string> = {
 };
 
 export const circledStyles: Record<Size, string> = {
-  small: "rounded-button-circled-small",
-  normal: "rounded-button-circled-normal",
-  large: "rounded-button-circled-large",
+  small: "rounded-form-box-small",
+  normal: "rounded-form-box-normal",
+  large: "rounded-form-box-large",
 };
 
 export const iconOnlyStyles: Record<Size, string> = {
-  small: "w-button-small",
-  normal: "w-button-normal",
-  large: "w-button-large",
+  small: "w-form-box-small",
+  normal: "w-form-box-normal",
+  large: "w-form-box-large",
 };
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
@@ -1002,12 +1002,12 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "borderRadius": {
       "badge": "12px",
-      "button-circled-large": "52px",
-      "button-circled-normal": "44px",
-      "button-circled-small": "32px",
       "circle": "50%",
       "dialog-desktop": "9px",
       "dialog-mobile": "12px",
+      "form-box-large": "52px",
+      "form-box-normal": "44px",
+      "form-box-small": "32px",
       "large": "6px",
       "none": "0",
       "normal": "3px",
@@ -2099,18 +2099,16 @@ exports[`orbitPreset should match snapshot 1`] = `
       "4/6": "66.666667%",
       "5/6": "83.333333%",
       "auto": "auto",
-      "button-large": "52px",
-      "button-normal": "44px",
-      "button-small": "32px",
-      "checkbox": "20px",
       "country-flag-medium": "13px",
       "country-flag-small": "9px",
       "fit": "fit-content",
+      "form-box-large": "52px",
+      "form-box-normal": "44px",
+      "form-box-small": "32px",
       "full": "100%",
       "icon-large": "24px",
       "icon-medium": "20px",
       "icon-small": "16px",
-      "input-normal": "44px",
       "lg": "24px",
       "max": "max-content",
       "md": "16px",
@@ -2342,23 +2340,20 @@ exports[`orbitPreset should match snapshot 1`] = `
     },
     "minHeight": {
       "0": "0px",
-      "button-large": "52px",
-      "button-normal": "44px",
-      "button-small": "32px",
-      "checkbox": "16px",
       "fit": "fit-content",
+      "form-box-large": "52px",
+      "form-box-normal": "44px",
+      "form-box-small": "32px",
       "full": "100%",
       "icon-large": "24px",
       "icon-medium": "20px",
       "icon-small": "16px",
-      "input-normal": "44px",
       "max": "max-content",
       "min": "min-content",
       "screen": "100vh",
     },
     "minWidth": {
       "0": "0px",
-      "checkbox": "16px",
       "dialog-width": "540px",
       "fit": "fit-content",
       "full": "100%",
@@ -3571,13 +3566,12 @@ exports[`orbitPreset should match snapshot 1`] = `
       "8/12": "66.666667%",
       "9/12": "75%",
       "auto": "auto",
-      "button-large": "52px",
-      "button-normal": "44px",
-      "button-small": "32px",
-      "checkbox": "20px",
       "country-flag-medium": "24px",
       "country-flag-small": "16px",
       "fit": "fit-content",
+      "form-box-large": "52px",
+      "form-box-normal": "44px",
+      "form-box-small": "32px",
       "full": "100%",
       "icon-large": "24px",
       "icon-medium": "20px",

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -114,27 +114,23 @@ const cfg = (options?: Options): Config => {
           checkbox: defaultTokens.heightCheckbox,
         },
         height: {
-          "icon-small": defaultTokens.heightIconSmall,
-          "icon-medium": defaultTokens.heightIconMedium,
-          "icon-large": defaultTokens.heightIconLarge,
-          "input-normal": defaultTokens.heightInputNormal,
+          "icon-small": defaultTokens.iconSmallSize,
+          "icon-medium": defaultTokens.iconMediumSize,
+          "icon-large": defaultTokens.iconLargeSize,
           separator: defaultTokens.heightSeparator,
-          "button-small": defaultTokens.heightButtonSmall,
-          "button-normal": defaultTokens.heightButtonNormal,
-          "button-large": defaultTokens.heightButtonLarge,
-          checkbox: defaultTokens.heightCheckbox,
+          "form-box-small": defaultTokens.formBoxSmallHeight,
+          "form-box-normal": defaultTokens.formBoxNormalHeight,
+          "form-box-large": defaultTokens.formBoxLargeHeight,
           "country-flag-small": defaultTokens.countryFlagSmallHeight,
           "country-flag-medium": defaultTokens.countryFlagMediumHeight,
         },
         minHeight: {
-          "icon-small": defaultTokens.heightIconSmall,
-          "icon-medium": defaultTokens.heightIconMedium,
-          "icon-large": defaultTokens.heightIconLarge,
-          "input-normal": defaultTokens.formBoxNormalHeight,
-          "button-small": defaultTokens.formBoxSmallHeight,
-          "button-normal": defaultTokens.formBoxNormalHeight,
-          "button-large": defaultTokens.formBoxLargeHeight,
-          checkbox: defaultTokens.iconSmallSize,
+          "icon-small": defaultTokens.iconSmallSize,
+          "icon-medium": defaultTokens.iconMediumSize,
+          "icon-large": defaultTokens.iconLargeSize,
+          "form-box-small": defaultTokens.formBoxSmallHeight,
+          "form-box-normal": defaultTokens.formBoxNormalHeight,
+          "form-box-large": defaultTokens.formBoxLargeHeight,
         },
         maxHeight: {
           "illustration-extra-small": defaultTokens.illustrationExtraSmallHeight,
@@ -152,18 +148,16 @@ const cfg = (options?: Options): Config => {
           "modal-normal-width": defaultTokens.modalNormalWidth,
           "modal-large-width": defaultTokens.modalLargeWidth,
           "modal-extra-large-width": defaultTokens.modalExtraLargeWidth,
-          "button-small": defaultTokens.heightButtonSmall,
-          "button-normal": defaultTokens.heightButtonNormal,
-          "button-large": defaultTokens.heightButtonLarge,
-          checkbox: defaultTokens.widthCheckbox,
+          "form-box-small": defaultTokens.formBoxSmallHeight,
+          "form-box-normal": defaultTokens.formBoxNormalHeight,
+          "form-box-large": defaultTokens.formBoxLargeHeight,
           "country-flag-small": defaultTokens.countryFlagSmallWidth,
           "country-flag-medium": defaultTokens.countryFlagMediumWidth,
         },
         minWidth: {
           "icon-small": defaultTokens.iconSmallSize,
           "icon-medium": defaultTokens.iconMediumSize,
           "icon-large": defaultTokens.iconLargeSize,
-          checkbox: defaultTokens.iconSmallSize,
           "dialog-width": defaultTokens.dialogWidth,
         },
         padding: {
@@ -178,9 +172,9 @@ const cfg = (options?: Options): Config => {
         borderRadius: {
           "dialog-desktop": defaultTokens.dialogBorderRadiusDesktop,
           "dialog-mobile": defaultTokens.dialogBorderRadiusMobile,
-          "button-circled-small": defaultTokens.heightButtonSmall,
-          "button-circled-normal": defaultTokens.heightButtonNormal,
-          "button-circled-large": defaultTokens.heightButtonLarge,
+          "form-box-small": defaultTokens.formBoxSmallHeight,
+          "form-box-normal": defaultTokens.formBoxNormalHeight,
+          "form-box-large": defaultTokens.formBoxLargeHeight,
           badge: defaultTokens.badgeBorderRadius,
         },
         borderColor: {