From d0f1b56ab574851e8db2a5154a05c005165cae45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20=C5=A0ime=C4=8Dek?= Date: Sun, 25 Feb 2024 11:50:24 +0100 Subject: [PATCH] Tweaked command component input styles --- .changeset/lovely-papayas-move.md | 8 ++++++ .../components/command/Command.stories.tsx | 2 +- .../src/components/command/Command.styles.ts | 10 +++++-- .../src/components/command/CommandEmpty.tsx | 27 ++++++++++++------ .../src/components/command/CommandInput.tsx | 4 +-- .../src/components/command/CommandLoader.tsx | 28 +++++++++++++++++++ packages/ui/src/components/command/index.ts | 1 + .../src/components/popover/Popover.styles.ts | 2 +- .../src/components/select/SelectElement.tsx | 4 +-- 9 files changed, 69 insertions(+), 17 deletions(-) create mode 100644 .changeset/lovely-papayas-move.md create mode 100644 packages/ui/src/components/command/CommandLoader.tsx diff --git a/.changeset/lovely-papayas-move.md b/.changeset/lovely-papayas-move.md new file mode 100644 index 0000000..b35279d --- /dev/null +++ b/.changeset/lovely-papayas-move.md @@ -0,0 +1,8 @@ +--- +"@utima/ui": minor +--- + +UI Updates + +- Added `CommandLoader` component +- Tweaked `Command` input styles diff --git a/packages/ui/src/components/command/Command.stories.tsx b/packages/ui/src/components/command/Command.stories.tsx index cd8c63c..853ada5 100644 --- a/packages/ui/src/components/command/Command.stories.tsx +++ b/packages/ui/src/components/command/Command.stories.tsx @@ -23,7 +23,7 @@ const meta: Meta = { <> - No results found. + diff --git a/packages/ui/src/components/command/Command.styles.ts b/packages/ui/src/components/command/Command.styles.ts index 7d85521..3a2e48c 100644 --- a/packages/ui/src/components/command/Command.styles.ts +++ b/packages/ui/src/components/command/Command.styles.ts @@ -12,16 +12,20 @@ export const commandDef = twOverrides( command: '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5', }, - empty: 'py-6 text-center text-sm', + empty: { + content: + 'py-6 text-sm flex items-center justify-center gap-2 animate-in fade-in zoom-in-95', + icon: 'size-5', + }, group: 'overflow-hidden p-1.5 text-fg [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-fg', input: { wrapper: 'px-1.5 pt-1.5', container: 'flex bg-accent/50 rounded items-center px-3', icon: 'mr-2 h-4 w-4 shrink-0', - loader: 'animate-spin transition-opacity opacity-0 ml-2 h-4 w-4 shrink-0', + loader: 'animate-spin transition-opacity opacity-0 ml-2 size-4 shrink-0', input: - 'bg-accent flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-fg disabled:cursor-not-allowed disabled:opacity-50', + 'bg-accent flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:placeholder disabled:cursor-not-allowed disabled:opacity-50', }, item: 'transition-all cursor-pointer relative flex select-none items-center rounded px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50', list: 'max-h-[300px] overflow-y-auto overflow-x-hidden', diff --git a/packages/ui/src/components/command/CommandEmpty.tsx b/packages/ui/src/components/command/CommandEmpty.tsx index 146c46a..375b08e 100644 --- a/packages/ui/src/components/command/CommandEmpty.tsx +++ b/packages/ui/src/components/command/CommandEmpty.tsx @@ -1,4 +1,5 @@ import { Command as CommandPrimitive } from 'cmdk'; +import { PackageSearch } from 'lucide-react'; import { forwardRef, type ElementRef, @@ -11,15 +12,25 @@ import { commandDef } from './Command.styles'; type CommandEmptyProps = ComponentPropsWithoutRef< typeof CommandPrimitive.Empty ->; +> & { + hasIcon?: boolean; +}; export const CommandEmpty = forwardRef< ElementRef, CommandEmptyProps ->(({ className, ...restProps }, ref) => ( - -)); +>( + ( + { className, hasIcon = true, children = 'No results found', ...restProps }, + ref, + ) => ( + + {hasIcon && } + {children} + + ), +); diff --git a/packages/ui/src/components/command/CommandInput.tsx b/packages/ui/src/components/command/CommandInput.tsx index 347cb76..b98f33c 100644 --- a/packages/ui/src/components/command/CommandInput.tsx +++ b/packages/ui/src/components/command/CommandInput.tsx @@ -1,5 +1,5 @@ import { Command as CommandPrimitive } from 'cmdk'; -import { Loader, Search } from 'lucide-react'; +import { Loader2, Search } from 'lucide-react'; import { forwardRef, type ElementRef, @@ -28,7 +28,7 @@ export const CommandInput = forwardRef< className={cn(commandDef.input.input, className)} {...restProps} /> - diff --git a/packages/ui/src/components/command/CommandLoader.tsx b/packages/ui/src/components/command/CommandLoader.tsx new file mode 100644 index 0000000..441a780 --- /dev/null +++ b/packages/ui/src/components/command/CommandLoader.tsx @@ -0,0 +1,28 @@ +import { Loader2 } from 'lucide-react'; +import { forwardRef, type ComponentProps } from 'react'; + +import { cn } from '@/utils'; + +import { commandDef } from './Command.styles'; + +type CommandLoaderProps = ComponentProps<'div'> & { + hasIcon?: boolean; +}; + +export const CommandLoader = forwardRef( + ( + { className, hasIcon = true, children = 'Loading...', ...restProps }, + ref, + ) => ( +
+ {hasIcon && ( + + )} + {children} +
+ ), +); diff --git a/packages/ui/src/components/command/index.ts b/packages/ui/src/components/command/index.ts index 44789ce..756b6e8 100644 --- a/packages/ui/src/components/command/index.ts +++ b/packages/ui/src/components/command/index.ts @@ -7,3 +7,4 @@ export { CommandList as List } from './CommandList'; export { CommandSeparator as Separator } from './CommandSeparator'; export { CommandShortcut as Shortcut } from './CommandShortcut'; export { CommandDialog as Dialog } from './CommandDialog'; +export { CommandLoader as Loader } from './CommandLoader'; diff --git a/packages/ui/src/components/popover/Popover.styles.ts b/packages/ui/src/components/popover/Popover.styles.ts index 947bb13..6b57306 100644 --- a/packages/ui/src/components/popover/Popover.styles.ts +++ b/packages/ui/src/components/popover/Popover.styles.ts @@ -3,7 +3,7 @@ import { twOverrides } from '@/overrides'; export const popoverDef = twOverrides( { content: - 'z-50 w-72 min-w-[var(--radix-popper-anchor-width)] rounded-md border border-popover-border bg-popover p-4 text-popover-fg shadow-md outline-none 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', + 'z-50 w-auto min-w-[var(--radix-popper-anchor-width)] rounded-md border border-popover-border bg-popover p-4 text-popover-fg shadow-md outline-none 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', }, 'popover', ); diff --git a/packages/ui/src/components/select/SelectElement.tsx b/packages/ui/src/components/select/SelectElement.tsx index 005ea12..a4133b4 100644 --- a/packages/ui/src/components/select/SelectElement.tsx +++ b/packages/ui/src/components/select/SelectElement.tsx @@ -42,9 +42,9 @@ export const SelectElement = forwardRef< )} {...restProps} > - {children} + {children ?? } - + );