fix: rename dialog as sheet, ref leather-io/issues#268

packages/ui/src/components/sheet/index.ts

@@ -0,0 +1,2 @@
+export { Sheet } from './sheet.web';
+export { SheetHeader } from './sheet-header.web';

packages/ui/src/components/dialog/dialog-footer.web.tsx → packages/ui/src/components/sheet/sheet-footer.web.tsx

@@ -1,10 +1,10 @@
 import { Flex, FlexProps } from 'leather-styles/jsx';
 
-interface DialogFooterProps extends FlexProps {
+interface SheetFooterProps extends FlexProps {
   children: React.ReactNode;
 }
 
-export function DialogFooter({ children, ...props }: DialogFooterProps) {
+export function SheetFooter({ children, ...props }: SheetFooterProps) {
   return (
     <Flex
       gap="space.05"

packages/ui/src/components/dialog/dialog-header.web.tsx → packages/ui/src/components/sheet/sheet-header.web.tsx

@@ -5,13 +5,13 @@ import { Flex, styled } from 'leather-styles/jsx';
 import { CloseIcon } from '../../icons/index.web';
 import { IconButton } from '../icon-button/icon-button.web';
 
-interface DialogHeaderProps {
+interface SheetHeaderProps {
   onClose?(): void;
   title?: ReactNode;
   variant?: 'default' | 'large';
 }
 
-export function DialogHeader({ onClose, title, variant = 'default' }: DialogHeaderProps) {
+export function SheetHeader({ onClose, title, variant = 'default' }: SheetHeaderProps) {
   return (
     <Flex
       justifyContent="flex-end"

packages/ui/src/components/dialog/dialog.web.stories.tsx → packages/ui/src/components/sheet/sheet.web.stories.tsx

@@ -4,42 +4,49 @@ import type { Meta } from '@storybook/react';
 import { Box, Flex } from 'leather-styles/jsx';
 
 import { Button } from '../button/button.web';
-import { DialogHeader } from './dialog-header.web';
-import { Dialog as Component } from './dialog.web';
+import { SheetHeader } from './sheet-header.web';
+import { Sheet as Component } from './sheet.web';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Dialog',
+  title: 'Sheet',
+  parameters: {
+    docs: {
+      description: {
+        component: 'The Sheet component is used to display a modal/dialog sheet.',
+      },
+    },
+  },
 };
 
 export default meta;
 
-export function Dialog() {
+export function Sheet() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Leather" />}
+        header={<SheetHeader title="Leather" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's start talk sheet.
         </Box>
       </Component>
     </>
   );
 }
 
-export function DialogWithFooter() {
+export function SheetWithFooter() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Send" />}
+        header={<SheetHeader title="Send" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
         footer={
@@ -49,20 +56,20 @@ export function DialogWithFooter() {
         }
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's talk sheet.
         </Box>
       </Component>
     </>
   );
 }
 
-export function DialogWithButtonsFooter() {
+export function SheetWithButtonsFooter() {
   const [isShowing, setIsShowing] = useState(false);
   return (
     <>
       <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
       <Component
-        header={<DialogHeader title="Send" />}
+        header={<SheetHeader title="Send" />}
         isShowing={isShowing}
         onClose={() => setIsShowing(false)}
         footer={
@@ -77,7 +84,7 @@ export function DialogWithButtonsFooter() {
         }
       >
         <Box textAlign="center" height="60vh">
-          Let's start a dialogue.
+          Let's talk sheet.
         </Box>
       </Component>
     </>

packages/ui/src/components/dialog/dialog.web.tsx → packages/ui/src/components/sheet/sheet.web.tsx

@@ -7,13 +7,13 @@ import { token } from 'leather-styles/tokens';
 
 import { pxStringToNumber } from '@leather.io/utils';
 
-import { DialogFooter } from './dialog-footer.web';
+import { SheetFooter } from './sheet-footer.web';
 
-export interface DialogProps {
+export interface SheetProps {
   isShowing: boolean;
   onClose?(): void;
 }
-interface RadixDialogProps extends DialogProps {
+interface RadixDialogProps extends SheetProps {
   children: ReactNode;
   footer?: ReactNode;
   header?: ReactElement<any, string | JSXElementConstructor<any>>;
@@ -33,7 +33,7 @@ function getContentMaxHeight(maxHeightOffset: number) {
   return `calc(${virtualHeight}vh - ${maxHeightOffset}px)`;
 }
 
-export function Dialog({
+export function Sheet({
   children,
   footer,
   header,
@@ -93,7 +93,7 @@ export function Dialog({
             ) : (
               children
             )}
-            {footer && <DialogFooter>{footer}</DialogFooter>}
+            {footer && <SheetFooter>{footer}</SheetFooter>}
           </RadixDialog.Content>
         </RadixDialog.Overlay>
       </RadixDialog.Portal>

packages/ui/web.ts

@@ -4,7 +4,7 @@ export * from './src/components/avatar';
 export { BulletSeparator } from './src/components/bullet-separator/bullet-separator.web';
 export { Button, type ButtonProps } from './src/components/button/button.web';
 export { Callout } from './src/components/callout/callout.web';
-export * from './src/components/dialog';
+export * from './src/components/sheet';
 export { DropdownMenu } from './src/components/dropdown-menu/dropdown-menu.web';
 export { Flag, type FlagProps } from './src/components/flag/flag.web';
 export { IconButton } from './src/components/icon-button/icon-button.web';