Skip to content

Commit

Permalink
add Alert Dialog component (#358)
Browse files Browse the repository at this point in the history 
* AlertDialog: add component

* finalize api, start writing docs

* wrap up docs

* bump minor version
  • Loading branch information
@cody-dot-js
cody-dot-js authored Nov 19, 2024
1 parent 4e54ecf commit bb4c529
Show file tree
Hide file tree
Showing 9 changed files with 744 additions and 46 deletions.
2 changes: 1 addition & 1 deletion .envrc
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# hide warnings from direnv
# see https://github.com/direnv/direnv/issues/419#issuecomment-442005962
# see: https://direnv.net/man/direnv.toml.1.html#codewarntimeoutcode
export DIRENV_WARN_TIMEOUT=876000h
export DIRENV_WARN_TIMEOUT=876000h # 100 years in hours

export NVM_DIR="$HOME/.nvm"

Expand Down
2 changes: 2 additions & 0 deletions apps/www/app/components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ const prodReadyComponents = [
*/
const previewComponents = [
//,
"AlertDialog",
"Calendar",
"Pagination",
"Popover",
Expand Down Expand Up @@ -191,6 +192,7 @@ const prodReadyComponentRouteLookup = {
} as const satisfies Record<(typeof prodReadyComponents)[number], Route>;

const previewComponentsRouteLookup = {
AlertDialog: "/components/preview/alert-dialog",
Calendar: "/components/preview/calendar",
Pagination: "/components/preview/pagination",
Popover: "/components/preview/popover",
Expand Down
353 changes: 353 additions & 0 deletions apps/www/app/routes/components.preview.alert-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,353 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogBody,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogIcon,
AlertDialogTitle,
AlertDialogTrigger,
} from "@ngrok/mantle/alert-dialog";
import { Anchor } from "@ngrok/mantle/anchor";
import { Button } from "@ngrok/mantle/button";
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton, fmtCode } from "@ngrok/mantle/code-block";
import { InlineCode } from "@ngrok/mantle/inline-code";
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
import { PreviewBadge } from "~/components/badges";
import { Example } from "~/components/example";
import { Link } from "~/components/link";
import {
PropDefaultValueCell,
PropDescriptionCell,
PropNameCell,
PropRow,
PropsTable,
PropTypeCell,
StringPropType,
} from "~/components/props-table";

export const meta: MetaFunction = () => {
return [
{ title: "@ngrok/mantle — AlertDialog" },
{ name: "description", content: "mantle is ngrok's UI library and design system" },
];
};

export const headers: HeadersFunction = () => {
return {
"Cache-Control": "max-age=300, stale-while-revalidate=604800",
};
};

export default function Page() {
return (
<div className="space-y-16">
<section className="space-y-4">
<div className="flex items-center gap-3">
<h1 id="calendar" className="text-5xl font-medium">
Alert Dialog
</h1>
<PreviewBadge />
</div>
<p className="font-body text-body text-xl">
A modal dialog that interrupts the user with important content and expects a response.
</p>
<div>
<Example className="flex-col gap-6">
<AlertDialog priority="info">
<AlertDialogTrigger asChild>
<Button type="button" appearance="outlined">
Show Info Alert Dialog
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogIcon />
<AlertDialogBody>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from
our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
<AlertDialogAction type="button">Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogBody>
</AlertDialogContent>
</AlertDialog>
<AlertDialog priority="danger">
<AlertDialogTrigger asChild>
<Button type="button" appearance="outlined">
Show Danger Alert Dialog
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogIcon />
<AlertDialogBody>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from
our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
<AlertDialogAction type="button">Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogBody>
</AlertDialogContent>
</AlertDialog>
</Example>
<CodeBlock className="rounded-b-lg rounded-t-none">
<CodeBlockBody>
<CodeBlockCopyButton />
<CodeBlockCode
language="tsx"
value={fmtCode`
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@ngrok/mantle/alert-dialog";
import { Button } from "@ngrok/mantle/button";
<AlertDialog priority="info">
<AlertDialogTrigger asChild>
<Button type="button" appearance="outlined">
Show Info Alert Dialog
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from
our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
<AlertDialogAction type="button">Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
`}
/>
</CodeBlockBody>
</CodeBlock>
</div>
</section>

<section className="space-y-8">
<header className="space-y-4">
<h2 id="api" className="text-3xl font-medium">
API Reference
</h2>
<p className="font-body text-body text-xl">
The <InlineCode>AlertDialog</InlineCode> components are built on top of{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog"
target="_blank"
rel="noopener noreferrer"
>
Radix Alert Dialog
</Anchor>
.
</p>
</header>

<section className="space-y-4">
<header className="space-y-1">
<h3 className="text-xl font-medium">AlertDialog</h3>

<p className="font-body text-body">The root component for the Alert Dialog.</p>
<p className="font-body text-body">
All props from Radix{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#root"
target="_blank"
rel="noopener noreferrer"
>
AlertDialog.Root
</Anchor>
, plus:
</p>
</header>

<PropsTable>
<PropRow>
<PropNameCell name="priority" />
<PropTypeCell>
<ul>
<li>
<StringPropType value="info" />
</li>
<li>
<StringPropType value="danger" />
</li>
</ul>
</PropTypeCell>
<PropDefaultValueCell />
<PropDescriptionCell>
<p>
Indicates the importance or impact level of the AlertDialog, affecting its color and styling to
communicate its purpose to the user.
</p>
</PropDescriptionCell>
</PropRow>
</PropsTable>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogTrigger</h3>

<p className="font-body text-body">A button that opens the Alert Dialog.</p>
<p className="font-body text-body">
Radix{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#trigger"
target="_blank"
rel="noopener noreferrer"
>
AlertDialog.Trigger
</Anchor>{" "}
props.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogContent</h3>

<p className="font-body text-body">
The popover Alert Dialog container. Renders on top of the overlay and is centered in the viewport.
</p>
<p className="font-body text-body">
Radix{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#content"
target="_blank"
rel="noopener noreferrer"
>
AlertDialog.Content
</Anchor>{" "}
props.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogHeader</h3>

<p className="font-body text-body">
Contains the header content of the dialog, including the title and description.
</p>
<p className="font-body text-body">
Same props as a <InlineCode>{"<div>"}</InlineCode> element.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogFooter</h3>

<p className="font-body text-body">
Contains the footer content of the dialog, including the action and cancel buttons.
</p>
<p className="font-body text-body">
Same props as a <InlineCode>{"<div>"}</InlineCode> element.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogTitle</h3>

<p className="font-body text-body">An accessible name to be announced when the dialog is opened.</p>
<p className="font-body text-body">
Alternatively, you can provide <InlineCode>aria-label</InlineCode> or{" "}
<InlineCode>aria-labelledby</InlineCode> to <InlineCode>AlertDialogContent</InlineCode> and exclude this
component.
</p>
<p className="font-body text-body">
Radix{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#title"
target="_blank"
rel="noopener noreferrer"
>
AlertDialog.Title
</Anchor>{" "}
props.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogDescription</h3>

<p className="font-body text-body">An accessible description to be announced when the dialog is opened.</p>
<p className="font-body text-body">
Alternatively, you can provide <InlineCode>aria-describedby</InlineCode> to{" "}
<InlineCode>AlertDialogContent</InlineCode> and exclude this component.
</p>
<p className="font-body text-body">
Radix{" "}
<Anchor
href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#description"
target="_blank"
rel="noopener noreferrer"
>
AlertDialog.Description
</Anchor>{" "}
props.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogAction</h3>

<p className="font-body text-body">
A button that closes the alert dialog and confirms the action. Will default to{" "}
<InlineCode>appearance="filled"</InlineCode>, as well as the priority color from the{" "}
<InlineCode>AlertDialog</InlineCode>
</p>
<p className="font-body text-body">
These buttons should be distinguished visually from the <InlineCode>AlertDialogCancel</InlineCode> button.
</p>
<p className="font-body text-body">
Composes around the mantle <Link to="/components/button">Button</Link> component.
</p>
<p className="font-body text-body">
Same props as the <Link to="/components/button">Button</Link> component.
</p>
</section>

<section className="space-y-1">
<h3 className="text-xl font-medium">AlertDialogCancel</h3>

<p className="font-body text-body">
A button that closes the dialog and cancels the action. Will default to{" "}
<InlineCode>appearance="outlined"</InlineCode> and <InlineCode>priority="neutral"</InlineCode>.
</p>
<p className="font-body text-body">
This button should be distinguished visually from <InlineCode>AlertDialogAction</InlineCode> buttons.
</p>
<p className="font-body text-body">
Composes around the mantle <Link to="/components/button">Button</Link> component.
</p>
<p className="font-body text-body">
Same props as the <Link to="/components/button">Button</Link> component.
</p>
</section>
</section>
</div>
);
}
2 changes: 2 additions & 0 deletions apps/www/app/types/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const routePatterns = [
"/components/label",
"/components/media-object",
"/components/password-input",
"/components/preview/alert-dialog",
"/components/preview/calendar",
"/components/preview/pagination",
"/components/preview/popover",
Expand Down Expand Up @@ -69,6 +70,7 @@ export const routes = [
"/components/label",
"/components/media-object",
"/components/password-input",
"/components/preview/alert-dialog",
"/components/preview/calendar",
"/components/preview/pagination",
"/components/preview/popover",
Expand Down
Loading

1 comment on commit bb4c529

@vercel
Copy link

@vercel vercel bot commented on bb4c529 Nov 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

dev-mantle-docs – ./apps/www

dev-mantle-docs.vercel.app
develop.mantle.ngrok.com
dev-mantle-docs-git-main-ngrok-dev.vercel.app
dev-mantle-docs-ngrok-dev.vercel.app

Please sign in to comment.