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

feat(dashboard,ui): Streamline spacing and sizing (#6061)

Browse Source
This commit is contained in:
Kasper Fabricius Kristensen
2024-01-15 11:43:16 +01:00
committed by GitHub
parent 5dacd4ac9f
commit a2c149e7e5
266 changed files with 10738 additions and 4646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
"use client"
import { ChevronUpDown, EllipseMiniSolid } from "@medusajs/icons"
import { EllipseMiniSolid, TrianglesMini } from "@medusajs/icons"
import * as SelectPrimitive from "@radix-ui/react-select"
import { cva } from "cva"
import * as React from "react"
@@ -33,11 +33,11 @@ const useSelectContext = () => {
* It also accepts all props of the HTML `select` component.
*/
const Root = ({
children,
children,
/**
* The select's size.
*/
size = "base",
size = "base",
...props
}: SelectProps) => {
return (
@@ -63,10 +63,10 @@ Value.displayName = "Select.Value"
const triggerVariants = cva({
base: clx(
"bg-ui-bg-field txt-compact-medium shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
"bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
"data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
"hover:bg-ui-bg-field-hover",
"focus:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
"focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
"aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
"invalid::border-ui-border-error invalid:shadow-borders-error",
"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
@@ -74,8 +74,8 @@ const triggerVariants = cva({
),
variants: {
size: {
base: "h-10 px-3 py-[9px]",
small: "h-8 px-2 py-[5px]",
base: "h-8 px-2 py-1.5 txt-compact-small",
small: "h-7 px-2 py-1 txt-compact-small",
},
},
})
@@ -97,7 +97,7 @@ const Trigger = React.forwardRef<
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronUpDown className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
<TrianglesMini className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
)
@@ -186,7 +186,7 @@ const Item = React.forwardRef<
ref={ref}
className={clx(
"txt-compact-medium 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:bg-ui-bg-base-hover",
"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",