From 50198092777458f311fb89619978304f5a956490 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Sat, 19 Oct 2024 12:45:27 -0600
Subject: [PATCH] fix: button styles (#247)

---
 src/button/Button.tsx   |  2 +-
 src/button/styles.ts    |  4 ++--
 src/utils/styleProps.ts | 22 ++++++++++++----------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 88ef3a1d..9ade75dc 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -20,7 +20,7 @@ const Button = (props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) => {
     onClick,
     icon,
     className,
-    size = 'normal',
+    size = 'default',
     ...otherProps
   } = props;
   const isDisabled = disabled || loading;
diff --git a/src/button/styles.ts b/src/button/styles.ts
index af3b3416..f3f8c955 100644
--- a/src/button/styles.ts
+++ b/src/button/styles.ts
@@ -21,7 +21,7 @@ export const buttonCSS = css`
     cursor: default;
     opacity: ${theme.opacity.disabled};
   }
-  &[data-size='normal'][data-childless='false'] {
+  &[data-size='default'][data-childless='false'] {
     padding: var(--ac-global-dimension-static-size-100)
       var(--ac-global-dimension-static-size-200);
   }
@@ -29,7 +29,7 @@ export const buttonCSS = css`
     padding: var(--ac-global-dimension-static-size-50)
       var(--ac-global-dimension-static-size-100);
   }
-  &[data-size='normal'][data-childless='true'] {
+  &[data-size='default'][data-childless='true'] {
     padding: var(--ac-global-dimension-static-size-100)
       var(--ac-global-dimension-static-size-100);
   }
diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts
index 841870f0..44165afe 100644
--- a/src/utils/styleProps.ts
+++ b/src/utils/styleProps.ts
@@ -315,21 +315,23 @@ export function useStyleProps<T extends StyleProps>(
   // @ts-ignore
   if (otherProps.className) {
     // eslint-disable-next-line no-console
-    console.warn(
-      'The className prop is unsafe and is unsupported in Arize Components. ' +
-        'Please use style props with AC variables, or UNSAFE_className if you absolutely must do something custom. ' +
-        'Note that this may break in future versions due to DOM structure changes.'
-    );
+    // TODO: add back this warning when we have a better solution for className
+    // console.warn(
+    //   'The className prop is unsafe and is unsupported in Arize Components. ' +
+    //     'Please use style props with AC variables, or UNSAFE_className if you absolutely must do something custom. ' +
+    //     'Note that this may break in future versions due to DOM structure changes.'
+    // );
   }
 
   // @ts-ignore
   if (otherProps.style) {
     // eslint-disable-next-line no-console
-    console.warn(
-      'The style prop is unsafe and is unsupported in React Arize Components. ' +
-        'Please use style props with AC variables, or UNSAFE_style if you absolutely must do something custom. ' +
-        'Note that this may break in future versions due to DOM structure changes.'
-    );
+    // TODO: add back this warning when we have a better solution for className
+    // console.warn(
+    //   'The style prop is unsafe and is unsupported in React Arize Components. ' +
+    //     'Please use style props with AC variables, or UNSAFE_style if you absolutely must do something custom. ' +
+    //     'Note that this may break in future versions due to DOM structure changes.'
+    // );
   }
 
   const styleProps: HTMLAttributes<HTMLElement> = {