From 06b9edc04b3f53e7182463f310974244e73ca1dc Mon Sep 17 00:00:00 2001
From: cherish <45481560+cherishs001@users.noreply.github.com>
Date: Mon, 20 May 2024 18:30:01 +0800
Subject: [PATCH 1/2] fix: Add the shouldForwardProp setting of
 styled-components

---
 src/components/button/style.ts | 8 ++++++--
 src/components/tree/style.ts   | 4 +++-
 src/styles/typography.ts       | 4 +++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/button/style.ts b/src/components/button/style.ts
index 4addca4..c63e0ee 100644
--- a/src/components/button/style.ts
+++ b/src/components/button/style.ts
@@ -13,7 +13,9 @@ export interface ButtonStyleProps {
   status?: 'normal' | 'hover' | 'press';
 }
 
-export const ButtonTextStyle = styled(Typography.Medium)<Omit<ButtonStyleProps, 'size'> & TypographyProps>`
+export const ButtonTextStyle = styled(Typography.Medium).withConfig({
+  shouldForwardProp: prop => !['inline', 'status', 'button', 'appearance', 'intent'].includes(prop),
+})<Omit<ButtonStyleProps, 'size'> & TypographyProps>`
   color: ${props => {
     if (props.appearance === 'primary' && props.button !== 'default' && props.intent === 'none') {
       if (props.status === 'hover') {
@@ -64,7 +66,9 @@ export const ButtonTextStyle = styled(Typography.Medium)<Omit<ButtonStyleProps,
   }} !important;
 `;
 
-export const ButtonStyle = styled.button<ButtonStyleProps>`
+export const ButtonStyle = styled.button.withConfig({
+  shouldForwardProp: prop => !['inline', 'status', 'button', 'appearance', 'intent'].includes(prop),
+})<ButtonStyleProps>`
   outline: none;
   display: ${props => {
     if (props.inline) {
diff --git a/src/components/tree/style.ts b/src/components/tree/style.ts
index e7b413d..e692fb1 100644
--- a/src/components/tree/style.ts
+++ b/src/components/tree/style.ts
@@ -9,7 +9,9 @@ interface TreeNodeRowProps {
   status: HandleStatus;
 }
 
-export const TreeNodeRow = styled.div<TreeNodeRowProps>`
+export const TreeNodeRow = styled.div.withConfig({
+  shouldForwardProp: prop => !['nodeLevel'].includes(prop),
+})<TreeNodeRowProps>`
   position: relative;
   padding-left: ${props => {
     return `${props.nodeLevel * 10}px`;
diff --git a/src/styles/typography.ts b/src/styles/typography.ts
index 230933f..8d69e02 100644
--- a/src/styles/typography.ts
+++ b/src/styles/typography.ts
@@ -104,7 +104,9 @@ export const getFontHeight = (size: TypographySize) => {
   return fontLineHeight75;
 };
 
-export const Font = styled.span<FontProps>`
+export const Font = styled.span.withConfig({
+  shouldForwardProp: prop => !['select'].includes(prop),
+})<FontProps>`
   font-family:
     Inter,
     -apple-system,

From 2264bdde064b2da80619a8b34e4c79fb63a291d6 Mon Sep 17 00:00:00 2001
From: cherish <45481560+cherishs001@users.noreply.github.com>
Date: Mon, 20 May 2024 18:40:23 +0800
Subject: [PATCH 2/2] fix: Modify the test case of the button component.

---
 __test__/button.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/__test__/button.test.tsx b/__test__/button.test.tsx
index 2248009..21e5892 100644
--- a/__test__/button.test.tsx
+++ b/__test__/button.test.tsx
@@ -11,19 +11,19 @@ describe('Button', () => {
   test('Mouse Event', () => {
     const button = baseElement.getElementsByTagName('button')[0];
     fireEvent.mouseEnter(button);
-    expect(button.getAttribute('status')).toMatch('hover');
+    // expect(button.getAttribute('status')).toMatch('hover');
     expect(button).toHaveStyle({ backgroundColor: ColorConfig.ActionPrimaryHover });
 
     fireEvent.mouseLeave(button);
-    expect(button.getAttribute('status')).toMatch('normal');
+    // expect(button.getAttribute('status')).toMatch('normal');
     expect(button).toHaveStyle({ backgroundColor: ColorConfig.ActionPrimaryNormal });
 
     fireEvent.mouseDown(button);
-    expect(button.getAttribute('status')).toMatch('press');
+    // expect(button.getAttribute('status')).toMatch('press');
     expect(button).toHaveStyle({ backgroundColor: ColorConfig.ActionPrimaryActive });
 
     fireEvent.mouseUp(button);
-    expect(button.getAttribute('status')).toMatch('hover');
+    // expect(button.getAttribute('status')).toMatch('hover');
     expect(button).toHaveStyle({ backgroundColor: ColorConfig.ActionPrimaryHover });
   });
 });