DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): update button variants following figma (#482)

Browse Source 
* feat(ui): update button variants following figma

* feat(ui): separate size prop to allow for regular and small sized button variants

* update type to no longer include minimal-small

* update uno css config to use new spacing system

* add variants and sizes to file upload; update button and file upload stories

* add mini button variant and update small button

* specify width on icon-only regular variant

* update plus buttons to be mini sizes

* remove redundant classnames

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Preston Cook
2025-01-07 14:59:15 -06:00
committed by GitHub
parent 0d73b13b28
commit 0aa469af81
15 changed files with 172 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/components/common/FileUpload.tsx
View File

@@ -8,7 +8,8 @@ import React from 'react';
interface Props {
className?: string;
style?: React.CSSProperties;
variant: 'filled' | 'outline' | 'single';
variant?: 'filled' | 'outline' | 'minimal';
size?: 'regular' | 'small' | 'mini';
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
icon?: Icon;
iconProps?: IconProps;
@@ -25,7 +26,8 @@ interface Props {
export default function FileUpload({
className,
style,
variant,
variant = 'filled',
size = 'regular',
onChange,
icon,
iconProps,
@@ -53,11 +55,15 @@ export default function FileUpload({
{
'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
variant === 'filled',
'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
'px-2 py-1.25': isIconOnly && variant !== 'outline',
'px-1.75 py-1.25': isIconOnly && variant === 'outline',
'px-3.75': variant === 'outline' && !isIconOnly,
'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border stroke-width-[1px]':
variant === 'outline',
'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'minimal',
'h-10 gap-spacing-3 px-spacing-5': size === 'regular' && !isIconOnly,
'h-10 w-10 p-spacing-2': size === 'regular' && isIconOnly,
'h-[35px] gap-spacing-3 px-spacing-3': size === 'small' && !isIconOnly,
'h-[35px] w-[35px] p-spacing-2': size === 'small' && isIconOnly,
'h-6 p-spacing-2': size === 'mini' && !isIconOnly,
'h-6 w-6 p-0': size === 'mini' && isIconOnly,
},
className
)}
@@ -65,7 +71,10 @@ export default function FileUpload({
>
{Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
{!isIconOnly && (
<Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
<Text
variant={size === 'regular' ? 'h4' : 'small'}
className='inline-flex translate-y-0.08 items-center gap-2'
>
{children}
</Text>
)}