feat: support section and title (#468)

Author: thinkasany

assets/bootstrap/Dialog.less

@@ -34,11 +34,11 @@
   margin: 10px;
 
   // Actual rc-dialog
-  &-content {
+  &-section {
     position: relative;
-    background-color: @modal-content-bg;
-    border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
-    border: 1px solid @modal-content-border-color;
+    background-color: @modal-section-bg;
+    border: 1px solid @modal-section-fallback-border-color; //old browsers fallback (ie8 etc)
+    border: 1px solid @modal-section-border-color;
     border-radius: @border-radius-large;
     box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
     background-clip: padding-box;
@@ -124,7 +124,7 @@
     width: @modal-md;
     margin: 30px auto;
 
-    &-content {
+    &-section {
       box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
     }
   }

assets/bootstrap/variables.less

@@ -596,11 +596,11 @@
 @modal-title-line-height:     @line-height-base;
 
 //** Background color of modal content area
-@modal-content-bg:                             #fff;
+@modal-section-bg:                             #fff;
 //** Modal content border color
-@modal-content-border-color:                   rgba(0,0,0,.2);
+@modal-section-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
+@modal-section-fallback-border-color:          #999;
 
 //** Modal backdrop background color
 @modal-backdrop-bg:           #000;
@@ -866,4 +866,4 @@
 //** Point at which .dl-horizontal becomes horizontal
 @dl-horizontal-breakpoint:    @grid-float-breakpoint;
 //** Horizontal line color.
-@hr-border:                   @gray-lighter;
+@hr-border:                   @gray-lighter;

assets/index/Dialog.less

@@ -22,7 +22,7 @@
     font-weight: bold;
   }
 
-  &-content {
+  &-section {
     position: relative;
     background-color: #ffffff;
     border: none;

src/Dialog/Content/Panel.tsx

@@ -94,7 +94,11 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
       style={{ ...modalStyles?.header }}
     >
-      <div className={`${prefixCls}-title`} id={ariaId}>
+      <div
+        className={classNames(`${prefixCls}-title`, modalClassNames?.title)}
+        id={ariaId}
+        style={{ ...modalStyles?.title }}
+      >
         {title}
       </div>
     </div>
@@ -111,7 +115,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
   }, [closable, closeIcon, prefixCls]);
 
   const ariaProps = pickAttrs(closableObj, true);
-  const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled;
+  const closeBtnIsDisabled = typeof closable === 'object' && closable.disabled;
 
   const closerNode = closable ? (
     <button
@@ -128,8 +132,8 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
 
   const content = (
     <div
-      className={classNames(`${prefixCls}-content`, modalClassNames?.content)}
-      style={modalStyles?.content}
+      className={classNames(`${prefixCls}-section`, modalClassNames?.section)}
+      style={modalStyles?.section}
     >
       {closerNode}
       {headerNode}

src/IDialogPropTypes.tsx

@@ -1,23 +1,11 @@
 import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export interface ModalClassNames {
-  header?: string;
-  body?: string;
-  footer?: string;
-  mask?: string;
-  content?: string;
-  wrapper?: string;
-}
+export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
 
-export interface ModalStyles {
-  header?: CSSProperties;
-  body?: CSSProperties;
-  footer?: CSSProperties;
-  mask?: CSSProperties;
-  wrapper?: CSSProperties;
-  content?: CSSProperties;
-}
+export type ModalClassNames = Partial<Record<SemanticName, string>>;
+
+export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
 
 export type IDialogPropTypes = {
   className?: string;
@@ -28,7 +16,7 @@ export type IDialogPropTypes = {
   afterClose?: () => any;
   afterOpenChange?: (open: boolean) => void;
   onClose?: (e: SyntheticEvent) => any;
-  closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean  } & React.AriaAttributes);
+  closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
   maskClosable?: boolean;
   visible?: boolean;
   destroyOnClose?: boolean;

tests/__snapshots__/index.spec.tsx.snap

@@ -23,7 +23,7 @@ exports[`dialog add rootClassName should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-content"
+          class="rc-dialog-section"
         >
           <button
             aria-label="Close"
@@ -70,7 +70,7 @@ exports[`dialog should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-content"
+          class="rc-dialog-section"
         >
           <button
             aria-label="Close"
@@ -128,7 +128,7 @@ exports[`dialog should support classNames 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-content custom-content"
+          class="rc-dialog-section custom-section"
         >
           <button
             aria-label="Close"
@@ -193,7 +193,7 @@ exports[`dialog should support styles 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-content"
+          class="rc-dialog-section"
           style="background: orange;"
         >
           <button
@@ -212,6 +212,7 @@ exports[`dialog should support styles 1`] = `
             <div
               class="rc-dialog-title"
               id="test-id"
+              style="background: orange;"
             >
               Default
             </div>

tests/index.spec.tsx

@@ -399,7 +399,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
+    expect(modalRender.find('.rc-dialog-section').props().style.background).toEqual('#1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -589,7 +589,7 @@ describe('dialog', () => {
           footer: 'custom-footer',
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
-          content: 'custom-content',
+          section: 'custom-section',
         }}
         style={{ width: 600 }}
         height={903}
@@ -604,7 +604,7 @@ describe('dialog', () => {
     expect(wrapper.find('.rc-dialog-header').props().className).toContain('custom-header');
     expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer');
     expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask');
-    expect(wrapper.find('.rc-dialog-content').props().className).toContain('custom-content');
+    expect(wrapper.find('.rc-dialog-section').props().className).toContain('custom-section');
   });
 
   it('should support styles', () => {
@@ -619,7 +619,8 @@ describe('dialog', () => {
           footer: { background: 'blue' },
           mask: { background: 'yellow' },
           wrapper: { background: 'pink' },
-          content: { background: 'orange' },
+          section: { background: 'orange' },
+          title: { background: 'orange' },
         }}
         style={{ width: 600 }}
         height={903}
@@ -634,7 +635,8 @@ describe('dialog', () => {
     expect(wrapper.find('.rc-dialog-header').props().style.background).toBe('red');
     expect(wrapper.find('.rc-dialog-footer').props().style.background).toBe('blue');
     expect(wrapper.find('.rc-dialog-mask').props().style.background).toBe('yellow');
-    expect(wrapper.find('.rc-dialog-content').props().style.background).toBe('orange');
+    expect(wrapper.find('.rc-dialog-section').props().style.background).toBe('orange');
+    expect(wrapper.find('.rc-dialog-title').props().style.background).toBe('orange');
   });
   it('should warning', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});

tests/portal.spec.tsx

@@ -33,9 +33,9 @@ describe('Dialog.Portal', () => {
       jest.runAllTimers();
     });
 
-    wrapper.find('.rc-dialog-content').simulate('mousedown');
+    wrapper.find('.rc-dialog-section').simulate('mousedown');
     wrapper.find('.rc-select-item-option-content').simulate('click');
-    wrapper.find('.rc-dialog-content').simulate('mouseup');
+    wrapper.find('.rc-dialog-section').simulate('mouseup');
     expect(onClose).not.toHaveBeenCalled();
   });
 
@@ -52,7 +52,7 @@ describe('Dialog.Portal', () => {
       jest.runAllTimers();
     });
 
-    wrapper.find('.rc-dialog-content').simulate('mousedown');
+    wrapper.find('.rc-dialog-section').simulate('mousedown');
     wrapper.find('.rc-dialog-wrap').simulate('mouseup');
     expect(onClose).not.toHaveBeenCalled();
   });