Components: fix alert, add expressive style (#630)

This commit is contained in:
prism 2026-01-07 18:11:02 +01:00 • committed by GitHub
parent d7599e3e46
commit 5fd5c7d3dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 20 deletions

View file

@ -37,15 +37,14 @@ export default function AlertTab() {
});
};
const showSecondaryConfirmAlert = () => {
const showExpressiveAlert = () => {
Alerts.show({
title: "Multiple Actions",
body: "This alert has a secondary confirm action.",
confirmText: "Primary Action",
secondaryConfirmText: "Secondary Action",
cancelText: "Cancel",
onConfirm: () => showToast("Primary action!", ToastType.SUCCESS),
onConfirmSecondary: () => showToast("Secondary action!", ToastType.MESSAGE),
title: "Premium Feature",
body: "This feature requires a premium subscription.",
confirmText: "Upgrade Now",
confirmVariant: "expressive",
cancelText: "Maybe Later",
onConfirm: () => showToast("Upgrading!", ToastType.SUCCESS),
});
};
@ -78,12 +77,12 @@ export default function AlertTab() {
</Button>
</SectionWrapper>
<SectionWrapper title="Secondary Confirm">
<SectionWrapper title="Expressive Alert">
<Paragraph color="text-muted" style={{ marginBottom: 8 }}>
Alert with multiple confirm actions.
Alert with premium/expressive styled button.
</Paragraph>
<Button variant="secondary" onClick={showSecondaryConfirmAlert}>
Show Multi-Action Alert
<Button onClick={showExpressiveAlert}>
Show Expressive Alert
</Button>
</SectionWrapper>
@ -115,15 +114,9 @@ export default function AlertTab() {
<Paragraph color="text-muted">
<strong>confirmVariant</strong> - "primary", "critical-primary", or "expressive"
</Paragraph>
<Paragraph color="text-muted">
<strong>secondaryConfirmText</strong> - Text for secondary action button
</Paragraph>
<Paragraph color="text-muted">
<strong>onConfirm</strong> - Callback when confirm clicked
</Paragraph>
<Paragraph color="text-muted">
<strong>onConfirmSecondary</strong> - Callback for secondary action
</Paragraph>
<Paragraph color="text-muted">
<strong>onCancel</strong> - Callback when cancel clicked
</Paragraph>

View file

@ -9,12 +9,11 @@ export interface AlertOptions {
body: React.ReactNode;
confirmText?: string;
cancelText?: string;
secondaryConfirmText?: string;
confirmVariant?: "primary" | "critical-primary" | "expressive";
onConfirm?: () => void;
onCancel?: () => void;
onConfirmSecondary?: () => void;
onCloseCallback?: () => void;
contextKey?: string;
}
export interface AlertsType {