Skip to content

Commit

Permalink
feat(omi-templates): add compound variants for button component
Browse files Browse the repository at this point in the history
  • Loading branch information
@dntzhang
dntzhang committed Feb 14, 2024
1 parent 8318778 commit d5d65bc
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 23 deletions.
130 changes: 124 additions & 6 deletions packages/omi-templates/src/components/omiu/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ export const buttonVariants = cva(
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
base: 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300 dark:text-primary-foreground dark:bg-zinc-600 dark:hover:bg-zinc-500', // Adjust base variant as needed
outline: 'border border-input bg-background hover:text-primary hover:border-primary', // Existing outline variant
dashed: 'border border-dashed border-zinc-300 hover:text-primary hover:border-primary', // Add dashed variant
Expand Down Expand Up @@ -38,14 +37,133 @@ export const buttonVariants = cva(
},

theme: {
primary: 'text-primary', // Add primary theme
danger: 'text-danger', // Add danger theme
warning: 'text-warning', // Add warning theme
success: 'text-success', // Add success theme
default: '',
primary: 'bg-primary text-white', // Add primary theme
danger: 'bg-red-600 text-white', // Add danger theme
warning: 'bg-orange-600 text-white', // Add warning theme
success: 'bg-green-600 text-white', // Add success theme
},
},
compoundVariants: [
{
variant: 'base',
theme: 'default',
className: 'hover:bg-zinc-300 dark:hover:bg-zinc-500',
},
{
variant: 'outline',
theme: 'default',
className: 'hover:!bg-transparent',
},
{
variant: 'dashed',
theme: 'default',
className: 'hover:!bg-transparent',
},
{
variant: 'text',
theme: 'default',
className: '',
},

{
variant: 'base',
theme: 'primary',
className: '!bg-primary !text-primary-foreground hover:!bg-primary/70',
},
{
variant: 'outline',
theme: 'primary',
className:
'bg-transparent text-primary border-primary hover:border-primary/70 hover:text-primary/70 dark:brightness-125',
},
{
variant: 'dashed',
theme: 'primary',
className:
'bg-transparent border border-dashed border-primary hover:text-primary/70 hover:border-primary/70 text-primary dark:brightness-125',
},
{
variant: 'text',
theme: 'primary',
className:
'bg-transparent text-primary hover:text-primary/70 hover:bg-zinc-200 dark:hover:bg-zinc-500 dark:brightness-125',
},

{
variant: 'base',
theme: 'danger',
className: '!bg-red-600 !text-primary-foreground hover:!bg-red-600/70',
},
{
variant: 'outline',
theme: 'danger',
className:
'bg-transparent text-red-600 border-red-600 hover:border-red-600/70 hover:text-red-600/70 dark:brightness-125',
},
{
variant: 'dashed',
theme: 'danger',
className:
'bg-transparent border border-dashed border-red-600 hover:text-red-600/70 hover:border-red-600/70 text-red-600 dark:brightness-125',
},
{
variant: 'text',
theme: 'danger',
className:
'bg-transparent text-red-600 hover:text-red-600/70 hover:bg-zinc-200 dark:hover:bg-zinc-500 dark:brightness-125',
},

{
variant: 'base',
theme: 'warning',
className: '!bg-orange-600 !text-primary-foreground hover:!bg-orange-600/70',
},
{
variant: 'outline',
theme: 'warning',
className:
'bg-transparent text-orange-600 border-orange-600 hover:border-orange-600/70 hover:text-orange-600/70 dark:brightness-125',
},
{
variant: 'dashed',
theme: 'warning',
className:
'bg-transparent border border-dashed border-orange-600 hover:text-orange-600/70 hover:border-orange-600/70 text-orange-600 dark:brightness-125',
},
{
variant: 'text',
theme: 'warning',
className:
'bg-transparent text-orange-600 hover:text-orange-600/70 hover:bg-zinc-200 dark:hover:bg-zinc-500 dark:brightness-125',
},

{
variant: 'base',
theme: 'success',
className: '!bg-green-600 !text-primary-foreground hover:!bg-green-600/70',
},
{
variant: 'outline',
theme: 'success',
className:
'bg-transparent text-green-600 border-green-600 hover:border-green-600/70 hover:text-green-600/70 dark:brightness-125',
},
{
variant: 'dashed',
theme: 'success',
className:
'bg-transparent border border-dashed border-green-600 hover:text-green-600/70 hover:border-green-600/70 text-green-600 dark:brightness-125',
},
{
variant: 'text',
theme: 'success',
className:
'bg-transparent text-green-600 hover:text-green-600/70 hover:bg-zinc-200 dark:hover:bg-zinc-500 dark:brightness-125',
},
],
defaultVariants: {
variant: 'default',
variant: 'base',
size: 'medium',
shape: 'rectangle',
theme: 'primary',
Expand Down
78 changes: 63 additions & 15 deletions packages/omi-templates/src/pages/components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,71 @@ export function Questionnaire() {
return (
<div class="max-w-[800px] mx-auto text-left px-4 py-10">
<h1 class="text-3xl font-bold mb-6">Button 按钮</h1>
<p class="mb-6">按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
<p>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>

<h2 class="text-2xl font-bold mb-6">按钮类型</h2>
<h2 class="text-2xl font-bold my-6">按钮 Variant 和 Theme</h2>

<div class="flex gap-2">
<o-button theme="default" variant="base">
填充按钮
</o-button>
<o-button theme="default" variant="outline">
描边按钮
</o-button>
<o-button theme="default" variant="dashed">
虚框按钮
</o-button>
<o-button theme="default" variant="text">
文字按钮
</o-button>
<div>
<div class="flex gap-3 mb-2">
<o-button theme="default">填充按钮</o-button>
<o-button variant="outline" theme="default">
描边按钮
</o-button>
<o-button variant="dashed" theme="default">
虚框按钮
</o-button>
<o-button variant="text" theme="default">
文字按钮
</o-button>
</div>
<div class="flex gap-3 mb-2">
<o-button theme="primary">填充按钮</o-button>
<o-button variant="outline" theme="primary">
描边按钮
</o-button>
<o-button variant="dashed" theme="primary">
虚框按钮
</o-button>
<o-button variant="text" theme="primary">
文字按钮
</o-button>
</div>
<div class="flex gap-3 mb-2">
<o-button theme="danger">填充按钮</o-button>
<o-button variant="outline" theme="danger">
描边按钮
</o-button>
<o-button variant="dashed" theme="danger">
虚框按钮
</o-button>
<o-button variant="text" theme="danger">
文字按钮
</o-button>
</div>
<div class="flex gap-3 mb-2">
<o-button theme="warning">填充按钮</o-button>
<o-button variant="outline" theme="warning">
描边按钮
</o-button>
<o-button variant="dashed" theme="warning">
虚框按钮
</o-button>
<o-button variant="text" theme="warning">
文字按钮
</o-button>
</div>
<div class="flex gap-3 mb-2">
<o-button theme="success">填充按钮</o-button>
<o-button variant="outline" theme="success">
描边按钮
</o-button>
<o-button variant="dashed" theme="success">
虚框按钮
</o-button>
<o-button variant="text" theme="success">
文字按钮
</o-button>
</div>
</div>
</div>
)
Expand Down
9 changes: 7 additions & 2 deletions packages/omi-templates/src/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export function Home() {
variant="outline"
tag="a"
target="_blank"
theme="default"
href="https://github.com/Tencent/omi/tree/master/packages/omi-templates"
>
<i class="t-icon t-icon-logo-github-filled mr-2 text-lg"></i>源代码
Expand Down Expand Up @@ -83,7 +84,9 @@ export function Home() {
</p>
<div class="flex space-x-4">
<o-button>按钮1</o-button>
<o-button variant="outline">按钮2</o-button>
<o-button variant="outline" theme="default">
按钮2
</o-button>
</div>
</div>
<div class="w-1/2">
Expand Down Expand Up @@ -149,7 +152,9 @@ export function Home() {
<p class="text-zinc-600 mb-8 dark:text-foreground">这里是描述内容。</p>
<div class="flex justify-center space-x-4">
<o-button>按钮1</o-button>
<o-button variant="outline">按钮2</o-button>
<o-button variant="outline" theme="default">
按钮2
</o-button>
</div>
</div>
</section>
Expand Down

0 comments on commit d5d65bc

Please sign in to comment.