refactor(ui): enforce poyraz button standards
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user