minor changes

kadena-community · Nov 7, 2023 · 1053689 · 1053689
1 parent 4b076bc
commit 1053689
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 97 deletions.
diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx
@@ -1,9 +1,10 @@
+import { Button } from '@components/Button';
+import { Dialog } from '@components/Dialog';
+import type { IModalProps } from '@components/Modal';
+import { Stack } from '@components/Stack';
+import { Text } from '@components/Typography';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { Button } from '../Button';
-import type { IModalProps } from '../Modal';
-import { Text } from '../Typography';
-import { Dialog } from './Dialog';
 
 const meta: Meta<{ title?: string } & IModalProps> = {
   title: 'Overlays/Dialog',
@@ -25,21 +26,17 @@ export const DialogStory: Story = {
   name: 'Dialog',
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
+
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Modal Trigger</Button>
         <Dialog
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
-          title={
-            <>
-              <h2>Dialog Title</h2>
-              <p>Dialog description</p>
-            </>
-          }
+          title="Dialog Title"
         >
           {(state) => (
-            <>
+            <Stack direction="column" gap="$6" alignItems="flex-end">
               <Text>
                 Dessert gummies pie biscuit chocolate bar cheesecake. Toffee
                 chocolate bar ice cream cake jujubes pudding fruitcake marzipan.
@@ -56,7 +53,7 @@ export const DialogStory: Story = {
                 chups wafer fruitcake lollipop apple pie bonbon tart bonbon.
               </Text>
               <Button onClick={state.close}>Close Button</Button>
-            </>
+            </Stack>
           )}
         </Dialog>
       </>

diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.tsx
@@ -20,21 +20,13 @@ import {
 interface IBaseDialogProps
   extends Omit<IModalProps, 'children'>,
     AriaDialogProps {
-  className?: string;
   title?: ReactNode;
   children?: ((state: OverlayTriggerState) => ReactNode) | ReactNode;
 }
 
 const BaseDialog = React.forwardRef<HTMLDivElement, IBaseDialogProps>(
   (props, ref) => {
-    const {
-      title,
-      className,
-      children,
-      isDismissable = true,
-      state,
-      ...rest
-    } = props;
+    const { title, children, isDismissable = true, state, ...rest } = props;
     const dialogRef = useObjectRef<HTMLDivElement | null>(ref);
     const { dialogProps, titleProps } = useDialog(
       {
@@ -47,7 +39,7 @@ const BaseDialog = React.forwardRef<HTMLDivElement, IBaseDialogProps>(
     return (
       <div
         ref={dialogRef}
-        className={classNames(cardContainerClass, overlayClass, className)}
+        className={classNames(cardContainerClass, overlayClass)}
         {...mergeProps(rest, dialogProps)}
       >
         {isDismissable && (
@@ -87,7 +79,6 @@ export interface IDialogProps extends Omit<IBaseDialogProps, 'state'> {
 
 export const Dialog: FC<IDialogProps> = ({
   title,
-  className,
   children,
   isDismissable = true,
   isKeyboardDismissDisabled,
@@ -107,7 +98,6 @@ export const Dialog: FC<IDialogProps> = ({
       <BaseDialog
         state={state}
         title={title}
-        className={className}
         isDismissable={isDismissable}
         {...props}
       >

diff --git a/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx b/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx
diff --git a/packages/libs/react-ui/src/components/Modal/Modal.tsx b/packages/libs/react-ui/src/components/Modal/Modal.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { mergeRefs } from '@react-aria/utils';
-import clsx from 'classnames';
 import type { FC, ReactElement, Ref } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { AriaModalOverlayProps, ModalOverlayAria } from 'react-aria';
@@ -10,7 +9,6 @@ import type { OverlayTriggerState } from 'react-stately';
 import { underlayClass } from './Modal.css';
 
 export interface IModalProps extends AriaModalOverlayProps {
-  className?: string;
   state: OverlayTriggerState;
   children:
     | ReactElement
@@ -21,14 +19,12 @@ export interface IModalProps extends AriaModalOverlayProps {
 }
 
 export const Modal: FC<IModalProps> = ({
-  className,
   children,
   state,
   isDismissable = true,
   isKeyboardDismissDisabled,
 }) => {
   const nodeRef = useRef<HTMLDivElement | null>(null);
-  const underlayRef = useRef<HTMLDivElement | null>(null);
   const { modalProps, underlayProps } = useModalOverlay(
     {
       isDismissable,
@@ -44,11 +40,7 @@ export const Modal: FC<IModalProps> = ({
 
   return (
     <Overlay>
-      <div
-        ref={underlayRef}
-        className={clsx(underlayClass, className)}
-        {...underlayProps}
-      >
+      <div className={underlayClass} {...underlayProps}>
         {typeof children === 'function'
           ? children(modalProps, nodeRef)
           : cloneElement(children, {