Design tests

packages/app-elements/src/styles/global.css

@@ -9,9 +9,9 @@
   --breakpoint-xl: 1280px;
 
   --radius-*: initial;
-  --radius: 0.313rem;
-  --radius-sm: 0.188rem;
-  --radius-md: 0.625rem;
+  --radius: 0.5rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 1rem;
   --radius-full: 9999px;
 
   --color-*: initial;

packages/app-elements/src/ui/atoms/A.test.tsx

@@ -54,7 +54,8 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("px-4 h-9")
+    expect(getByRole("link").className).toContain("h-9")
+    expect(getByRole("link").className).toContain("px-4")
   })
 
   it("Should render as size regular (default)", () => {
@@ -63,7 +64,8 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("px-4 h-10")
+    expect(getByRole("link").className).toContain("px-4")
+    expect(getByRole("link").className).toContain("h-10")
   })
 
   it("Should render with flex alignment", () => {
@@ -72,6 +74,6 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("flex gap-1 items-center")
+    expect(getByRole("link").className).toContain("inline")
   })
 })

packages/app-elements/src/ui/atoms/Button.test.tsx

@@ -39,16 +39,20 @@ describe("Button", () => {
 
   it("Should render as size small", () => {
     const { getByRole } = render(<Button size="small">click me</Button>)
-    expect(getByRole("button").className).toContain("px-4 h-9")
+    expect(getByRole("button").className).toContain("px-4")
+    expect(getByRole("button").className).toContain("h-9")
   })
 
   it("Should render as size regular (default)", () => {
     const { getByRole } = render(<Button>click me</Button>)
-    expect(getByRole("button").className).toContain("px-4 h-10")
+    expect(getByRole("button").className).toContain("px-4")
+    expect(getByRole("button").className).toContain("h-10")
   })
 
   it("Should render with flex alignment", () => {
     const { getByRole } = render(<Button alignItems="center">click me</Button>)
-    expect(getByRole("button").className).toContain("flex gap-1 items-center")
+    expect(getByRole("button").className).toContain("inline-flex")
+    expect(getByRole("button").className).toContain("gap-1")
+    expect(getByRole("button").className).toContain("items-center")
   })
 })

packages/app-elements/src/ui/atoms/Tag.tsx

@@ -103,8 +103,8 @@ export const Tag: FC<TagProps> = ({ icon, children, className, ...rest }) => {
       className={cn([
         className,
         "flex gap-2 items-center select-none",
-        "text-xs font-bold",
-        "py-[3px] px-2 rounded text-gray bg-gray-200",
+        "text-xs font-semibold",
+        "py-[3px] px-2 rounded-sm text-gray bg-gray-200",
         {
           "cursor-pointer hover:bg-gray-100  outline-primary-light": hasHover,
         },

packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx

@@ -33,7 +33,7 @@ describe("Dropdown", () => {
           <button
             aria-expanded="false"
             aria-haspopup="true"
-            class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-block text-center transition-opacity duration-500 px-4 h-10 text-[15px] button bg-black border border-black text-white hover:opacity-80"
+            class="font-medium whitespace-nowrap leading-5 inline-flex justify-center items-center gap-1 transition-opacity duration-500 button h-10 min-w-10 text-[15px] px-4 rounded-[8px] bg-black border border-black text-white hover:opacity-80"
           >
             Open dropdown
           </button>

packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx

@@ -108,10 +108,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
         // biome-ignore lint/a11y/useKeyWithClickEvents: Using click handler to close the dropdown
         <div
           className={cn("absolute z-30", {
-            "top-full mt-[5px] right-0": menuPosition === "bottom-right",
-            "top-full mt-[5px] left-0": menuPosition === "bottom-left",
-            "bottom-full mb-[5px] right-0": menuPosition === "top-right",
-            "bottom-full mb-[5px] left-0": menuPosition === "top-left",
+            "top-full mt-2 right-0": menuPosition === "bottom-right",
+            "top-full mt-2 left-0": menuPosition === "bottom-left",
+            "bottom-full mb-2 right-0": menuPosition === "top-right",
+            "bottom-full mb-2 left-0": menuPosition === "top-left",
           })}
           onClick={closeDropdownMenuIfButtonClicked}
         >

packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx

@@ -11,7 +11,7 @@ export const DropdownDivider: FC<DropdownDividerProps> = ({
 }) => {
   return (
     <div {...rest} className="h-px my-2">
-      <hr className="border-gray-600" />
+      <hr className="border-gray-200" />
     </div>
   )
 }

packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx

@@ -61,14 +61,14 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden!",
+          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
             "min-w-[250px] pr-6": info != null,
           },
           className,
           {
-            "hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group":
+            "hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group":
               onClick != null || href != null,
             "cursor-default": onClick == null && href == null,
             "opacity-50 pointer-events-none": isDisabled,

packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx

@@ -1,11 +1,14 @@
 import cn from "classnames"
-import { type FC, useEffect, useState } from "react"
+import type { FC } from "react"
 import { DropdownDivider } from "./DropdownDivider"
 
 export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
   /** Menu content */
   children?: React.ReactNode
-  /** Set to `none` to hide the top arrow */
+  /**
+   * Set to `none` to hide the top arrow
+   * @deprecated We decided to remove the arrow from the dropdown menu
+   */
   arrow?: "none"
   /** Optional header for the dropdown menu */
   menuHeader?: string
@@ -28,18 +31,12 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
 
 export const DropdownMenu: FC<DropdownMenuProps> = ({
   children,
-  arrow,
   menuHeader,
   menuPosition = "bottom-right",
   parentElementRef,
   menuWidth,
   ...rest
 }) => {
-  const [centerToWidth, setCenterToWidth] = useState<number>()
-  useEffect(() => {
-    setCenterToWidth(parentElementRef?.current?.clientWidth)
-  }, [parentElementRef])
-
   return (
     <div
       className={cn("flex", {
@@ -49,23 +46,20 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         "flex-col-reverse items-start": menuPosition === "top-left",
       })}
     >
-      {arrow === "none" ? null : (
-        <Arrow menuPosition={menuPosition} centerToWidth={centerToWidth} />
-      )}
       <div
         {...rest}
         className={cn(
-          "bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2",
+          "bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg",
           {
             "min-w-[150px] md:max-w-[250px]": menuWidth == null, // default width
-            "w-[280px]": menuWidth === "wide",
+            "w-70": menuWidth === "wide",
           },
         )}
       >
         {menuHeader != null && (
           <>
             <div
-              className="py-2 px-4 text-gray-400 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
+              className="py-2 px-6 text-gray-800 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
               title={menuHeader}
             >
               {menuHeader}
@@ -80,64 +74,3 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
 }
 
 DropdownMenu.displayName = "DropdownMenu"
-
-const Arrow: FC<{
-  menuPosition: DropdownMenuProps["menuPosition"]
-  centerToWidth?: number
-}> = ({ menuPosition = "bottom-right", centerToWidth }) => {
-  const arrowHeight = 5
-  const arrowWidth = 12
-
-  const centeringOffset = calculateArrowCenteringOffset({
-    arrowWidth,
-    centerToWidth,
-  })
-
-  const alignProp = menuPosition.includes("right") ? "right" : "left"
-  const arrowDirection =
-    menuPosition === "bottom-right" || menuPosition === "bottom-left"
-      ? "top"
-      : "bottom"
-  const cssForPointingDirection =
-    arrowDirection === "top"
-      ? {
-          borderBottomWidth: arrowHeight,
-          borderTopColor: "transparent",
-        }
-      : {
-          borderTopWidth: arrowHeight,
-          borderBottomColor: "transparent",
-        }
-
-  return (
-    <span
-      className="relative border-black border-l-transparent border-r-transparent"
-      style={{
-        // base styles
-        borderLeftWidth: arrowWidth / 2,
-        borderRightWidth: arrowWidth / 2,
-        ...cssForPointingDirection,
-        // keep the arrow centered on the dropdown button
-        [alignProp]: centeringOffset,
-      }}
-    />
-  )
-}
-
-// Calculate the offset for centering the arrow on the dropdown button when this does not excide 50px
-// This means that for smaller buttons (up to 50px) the arrow will be centered on the button
-// otherwise it will 10px from the left or right as design system
-function calculateArrowCenteringOffset({
-  arrowWidth,
-  centerToWidth,
-}: {
-  arrowWidth: number
-  centerToWidth?: number
-}): number {
-  if (centerToWidth == null || centerToWidth > 50) {
-    return 10 // default offset calculated on a base of 32px button width
-  }
-
-  const centeringOffset = centerToWidth / 2 - arrowWidth / 2
-  return centeringOffset
-}

packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx

@@ -50,15 +50,15 @@ export const DropdownSearch = forwardRef<HTMLInputElement, DropdownSearchProps>(
     )
 
     return (
-      <div className="relative w-full" {...rest}>
+      <div className="relative mx-2 w-full" {...rest}>
         <Icon
           name="magnifyingGlass"
           weight="bold"
           className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400 pointer-events-none select-none text-sm "
         />
         <input
           className={cn(
-            "pl-10 pr-8 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0!",
+            "pl-10 pr-6 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0! rounded",
           )}
           placeholder={placeholder ?? t("common.search")}
           value={searchValue}