refactor(ui): enforce poyraz button standards

This commit is contained in:
poyrazavsever
2026-07-17 22:14:09 +03:00
parent bf10eb0fb0
commit 236f136a6f
9 changed files with 151 additions and 14 deletions
+13 -2
View File
@@ -4,20 +4,31 @@ import { useFormStatus } from "react-dom";
import { Button } from "poyraz-ui/atoms";
import React from "react";
interface SubmitButtonProps extends React.ComponentProps<typeof Button> {
interface SubmitButtonProps
extends Omit<React.ComponentProps<typeof Button>, "effect" | "variant"> {
pendingText?: string;
variant?: "default" | "secondary";
}
export function SubmitButton({
children,
pendingText,
type = "submit",
variant = "default",
...props
}: SubmitButtonProps) {
const { pending } = useFormStatus();
return (
<Button type={type} disabled={pending} loading={pending} aria-busy={pending} {...props}>
<Button
type={type}
disabled={pending}
loading={pending}
aria-busy={pending}
{...props}
variant={variant}
effect="shine"
>
{pending ? (
<>
{pendingText || children}
+7 -5
View File
@@ -4,6 +4,7 @@ import { signOut } from "@/app/login/actions";
import { ColorModeSync } from "@/components/theme/color-mode-sync";
import type { ColorMode } from "@/lib/color-mode";
import {
Button,
Card,
CardContent,
Typography,
@@ -308,10 +309,11 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
<Button effect="shine"
type="button"
variant="secondary"
aria-label={`${user.displayName} için hesap menüsünü aç`}
className="group flex w-full items-center gap-2 rounded-md border border-transparent p-1.5 text-left outline-none transition-[color,background-color,border-color] hover:border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:border-border data-[state=open]:bg-accent"
className="group h-auto min-h-10 w-full justify-start p-1.5 text-left"
>
<SidebarUserProfile
className="min-w-0 flex-1"
@@ -324,7 +326,7 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</button>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
@@ -355,10 +357,10 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
asChild
className="text-destructive focus:text-destructive data-[highlighted]:text-destructive"
>
<button type="submit" className="w-full gap-2 text-left">
<Button effect="shine" type="submit" variant="secondary" size="sm" className="w-full justify-start gap-2 text-left text-destructive">
<LogOut className="h-4 w-4 shrink-0" aria-hidden="true" />
<span>Çıkış yap</span>
</button>
</Button>
</DropdownMenuItem>
</form>
</DropdownMenuContent>
@@ -41,13 +41,14 @@ export function DestructiveConfirmation({
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline" disabled={loading}>
<Button effect="shine" type="button" variant="secondary" disabled={loading}>
{cancelLabel}
</Button>
</DialogClose>
<Button
effect="shine"
type="button"
variant="destructive"
variant="default"
loading={loading}
aria-busy={loading}
onClick={onConfirm}
+1 -1
View File
@@ -62,7 +62,7 @@ export function LoadingState({ label = "İçerik yükleniyor" }: { label?: strin
export function RetryAction({ onClick }: { onClick: () => void }) {
return (
<Button type="button" variant="outline" size="sm" onClick={onClick}>
<Button effect="shine" type="button" variant="secondary" size="sm" onClick={onClick}>
Yeniden dene
</Button>
);
+8 -1
View File
@@ -7,10 +7,14 @@ import { useFormStatus } from "react-dom";
import { cn } from "@/lib/utils";
type PendingSubmitButtonProps = ComponentProps<typeof Button> & {
type PendingSubmitButtonProps = Omit<
ComponentProps<typeof Button>,
"effect" | "variant"
> & {
idleIcon?: ReactNode;
pendingIcon?: ReactNode;
pendingChildren?: ReactNode;
variant?: "default" | "secondary";
};
export function PendingSubmitButton({
@@ -21,6 +25,7 @@ export function PendingSubmitButton({
pendingChildren,
pendingIcon,
type = "submit",
variant = "default",
...props
}: PendingSubmitButtonProps) {
const { pending } = useFormStatus();
@@ -36,6 +41,8 @@ export function PendingSubmitButton({
aria-busy={pending}
loading={pending && !pendingIcon}
className={cn(className)}
variant={variant}
effect="shine"
>
{icon}
{pending ? pendingChildren ?? children : children}