asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui,ui-preset,icons): Fix styling of Select, DropdownMenu, and Checkbox (#7525)

Browse Source 
* progress

* progress

* fix: checkbox styling

* fix(ui,ui-preset): Fix the styling of Select, DropdownMenu, and Checkbox

* update ellipse-solid-mini icon

* cleanup
This commit is contained in:
Kasper Fabricius Kristensen
2024-05-29 21:16:54 +02:00
committed by GitHub
parent 89b0876abc
commit e73b6ce691
11 changed files with 129 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/design-system/ui/src/components/checkbox/checkbox.tsx
View File

@@ -24,7 +24,7 @@ const Checkbox = React.forwardRef<
)}
>
<div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus-visible:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
<Primitives.Indicator className="absolute inset-0">
<Primitives.Indicator className="absolute inset-0 flex items-center justify-center">
{checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
</Primitives.Indicator>
</div>

2
packages/design-system/ui/src/components/container/container.tsx
View File

@@ -13,7 +13,7 @@ const Container = React.forwardRef<
<div
ref={ref}
className={clx(
"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6",
"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-6 py-4",
className
)}
{...props}

25
packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
View File

@@ -103,7 +103,7 @@ const Content = React.forwardRef<
align={align}
collisionPadding={collisionPadding}
className={clx(
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1",
"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
@@ -124,7 +124,10 @@ const Item = React.forwardRef<
<Primitives.Item
ref={ref}
className={clx(
"bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
"focus-visible:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
className
)}
{...props}
@@ -142,13 +145,17 @@ const CheckboxItem = React.forwardRef<
<Primitives.CheckboxItem
ref={ref}
className={clx(
"focus-visible:bg-ui-bg-base-pressed hover:bg-ui-bg-base-hover text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none",
"bg-ui-bg-component text-ui-fg-base relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 txt-compact-small outline-none transition-colors",
"focus-visible:bg-ui-bg-component-pressed",
"active:bg-ui-bg-component-pressed",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
"data-[state=checked]:txt-compact-small-plus",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-3 flex h-5 w-5 items-center justify-center">
<span className="absolute left-2 flex size-[15px] items-center justify-center">
<Primitives.ItemIndicator>
<CheckMini />
</Primitives.ItemIndicator>
@@ -168,12 +175,16 @@ const RadioItem = React.forwardRef<
<Primitives.RadioItem
ref={ref}
className={clx(
"focus-visible:bg-ui-bg-base-pressed hover:bg-ui-base-hover bg-ui-bg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[state=checked]:font-medium data-[disabled]:opacity-50",
"bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
"focus-visible:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
"data-[state=checked]:txt-compact-small-plus",
className
)}
{...props}
>
<span className="absolute left-3 flex h-5 w-5 items-center justify-center">
<span className="absolute left-2 flex size-[15px] items-center justify-center">
<Primitives.ItemIndicator>
<EllipseMiniSolid className="text-ui-fg-base" />
</Primitives.ItemIndicator>
@@ -207,7 +218,7 @@ const Separator = React.forwardRef<
>(({ className, ...props }, ref) => (
<Primitives.Separator
ref={ref}
className={clx("bg-ui-border-base -mx-1 my-1 h-px", className)}
className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
{...props}
/>
))

2
packages/design-system/ui/src/components/select/select.stories.tsx
View File

@@ -80,7 +80,7 @@ export const Default: Story = {
render: () => {
return (
<div className="w-[250px]">
<Select>
<Select open>
<Select.Trigger>
<Select.Value placeholder="Select" />
</Select.Trigger>

25
packages/design-system/ui/src/components/select/select.tsx
View File

@@ -123,7 +123,7 @@ const Content = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={clx(
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -163,7 +163,7 @@ const Label = React.forwardRef<
<SelectPrimitive.Label
ref={ref}
className={clx(
"txt-compact-xsmall-plus text-ui-fg-subtle px-3 py-2",
"txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5",
className
)}
{...props}
@@ -179,26 +179,21 @@ const Item = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => {
const { size } = useSelectContext()
return (
<SelectPrimitive.Item
ref={ref}
className={clx(
"bg-ui-bg-base grid cursor-pointer grid-cols-[20px_1fr] gap-x-2 rounded-md px-3 py-2 outline-none transition-colors",
"hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover",
{
"txt-compact-medium data-[state=checked]:txt-compact-medium-plus":
size === "base",
"txt-compact-small data-[state=checked]:txt-compact-medium-plus":
size === "small",
},
"bg-ui-bg-component grid cursor-pointer grid-cols-[15px_1fr] gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors txt-compact-small items-center",
"focus-visible:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"data-[state=checked]:txt-compact-small-plus",
"disabled:text-ui-fg-disabled",
className
)}
{...props}
>
<span className="flex h-5 w-5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<span className="flex h-[15px] w-[15px] items-center justify-center">
<SelectPrimitive.ItemIndicator className="flex items-center justify-center">
<EllipseMiniSolid />
</SelectPrimitive.ItemIndicator>
</span>
@@ -216,7 +211,7 @@ const Separator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={clx("bg-ui-border-base -mx-1 my-1 h-px", className)}
className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
{...props}
/>
))