diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx index b1369d8174a..fc7c1575839 100644 --- a/apps/design-system/content/docs/components/button.mdx +++ b/apps/design-system/content/docs/components/button.mdx @@ -125,17 +125,18 @@ Supports slot behavior with `asChild` prop. Pair a button with a chevron `DropdownMenu` trigger when there are variations of the same action, or alternative ways to accomplish the same goal. The default or most likely option should be used on the exposed button. -When secondary actions are related but distinct—not alternatives to the primary action—display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions). +When secondary actions are related but distinct (not alternatives to the primary action) display the primary action as a button and place the rest in an overflow menu instead. See [Table multiple actions](./table#multiple-actions). -The shared middle border is the tricky part. Do **not** use `border-l-0` on the chevron button — that drops the divider on hover/focus. Instead: +Ensure the middle border is shared rather than doubled-up. Do not use `border-l-0` on the chevron button as that drops the divider on hover/focus. Instead: -- Primary: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover. +- Primary action: `rounded-r-none` and `hover:z-10` so its border stacks above the chevron on hover. - Chevron trigger: `rounded-l-none`, `shrink-0`, `px-[4px] py-[5px]`, and `-ml-px` to overlap the adjacent border by one pixel. +- Both: `focus-visible:z-10` so the focus ring stacks above the neighbour, and `focus-visible:rounded-r-sm` / `focus-visible:rounded-l-sm` so the squared-off edge is slightly rounded while the ring is shown. - Chevron trigger only: `aria-label` describing the menu (the icon is decorative). -Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions, also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary when `layout="responsive"`. +Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions when `layout="responsive"`: also use `flex w-full @lg:w-auto` with `flex-1 @lg:flex-none` on the primary action. ## Accessibility diff --git a/apps/design-system/registry/default/example/admonition-button-split.tsx b/apps/design-system/registry/default/example/admonition-button-split.tsx index edd0ef32a74..0300ac430f7 100644 --- a/apps/design-system/registry/default/example/admonition-button-split.tsx +++ b/apps/design-system/registry/default/example/admonition-button-split.tsx @@ -20,7 +20,7 @@ export default function AdmonitionButtonSplitDemo() { @@ -30,7 +30,7 @@ export default function AdmonitionButtonSplitDemo() { type="button" variant="default" aria-label="More email template editing options" - className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px" + className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm" icon={} /> diff --git a/apps/design-system/registry/default/example/button-split-dropdown.tsx b/apps/design-system/registry/default/example/button-split-dropdown.tsx index 885e1bbebaa..54a1c621c72 100644 --- a/apps/design-system/registry/default/example/button-split-dropdown.tsx +++ b/apps/design-system/registry/default/example/button-split-dropdown.tsx @@ -11,7 +11,11 @@ import { export default function ButtonSplitDropdownDemo() { return (
- @@ -20,7 +24,7 @@ export default function ButtonSplitDropdownDemo() { type="button" variant="default" aria-label="More actions" - className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px" + className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm" icon={} /> diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx index 04452562840..db886aad67d 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/ExperimentalTokenDropdown.tsx @@ -35,7 +35,7 @@ export const ExperimentalTokenDropdown = ({ onCreateToken }: ExperimentalTokenDr diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx index 23c6ba82701..f6322debb67 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition.tsx @@ -28,7 +28,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => { @@ -37,7 +37,7 @@ export const CustomEmailTemplateRestrictionAdmonition = () => { + /> Add destination @@ -166,8 +166,8 @@ export function OrgAuditLogDrains() { @@ -224,8 +224,8 @@ const LogDrainsSettings: NextPageWithLayout = () => { @@ -201,7 +205,7 @@ export const KeyValueFieldArray = < icon={} aria-label={addActionsLabel} disabled={disabled} - className="rounded-l-none px-[4px] py-[5px]" + className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm" />