From 7257371d61b7b4752d04e8f0807074dd24d7274c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Berardo=20Mate=CC=80?= Date: Thu, 2 Apr 2026 11:11:04 +0200 Subject: [PATCH 1/3] fix: border-radius sizes --- packages/app-elements/src/styles/global.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css index fbbefa9d..fa30f2e0 100644 --- a/packages/app-elements/src/styles/global.css +++ b/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.25rem; + --radius-md: 1rem; --radius-full: 9999px; --color-*: initial; From db2289d50445eecbd4c73b22cfb0110a3d65aa07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Berardo=20Mate=CC=80?= Date: Thu, 2 Apr 2026 11:12:28 +0200 Subject: [PATCH 2/3] fix: new dropdown --- .../ui/composite/Dropdown/DropdownDivider.tsx | 15 ++--- .../ui/composite/Dropdown/DropdownItem.tsx | 46 ++++++------- .../ui/composite/Dropdown/DropdownMenu.tsx | 66 +++++++++---------- 3 files changed, 63 insertions(+), 64 deletions(-) diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx index 0c354d6f..574b48fb 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx @@ -1,8 +1,7 @@ -import type { FC } from "react" +import type { FC } from "react"; -export interface DropdownDividerProps - extends React.HTMLAttributes { - children?: React.ReactNode +export interface DropdownDividerProps extends React.HTMLAttributes { + children?: React.ReactNode; } export const DropdownDivider: FC = ({ @@ -11,9 +10,9 @@ export const DropdownDivider: FC = ({ }) => { return (
-
+
- ) -} + ); +}; -DropdownDivider.displayName = "DropdownDivider" +DropdownDivider.displayName = "DropdownDivider"; diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx index fe6eb6d1..cef03cc5 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx @@ -1,26 +1,26 @@ -import cn from "classnames" -import { type FC, useMemo } from "react" -import { Icon, type IconProps } from "#ui/atoms/Icon/Icon" -import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate" -import { enforceAllowedTags } from "#utils/htmltags" +import cn from "classnames"; +import { type FC, useMemo } from "react"; +import { Icon, type IconProps } from "#ui/atoms/Icon/Icon"; +import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate"; +import { enforceAllowedTags } from "#utils/htmltags"; export type DropdownItemProps = React.HTMLAttributes & { - label: string - info?: string - icon?: IconProps["name"] | "keep-space" + label: string; + info?: string; + icon?: IconProps["name"] | "keep-space"; } & ( | { /** * render the component as anchor tag */ - href: string - target?: string + href: string; + target?: string; } | { - href?: never - disabled?: boolean + href?: never; + disabled?: boolean; } - ) + ); /** * Render a dropdown item to be used inside a `Dropdown` component. @@ -47,28 +47,28 @@ export const DropdownItem = withSkeletonTemplate( defaultTag: "button", }), [href, onClick], - ) + ); - const isDisabled = Boolean("disabled" in rest && rest.disabled) + const isDisabled = Boolean("disabled" in rest && rest.disabled); return ( { if (!isDisabled) { - onClick?.(e) + onClick?.(e); } }} 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, @@ -98,11 +98,11 @@ export const DropdownItem = withSkeletonTemplate( )} - ) + ); }, -) -DropdownItem.displayName = "DropdownItem" +); +DropdownItem.displayName = "DropdownItem"; const FakeIcon: FC = () => { - return
-} + return
; +}; diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx index 5c6e3084..a2dda487 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx @@ -1,29 +1,29 @@ -import cn from "classnames" -import { type FC, useEffect, useState } from "react" -import { DropdownDivider } from "./DropdownDivider" +import cn from "classnames"; +import { type FC, useEffect, useState } from "react"; +import { DropdownDivider } from "./DropdownDivider"; export interface DropdownMenuProps extends React.HTMLAttributes { /** Menu content */ - children?: React.ReactNode + children?: React.ReactNode; /** Set to `none` to hide the top arrow */ - arrow?: "none" + arrow?: "none"; /** Optional header for the dropdown menu */ - menuHeader?: string + menuHeader?: string; /** * Opening position of the dropdown menu * @default bottom-right */ - menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right" + menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; /** * If set, the arrow will be centered when trigger button is smaller than 50px * Otherwise it will fallback to a default centering based on 32px trigger button */ - parentElementRef?: React.RefObject + parentElementRef?: React.RefObject; /** * Set a wider menu, fixed to 280px. * By default, when no width is set, the menu adjusts its width dynamically to accommodate content, within a range of 150px to 250px. **/ - menuWidth?: "wide" + menuWidth?: "wide"; } export const DropdownMenu: FC = ({ @@ -35,10 +35,10 @@ export const DropdownMenu: FC = ({ menuWidth, ...rest }) => { - const [centerToWidth, setCenterToWidth] = useState() + const [centerToWidth, setCenterToWidth] = useState(); useEffect(() => { - setCenterToWidth(parentElementRef?.current?.clientWidth) - }, [parentElementRef]) + setCenterToWidth(parentElementRef?.current?.clientWidth); + }, [parentElementRef]); return (
= ({
= ({ {menuHeader != null && ( <>
{menuHeader} @@ -76,28 +76,28 @@ export const DropdownMenu: FC = ({ {children}
- ) -} + ); +}; -DropdownMenu.displayName = "DropdownMenu" +DropdownMenu.displayName = "DropdownMenu"; const Arrow: FC<{ - menuPosition: DropdownMenuProps["menuPosition"] - centerToWidth?: number + menuPosition: DropdownMenuProps["menuPosition"]; + centerToWidth?: number; }> = ({ menuPosition = "bottom-right", centerToWidth }) => { - const arrowHeight = 5 - const arrowWidth = 12 + const arrowHeight = 5; + const arrowWidth = 12; const centeringOffset = calculateArrowCenteringOffset({ arrowWidth, centerToWidth, - }) + }); - const alignProp = menuPosition.includes("right") ? "right" : "left" + const alignProp = menuPosition.includes("right") ? "right" : "left"; const arrowDirection = menuPosition === "bottom-right" || menuPosition === "bottom-left" ? "top" - : "bottom" + : "bottom"; const cssForPointingDirection = arrowDirection === "top" ? { @@ -107,11 +107,11 @@ const Arrow: FC<{ : { borderTopWidth: arrowHeight, borderBottomColor: "transparent", - } + }; return ( - ) -} + ); +}; // 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 @@ -131,13 +131,13 @@ function calculateArrowCenteringOffset({ arrowWidth, centerToWidth, }: { - arrowWidth: number - centerToWidth?: number + arrowWidth: number; + centerToWidth?: number; }): number { if (centerToWidth == null || centerToWidth > 50) { - return 10 // default offset calculated on a base of 32px button width + return 10; // default offset calculated on a base of 32px button width } - const centeringOffset = centerToWidth / 2 - arrowWidth / 2 - return centeringOffset + const centeringOffset = centerToWidth / 2 - arrowWidth / 2; + return centeringOffset; } From f6bc1b1526719da93508ad9ef3c1910bbdc97f84 Mon Sep 17 00:00:00 2001 From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com> Date: Wed, 8 Apr 2026 09:51:01 +0200 Subject: [PATCH 3/3] chore: run lint --- .../ui/composite/Dropdown/DropdownDivider.tsx | 13 ++-- .../ui/composite/Dropdown/DropdownItem.tsx | 42 ++++++------- .../ui/composite/Dropdown/DropdownMenu.tsx | 60 +++++++++---------- .../__snapshots__/Dropdown.test.tsx.snap | 24 ++++---- 4 files changed, 70 insertions(+), 69 deletions(-) diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx index 574b48fb..8f77d45d 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx @@ -1,7 +1,8 @@ -import type { FC } from "react"; +import type { FC } from "react" -export interface DropdownDividerProps extends React.HTMLAttributes { - children?: React.ReactNode; +export interface DropdownDividerProps + extends React.HTMLAttributes { + children?: React.ReactNode } export const DropdownDivider: FC = ({ @@ -12,7 +13,7 @@ export const DropdownDivider: FC = ({
- ); -}; + ) +} -DropdownDivider.displayName = "DropdownDivider"; +DropdownDivider.displayName = "DropdownDivider" diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx index cef03cc5..5c38818a 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx @@ -1,26 +1,26 @@ -import cn from "classnames"; -import { type FC, useMemo } from "react"; -import { Icon, type IconProps } from "#ui/atoms/Icon/Icon"; -import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate"; -import { enforceAllowedTags } from "#utils/htmltags"; +import cn from "classnames" +import { type FC, useMemo } from "react" +import { Icon, type IconProps } from "#ui/atoms/Icon/Icon" +import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate" +import { enforceAllowedTags } from "#utils/htmltags" export type DropdownItemProps = React.HTMLAttributes & { - label: string; - info?: string; - icon?: IconProps["name"] | "keep-space"; + label: string + info?: string + icon?: IconProps["name"] | "keep-space" } & ( | { /** * render the component as anchor tag */ - href: string; - target?: string; + href: string + target?: string } | { - href?: never; - disabled?: boolean; + href?: never + disabled?: boolean } - ); + ) /** * Render a dropdown item to be used inside a `Dropdown` component. @@ -47,16 +47,16 @@ export const DropdownItem = withSkeletonTemplate( defaultTag: "button", }), [href, onClick], - ); + ) - const isDisabled = Boolean("disabled" in rest && rest.disabled); + const isDisabled = Boolean("disabled" in rest && rest.disabled) return ( { if (!isDisabled) { - onClick?.(e); + onClick?.(e) } }} href={href} @@ -98,11 +98,11 @@ export const DropdownItem = withSkeletonTemplate( )} - ); + ) }, -); -DropdownItem.displayName = "DropdownItem"; +) +DropdownItem.displayName = "DropdownItem" const FakeIcon: FC = () => { - return
; -}; + return
+} diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx index a2dda487..ad2b3be7 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx +++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx @@ -1,29 +1,29 @@ -import cn from "classnames"; -import { type FC, useEffect, useState } from "react"; -import { DropdownDivider } from "./DropdownDivider"; +import cn from "classnames" +import { type FC, useEffect, useState } from "react" +import { DropdownDivider } from "./DropdownDivider" export interface DropdownMenuProps extends React.HTMLAttributes { /** Menu content */ - children?: React.ReactNode; + children?: React.ReactNode /** Set to `none` to hide the top arrow */ - arrow?: "none"; + arrow?: "none" /** Optional header for the dropdown menu */ - menuHeader?: string; + menuHeader?: string /** * Opening position of the dropdown menu * @default bottom-right */ - menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; + menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right" /** * If set, the arrow will be centered when trigger button is smaller than 50px * Otherwise it will fallback to a default centering based on 32px trigger button */ - parentElementRef?: React.RefObject; + parentElementRef?: React.RefObject /** * Set a wider menu, fixed to 280px. * By default, when no width is set, the menu adjusts its width dynamically to accommodate content, within a range of 150px to 250px. **/ - menuWidth?: "wide"; + menuWidth?: "wide" } export const DropdownMenu: FC = ({ @@ -35,10 +35,10 @@ export const DropdownMenu: FC = ({ menuWidth, ...rest }) => { - const [centerToWidth, setCenterToWidth] = useState(); + const [centerToWidth, setCenterToWidth] = useState() useEffect(() => { - setCenterToWidth(parentElementRef?.current?.clientWidth); - }, [parentElementRef]); + setCenterToWidth(parentElementRef?.current?.clientWidth) + }, [parentElementRef]) return (
= ({ {children}
- ); -}; + ) +} -DropdownMenu.displayName = "DropdownMenu"; +DropdownMenu.displayName = "DropdownMenu" const Arrow: FC<{ - menuPosition: DropdownMenuProps["menuPosition"]; - centerToWidth?: number; + menuPosition: DropdownMenuProps["menuPosition"] + centerToWidth?: number }> = ({ menuPosition = "bottom-right", centerToWidth }) => { - const arrowHeight = 5; - const arrowWidth = 12; + const arrowHeight = 5 + const arrowWidth = 12 const centeringOffset = calculateArrowCenteringOffset({ arrowWidth, centerToWidth, - }); + }) - const alignProp = menuPosition.includes("right") ? "right" : "left"; + const alignProp = menuPosition.includes("right") ? "right" : "left" const arrowDirection = menuPosition === "bottom-right" || menuPosition === "bottom-left" ? "top" - : "bottom"; + : "bottom" const cssForPointingDirection = arrowDirection === "top" ? { @@ -107,7 +107,7 @@ const Arrow: FC<{ : { borderTopWidth: arrowHeight, borderBottomColor: "transparent", - }; + } return ( - ); -}; + ) +} // 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 @@ -131,13 +131,13 @@ function calculateArrowCenteringOffset({ arrowWidth, centerToWidth, }: { - arrowWidth: number; - centerToWidth?: number; + arrowWidth: number + centerToWidth?: number }): number { if (centerToWidth == null || centerToWidth > 50) { - return 10; // default offset calculated on a base of 32px button width + return 10 // default offset calculated on a base of 32px button width } - const centeringOffset = centerToWidth / 2 - arrowWidth / 2; - return centeringOffset; + const centeringOffset = centerToWidth / 2 - arrowWidth / 2 + return centeringOffset } diff --git a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap index f04595c6..e103ba80 100644 --- a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -31,11 +31,11 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = ` class="flex flex-col items-start" >
@@ -76,11 +76,11 @@ exports[`Dropdown > Should be rendering top-left 1`] = ` class="flex flex-col-reverse items-start" >
@@ -121,11 +121,11 @@ exports[`Dropdown > Should be rendering top-right 1`] = ` class="flex flex-col-reverse items-end" >
@@ -166,15 +166,15 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] = class="flex flex-col items-end" >