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

62
src/stories/components/FileUpload.stories.tsx
View File

@@ -45,6 +45,62 @@ export const Default: Story = {
},
};
export const Small: Story = {
// @ts-ignore
args: {
children: '',
},
render: props => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} variant='filled' color='ut-black' size='small'>
Upload File
</FileUpload>
<FileUpload {...props} variant='outline' color='ut-black' size='small'>
Upload File
</FileUpload>
<FileUpload {...props} variant='minimal' color='ut-black' size='small'>
Upload File
</FileUpload>
</div>
<hr />
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} icon={ImageSquare} variant='filled' color='ut-black' size='small' />
<FileUpload {...props} icon={ImageSquare} variant='outline' color='ut-black' size='small' />
<FileUpload {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='small' />
</div>
</div>
),
};
export const Mini: Story = {
// @ts-ignore
args: {
children: '',
},
render: props => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} variant='filled' color='ut-black' size='mini'>
Button
</FileUpload>
<FileUpload {...props} variant='outline' color='ut-black' size='mini'>
Button
</FileUpload>
<FileUpload {...props} variant='minimal' color='ut-black' size='mini'>
Button
</FileUpload>
</div>
<hr />
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} icon={ImageSquare} variant='filled' color='ut-black' size='mini' />
<FileUpload {...props} icon={ImageSquare} variant='outline' color='ut-black' size='mini' />
<FileUpload {...props} icon={ImageSquare} variant='minimal' color='ut-black' size='mini' />
</div>
</div>
),
};
export const Disabled: Story = {
args: {
variant: 'filled',
@@ -60,7 +116,7 @@ export const Grid: Story = {
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} variant='filled' color='ut-black' />
<FileUpload {...props} variant='outline' color='ut-black' />
<FileUpload {...props} variant='single' color='ut-black' />
<FileUpload {...props} variant='minimal' color='ut-black' />
</div>
<hr />
@@ -68,7 +124,7 @@ export const Grid: Story = {
<div style={{ display: 'flex', gap: '15px' }}>
<FileUpload {...props} variant='filled' color='ut-black' disabled />
<FileUpload {...props} variant='outline' color='ut-black' disabled />
<FileUpload {...props} variant='single' color='ut-black' disabled />
<FileUpload {...props} variant='minimal' color='ut-black' disabled />
</div>
</div>
),
@@ -92,7 +148,7 @@ export const PrettyColors: Story = {
<FileUpload {...props} variant='outline' color={color}>
Button
</FileUpload>
<FileUpload {...props} variant='single' color={color}>
<FileUpload {...props} variant='minimal' color={color}>
Button
</FileUpload>
</div>