fix: button styles (#247)

Arize-ai · Oct 19, 2024 · 5019809 · 5019809
1 parent 831bb16
commit 5019809
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -21,15 +21,15 @@ 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);
   }
   &[data-size='compact'][data-childless='false'] {
     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
@@ -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> = {