diff --git a/documentation-site/components/yard/config/dialog.ts b/documentation-site/components/yard/config/dialog.ts new file mode 100644 index 0000000000..bc7e8eaae6 --- /dev/null +++ b/documentation-site/components/yard/config/dialog.ts @@ -0,0 +1,141 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +import { Dialog, SIZE, PLACEMENT } from "baseui/dialog"; +import { Button, KIND } from "baseui/button"; +import { PropTypes } from "react-view"; +import type { TConfig } from "../types"; + +const DialogConfig: TConfig = { + componentName: "Dialog", + imports: { + "baseui/dialog": { + named: ["Dialog"], + }, + "baseui/button": { + named: ["Button", "KIND"], + }, + }, + scope: { + Dialog, + SIZE, + PLACEMENT, + Button, + KIND, + }, + theme: [], + props: { + isOpen: { + value: false, + type: PropTypes.Boolean, + description: "Toggles Dialog visibility.", + stateful: true, + }, + artwork: { + value: undefined, + type: PropTypes.ReactNode, + description: "Optional leading icon or content.", + }, + onDismiss: { + value: "() => setIsOpen(false);", + type: PropTypes.Function, + description: "A callback that controls dimissle of the dialog.", + propHook: { + what: "false", + into: "isOpen", + }, + }, + showDismissButton: { + value: true, + type: PropTypes.Boolean, + description: + "Determines whether the dismiss button is shown. Ignored if handleDismiss is null or undefined.", + }, + heading: { + value: "Dialog Heading", + type: PropTypes.String, + description: "The value of the dialog heading.", + }, + buttonDock: { + value: `{ + primaryAction: , + secondaryActions: [ + , + ], + }`, + type: PropTypes.Object, + description: "Directly exposes the ButttonDock API", + }, + hasOverlay: { + value: true, + type: PropTypes.Boolean, + description: "Determines whether Dialog is presented modally.", + }, + numHeadingLines: { + value: 2, + defaultValue: 2, + type: PropTypes.Number, + description: + "The maximum number of lines the heading can wrap to before truncation.", + }, + overrides: { + value: undefined, + type: PropTypes.Custom, + description: "Lets you customize all aspects of the component.", + custom: { + names: [ + "Root", + "ScrollContainer", + "Heading", + "Body", + "ButtonDock", + "DismissButton", + ], + sharedProps: {}, + }, + }, + placement: { + value: "PLACEMENT.center", + defaultValue: "PLACEMENT.center", + options: PLACEMENT, + enumName: "PLACEMENT", + type: PropTypes.Enum, + description: "The position of Dialog relative to the viewport", + imports: { + "baseui/dialog": { + named: ["PLACEMENT"], + }, + }, + }, + size: { + value: "SIZE.xSmall", + defaultValue: "SIZE.xSmall", + options: SIZE, + enumName: "SIZE", + type: PropTypes.Enum, + description: "Determines the size of the open Dialog", + imports: { + "baseui/dialog": { + named: ["SIZE"], + }, + }, + }, + children: { + value: `

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium + voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati + cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id + est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. +

`, + type: PropTypes.ReactNode, + description: "Content of the dialog.", + }, + }, +}; + +export default DialogConfig; diff --git a/documentation-site/examples/dialog/images/index.d.ts b/documentation-site/examples/dialog/images/index.d.ts new file mode 100644 index 0000000000..f3065b8b22 --- /dev/null +++ b/documentation-site/examples/dialog/images/index.d.ts @@ -0,0 +1,10 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +declare module "*.jpg" { + const content: string; + export default content; +} diff --git a/documentation-site/examples/dialog/images/venice.jpg b/documentation-site/examples/dialog/images/venice.jpg new file mode 100644 index 0000000000..a1b51b5aae Binary files /dev/null and b/documentation-site/examples/dialog/images/venice.jpg differ diff --git a/documentation-site/examples/dialog/with-background-image.tsx b/documentation-site/examples/dialog/with-background-image.tsx new file mode 100644 index 0000000000..6b85f3946d --- /dev/null +++ b/documentation-site/examples/dialog/with-background-image.tsx @@ -0,0 +1,65 @@ +import * as React from "react"; +import { Dialog, SIZE } from "baseui/dialog"; +import { Button, KIND } from "baseui/button"; +import veniceJpg from "./images/venice.jpg"; + +const BackgroundArtwork: React.FC = () => ( +
+); + +export default function Example() { + const [isOpen, setIsOpen] = React.useState(false); + return ( +
+
+ +
+ setIsOpen(false)} + buttonDock={{ + primaryAction: , + dismissiveAction: ( + + ), + secondaryActions: [ + , + ], + }} + > +

+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil + impedit quo minus id quod maxime placeat facere possimus, omnis + voluptas assumenda est, omnis dolor repellendus. Temporibus autem + quibusdam et aut officiis debitis aut rerum necessitatibus saepe + eveniet ut et voluptates repudiandae sint et molestiae non recusandae. + Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus + asperiores repellat. +

+ +
+ ); +} diff --git a/documentation-site/examples/dialog/without-overlay.tsx b/documentation-site/examples/dialog/without-overlay.tsx new file mode 100644 index 0000000000..fef851493e --- /dev/null +++ b/documentation-site/examples/dialog/without-overlay.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import { Dialog, SIZE } from "baseui/dialog"; +import { Button, KIND } from "baseui/button"; + +export default function Example() { + const [isOpen, setIsOpen] = React.useState(false); + return ( +
+
+ +
+ setIsOpen(false)} + buttonDock={{ + primaryAction: , + dismissiveAction: , + secondaryActions: [ + , + ], + }} + > +

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos dolores + et quas molestias excepturi sint occaecati cupiditate non provident, + similique sunt in culpa qui officia deserunt mollitia animi, id est + laborum et dolorum fuga. +

+ +
+ ); +} diff --git a/documentation-site/pages/components/dialog.mdx b/documentation-site/pages/components/dialog.mdx new file mode 100644 index 0000000000..8c89d97160 --- /dev/null +++ b/documentation-site/pages/components/dialog.mdx @@ -0,0 +1,44 @@ +import Example from "../../components/example"; +import Exports from "../../components/exports"; +import Layout from "../../components/layout"; + +import WithoutOverlay from "examples/dialog/without-overlay.tsx"; +import WithBackgroundImage from "examples/dialog/with-background-image.tsx"; + +import { Dialog, SIZE, PLACEMENT, CLOSE_KIND } from "baseui/dialog"; +import * as DialogExports from "baseui/dialog"; + +import Yard from "../../components/yard/index"; +import dialogYardConfig from "../../components/yard/config/dialog"; + +export default Layout; + +# Dialog + + + +A dialog is a container that floats on top of another surface. Dialogs focus a user's attention on a single-step task, question, or message. + +Dialogs can be presented both modally (i.e. accompanied by a grayed out background) and nonmodally (akin to a popup). + +When the content of the dialog is longer than the available vertical space, the body content and artwork will scroll internally, leaving the heading stuck to the top and the button dock unaffected. + +## Examples + + + + + +By default, Dialog is presented with an overlay that grays out the background content. When `hasOverlay` is false, Dialog will be presented without the overlay, and will function as more of a popup than a modal. + + + + + +The `artwork` prop can accommodate a react component or a rendered element. In this example, the artwork is decorative, so we use the `background-image` css property. If the artwork has semantic meaning, it is appropriate to use an img element. + + diff --git a/documentation-site/routes.jsx b/documentation-site/routes.jsx index b9d98625ad..c5f05a7393 100644 --- a/documentation-site/routes.jsx +++ b/documentation-site/routes.jsx @@ -358,6 +358,10 @@ const routes = [ title: "Card", itemId: "/components/card", }, + { + title: "Dialog", + itemId: "/components/dialog", + }, { title: "Drawer", itemId: "/components/drawer",