fix: context issues for Space.Compact (#38870)

* fix: context issues for Space.Compact * test: update snapshots
ant-design · Nov 22, 2022 · 0b54a18 · 0b54a18
1 parent 540dc5e
commit 0b54a18
Show file tree

Hide file tree

Showing 7 changed files with 693 additions and 101 deletions.
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -13,6 +13,7 @@ import type { DrawerPanelProps } from './DrawerPanel';
 
 // CSSINJS
 import useStyle from './style';
+import { NoCompactStyle } from '../space/Compact';
 
 const SizeTypes = tuple('default', 'large');
 type sizeType = typeof SizeTypes[number];
@@ -120,25 +121,27 @@ function Drawer(props: DrawerProps) {
 
   // =========================== Render ===========================
   return wrapSSR(
-    <NoFormStyle status override>
-      <RcDrawer
-        prefixCls={prefixCls}
-        onClose={onClose}
-        maskMotion={maskMotion}
-        motion={panelMotion}
-        {...rest}
-        open={open ?? visible}
-        mask={mask}
-        push={push}
-        width={mergedWidth}
-        height={mergedHeight}
-        rootClassName={drawerClassName}
-        getContainer={getContainer}
-        afterOpenChange={afterOpenChange ?? afterVisibleChange}
-      >
-        <DrawerPanel prefixCls={prefixCls} {...rest} onClose={onClose} />
-      </RcDrawer>
-    </NoFormStyle>,
+    <NoCompactStyle>
+      <NoFormStyle status override>
+        <RcDrawer
+          prefixCls={prefixCls}
+          onClose={onClose}
+          maskMotion={maskMotion}
+          motion={panelMotion}
+          {...rest}
+          open={open ?? visible}
+          mask={mask}
+          push={push}
+          width={mergedWidth}
+          height={mergedHeight}
+          rootClassName={drawerClassName}
+          getContainer={getContainer}
+          afterOpenChange={afterOpenChange ?? afterVisibleChange}
+        >
+          <DrawerPanel prefixCls={prefixCls} {...rest} onClose={onClose} />
+        </RcDrawer>
+      </NoFormStyle>
+    </NoCompactStyle>,
   );
 }
 

diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
@@ -13,6 +13,7 @@ import getPlacements from '../_util/placements';
 import { cloneElement } from '../_util/reactNode';
 import { tuple } from '../_util/type';
 import warning from '../_util/warning';
+import { NoCompactStyle } from '../space/Compact';
 import DropdownButton from './dropdown-button';
 import useStyle from './style';
 
@@ -264,7 +265,7 @@ const Dropdown: DropdownInterface = (props) => {
           );
         }}
       >
-        {overlayNode}
+        <NoCompactStyle>{overlayNode}</NoCompactStyle>
       </OverrideProvider>
     );
   };

diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
@@ -11,7 +11,7 @@ import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
-import { useCompactItemContext } from '../space/Compact';
+import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import { cloneElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
@@ -188,15 +188,19 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       <div className={mergedGroupClassName} style={props.style}>
         <div className={mergedWrapperClassName}>
           {addonBeforeNode && (
-            <NoFormStyle status override>
-              {addonBeforeNode}
-            </NoFormStyle>
+            <NoCompactStyle>
+              <NoFormStyle status override>
+                {addonBeforeNode}
+              </NoFormStyle>
+            </NoCompactStyle>
           )}
           {cloneElement(element, { style: null, disabled: mergedDisabled })}
           {addonAfterNode && (
-            <NoFormStyle status override>
-              {addonAfterNode}
-            </NoFormStyle>
+            <NoCompactStyle>
+              <NoFormStyle status override>
+                {addonAfterNode}
+              </NoFormStyle>
+            </NoCompactStyle>
           )}
         </div>
       </div>

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -5,6 +5,7 @@ import type { ButtonProps, LegacyButtonType } from '../button/button';
 import type { DirectionType } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
+import { NoCompactStyle } from '../space/Compact';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
 import warning from '../_util/warning';
@@ -195,31 +196,35 @@ const Modal: React.FC<ModalProps> = (props) => {
   }
 
   return wrapSSR(
-    <NoFormStyle status override>
-      <Dialog
-        width={width}
-        {...restProps}
-        getContainer={
-          getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
-        }
-        prefixCls={prefixCls}
-        rootClassName={hashId}
-        wrapClassName={wrapClassNameExtended}
-        footer={renderFooter({
-          ...props,
-          onOk: handleOk,
-          onCancel: handleCancel,
-        })}
-        visible={open ?? visible}
-        mousePosition={restProps.mousePosition ?? mousePosition}
-        onClose={handleCancel}
-        closeIcon={renderCloseIcon(prefixCls, closeIcon)}
-        focusTriggerAfterClose={focusTriggerAfterClose}
-        transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
-        maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-        className={classNames(hashId, className)}
-      />
-    </NoFormStyle>,
+    <NoCompactStyle>
+      <NoFormStyle status override>
+        <Dialog
+          width={width}
+          {...restProps}
+          getContainer={
+            getContainer === undefined
+              ? (getContextPopupContainer as getContainerFunc)
+              : getContainer
+          }
+          prefixCls={prefixCls}
+          rootClassName={hashId}
+          wrapClassName={wrapClassNameExtended}
+          footer={renderFooter({
+            ...props,
+            onOk: handleOk,
+            onCancel: handleCancel,
+          })}
+          visible={open ?? visible}
+          mousePosition={restProps.mousePosition ?? mousePosition}
+          onClose={handleCancel}
+          closeIcon={renderCloseIcon(prefixCls, closeIcon)}
+          focusTriggerAfterClose={focusTriggerAfterClose}
+          transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
+          maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
+          className={classNames(hashId, className)}
+        />
+      </NoFormStyle>
+    </NoCompactStyle>,
   );
 };