fix: outlined button (#54)

fix: reduce form label font size
bentatum · Oct 18, 2024 · 62ebde1 · 62ebde1
1 parent 2104a6d
commit 62ebde1
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 6 deletions.
diff --git a/.changeset/twelve-poets-destroy.md b/.changeset/twelve-poets-destroy.md
@@ -0,0 +1,5 @@
+---
+"@verysimple/react": patch
+---
+
+fix: outline button broken x padding
diff --git a/packages/react/src/FormLabel/FormLabel.tsx b/packages/react/src/FormLabel/FormLabel.tsx
@@ -15,7 +15,7 @@ export const FormLabel: FC<FormLabelProps> = forwardRef(
         className={clsx(
           "block",
           {
-            "text-sm": !className?.includes("text-"),
+            "text-xs": !className?.includes("text-"),
             "mb-1.5": !className?.includes("mb-")
           },
           className

diff --git a/packages/react/src/FormLabel/__snapshots__/FormLabel.test.tsx.snap b/packages/react/src/FormLabel/__snapshots__/FormLabel.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormLabel should match the snapshot 1`] = `
 <div>
   <label
-    class="block text-sm mb-1.5"
+    class="block text-xs mb-1.5"
   >
     test
   </label>

diff --git a/packages/react/src/OutlinedButton/OutlinedButton.tsx b/packages/react/src/OutlinedButton/OutlinedButton.tsx
@@ -20,6 +20,7 @@ export const OutlinedButton = forwardRef<
       size = "md",
       children,
       as = "button",
+      className,
       ...props
     },
     ref
@@ -31,6 +32,11 @@ export const OutlinedButton = forwardRef<
         size={size}
         color={color}
         disabled={disabled}
+        className={clsx(
+          fieldPaddingClassNames(size),
+          "w-full flex items-center justify-center",
+          className
+        )}
         {...props}
       >
         {children}

diff --git a/packages/react/src/OutlinedButton/__snapshots__/OutlinedButton.test.tsx.snap b/packages/react/src/OutlinedButton/__snapshots__/OutlinedButton.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`OutlinedButton can render as a custom component when primary and disabl
 exports[`OutlinedButton should have an outline 1`] = `
 <div>
   <button
-    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed inline-flex items-center justify-center rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-content"
+    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-border px-4 w-full flex items-center justify-center"
     tabindex="0"
   >
     Test

diff --git a/packages/react/src/OutlinedButtonBase/OutlinedButtonBase.tsx b/packages/react/src/OutlinedButtonBase/OutlinedButtonBase.tsx
@@ -49,7 +49,7 @@ export const OutlinedButtonBase: FC<OutlinedButtonBaseProps> = forwardRef<
           fieldSizeClassNames(size),
           !hasBorderColor && colorClasses[color],
           // this keeps the size consistent with inputs
-          "box-content",
+          "box-border",
           className
         )}
       />

diff --git a/packages/react/src/OutlinedButtonBase/__snapshots__/OutlinedButtonBase.test.tsx.snap b/packages/react/src/OutlinedButtonBase/__snapshots__/OutlinedButtonBase.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`OutlinedButtonBase should have an outline 1`] = `
 <div>
   <button
-    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed inline-flex items-center justify-center rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-content"
+    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed inline-flex items-center justify-center rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-border"
     tabindex="0"
   >
     Test

diff --git a/packages/react/src/OutlinedIconButton/__snapshots__/OutlinedIconButton.test.tsx.snap b/packages/react/src/OutlinedIconButton/__snapshots__/OutlinedIconButton.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`OutlinedIconButton should have an outline 1`] = `
 <div>
   <button
-    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed inline-flex items-center justify-center rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-content min-w-[48px]"
+    class="focus:outline-none cursor-pointer disabled:cursor-not-allowed inline-flex items-center justify-center rounded border shadow hover:shadow disabled:shadow-none transition-shadow ease-in duration-100 whitespace-nowrap font-bold text-base min-h-[44px] border box-border min-w-[48px]"
     tabindex="0"
   >
     Test