feat: add Dialog component

Author: logonoff

workspaces/core/scss/components/_dialog.scss

@@ -0,0 +1,92 @@
+@use "../theme/base" as *;
+
+/*
+ * Card
+ */
+.#{$shale}dialog {
+  --#{$shale}dialog-transition-duration: 0.125s;
+
+  transition:
+    display var(--#{$shale}dialog-transition-duration) allow-discrete,
+    overlay var(--#{$shale}dialog-transition-duration) allow-discrete;
+  animation: #{$shale}dialog-exit var(--#{$shale}dialog-transition-duration)
+    ease-out;
+  background: var(--#{$shale}background);
+  border-radius: 0.4em;
+  border: 1px solid var(--#{$shale}secondary-border);
+  box-shadow: var(--#{$shale}shadow-puffy);
+  padding: 0;
+
+  &::backdrop {
+    animation: #{$shale}dialog-backdrop-exit
+      var(--#{$shale}dialog-transition-duration) ease-in;
+    transition: overlay var(--#{$shale}dialog-transition-duration)
+      allow-discrete;
+    background: var(--#{$shale}dialog-backdrop);
+  }
+
+  &[open] {
+    animation: #{$shale}dialog-enter var(--#{$shale}dialog-transition-duration)
+      ease-out;
+  }
+  &[open]::backdrop {
+    animation: #{$shale}dialog-backdrop-enter
+      var(--#{$shale}dialog-transition-duration) ease-in;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{$shale}dialog {
+    transition: none !important;
+    animation: none !important;
+
+    &::backdrop {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}
+
+@keyframes #{$shale}dialog-enter {
+  from {
+    opacity: 0;
+    transform: scaleX(1) scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scaleX(1) scaleY(1);
+  }
+}
+
+@keyframes #{$shale}dialog-exit {
+  from {
+    opacity: 1;
+    transform: scaleX(1) scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scaleX(1) scaleY(0);
+  }
+}
+
+@keyframes #{$shale}dialog-backdrop-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes #{$shale}dialog-backdrop-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

workspaces/core/scss/shale.scss

@@ -17,6 +17,7 @@
 @use "components/card";
 @use "components/command-bar";
 @use "components/container";
+@use "components/dialog";
 @use "components/footer";
 @use "components/icons";
 @use "components/input";

workspaces/core/scss/theme/_contrast.scss

@@ -82,6 +82,9 @@
   --#{$shale}button-inset-border-hover: Highlight;
   --#{$shale}button-inset-border-active: Highlight;
 
+  /* Dialog */
+  --#{$shale}dialog-backdrop: rgba(0, 0, 0, 0.85);
+
   /* Input */
   --#{$shale}input-background: Canvas;
   --#{$shale}input-background-disabled: transparent;

workspaces/core/scss/theme/_dark.scss

@@ -85,6 +85,9 @@
   --#{$shale}button-inset-border-hover: #666;
   --#{$shale}button-inset-border-active: var(--#{$shale}accent-800);
 
+  /* Dialog */
+  --#{$shale}dialog-backdrop: rgba(0, 0, 0, 0.6);
+
   /* Input */
   --#{$shale}input-background: #555 linear-gradient(#606060, #555);
   --#{$shale}input-background-disabled: #444 linear-gradient(#444, #333);

workspaces/core/scss/theme/_light.scss

@@ -87,6 +87,9 @@
   --#{$shale}button-inset-border-hover: #fdfdfd;
   --#{$shale}button-inset-border-active: var(--#{$shale}accent-200);
 
+  /* Dialog */
+  --#{$shale}dialog-backdrop: rgba(0, 0, 0, 0.6);
+
   /* Input */
   --#{$shale}input-background: white linear-gradient(#f9f9f9, white);
   --#{$shale}input-background-disabled: #e3e3e3

workspaces/react/reports/react.api.md

@@ -72,6 +72,13 @@ export type ComponentProp<C extends ElementType> = {
 // @alpha
 export const Container: PolymorphicComponent<"div", {}>;
 
+// @alpha
+export const Dialog: FC<DialogProps>;
+
+// @alpha (undocumented)
+export interface DialogProps extends React.HTMLAttributes<HTMLDialogElement> {
+}
+
 // @alpha
 export const FlexContainer: PolymorphicComponent<"div", BaseFlexContainerProps>;
 

workspaces/react/src/components/Dialog.tsx

@@ -0,0 +1,47 @@
+import type { FC } from "react";
+import { css } from "../utils/css";
+
+/** @alpha */
+export interface DialogProps extends React.HTMLAttributes<HTMLDialogElement> {}
+
+/**
+ * The Dialog component is a modal dialog box that overlays the current page.
+ * It is based on the native HTML `<dialog>` element and cannot be moved or resized.
+ *
+ * @example Basic usage with actions
+ * ```tsx
+ * <>
+ *   <Button type="button" command="show-modal" commandfor="my-dialog" aria-haspopup="dialog">Open Dialog</Button>
+ *
+ *   <Dialog id="my-dialog" style={{ minWidth: "400px" }}>
+ *     <Header>
+ *       <HeaderTitle>
+ *         <HeaderText>This is a dialog</HeaderText>
+ *       </HeaderTitle>
+ *     <CaptionMenu>
+ *       <CaptionButton title="Close" type="button" commandfor="my-dialog" command="close">
+ *         ×
+ *       </CaptionButton>
+ *     </CaptionMenu>
+ *     </Header>
+ *     <FlexContainer variant="center">
+ *       <P>Here, have some actions to choose from.</P>
+ *     </FlexContainer>
+ *     <CommandBar variant="space-between" gutter>
+ *       <Button className="shale-v1-flex-grow">Nothing</Button>
+ *       <Button className="shale-v1-flex-grow">Nothing</Button>
+ *       <Button className="shale-v1-flex-grow" commandfor="my-dialog" command="close">Close</Button>
+ *     </CommandBar>
+ *   </Dialog>
+ * </>
+ * ```
+ *
+ * @alpha
+ */
+export const Dialog: FC<DialogProps> = (props) => {
+  return (
+    <dialog {...props} className={css("shale-v1-dialog", props.className)}>
+      {props.children}
+    </dialog>
+  );
+};

workspaces/react/src/index.ts

@@ -7,11 +7,11 @@
 
 // Core types
 export type {
+  ComponentProp,
   PolymorphicComponent,
   PolymorphicComponentProp,
-  ComponentProp,
 } from "./types/helpers";
-export type { StateVariant, ShadowVariant } from "./types/variants";
+export type { ShadowVariant, StateVariant } from "./types/variants";
 
 // Layout & Structure
 export { Container, FlexContainer, FlexForm } from "./components/Container";
@@ -23,8 +23,12 @@ export type { FlexItemProps } from "./components/FlexItem";
 export { Card } from "./components/Card";
 export type { CardProps } from "./components/Card";
 
+// Dialog
+export { Dialog } from "./components/Dialog";
+export type { DialogProps } from "./components/Dialog";
+
 // Typography
-export { H1, H2, H3, H4, H5, H6, P, Code } from "./components/Typography";
+export { Code, H1, H2, H3, H4, H5, H6, P } from "./components/Typography";
 
 // Forms & Inputs
 export { Button } from "./components/Button";
@@ -43,11 +47,11 @@ export { Link } from "./components/Link";
 export type { BaseLinkProps } from "./components/Link";
 
 // Navigation
-export { Header, HeaderTitle, HeaderText } from "./components/Header";
+export { Header, HeaderText, HeaderTitle } from "./components/Header";
 export type { BaseHeaderProps } from "./components/Header";
 
 export { Footer } from "./components/Footer";
-export { Nav, MenuBarButton } from "./components/Nav";
+export { MenuBarButton, Nav } from "./components/Nav";
 
 export type { BaseMenuBarButtonProps } from "./components/Nav";
 export { SkipToContent } from "./components/SkipToContent";

workspaces/website/src/app/docs/components.tsx

@@ -17,6 +17,7 @@ export const components: Record<
   "/docs/card": { name: "Card", components: ["Card"] },
   "/docs/command-bar": { name: "CommandBar", components: ["CommandBar"] },
   "/docs/container": { name: "Container", components: ["Container"] },
+  "/docs/dialog": { name: "Dialog", components: ["Dialog"] },
   "/docs/flex": {
     name: "Flex",
     components: ["FlexContainer", "FlexItem", "FlexForm"],

workspaces/website/src/app/docs/dialog/page.tsx

@@ -0,0 +1,3 @@
+import { ComponentDocs } from "@/components/ComponentDoc/ComponentDoc";
+
+export default () => <ComponentDocs pathname="/docs/dialog" />;