refactor: section to container (#501)

Author: thinkasany

assets/bootstrap/Dialog.less

@@ -34,11 +34,11 @@
   margin: 10px;
 
   // Actual rc-dialog
-  &-section {
+  &-container {
     position: relative;
-    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;
+    background-color: @modal-container-bg;
+    border: 1px solid @modal-container-fallback-border-color; //old browsers fallback (ie8 etc)
+    border: 1px solid @modal-container-border-color;
     border-radius: @border-radius-large;
     box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
     background-clip: padding-box;
@@ -47,7 +47,7 @@
   }
 
   // Modal header
-  // Top section of the rc-dialog w/ title and dismiss
+  // Top container of the rc-dialog w/ title and dismiss
   &-header {
     padding: @modal-title-padding;
     border-bottom: 1px solid @modal-header-border-color;
@@ -124,7 +124,7 @@
     width: @modal-md;
     margin: 30px auto;
 
-    &-section {
+    &-container {
       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-section-bg:                             #fff;
+@modal-container-bg:                             #fff;
 //** Modal content border color
-@modal-section-border-color:                   rgba(0,0,0,.2);
+@modal-container-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
-@modal-section-fallback-border-color:          #999;
+@modal-container-fallback-border-color:          #999;
 
 //** Modal backdrop background color
 @modal-backdrop-bg:           #000;

assets/index/Dialog.less

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

src/Dialog/Content/Panel.tsx

@@ -140,8 +140,8 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   const content = (
     <div
-      className={classNames(`${prefixCls}-section`, modalClassNames?.section)}
-      style={modalStyles?.section}
+      className={classNames(`${prefixCls}-container`, modalClassNames?.container)}
+      style={modalStyles?.container}
     >
       {closerNode}
       {headerNode}

src/IDialogPropTypes.tsx

@@ -1,7 +1,7 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
 
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 

tests/__snapshots__/index.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`dialog add rootClassName and rootStyle should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
         >
           <button
             aria-label="Close"
@@ -71,7 +71,7 @@ exports[`dialog should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
         >
           <button
             aria-label="Close"
@@ -129,7 +129,7 @@ exports[`dialog should support classNames 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section custom-section"
+          class="rc-dialog-container custom-container"
         >
           <button
             aria-label="Close"
@@ -194,7 +194,7 @@ exports[`dialog should support styles 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
           style="background: orange;"
         >
           <button

tests/index.spec.tsx

@@ -389,7 +389,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: #1890ff');
+    expect(document.querySelector('.rc-dialog-container')).toHaveStyle('background: #1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -597,7 +597,7 @@ describe('dialog', () => {
           footer: 'custom-footer',
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
-          section: 'custom-section',
+          container: 'custom-container',
         }}
         style={{ width: 600 }}
         height={903}
@@ -611,7 +611,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-header').className).toContain('custom-header');
     expect(document.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
     expect(document.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
-    expect(document.querySelector('.rc-dialog-section').className).toContain('custom-section');
+    expect(document.querySelector('.rc-dialog-container').className).toContain('custom-container');
   });
 
   it('should support styles', () => {
@@ -626,7 +626,7 @@ describe('dialog', () => {
           footer: { background: 'blue' },
           mask: { background: 'yellow' },
           wrapper: { background: 'pink' },
-          section: { background: 'orange' },
+          container: { background: 'orange' },
           title: { background: 'orange' },
         }}
         style={{ width: 600 }}
@@ -641,7 +641,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-header')).toHaveStyle('background: red');
     expect(document.querySelector('.rc-dialog-footer')).toHaveStyle('background: blue');
     expect(document.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
-    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: orange');
+    expect(document.querySelector('.rc-dialog-container')).toHaveStyle('background: orange');
     expect(document.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
   });
 

tests/portal.spec.tsx

@@ -30,9 +30,9 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-container'));
     fireEvent.click(document.querySelector('.rc-select-item-option-content'));
-    fireEvent.mouseUp(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseUp(document.querySelector('.rc-dialog-container'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
@@ -47,7 +47,7 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-container'));
     fireEvent.mouseUp(document.querySelector('.rc-dialog-wrap'));
     expect(onClose).not.toHaveBeenCalled();
   });