feat: default add resetIcon Style (ant-design#41208)

* feat: default add resetIcon Style chore: remove test: add case feat(App): icon reset style feature Revert "feat(App): icon reset style feature" This reverts commit be69055. Revert "chore: remove" This reverts commit 417d5f9. chore: update chore: update * chore: update * chore: resolve import * chore: update code style
ammar-knowledge · Aug 28, 2023 · 3e171a9 · 3e171a9
1 parent 4ba36dc
commit 3e171a9
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 31 deletions.
diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx
@@ -1,3 +1,4 @@
+import { SmileOutlined } from '@ant-design/icons';
 import React, { useEffect } from 'react';
 import type { NotificationConfig } from 'antd/es/notification/interface';
 import App from '..';
@@ -181,4 +182,30 @@ describe('App', () => {
     );
     expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
   });
+
+  // https://github.com/ant-design/ant-design/issues/41197#issuecomment-1465803061
+  describe('restIcon style', () => {
+    beforeEach(() => {
+      Array.from(document.querySelectorAll('style')).forEach((style) => {
+        style.parentNode?.removeChild(style);
+      });
+    });
+
+    it('should work by default', () => {
+      const { container } = render(
+        <App>
+          <SmileOutlined />
+        </App>,
+      );
+
+      expect(container.querySelector('.anticon')).toBeTruthy();
+      const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      expect(
+        dynamicStyles.some((style) => {
+          const { innerHTML } = style;
+          return innerHTML.startsWith('.anticon');
+        }),
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts
@@ -1,31 +1,2 @@
-import { useStyleRegister } from '@ant-design/cssinjs';
-import type { CSPConfig } from '..';
-import { resetIcon } from '../../style';
-import { useToken } from '../../theme/internal';
-
-const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
-  const [theme, token] = useToken();
-
-  // Generate style for icons
-  return useStyleRegister(
-    {
-      theme,
-      token,
-      hashId: '',
-      path: ['ant-design-icons', iconPrefixCls],
-      nonce: () => csp?.nonce!,
-    },
-    () => [
-      {
-        [`.${iconPrefixCls}`]: {
-          ...resetIcon(),
-          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
-            display: 'block',
-          },
-        },
-      },
-    ],
-  );
-};
-
-export default useStyle;
+// eslint-disable-next-line no-restricted-exports
+export { useResetIconStyle as default } from '../../theme/internal';
diff --git a/components/theme/internal.ts b/components/theme/internal.ts
@@ -13,6 +13,7 @@ import type { FullToken } from './util/genComponentStyleHook';
 import genComponentStyleHook from './util/genComponentStyleHook';
 import genPresetColor from './util/genPresetColor';
 import statisticToken, { merge as mergeToken } from './util/statistic';
+import useResetIconStyle from './util/useResetIconStyle';
 
 export { DesignTokenContext, defaultConfig } from './context';
 export {
@@ -22,6 +23,7 @@ export {
   mergeToken,
   statisticToken,
   // hooks
+  useResetIconStyle,
   useStyleRegister,
   useToken,
 };

diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
@@ -14,6 +14,7 @@ import type {
 } from '../interface';
 import useToken from '../useToken';
 import statisticToken, { merge as mergeToken } from './statistic';
+import useResetIconStyle from './useResetIconStyle';
 
 export type OverrideTokenWithoutDerivative = ComponentTokenMap;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@@ -106,6 +107,9 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       ],
     );
 
+    // Generate style for icons
+    useResetIconStyle(iconPrefixCls);
+
     return [
       useStyleRegister(
         { ...sharedConfig, path: [concatComponent, prefixCls, iconPrefixCls] },

diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts
@@ -0,0 +1,31 @@
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { resetIcon } from '../../style';
+import type { CSPConfig } from '../../config-provider';
+import useToken from '../useToken';
+
+const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
+  const [theme, token] = useToken();
+
+  // Generate style for icons
+  return useStyleRegister(
+    {
+      theme,
+      token,
+      hashId: '',
+      path: ['ant-design-icons', iconPrefixCls],
+      nonce: () => csp?.nonce!,
+    },
+    () => [
+      {
+        [`.${iconPrefixCls}`]: {
+          ...resetIcon(),
+          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
+            display: 'block',
+          },
+        },
+      },
+    ],
+  );
+};
+
+export default useResetIconStyle;