Last state

Signed-off-by: gpbl <[email protected]>
gpbl · Feb 26, 2024 · f2f7243 · f2f7243
1 parent 45ec146
commit f2f7243
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 62 deletions.
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -1,15 +1,13 @@
 ---
+section: Introduction
+description: DayPicker is a React component to build date pickers, calendars, and date inputs for web applications.
 navigationLabel: Get Started
 sort: 1
 ---
 
-_Introduction_
-
 # React DayPicker
 
-> DayPicker is a React component to build date pickers, calendars, and date inputs for web applications.
-
-<Flex justify="center" mb="9">
+<Flex justify="center" mb="8" mt="-2">
   <Card size="3">
     <Examples.Start />
   </Card>
@@ -31,6 +29,11 @@ DayPicker is available as an npm package and requires [date-fns](https://date-fn
 npm install react-day-picker date-fns
 ```
 
+<Callout icon="info">
+  See the [Upgrading Guide](/docs/upgrading) if you are upgrading from a
+  previous version.
+</Callout>
+
 ## Usage
 
 To use DayPicker, import the `<DayPicker />` component and its default style:

diff --git a/website/app/globals.css b/website/app/globals.css
@@ -3,14 +3,14 @@
 @tailwind utilities;
 
 :root {
-  --breadcrumbs-height: 36px;
+  --breadcrumbs-height: 48px;
   --header-height: 48px;
-  --header-full: 84px; /* Includes breadcrumbs */
+  --header-full: 96px; /* Includes breadcrumbs */
   --sidebar-width: 256px;
 }
 
 code {
-  font-size: 13px;
+  @apply font-mono;
 }
 
 @layer utilities {

diff --git a/website/components/DocBreadcrumbs.tsx → website/components/Breadcrumbs.tsx b/website/components/DocBreadcrumbs.tsx → website/components/Breadcrumbs.tsx
@@ -5,18 +5,19 @@ import {
   Cross1Icon,
   HamburgerMenuIcon,
 } from "@radix-ui/react-icons";
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Flex, IconButton, Text } from "@radix-ui/themes";
 
 export interface DocBreadcrumbsProps {
   doc: Doc;
 }
 
-export function DocBreadcrumbs(props: DocBreadcrumbsProps) {
+export function Breadcrumbs(props: DocBreadcrumbsProps) {
   const sidebar = useSidebar();
   return (
     <Flex py="2" align="center" gap="1" asChild wrap="nowrap">
-      <nav aria-label="Breadcrumbs">
-        <Button
+      <nav aria-label="Breadcrumbs" className="h-breadcrumbs">
+        <IconButton
+          size="3"
           className="xl:hidden"
           variant="ghost"
           onClick={() => sidebar.setIsOpen(!sidebar.isOpen)}
@@ -25,11 +26,11 @@ export function DocBreadcrumbs(props: DocBreadcrumbsProps) {
           aria-expanded={sidebar.isOpen}
         >
           {sidebar.isOpen ? (
-            <Cross1Icon width="18" height="18" />
+            <Cross1Icon width="22" height="22" />
           ) : (
-            <HamburgerMenuIcon width="18" height="18" />
+            <HamburgerMenuIcon width="22" height="22" />
           )}
-        </Button>
+        </IconButton>
         <ChevronRightIcon width="18" height="18" />
         <Text size="2">{props.doc.section}</Text>
         <ChevronRightIcon width="18" height="18" />

diff --git a/website/components/Callout.module.css b/website/components/Callout.module.css
@@ -1,8 +1,9 @@
 .Callout {
+  @apply my-2;
   align-items: center;
 }
 
 .Callout p {
   @apply m-0;
-  @apply text-xs;
+  /* @apply text-sm; */
 }
diff --git a/website/components/Callout.tsx b/website/components/Callout.tsx
@@ -7,9 +7,9 @@ import styles from "./Callout.module.css";
 
 export function Callout(props: PropsWithChildren<{ icon?: "info" }>) {
   return (
-    <RadixCallout.Root className={styles.Callout} size="1">
+    <RadixCallout.Root className={styles.Callout}>
       <RadixCallout.Icon>
-        <InfoCircledIcon />
+        <InfoCircledIcon width="22" height="22" />
       </RadixCallout.Icon>
       <Box>{props.children}</Box>
     </RadixCallout.Root>

diff --git a/website/components/DocsLayout.tsx b/website/components/DocsLayout.tsx
@@ -2,7 +2,7 @@ import { DocsStaticProps } from "@/pages/docs/[[...slug]]";
 import { Box, Flex, Separator } from "@radix-ui/themes";
 
 import { useSidebar } from "@/lib/sidebar";
-import { DocBreadcrumbs } from "./DocBreadcrumbs";
+import { Breadcrumbs } from "./Breadcrumbs";
 import { DocHeader } from "./DocHeader";
 import { Sidebar } from "./Sidebar";
 import { TableOfContent } from "./TableOfContent";
@@ -20,16 +20,19 @@ export function DocsLayout(props: DocsLayoutProps) {
     <Box>
       {/* Breadcrumbs */}
       <Box
-        className="fixed inset-x-0 top-header z-10 h-breadcrumbs w-full border-b bg-page-background px-4 xl:hidden"
+        className="fixed inset-x-0 top-header z-10 w-full border-b bg-page-background px-4 xl:hidden"
         style={{ borderColor: "var(--gray-a5)" }}
       >
-        <DocBreadcrumbs doc={doc} />
+        <Breadcrumbs doc={doc} />
       </Box>
 
       {/* Sidebar */}
       <Box
-        className={`b-0 shadow-sidebar fixed top-header-full z-10 h-full w-full transform overflow-auto bg-page-background p-4 transition-transform duration-200 ease-in-out sm:w-sidebar xl:top-header xl:block xl:translate-x-0 xl:shadow-none ${sidebar.isOpen ? "translate-x-0" : "-translate-x-full"}`}
-        style={{ height: "calc(100vh - var(--header-height))" }}
+        className={`b-0 sm:shadow-sidebar pt-0transition-transform fixed top-header-full z-10 h-full w-full transform scroll-pb-32 overflow-auto bg-page-background p-4 duration-200 ease-in-out sm:w-sidebar xl:top-header xl:block xl:translate-x-0 xl:shadow-none ${sidebar.isOpen ? "translate-x-0" : "-translate-x-full"}`}
+        style={{
+          height: "calc(100vh - var(--header-full))",
+          marginTop: 1,
+        }}
       >
         <Sidebar navigation={navigation} />
       </Box>
@@ -41,6 +44,7 @@ export function DocsLayout(props: DocsLayoutProps) {
           className="max-w-screen-lg xl:max-w-screen-xl"
           p={{ initial: "4", lg: "8", xl: "9" }}
           asChild
+          style={{ maxWidth: "120ch" }}
         >
           <main>
             <Flex>

diff --git a/website/components/mdx-components.tsx b/website/components/mdx-components.tsx
@@ -133,7 +133,7 @@ export const components: MDXComponents = {
           return <></>;
         }
         return (
-          <Flex justify="center" mb="7">
+          <Flex justify="center">
             <Component />
           </Flex>
         );
@@ -204,7 +204,8 @@ export const components: MDXComponents = {
     return (
       <Box
         p="4"
-        my="8"
+        my="2"
+        mb="8"
         mx="auto"
         className="overflow-auto rounded-md border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900"
         style={{
@@ -229,19 +230,23 @@ export const components: MDXComponents = {
 
 function CodeBlockTitle(props: PropsWithChildren) {
   return (
-    <Flex mt="6" mb="-9" ml="4" width="auto" p="2">
+    <Flex mt="-2">
       <Text
         size="1"
         style={{
-          color: "var(--slate-a11)",
           backgroundColor: "var(--slate-2)",
-          boxShadow: "0 0 0 1px var(--slate-a5)",
-          borderRadius: "var(--radius-2)",
+          border: "1px solid var(--slate-a4)",
+          borderTopLeftRadius: "var(--radius-2)",
+          borderTopRightRadius: "var(--radius-2)",
           padding: "var(--space-1) var(--space-2)",
-          fontFamily: "var(--font-mono)",
+          transform: "translateY(calc(1em - 3px)) translateX(1em)",
+          borderBottom: 0,
+          minWidth: "120px",
+          paddingBlock: "var(--space-1) var(--space-2)",
+          fontWeight: "bold",
         }}
       >
-        <code>{props.children}</code>
+        {props.children}
       </Text>
     </Flex>
   );

diff --git a/website/examples/DatePickerModal.tsx b/website/examples/DatePickerModal.tsx
@@ -4,8 +4,10 @@ import {
   Flex,
   Heading,
   IconButton,
+  Separator,
   Text,
   TextField,
+  VisuallyHidden,
 } from "@radix-ui/themes";
 import { useEffect, useId, useRef, useState } from "react";
 import { DayPicker } from "react-day-picker";
@@ -40,13 +42,6 @@ export function DatePickerModal() {
     };
   }, [isDialogOpen]);
 
-  // Function to handle Enter keypress on the input field
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (isDialogOpen) return;
-    if (event.key !== "Enter") return;
-    dialogRef.current?.showModal();
-  };
-
   const handleSelect = (date: Date) => {
     setSelectedDate(date);
     dialogRef.current?.close();
@@ -55,61 +50,63 @@ export function DatePickerModal() {
   return (
     <Flex align="center">
       <Box>
-        <Text weight="bold" as="label" htmlFor="input" className="pr-3">
-          Your Birthday:
+        <Text weight="bold" as="label" htmlFor="booking-input" className="pr-3">
+          Booking Date:
         </Text>
       </Box>
       <TextField.Root size={"3"}>
         <TextField.Input
-          id="input"
+          id="booking-input"
           type="text"
-          onKeyDown={handleKeyDown}
-          onClick={toggleDialog}
-          readOnly
-          aria-controls="dialog"
-          aria-haspopup="dialog"
-          aria-expanded={isDialogOpen}
           value={selectedDate ? selectedDate.toDateString() : ""}
+          readOnly
         />
         <TextField.Slot>
           <IconButton
             variant="ghost"
             onClick={toggleDialog}
-            aria-live="assertive"
             aria-controls="dialog"
             aria-haspopup="dialog"
             aria-expanded={isDialogOpen}
+            aria-label=" Open calendar to choose booking date"
           >
             <CalendarIcon width="24" height="24" />
           </IconButton>
         </TextField.Slot>
       </TextField.Root>
-
+      <VisuallyHidden aria-live="assertive" aria-atomic="true">
+        {selectedDate !== undefined && (
+          <>Selected: {selectedDate.toDateString()}</>
+        )}
+      </VisuallyHidden>
       <dialog
         id={dialogId}
         onClose={() => setIsDialogOpen(false)}
         ref={dialogRef}
-        className="rounded-md p-8 pt-20"
+        role="dialog"
+        aria-model="true"
+        className="rounded-md p-6"
         aria-labelledby={headerId}
-        aria-describedby="dialog-description"
       >
+        <Box>
+          <Flex justify="between" align="center">
+            <Heading id={headerId}>Date Picker</Heading>
+            <IconButton
+              variant="ghost"
+              onClick={toggleDialog}
+              aria-label="Close Date Picker Dialog"
+            >
+              <Cross2Icon width="24" height="24" />
+            </IconButton>
+          </Flex>
+          <Separator size="4" my="4" color="gray" />
+        </Box>
         <DayPicker
           autoFocus
           mode="single"
           selected={selectedDate}
           onSelect={handleSelect}
         />
-        <Flex
-          justify="between"
-          className="absolute left-0 right-0 top-4 mb-8 border-b px-4"
-        >
-          <Heading id={headerId} className="mb-4">
-            Date Picker
-          </Heading>
-          <IconButton variant="ghost" onClick={toggleDialog}>
-            <Cross2Icon width="24" height="24" />
-          </IconButton>
-        </Flex>
       </dialog>
     </Flex>
   );

diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -50,6 +50,7 @@ export default {
       },
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
       },
       maxWidth: {
         "8xl": "88rem",