chore: fix "not a tailwind css class" warning in components

fix "not a tailwind css class" warning in orbit components
kiwicom · Nov 30, 2023 · 9feb0b0 · 9feb0b0
1 parent ac4780d
commit 9feb0b0
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 34 deletions.
diff --git a/docs/src/components/BrandedTile.tsx b/docs/src/components/BrandedTile.tsx
@@ -108,7 +108,6 @@ export default function BrandedTile({
 
   return (
     <StyledWrapper
-      className="BrandedTile"
       href={href}
       target="_blank"
       rel="noopener noreferrer"

diff --git a/docs/src/components/Head/index.tsx b/docs/src/components/Head/index.tsx
@@ -20,12 +20,12 @@ export default function Head({ title, hasSiteName, description, path }: Props) {
 
   return (
     <Helmet>
-      <html lang="en" className={hasJs ? "js" : "no-js"} />
+      <html lang="en" className={hasJs ? "orbit-js" : "orbit-no-js"} />
       <script
         dangerouslySetInnerHTML={{
           __html: `
-        document.documentElement.classList.remove("no-js");
-        document.documentElement.classList.add("js");
+        document.documentElement.classList.remove("orbit-no-js");
+        document.documentElement.classList.add("orbit-js");
       `,
         }}
       />

diff --git a/docs/src/components/VisualList.tsx b/docs/src/components/VisualList.tsx
@@ -85,7 +85,7 @@ const Visual = ({
           <CardSection>
             <Stack>
               <H3 noId>{visualName}</H3>
-              <CodeBlock className="language-jsx">{exampleCode(visualName)}</CodeBlock>
+              <CodeBlock className="orbit-language-jsx">{exampleCode(visualName)}</CodeBlock>
               {actions(visualObject, copied, copy)}
             </Stack>
           </CardSection>

diff --git a/packages/orbit-components/.eslintrc.cjs b/packages/orbit-components/.eslintrc.cjs
@@ -1,4 +1,5 @@
 const path = require("path");
+const orbitPreset = require("@kiwicom/orbit-tailwind-preset");
 
 module.exports = {
   extends: ["../../.eslintrc.cjs", "plugin:storybook/recommended"],
@@ -15,7 +16,7 @@ module.exports = {
   },
   settings: {
     tailwindcss: {
-      config: "./tailwind.config.ts",
+      config: orbitPreset(),
     },
   },
   overrides: [

diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx
@@ -38,7 +38,7 @@ export const VerticalBadge = ({
   return (
     <div
       className={cx(
-        "me-xs h-icon-large w-icon-large rounded-circle flex flex-shrink-0 items-center justify-center",
+        "me-xs h-icon-large w-icon-large rounded-circle flex shrink-0 items-center justify-center",
         "[&_svg]:h-icon-small [&_svg]:w-icon-small",
         type && BACKGROUND[type],
       )}

diff --git a/packages/orbit-components/src/Checkbox/index.tsx b/packages/orbit-components/src/Checkbox/index.tsx
@@ -90,7 +90,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         </div>,
       )}
       {(label || info) && (
-        <div className={cx("ms-xs flex flex-1 flex-col", disabled ? "opacity-50" : "opacity-1")}>
+        <div className={cx("ms-xs flex flex-1 flex-col", disabled ? "opacity-50" : "opacity-10")}>
           {label && (
             <span className="font-base text-form-element-normal text-form-element-label-foreground [&_.orbit-text]:text-form-element-normal [&_.orbit-text]:text-form-element-label-foreground [&_.orbit-text]:leading-small font-medium leading-normal [&_.orbit-text]:font-medium">
               {label}

diff --git a/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx b/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx
@@ -15,7 +15,7 @@ const FormFeedback = (props: Props) => {
       className={cx(
         "orbit-choice-group-feedback",
         "text-critical-foreground font-base leading-small text-small font-medium",
-        "mt-xxxs relative top-full max-h-[--max-height] w-full overflow-hidden overflow-ellipsis whitespace-nowrap",
+        "mt-xxxs relative top-full max-h-[--max-height] w-full truncate",
         "[&_a]:cursor-pointer [&_a]:underline",
         "[&_strong]:text-ink-dark [&_b]:text-ink-dark [&_b]:font-medium [&_strong]:font-medium",
       )}

diff --git a/packages/orbit-components/src/Drawer/index.tsx b/packages/orbit-components/src/Drawer/index.tsx
@@ -102,7 +102,7 @@ const Drawer = ({
         "z-drawer",
         "duration-fast transition-colors ease-in-out",
         overlayShown ? "visible" : "invisible",
-        shown ? "bg-drawer-overlay-background" : "transparent",
+        shown ? "bg-drawer-overlay-background" : "orbit-transparent",
       )}
       onClick={handleOnClose}
       data-test={dataTest}
@@ -113,7 +113,7 @@ const Drawer = ({
       <aside
         className={cx(
           "box-border block",
-          "absolute bottom-0 top-0",
+          "absolute inset-y-0",
           "h-full w-full",
           "font-base",
           "overflow-y-auto",
@@ -139,8 +139,7 @@ const Drawer = ({
               suppressed && !bordered ? "bg-cloud-light" : "bg-white-normal",
               fixedHeader && "z-sticky sticky top-0",
               onlyIcon ? "justify-end" : "justify-between",
-              bordered &&
-                "border-cloud-normal border-b border-l-0 border-r-0 border-t-0 border-solid",
+              bordered && "border-cloud-normal border-x-0 border-b border-solid",
               !noPadding && "px-md lm:ps-xl lm:pe-lg py-0",
             )}
           >

diff --git a/packages/orbit-components/src/InputField/index.tsx b/packages/orbit-components/src/InputField/index.tsx
@@ -28,7 +28,7 @@ export const FakeInput = ({
   <div
     className={cx(
       "orbit-input-field-fake-input",
-      "h-form-box-normal text-form-element-normal-font-size z-[1]",
+      "h-form-box-normal text-form-element-normal z-[1]",
       "absolute left-0 top-0",
       "duration-fast transition-all ease-in-out",
       "rounded-large tb:rounded-normal box-border w-full",
@@ -211,7 +211,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
               "flex items-center justify-center",
               "pointer-events-none h-full",
               "[&>.orbit-form-label]:mb-0",
-              "[&>.orbit-form-label]:text-form-box-normal [&>.orbit-form-label]:whitespace-nowrap [&>.orbit-form-label]:leading-normal",
+              "[&>.orbit-form-label]:h-form-box-normal [&>.orbit-form-label]:whitespace-nowrap [&>.orbit-form-label]:leading-normal",
               "[&>.orbit-form-label]:z-[3]",
               !tags && (error || help) ? "ps-xxs" : "ps-sm",
             )}

diff --git a/packages/orbit-components/src/ListChoice/index.tsx b/packages/orbit-components/src/ListChoice/index.tsx
@@ -36,7 +36,7 @@ const ListChoice = React.forwardRef<HTMLDivElement, Props>(
         className={cx(
           "orbit-list-choice",
           "py-sm px-md box-border flex w-full items-center",
-          "border-b-cloud-normal bg-white-normal border-b-solid border-b",
+          "border-b-cloud-normal bg-white-normal border-b border-solid",
           "duration-fast transition-[background-color] ease-in-out",
           disabled ? "cursor-not-allowed" : "hover:bg-cloud-light cursor-pointer",
           "hover:outline-none [&_button]:hover:bg-transparent",

diff --git a/packages/orbit-components/src/Loading/index.tsx b/packages/orbit-components/src/Loading/index.tsx
@@ -91,7 +91,7 @@ const Loading = ({
             "overflow-hidden",
             "box-border",
             type === TYPE_OPTIONS.BUTTON_LOADER &&
-              "t-0 absolute start-0 h-full w-full justify-center",
+              "absolute start-0 h-full w-full justify-center border-t-0",
             type === TYPE_OPTIONS.SEARCH_LOADER && "h-[40px] justify-start",
             type === TYPE_OPTIONS.INLINE_LOADER
               ? "inline-flex min-h-[19px] justify-center"

diff --git a/packages/orbit-components/src/Modal/ModalHeader/index.tsx b/packages/orbit-components/src/Modal/ModalHeader/index.tsx
@@ -30,7 +30,7 @@ export const ModalHeaderWrapper = ({
         suppressed
           ? [
               "bg-cloud-light py-xl px-md lm:p-xl",
-              "[&_~_.orbit-modal-section:first-of-type]:border-t-solid [&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t",
+              "[&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t [&_~_.orbit-modal-section:first-of-type]:border-solid",
             ]
           : ["bg-white-normal pt-lg px-md lm:pt-xl lm:px-xl lm:pb-0 pb-0"],
         !isMobileFullPage && "rounded-t-modal-mobile",

diff --git a/packages/orbit-components/src/Modal/ModalSection/index.tsx b/packages/orbit-components/src/Modal/ModalSection/index.tsx
@@ -28,13 +28,13 @@ export const ModalSectionWrapper = ({
         className,
         "orbit-modal-section",
         "py-lg px-md lm:p-xl box-border w-full",
-        "border-b-solid border-b-elevation-flat-border-color border-b",
+        "border-b-elevation-flat-border-color border-b border-solid",
         "last-of-type:[&:not(:last-child)]:rounded-b-none",
         suppressed
           ? [
               "bg-cloud-light",
-              "first-of-type:border-t-solid first-of-type:border-t-elevation-flat-border-color lm:first-of-type:mt-xxl first-of-type:border-t",
-              "last-of-type:border-b-solid last-of-type:border-b-elevation-flat-border-color [&_~_.orbit-modal-footer]:last-of-type:mt-md last-of-type:border-b",
+              "first-of-type:border-t-elevation-flat-border-color lm:first-of-type:mt-xxl first-of-type:border-t first-of-type:border-solid",
+              "last-of-type:border-b-elevation-flat-border-color [&_~_.orbit-modal-footer]:last-of-type:mt-md last-of-type:border-b last-of-type:border-solid",
               closable && "first-of-type:mt-lg",
             ]
           : [

diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
@@ -400,8 +400,8 @@ const Modal = React.forwardRef<Instance, Props>(
         className={cx(
           "orbit-modal-body",
           "z-overlay font-base fixed inset-0 box-border h-full w-full overflow-x-hidden outline-none",
-          !isMobileFullPage && "bg-[black] bg-opacity-50",
-          "lm:overflow-y-auto lm:p-xxl lm:bg-[black] lm:bg-opacity-50",
+          !isMobileFullPage && "bg-[black]/50",
+          "lm:overflow-y-auto lm:p-xxl lm:bg-[black]/50",
         )}
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
@@ -463,7 +463,7 @@ const Modal = React.forwardRef<Instance, Props>(
                     "lm:[&_.orbit-modal-footer]:!p-xl",
                     fullyScrolled && "lm:[&_.orbit-modal-footer]:absolute",
                   ]
-                : "lm[&_.orbit-modal-footer]:p-xl]",
+                : "lm:[&_.orbit-modal-footer]:p-xl]",
               fullyScrolled && "lm:[&_.orbit-modal-footer]:shadow-none",
               scrolled
                 ? [
@@ -494,7 +494,7 @@ const Modal = React.forwardRef<Instance, Props>(
                   scrolled && "shadow-fixed bg-white-normal",
                   "[&_+_.orbit-modal-section:first-of-type]:pt-xxxl [&_+_.orbit-modal-section:first-of-type]:bt-0 [&_+_.orbit-modal-section:first-of-type]:m-0",
                   "[&_.orbit-button-primitive]:me-xxs [&_.orbit-button-primitive]:pointer-events-auto",
-                  "[&_.orbit-button-primitive_svg]:transition-color [&_.orbit-button-primitive_svg]:duration-fast [&_.orbit-button-primitive_svg]:text-ink-normal [&_.orbit-button-primitive_svg]:ease-in-out",
+                  "[&_.orbit-button-primitive_svg]:duration-fast [&_.orbit-button-primitive_svg]:text-ink-normal [&_.orbit-button-primitive_svg]:transition-colors [&_.orbit-button-primitive_svg]:ease-in-out",
                   "[&_.orbit-button-primitive:hover_svg]:text-ink-light-hover [&_.orbit-button-primitive:active_svg]:text-ink-light-active",
                 )}
                 data-test="CloseContainer"

diff --git a/packages/orbit-components/src/NavigationBar/index.tsx b/packages/orbit-components/src/NavigationBar/index.tsx
@@ -63,7 +63,7 @@ const NavigationBar = ({
       data-test={dataTest}
       id={id}
       className={cx(
-        "bg-white-normal shadow-fixed p-sm z-navigation-bar fixed left-0 right-0 top-0 box-border flex w-full translate-x-0 items-center",
+        "bg-white-normal shadow-fixed p-sm z-navigation-bar fixed inset-x-0 top-0 box-border flex w-full translate-x-0 items-center",
         "duration-normal transform-gpu transition-transform ease-in-out",
         "tb:h-[64px] h-[52px]", // As defined on the const above
         shown ? "translate-y-0" : "tb:translate-y-[-64px] translate-y-[-52px]", // As defined on the const above

diff --git a/packages/orbit-components/src/Radio/index.tsx b/packages/orbit-components/src/Radio/index.tsx
@@ -28,7 +28,7 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     <label
       htmlFor={id}
       className={cx(
-        "font-base items-self-start text-form-element-label-foreground relative flex w-full",
+        "font-base text-form-element-label-foreground relative flex w-full items-start",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         !disabled && [
           !checked &&
@@ -85,7 +85,7 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         <div
           className={cx(
             "ms-xs flex flex-1 flex-col font-medium",
-            disabled ? "opacity-50" : "opacity-1",
+            disabled ? "opacity-50" : "opacity-10",
           )}
         >
           {label && (

diff --git a/packages/orbit-components/src/Select/index.tsx b/packages/orbit-components/src/Select/index.tsx
@@ -105,7 +105,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
             className={cx(
               "pointer-events-none z-[3] flex h-full items-center justify-center",
               error || help ? "ps-xxs" : "ps-sm",
-              "[&_.orbit-form-label]:text-normal [&_.orbit-form-label]:mb-0 [&_.orbit-form-label]:inline-block [&_.orbit-form-label]:max-w-[20ch] [&_.orbit-form-label]:overflow-hidden [&_.orbit-form-label]:text-ellipsis [&_.orbit-form-label]:whitespace-nowrap [&_.orbit-form-label]:leading-normal",
+              "[&_.orbit-form-label]:text-normal [&_.orbit-form-label]:mb-0 [&_.orbit-form-label]:inline-block [&_.orbit-form-label]:max-w-[20ch] [&_.orbit-form-label]:truncate [&_.orbit-form-label]:leading-normal",
             )}
             ref={labelRef}
           >
@@ -143,7 +143,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
                 (disabled && "text-form-element-disabled-foreground") || filled
                   ? "text-form-element-filled-foreground"
                   : "text-form-element-foreground",
-                "text-form-element-normal font-base pointer-events-none absolute bottom-0 top-0 z-[3] flex items-center",
+                "text-form-element-normal font-base pointer-events-none absolute inset-y-0 z-[3] flex items-center",
                 prefix ? "ps-[48px]" : "ps-sm",
               )}
             >

diff --git a/packages/orbit-components/src/Textarea/index.tsx b/packages/orbit-components/src/Textarea/index.tsx
@@ -90,15 +90,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
           "border border-transparent",
           // TODO: remove when will be migrated from tmp-folder
           resize === RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none",
-          "text-normal p-sm leading-normal",
           error ? "shadow-form-element-error" : "shadow-form-element",
           disabled ? "cursor-not-allowed" : "cursor-text",
           fullHeight && "h-full flex-1",
           disabled || readOnly
             ? "bg-form-element-disabled-background"
             : [
                 "bg-form-element-background",
-                error ? "hover:shadow-form-element-error-hover" : "hover:bg-form-element-hover",
+                error ? "hover:shadow-form-element-error-hover" : "hover:shadow-form-element-hover",
               ],
           "[&::placeholder]:text-form-element-foreground",
         )}

diff --git a/packages/orbit-components/src/Toast/ToastMessage.tsx b/packages/orbit-components/src/Toast/ToastMessage.tsx
@@ -43,7 +43,7 @@ const ToastMessage = ({
       aria-live={ariaLive}
       role="status"
       className={cx(
-        "z-onTop duration-normal absolute left-0 right-0 flex cursor-grab transition-all ease-in-out will-change-transform",
+        "z-onTop duration-normal absolute inset-x-0 flex cursor-grab transition-all ease-in-out will-change-transform",
         "translate-x-[var(--toast-message-offset-x)] translate-y-[var(--toast-message-offset-y)] opacity-[var(--toast-message-opacity)]",
         placements[placement],
       )}

diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
@@ -24,7 +24,7 @@ export const TooltipWrapper = React.forwardRef<
         block ? "flex" : "inline-flex",
         enabled &&
           !removeUnderlinedText &&
-          "[&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-current [&_.orbit-text]:decoration-dotted",
+          "[&_.orbit-text]:orbit-decoration-current [&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-dotted",
       )}
       ref={ref}
       role="button"