mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Danny White
be01b38118
## Summary - Add `button-split-dropdown` and `admonition-button-split` design-system examples for primary action + chevron menu. - Document the shared middle border pattern (`-ml-px`, `hover:z-10`; avoid `border-l-0`) in Button and Admonition docs. - Mirrors the approach established in the custom SMTP email templates admonition. ## Test plan - [ ] Open design-system site and verify `Button → Split with dropdown` preview renders correctly - [ ] Open `Admonition → Split button with dropdown` preview and confirm middle border looks correct on hover/focus - [ ] Confirm peek code shows the documented class names <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added new split-button dropdown live demos, including icon/chevron-triggered menus with actionable items. * Added an admonition demo demonstrating a split primary button plus dropdown trigger with responsive layout. * **Documentation** * Expanded “Split with dropdown” guidance with pairing/when-to-use rules, required styling/border behavior, and responsive layout instructions for the primary + chevron actions. * Updated button documentation heading capitalization to match typography standards. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { ChevronDown } from 'lucide-react'
|
||
import {
|
||
Button,
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from 'ui'
|
||
import { Admonition } from 'ui-patterns/admonition'
|
||
|
||
export default function AdmonitionButtonSplitDemo() {
|
||
return (
|
||
<Admonition
|
||
type="default"
|
||
layout="responsive"
|
||
title="Set up custom SMTP to edit templates"
|
||
description="Emails will be sent using the default templates. Set up custom SMTP to edit their subject and body."
|
||
actions={
|
||
<div className="flex w-full @lg:w-auto">
|
||
<Button
|
||
type="button"
|
||
variant="default"
|
||
className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10"
|
||
>
|
||
Set up SMTP
|
||
</Button>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
type="button"
|
||
variant="default"
|
||
aria-label="More email template editing options"
|
||
className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
|
||
icon={<ChevronDown />}
|
||
/>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-52">
|
||
<DropdownMenuItem>
|
||
<div className="flex flex-col gap-y-0.5">
|
||
<p className="block text-foreground">Upgrade to Pro</p>
|
||
<p className="block text-foreground-lighter text-balance">
|
||
Customize templates while using Supabase’s email service
|
||
</p>
|
||
</div>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem>
|
||
<div className="flex flex-col gap-y-0.5">
|
||
<p className="block text-foreground">Configure Send Email hook</p>
|
||
<p className="block text-foreground-lighter text-balance">
|
||
Send auth emails through your own workflow
|
||
</p>
|
||
</div>
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
}
|
||
/>
|
||
)
|
||
}
|