Repository: marigold-ui/marigold
Pull request #3125 (2023-07-12 17:16:34)

fix icon button

vercel[bot]: [vc]: #UGYbJIzw5KhuizLA19Vh2cDK4jk2o0VsOTmwuD9SCjY=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9tYXJpZ29sZC9tYXJpZ29sZC81dm9RQmZwa1htWXNNd2k0SENZOTVidkM1R244IiwicHJldmlld1VybCI6Im1hcmlnb2xkLWdpdC1maXgtYnV0dG9uLW1hcmlnb2xkLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifSx7Im5hbWUiOiJtYXJpZ29sZC1kb2NzIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL21hcmlnb2xkL21hcmlnb2xkLWRvY3MvQmJwRlhTMzFlRjVHWWVydUhvMVFrdlk3U1lTNSIsIm5leHRDb21taXRTdGF0dXMiOiJQRU5ESU5HIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold/5voQBfpkXmYsMwi4HCY95bvC5Gn8)) | [Visit Preview](https://marigold-git-fix-button-marigold.vercel.app) | Jul 12, 2023 5:16pm |
| **marigold-docs** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-docs/BbpFXS31eF5GYeruHo1QkvY7SYS5)) |  | Jul 12, 2023 5:16pm |



codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3125](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (a641be9) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/25d0cc2d5f337801f299795ecafcc927e554b82c?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (25d0cc2) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3125   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          110       110           
  Lines         6846      6850    +4     
  Branches       305       305           
=========================================
+ Hits          6846      6850    +4     
```

| [Impacted Files](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | Coverage Δ | |
|---|---|---|
| [packages/components/src/Button/Button.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3125?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvQnV0dG9uL0J1dHRvbi50c3g=) | `100.00% <100.00%> (ø)` | |

sarahgm: @OsamaAbdellateef  conflicts


Patch:
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
index 97efd088f..8c5a2e4ee 100644
--- a/packages/components/src/Button/Button.tsx
+++ b/packages/components/src/Button/Button.tsx
@@ -89,7 +89,11 @@ export const Button = forwardRef(
         {...mergeProps(buttonProps, focusProps, hoverProps, props)}
         {...stateProps}
         ref={buttonRef}
-        className={cn(classNames, fullWidth ? 'w-full' : undefined)}
+        className={cn(
+          'inline-flex items-center justify-center gap-[0.5ch]',
+          classNames,
+          fullWidth ? 'w-full' : undefined
+        )}
       >
         {children}
       </Component>
diff --git a/themes/theme-core/src/components/Button.styles.ts b/themes/theme-core/src/components/Button.styles.ts
index 315d3ba1e..5220c1f79 100644
--- a/themes/theme-core/src/components/Button.styles.ts
+++ b/themes/theme-core/src/components/Button.styles.ts
@@ -2,7 +2,6 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Button: ThemeComponent<'Button'> = cva(
   [
-    'inline-flex items-center justify-center gap-[0.5ch]',
     'border-border-dark bg-bg-neutral text-text-dark ease-ease-out h-6 cursor-pointer rounded-sm border px-4 py-0 text-sm leading-6 transition-all duration-200 disabled:cursor-none',
     'disabled:border-border-disabled disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed',
     'outline-outline-focus outline-2 outline-offset-1 focus-visible:outline',


Test patch:
diff --git a/packages/components/src/Accordion/Accordion.test.tsx b/packages/components/src/Accordion/Accordion.test.tsx
index a37b67326..81a0d6727 100644
--- a/packages/components/src/Accordion/Accordion.test.tsx
+++ b/packages/components/src/Accordion/Accordion.test.tsx
@@ -129,7 +129,9 @@ test('accepts variant and size classnames', () => {
   const button = screen.getByText('Information');
 
   expect(button).toHaveAttribute('aria-expanded', 'false');
-  expect(button.className).toMatchInlineSnapshot(`"w-full bg-blue-600 p-8"`);
+  expect(button.className).toMatchInlineSnapshot(
+    `"inline-flex items-center justify-center gap-[0.5ch] w-full bg-blue-600 p-8"`
+  );
   fireEvent.click(button);
   expect(button).toHaveAttribute('aria-expanded', 'true');
 
@@ -150,7 +152,9 @@ test('default full width', () => {
 
   const button = screen.getByText('Information');
 
-  expect(button.className).toMatchInlineSnapshot(`"w-full"`);
+  expect(button.className).toMatchInlineSnapshot(
+    `"inline-flex items-center justify-center gap-[0.5ch] w-full"`
+  );
 });
 
 test('support default expanded keys', () => {
diff --git a/packages/components/src/Button/Button.test.tsx b/packages/components/src/Button/Button.test.tsx
index 335ec5e03..864872cc7 100644
--- a/packages/components/src/Button/Button.test.tsx
+++ b/packages/components/src/Button/Button.test.tsx
@@ -43,7 +43,7 @@ test('supports base styling classes', () => {
 
   expect(button).toMatchInlineSnapshot(`
     <button
-      class="align-center flex disabled:bg-gray-600"
+      class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600"
       type="button"
     >
       button
@@ -73,7 +73,7 @@ test('accepts other variants', () => {
   expect(button).toHaveClass('text-secondary-800');
   expect(button).toMatchInlineSnapshot(`
     <button
-      class="align-center flex disabled:bg-gray-600 text-secondary-800"
+      class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600 text-secondary-800"
       type="button"
     >
       button
diff --git a/packages/components/src/ComboBox/ComboBox.test.tsx b/packages/components/src/ComboBox/ComboBox.test.tsx
index a92691e15..b9533a3ab 100644
--- a/packages/components/src/ComboBox/ComboBox.test.tsx
+++ b/packages/components/src/ComboBox/ComboBox.test.tsx
@@ -106,7 +106,7 @@ test('supports classnames', () => {
   const label = screen.getByText('Label');
   const button = screen.getByRole('button');
   expect(button.className).toMatchInlineSnapshot(
-    `"absolute right-2 h-4 w-4 border-none bg-transparent p-0"`
+    `"inline-flex items-center justify-center gap-[0.5ch] absolute right-2 h-4 w-4 border-none bg-transparent p-0"`
   );
   expect(container?.className).toMatchInlineSnapshot(
     `"group/field w-[--fieldWidth]"`