Upgrade tailwind to warnings, and other bugs

package.json

@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.4.0",
-        "@tailwindcss/forms": "^0.4.0",
+        "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tippyjs/react": "^4.2.6",
         "clsx": "^1.1.1",
@@ -59,19 +59,19 @@
         "@storybook/react": "^6.5.10",
         "@storybook/theming": "^6.5.10",
         "@xola/jslint": "^2.1.2",
-        "autoprefixer": "^10.4.5",
+        "autoprefixer": "^10.4.15",
         "babel-jest": "^27.2.0",
         "babel-loader": "^8.2.2",
         "chromatic": "^6.11.4",
         "jest": "^27.2.0",
         "lodash": "^4.17.21",
-        "postcss": "^8.4.5",
+        "postcss": "^8.4.28",
         "prettier": "^2.7.1",
         "prettier-plugin-tailwindcss": "^0.1.13",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "storybook-css-modules-preset": "^1.1.1",
-        "tailwindcss": "^3.1.8",
+        "tailwindcss": "^3.3.3",
         "typescript": "^4.9.5",
         "vite": "^3.0.8"
     },

src/components/Breakdown.jsx

@@ -80,10 +80,10 @@ const BreakdownSubtotalItem = ({ children, info, value, className, color = "blac
 
     return (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>
-            <td className="pt-1 pb-4 text-left">{children}</td>
-            <td className="whitespace-nowrap pt-1 pb-4 text-right">{info}</td>
+            <td className="pb-4 pt-1 text-left">{children}</td>
+            <td className="whitespace-nowrap pb-4 pt-1 text-right">{info}</td>
 
-            <td className="w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right">
+            <td className="w-[1%] whitespace-nowrap pb-4 pl-4 pt-1 text-right">
                 <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
                     {value}
                 </Currency>

src/components/Buttons/Button.jsx

@@ -5,13 +5,12 @@ import React from "react";
 export const colors = {
     standard: {
         common: "border-transparent text-white", // Common classes for each style
-        primary: "bg-primary hover:bg-primary-darker disabled:bg-primary active:bg-primary",
-        secondary:
-            "bg-secondary text-white hover:bg-secondary-dark disabled:bg-secondary border-transparent active:bg-secondary",
-        success: "bg-success hover:bg-success-dark disabled:bg-success active:bg-success",
-        warning: "bg-warning hover:bg-warning-dark disabled:bg-warning active:bg-warning",
-        caution: "bg-caution hover:bg-caution-dark disabled:bg-caution active:bg-caution",
-        danger: "bg-danger hover:bg-danger-dark disabled:bg-danger active:bg-danger",
+        primary: "bg-primary hover:bg-primary-darker active:bg-primary",
+        secondary: "bg-secondary text-white hover:bg-secondary-dark border-transparent active:bg-secondary",
+        success: "bg-success hover:bg-success-dark active:bg-success",
+        warning: "bg-warning hover:bg-warning-dark active:bg-warning",
+        caution: "bg-caution hover:bg-caution-dark active:bg-caution",
+        danger: "bg-danger hover:bg-danger-dark active:bg-danger",
     },
     outline: {
         common: "bg-white border hover:bg-white active:text-white", // Common classes for each style
@@ -41,10 +40,10 @@ export const colors = {
 };
 
 const sizes = {
-    tiny: "px-2 py-0.5 text-xs leading-xs", // 20px
-    small: "px-3 py-2 h-7.5 text-sm leading-sm", // 30px
-    medium: "px-4.5 py-3 h-10 text-base leading-base", // 40px
-    large: "px-6 py-4 h-[50px] text-md leading-md", // 50px
+    tiny: "px-2 py-0.5 min-w-7.5 text-xs leading-xs", // 20px
+    small: "px-2 py-3 min-w-7.5 h-7.5 text-sm leading-sm", // 30px
+    medium: "px-3 py-3 min-w-10 h-10 text-base leading-base", // 40px
+    large: "px-4 py-4 min-w-[50px] h-[50px] text-md leading-md", // 50px
 };
 
 export const Button = ({

src/components/Buttons/ButtonGroup.jsx

@@ -52,6 +52,7 @@ const Button = ({
     as: Tag = "button",
     isActive,
     shouldShowText = true,
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     isHidden = false,
     size = "medium",
     icon,

src/components/DatePicker/DatePicker.css

@@ -29,7 +29,7 @@
   * This does not include the today button
   */
 .DayPicker-Month {
-    @apply my-0 mx-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
+    @apply mx-0 my-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
     min-width: 400px; /* Odd width given from Figma */
     border-collapse: inherit;
     border-spacing: 0 8px; /* 8px between each week (row) */
@@ -52,7 +52,7 @@
 /* The "Today" button.
     A lot of specific vaules which I normally wouldn't use. But this is a third party lib where I cannot change the markup */
 .DayPicker-TodayButton {
-    @apply absolute top-0 right-24 h-10 px-3.5 py-2.5 leading-4;
+    @apply absolute right-24 top-0 h-10 px-3.5 py-2.5 leading-4;
     @apply rounded border border-solid border-gray bg-white text-base font-semibold tracking-tightest text-black hover:border-blue hover:bg-blue-lighter;
 }
 

src/components/DatePicker/DatePicker.jsx

@@ -207,7 +207,7 @@ export const DatePicker = ({
             {components.Footer ? <components.Footer /> : null}
 
             {useDateRangeStyle && shouldShowRelativeRanges && (
-                <div className="ml-auto w-6/12 pl-5 pr-10 pb-5">
+                <div className="ml-auto w-6/12 pb-5 pl-5 pr-10">
                     <RelativeDateRange
                         value={rangeName}
                         ranges={ranges}

src/components/DatePicker/NavbarElement.jsx

@@ -9,7 +9,7 @@ import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
  */
 export const NavbarElement = ({ onPreviousClick, onNextClick, className, showNextButton, showPreviousButton }) => {
     return (
-        <div className={clsx("absolute top-1.5 right-1 z-50", className)}>
+        <div className={clsx("absolute right-1 top-1.5 z-50", className)}>
             <ChevronButton isVisible={showPreviousButton} onClick={onPreviousClick}>
                 <ChevronLeftIcon />
             </ChevronButton>

src/components/Forms/BaseInput.jsx

@@ -21,7 +21,7 @@ export const BaseInput = ({ as: Tag, size = "medium", isError, className, isRequ
             <Tag
                 className={clsx(
                     "w-full rounded text-gray-darker placeholder-gray-dark hover:placeholder-gray-darker disabled:text-gray",
-                    "border border-transparent hover:border-black hover:bg-gray-lighter focus:text-black active:text-black disabled:bg-gray-lighter",
+                    "border hover:border-black hover:bg-gray-lighter focus:text-black active:text-black disabled:bg-gray-lighter",
                     sizes[size],
                     isError
                         ? "border-danger focus:border-danger focus:ring-0 focus:ring-danger"

src/components/HeaderToolbar.jsx

@@ -25,11 +25,7 @@ HeaderToolbar.propTypes = {
 HeaderToolbar.Breadcrumb = ({ className, children }) => {
     return (
         <Breadcrumb
-            className={clsx(
-                "ui-header-toolbar-breadcrumb",
-                "border-r border-gray-light text-xl md:pr-4 xl:pr-6",
-                className,
-            )}
+            className={clsx("ui-header-toolbar-breadcrumb", "border-r border-gray-light md:pr-4 xl:pr-6", className)}
         >
             {children}
         </Breadcrumb>

src/components/Key.jsx

@@ -10,7 +10,7 @@ export const Key = ({ char, className, ...rest }) => {
         <div
             className={clsx(
                 "ui-key",
-                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter py-1 px-2 text-xs font-semibold text-gray",
+                "inline-flex h-5 items-center justify-center rounded bg-gray-lighter px-2 py-1 text-xs font-semibold text-gray",
                 key.length === 1 && "w-5",
                 className,
             )}

src/components/Modal.jsx

@@ -65,7 +65,7 @@ export const Modal = ({
                             {onClose ? (
                                 <button
                                     type="button"
-                                    className="absolute top-0 right-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
+                                    className="absolute right-0 top-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
                                     onClick={onClose}
                                 >
                                     <CloseIcon />

src/components/Screens/Login.jsx

@@ -59,7 +59,7 @@ export const Login = ({
             {...rest}
         >
             <div className="md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8">
-                <div className="w-82 rounded-lg py-0 px-9 md:bg-white md:py-10">
+                <div className="w-82 rounded-lg px-9 py-0 md:bg-white md:py-10">
                     <div className="mb-12 space-y-4 md:mb-20">
                         <XolaLogoSimple className="mx-auto h-10 w-auto md:h-12" />
                         {label && <div className="flex items-center justify-center">{label}</div>}
@@ -127,7 +127,7 @@ export const Login = ({
             </div>
 
             <footer>
-                <div className="flex w-full flex-col items-center justify-center overflow-hidden py-1 px-4 sm:px-6 lg:px-8">
+                <div className="flex w-full flex-col items-center justify-center overflow-hidden px-4 py-1 sm:px-6 lg:px-8">
                     <div className="m-5 w-82 rounded-lg px-4 text-center text-xs opacity-80 md:text-sm">
                         <a
                             href="https://www.xola.com/team"

src/components/Sidebar/Sidebar.Account.jsx

@@ -20,7 +20,7 @@ export const SidebarAccount = ({
             type="button"
             className={clsx(
                 "ui-sidebar-account",
-                "flex w-full cursor-pointer items-center justify-center rounded py-3 px-4 hover:bg-gray-darker xl:justify-start",
+                "flex w-full cursor-pointer items-center justify-center rounded px-4 py-3 hover:bg-gray-darker xl:justify-start",
                 className,
             )}
             {...rest}

src/components/Sidebar/Sidebar.Button.jsx

@@ -5,7 +5,7 @@ export const SidebarButton = ({ icon: Icon, label, ...rest }) => {
     return (
         <button
             type="button"
-            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded py-2 px-4 hover:bg-gray-darker"
+            className="ui-sidebar-button flex w-full cursor-pointer items-center rounded px-4 py-2 hover:bg-gray-darker"
             {...rest}
         >
             <div className="p-1.5">

src/components/Sidebar/Sidebar.Link.jsx

@@ -21,7 +21,7 @@ export const SidebarLink = ({ isActive = false, icon: Icon, children, isSubMenuI
             {...rest}
         >
             {isSubMenuItem ? (
-                <Dot className={clsx("mr-3", { "bg-white": isActive, "bg-gray": !isActive })} />
+                <Dot className={clsx("mr-3", { "!bg-white": isActive, "!bg-gray": !isActive })} />
             ) : (
                 <Icon className="h-5 w-5 xl:mr-3" />
             )}

src/components/Sidebar/Sidebar.jsx

@@ -69,7 +69,7 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
             className={clsx(
                 "ui-sidebar",
                 isFixed ? "fixed" : "relative",
-                "z-20 flex h-full w-16 flex-col overflow-y-auto bg-black py-2 px-1 text-white md:w-24 xl:w-50",
+                "z-20 flex h-full w-16 flex-col overflow-y-auto bg-black px-1 py-2 text-white md:w-24 xl:w-50",
                 className,
             )}
         >
@@ -117,7 +117,7 @@ export const Sidebar = ({ logo, children, className, footer, notifications, isFi
                 />
             )}
 
-            <div className="mt-4 mb-10 text-center">
+            <div className="mb-10 mt-4 text-center">
                 {logo ?? (
                     <XolaLogoSimple
                         className={clsx(

src/components/Tabs/Tabs.Tab.jsx

@@ -33,7 +33,7 @@ export const Tab = ({
             className={clsx(
                 "ui-tabs-tab",
                 className,
-                "cursor-pointer whitespace-nowrap py-4 px-8 text-center font-semibold focus-visible:ring",
+                "cursor-pointer whitespace-nowrap px-8 py-4 text-center font-semibold focus-visible:ring",
                 variants[variant](isActive),
             )}
             {...rest}

src/icons/iconSizes.js

@@ -1,6 +1,6 @@
 export const iconSizes = {
     tiny: "w-3 h-3", // 12 px
-    small: "w-3.5 h-3.5", // 14px
+    small: "w-3 h-3", // 14px
     medium: "w-4.5 h-4.5", // 18px
     large: "w-6 h-6", // 24px
 };

src/stories/Forms/Button.stories.js

@@ -125,11 +125,11 @@ export const States = () => {
 export const TextWithIcons = () => {
     return (
         <div className="space-x-4">
-            <Button icon={<UserIcon />} size="medium">
+            <Button icon={<PlusIcon size="medium" />} size="medium">
                 Medium
             </Button>
 
-            <Button icon={<UserIcon />} iconPlacement="right" color="success" size="large">
+            <Button icon={<UserIcon size="medium" />} iconPlacement="right" color="success" size="large">
                 Large
             </Button>
         </div>
@@ -173,11 +173,15 @@ export const IconOnly = () => {
             </Button>
 
             <Button variant="outline" color="warning" size="medium">
-                <WarningIcon />
+                <KeyIcon />
             </Button>
 
             <Button variant="outline" color="caution" size="medium">
-                <KeyIcon />
+                <KeyIcon size="medium" />
+            </Button>
+
+            <Button variant="outline" color="danger" size="large">
+                <KeyIcon size="medium" />
             </Button>
         </div>
     );

src/stories/Forms/SubmitButton.stories.js

@@ -94,7 +94,6 @@ export const Default = ({ isLoading, ...rest }) => {
                     color="danger"
                     isLoading={showLoading}
                     onClick={handleClick}
-
                 >
                     Button with really long text
                 </SubmitButton>

src/stories/Navigation/Sidebar.stories.js

@@ -29,7 +29,7 @@ const SidebarFooter = () => {
                         </div>
 
                         <div className="space-y-2">
-                            <Sidebar.Separator className="my-0 mx-0 mt-4" />
+                            <Sidebar.Separator className="mx-0 my-0 mt-4" />
                             <Sidebar.Button icon={PolicyIcon} label="Privacy Policy" />
 
                             <Sidebar.Button icon={HelpCenterIcon} label="Help Center" />

tailwind.config.js

@@ -219,5 +219,5 @@ module.exports = {
         },
     },
 
-    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
+    plugins: [require("@tailwindcss/forms")],
 };