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

* fix: context issues for Space.Compact * test: update snapshots
2024-11-24 02:59:58 +08:00 · 2022-11-22 22:52:40 +08:00 · 2022-11-22 22:52:40 +08:00 · 0b54a18afe
commit 0b54a18afe
parent 540dc5e0a9
7 changed files with 693 additions and 101 deletions
--- 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>,
  );
 }

--- 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>
    );
  };
--- 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>
--- 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>,
  );
 };

--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@ -10255,6 +10255,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
  </div>
  <div
    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
      class="ant-space-compact"
@ -10426,6 +10427,327 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
      </button>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <br />
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          debug Modal context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-space-compact ant-space-compact-block ant-dropdown-button ant-dropdown-compact-item ant-dropdown-compact-first-item ant-dropdown-compact-last-item"
+      >
+        <button
+          class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+          type="button"
+        >
+          <span>
+            debug Dropdown.Button context
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+        <div>
+          <div
+            class="ant-dropdown"
+            style="opacity:0"
+          >
+            <ul
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+              data-menu-list="true"
+              role="menu"
+              tabindex="0"
+            >
+              <li
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  <button
+                    class="ant-btn ant-btn-default"
+                    type="button"
+                  >
+                    <span>
+                      menu button
+                    </span>
+                  </button>
+                </span>
+              </li>
+              <div>
+                <div
+                  class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                  style="opacity:0"
+                >
+                  <div
+                    class="ant-tooltip-content"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                    >
+                      <span
+                        class="ant-tooltip-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    />
+                  </div>
+                </div>
+              </div>
+              <li
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  normal menu item
+                </span>
+              </li>
+              <div>
+                <div
+                  class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                  style="opacity:0"
+                >
+                  <div
+                    class="ant-tooltip-content"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                    >
+                      <span
+                        class="ant-tooltip-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    />
+                  </div>
+                </div>
+              </div>
+            </ul>
+            <div
+              aria-hidden="true"
+              style="display:none"
+            >
+              <div>
+                <div
+                  class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                  style="opacity:0"
+                >
+                  <div
+                    class="ant-tooltip-content"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                    >
+                      <span
+                        class="ant-tooltip-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                  style="opacity:0"
+                >
+                  <div
+                    class="ant-tooltip-content"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                    >
+                      <span
+                        class="ant-tooltip-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          debug Drawer context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-input-number-group-wrapper"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number-group-addon"
+          >
+            +
+          </div>
+          <div
+            class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                aria-label="Decrease Value"
+                class="ant-input-number-handler ant-input-number-handler-down"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-input-number-handler-down-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                aria-valuenow="100"
+                autocomplete="off"
+                class="ant-input-number-input"
+                role="spinbutton"
+                step="1"
+                value="100"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

--- a/components/space/tests/snapshots/demo.test.ts.snap
+++ b/components/space/tests/snapshots/demo.test.ts.snap
@ -2713,6 +2713,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
+    style="margin-bottom:8px"
  >
    <div
      class="ant-space-compact"
@ -2810,6 +2811,191 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
      </button>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <br />
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          debug Modal context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-space-compact ant-space-compact-block ant-dropdown-button ant-dropdown-compact-item ant-dropdown-compact-first-item ant-dropdown-compact-last-item"
+      >
+        <button
+          class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+          type="button"
+        >
+          <span>
+            debug Dropdown.Button context
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          debug Drawer context
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <div
+        class="ant-input-number-group-wrapper"
+      >
+        <div
+          class="ant-input-number-wrapper ant-input-number-group"
+        >
+          <div
+            class="ant-input-number-group-addon"
+          >
+            +
+          </div>
+          <div
+            class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+          >
+            <div
+              class="ant-input-number-handler-wrap"
+            >
+              <span
+                aria-disabled="false"
+                aria-label="Increase Value"
+                class="ant-input-number-handler ant-input-number-handler-up"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="up"
+                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                aria-label="Decrease Value"
+                class="ant-input-number-handler ant-input-number-handler-down"
+                role="button"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-input-number-handler-down-inner"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div
+              class="ant-input-number-input-wrap"
+            >
+              <input
+                aria-valuenow="100"
+                autocomplete="off"
+                class="ant-input-number-input"
+                role="spinbutton"
+                step="1"
+                value="100"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-input-number-group-addon"
+          >
+            $
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

--- a/components/space/demo/compact-debug.tsx
+++ b/components/space/demo/compact-debug.tsx
@ -1,6 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SettingOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons';
-import { Cascader, Input, Select, Space, Button, Tooltip } from 'antd';
+import {
+  Cascader,
+  Input,
+  Select,
+  Space,
+  Button,
+  Tooltip,
+  Modal,
+  Dropdown,
+  Drawer,
+  InputNumber,
+} from 'antd';

 const { Option } = Select;

@ -19,52 +30,112 @@ const selectAfter = (
  </Select>
 );

-const App: React.FC = () => (
-  <Space direction="vertical">
-    <Space.Compact block>
-      <Button>default Button</Button>
-      <Button danger>danger Button</Button>
-      <Button type="dashed">dashed Button</Button>
-      <Button type="text">text Button</Button>
-      <Button type="link">Link Button</Button>
-      <Tooltip title="Tooltip">
-        <Button icon={<DownloadOutlined />} disabled />
-      </Tooltip>
-    </Space.Compact>
-    <br />
-    <Space.Compact>
-      <Button>Prefix</Button>
-      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-    <Space.Compact>
-      <Input placeholder="prefix" />
-      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
-      <Button icon={<CopyOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input.Search />
-      <Input.Search />
-      <Button icon={<CopyOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-      <Input placeholder="suffix" addonAfter={<SettingOutlined />} />
-    </Space.Compact>
-    <Space.Compact>
-      <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-    <Space.Compact>
-      <Button>Prefix</Button>
-      <Input
-        addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
-        defaultValue="mysite"
-      />
-      <Button type="primary">Submit</Button>
-    </Space.Compact>
-  </Space>
-);
+const App: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [showDrawer, setShowDrawer] = useState(false);
+  return (
+    <Space direction="vertical">
+      <Space.Compact block>
+        <Button>default Button</Button>
+        <Button danger>danger Button</Button>
+        <Button type="dashed">dashed Button</Button>
+        <Button type="text">text Button</Button>
+        <Button type="link">Link Button</Button>
+        <Tooltip title="Tooltip">
+          <Button icon={<DownloadOutlined />} disabled />
+        </Tooltip>
+      </Space.Compact>
+      <br />
+      <Space.Compact>
+        <Button>Prefix</Button>
+        <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Input placeholder="prefix" />
+        <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
+        <Button icon={<CopyOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input.Search />
+        <Input.Search />
+        <Button icon={<CopyOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+        <Input placeholder="suffix" addonAfter={<SettingOutlined />} />
+      </Space.Compact>
+      <Space.Compact>
+        <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Button>Prefix</Button>
+        <Input
+          addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
+          defaultValue="mysite"
+        />
+        <Button type="primary">Submit</Button>
+      </Space.Compact>
+      <br />
+      <Space.Compact>
+        <Button onClick={() => setShowModal(true)}>debug Modal context</Button>
+        <Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>
+          <Button>normal button A</Button>
+          <Button>normal button B</Button>
+          <br />
+          <br />
+          <Input />
+          <br />
+          <br />
+          <Space.Compact>
+            <Button>compact button A</Button>
+            <Button>compact button B</Button>
+          </Space.Compact>
+        </Modal>
+      </Space.Compact>
+      <Space.Compact>
+        <Dropdown.Button
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: <Button>menu button</Button>,
+              },
+              {
+                key: '2',
+                label: 'normal menu item',
+              },
+            ],
+          }}
+        >
+          debug Dropdown.Button context
+        </Dropdown.Button>
+      </Space.Compact>
+      <Space.Compact>
+        <Button onClick={() => setShowDrawer(true)}>debug Drawer context</Button>
+        <Drawer
+          title="Basic Drawer"
+          placement="right"
+          onClose={() => setShowDrawer(false)}
+          open={showDrawer}
+        >
+          <Button>normal button A</Button>
+          <Button>normal button B</Button>
+          <br />
+          <br />
+          <Space.Compact>
+            <Button>compact button A</Button>
+            <Button>compact button B</Button>
+          </Space.Compact>
+        </Drawer>
+      </Space.Compact>
+      <Space.Compact>
+        <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
+      </Space.Compact>
+    </Space>
+  );
+};

 export default App;