Merge pull request #462 from mashmatrix/support-slds-2-modal

Update `Modal` for SLDS2

Author: stomita

src/scripts/Modal.tsx

@@ -1,67 +1,30 @@
-import React, {
-  HTMLAttributes,
-  CSSProperties,
-  FC,
-  createContext,
-  useContext,
-  useMemo,
-  ReactNode,
-} from 'react';
+import React, { HTMLAttributes, CSSProperties, FC, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
+import { Text } from './Text';
 import { useEventCallback } from './hooks';
 
-/**
- *
- */
-const ModalHandlersContext = createContext<{
-  onHide?: () => void;
-}>({});
-
 /**
  *
  */
 export type ModalHeaderProps = {
   className?: string;
   title?: string;
   tagline?: string;
-  closeButton?: boolean;
-  onClose?: () => void;
 };
 
 /**
  *
  */
 export const ModalHeader: FC<ModalHeaderProps> = (props) => {
-  const {
-    className,
-    title,
-    tagline,
-    closeButton,
-    onClose: onClose_,
-    ...rprops
-  } = props;
-  const { onHide: onHideModal } = useContext(ModalHandlersContext);
-  const onClose = useEventCallback(() => {
-    onClose_?.();
-    onHideModal?.();
-  });
+  const { className, title, tagline, ...rprops } = props;
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
-      <h2 className='slds-text-heading_medium'>{title}</h2>
+      <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
+        {title}
+      </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
-      {closeButton ? (
-        <Button
-          type='icon-inverse'
-          className='slds-modal__close'
-          icon='close'
-          iconSize='large'
-          alt='Close'
-          inverse
-          onClick={onClose}
-        />
-      ) : null}
     </div>
   );
 };
@@ -128,6 +91,8 @@ export type ModalProps = {
   opened?: boolean;
   containerStyle?: CSSProperties;
   onHide?: () => void;
+  closeButton?: boolean;
+  onClose?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -141,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
     size,
     containerStyle,
     onHide,
+    closeButton,
+    onClose: onClose_,
     ...rprops
   } = props;
   const modalClassNames = classnames(className, 'slds-modal', {
@@ -150,21 +117,37 @@ const Modal_: FC<ModalProps> = (props) => {
   const backdropClassNames = classnames(className, 'slds-backdrop', {
     'slds-backdrop_open': opened,
   });
-  const handlers = useMemo(() => ({ onHide }), [onHide]);
+  const onClose = useEventCallback(() => {
+    onClose_?.();
+    onHide?.();
+  });
   return (
-    <ModalHandlersContext.Provider value={handlers}>
-      <div
+    <>
+      <section
         className={modalClassNames}
         aria-hidden={!opened}
         role='dialog'
+        tabIndex={-1}
+        aria-modal='true'
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
+          {closeButton ? (
+            <Button
+              type='icon'
+              className='slds-modal__close'
+              icon='close'
+              iconSize='large'
+              alt='Close'
+              inverse
+              onClick={onClose}
+            />
+          ) : null}
           {children}
         </div>
-      </div>
-      <div className={backdropClassNames} />
-    </ModalHandlersContext.Provider>
+      </section>
+      <div className={backdropClassNames} role='presentation' />
+    </>
   );
 };
 

stories/Modal.stories.tsx

@@ -52,7 +52,7 @@ const LOOKUP_DATA = [
 ];
 
 const modalContent = (
-  <div className='slds-p-around_small'>
+  <>
     <p>
       Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
       deserunt aute id consequat veniam incididunt duis in sint irure nisi.
@@ -68,7 +68,7 @@ const modalContent = (
       Labore esse esse cupidatat amet velit id elit consequat minim ullamco
       mollit enim excepteur ea.
     </p>
-  </div>
+  </>
 );
 
 const footerButtons = (
@@ -116,6 +116,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
     childProps: {
       header: {},
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -141,12 +142,13 @@ export const Default: StoryObj<StoryProps> = {
   name: 'Default',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Default Modal',
-        closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -169,13 +171,14 @@ export const Large: StoryObj<StoryProps> = {
   name: 'Large',
   args: {
     opened: true,
+    closeButton: true,
     size: 'large',
     childProps: {
       header: {
         title: 'Large Size Modal',
-        closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -198,13 +201,14 @@ export const WithTagline: StoryObj<StoryProps> = {
   name: 'With tagline',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with tagline',
         tagline: 'This is a tagline',
-        closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -227,12 +231,13 @@ export const FooterDirectional: StoryObj<StoryProps> = {
   name: 'Footer directional',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with directional footer',
-        closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -256,10 +261,10 @@ export const FormElements: StoryObj<StoryProps> = {
   name: 'Form elements',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal Form',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',