Merge pull request #431 from oceanbase/dengfuping-design

improve(design): div => React.Fragment for ConfigProvider nested App
oceanbase · Jan 19, 2024 · 9841b49 · 9841b49
2 parents fba4db2 + b5c3350
commit 9841b49
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 280 deletions.
diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/prefixCls.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/prefixCls.tsx.snap
@@ -1,121 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConfigProvider prefixCls prefixCls 1`] = `
-<div
-  class="ant-app"
+exports[`ConfigProvider prefixCls iconPrefixCls 1`] = `
+<span
+  aria-label="plus"
+  class="anticon anticon-plus"
+  role="img"
 >
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <svg
+    aria-hidden="true"
+    data-icon="plus"
+    fill="currentColor"
+    focusable="false"
+    height="1em"
+    viewBox="64 64 896 896"
+    width="1em"
   >
-    <span>
-      button
-    </span>
-  </button>
-  <div
-    class="customPrefixCls-app"
-  >
-    <button
-      class="customPrefixCls-btn customPrefixCls-btn-default"
-      type="button"
-    >
-      <span>
-        button
-      </span>
-    </button>
-    <div
-      class="customPrefixCls-app"
-    >
-      <button
-        class="customPrefixCls-btn customPrefixCls-btn-default"
-        type="button"
-      >
-        <span>
-          button
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
+    <path
+      d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+    />
+    <path
+      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+    />
+  </svg>
+</span>
 `;
 
-exports[`ConfigProvider prefixCls iconPrefixCls 1`] = `
-<div
-  class="ant-app"
+exports[`ConfigProvider prefixCls prefixCls 1`] = `
+<button
+  class="ant-btn ant-btn-default"
+  type="button"
 >
-  <span
-    aria-label="plus"
-    class="anticon anticon-plus"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="plus"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-      />
-      <path
-        d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-      />
-    </svg>
+  <span>
+    button
   </span>
-  <div
-    class="ant-app"
-  >
-    <span
-      aria-label="plus"
-      class="customIconPrefixCls customIconPrefixCls-plus"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="plus"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-        />
-        <path
-          d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-        />
-      </svg>
-    </span>
-    <div
-      class="ant-app"
-    >
-      <span
-        aria-label="plus"
-        class="customIconPrefixCls customIconPrefixCls-plus"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="plus"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-          />
-          <path
-            d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-          />
-        </svg>
-      </span>
-    </div>
-  </div>
-</div>
+</button>
 `;
diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/spin.test.tsx.snap
@@ -2,49 +2,24 @@
 
 exports[`ConfigProvider spin spin.indicator should work 1`] = `
 <div
-  class="ant-app"
+  aria-busy="true"
+  aria-live="polite"
+  class="ant-spin ant-spin-spinning"
 >
   <div
-    aria-busy="true"
-    aria-live="polite"
-    class="ant-spin ant-spin-spinning"
-  >
-    <div
-      class="custom-indicator ant-spin-dot"
-    />
-  </div>
+    class="custom-indicator ant-spin-dot"
+  />
 </div>
 `;
 
 exports[`ConfigProvider spin spin.indicator should work in nested ConfigProvider 1`] = `
 <div
-  class="ant-app"
+  aria-busy="true"
+  aria-live="polite"
+  class="ant-spin ant-spin-spinning"
 >
   <div
-    class="ant-app"
-  >
-    <div
-      aria-busy="true"
-      aria-live="polite"
-      class="ant-spin ant-spin-spinning"
-    >
-      <div
-        class="custom-indicator-1 ant-spin-dot"
-      />
-    </div>
-  </div>
-  <div
-    class="ant-app"
-  >
-    <div
-      aria-busy="true"
-      aria-live="polite"
-      class="ant-spin ant-spin-spinning"
-    >
-      <div
-        class="custom-indicator-2 ant-spin-dot"
-      />
-    </div>
-  </div>
+    class="custom-indicator-1 ant-spin-dot"
+  />
 </div>
 `;
diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/styleProviderProps.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/styleProviderProps.test.tsx.snap
@@ -1,19 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConfigProvider styleProviderProps ConfigProvider styleProviderProps.hashPriority 1`] = `
-<div
-  class="ant-app"
->
-  <div />
-  <div
-    class="ant-app"
-  >
-    <div />
-  </div>
-  <div
-    class="ant-app"
-  >
-    <div />
-  </div>
-</div>
-`;
+exports[`ConfigProvider styleProviderProps ConfigProvider styleProviderProps.hashPriority 1`] = `<div />`;
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -43,6 +43,7 @@ export interface ConfigConsumerProps extends AntConfigConsumerProps {
   hideOnSinglePage?: boolean;
   spin?: SpinConfig;
   table?: TableConfig;
+  builtInApp?: boolean;
   locale?: Locale;
 }
 
@@ -129,7 +130,7 @@ const ConfigProvider = ({
         <StyleProvider {...mergedStyleProviderProps}>
           {/* Nested App component for static function of message, notification and Modal to consume ConfigProvider config */}
           {/* ref: https://ant.design/components/app */}
-          <App>
+          <App component={false}>
             {children}
             <StaticFunction />
           </App>