From dae657e3e496829397ff979cf0ade1675cfc7a46 Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Thu, 13 Jun 2024 14:21:45 +0200
Subject: [PATCH] chore: WDS, adjust inner spacing of buttons with icons
 (#34210)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

When an icon is present reduce leading/trailing inner spacing.

| Before | After |
|--------|--------|
|
![before-regular-regular](https://github.com/appsmithorg/appsmith/assets/80973/0dcdc792-05d2-48c2-a67e-1044d0fef124)
|
![after-regular-regular](https://github.com/appsmithorg/appsmith/assets/80973/8569316f-d604-4397-a87e-daf2d0dabfc3)
|

Fixes #33917

## Automation

/ok-to-test tags="@tag.Anvil"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9481602526>
> Commit: 038d756b2f36020a9f9ed95bd2d681a91fb9f03d
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9481602526&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->




## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Adjusted padding styles for Button component to improve alignment
based on icon position (start/end) and size (small/medium).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/Button/src/styles.module.css   | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
index d215068e22..21c02a47c8 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
@@ -166,9 +166,10 @@
     min-inline-size: var(--sizing-12);
   }
 
-  &[data-icon-position="end"][data-size="small"]
-    [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1));
+  &[data-icon-position="start"][data-size="small"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-1) var(--inner-spacing-2);
   }
 
   &[data-icon-position="start"][data-size="small"]
@@ -176,6 +177,17 @@
     padding-inline-start: calc(var(--icon-size-1) + var(--inner-spacing-1));
   }
 
+  &[data-icon-position="end"][data-size="small"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-2) var(--inner-spacing-1);
+  }
+
+  &[data-icon-position="end"][data-size="small"]
+    [data-content]:has([data-icon]):has([data-text]) {
+    padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1));
+  }
+
   &[data-size="medium"] {
     min-inline-size: var(--sizing-9);
     padding-inline: var(--inner-spacing-3);
@@ -186,13 +198,25 @@
     min-inline-size: var(--sizing-22);
   }
 
-  &[data-icon-position="end"][data-size="medium"]
-    [data-content]:has([data-icon]):has([data-text]) {
-    padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1));
+  &[data-icon-position="start"][data-size="medium"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-2) var(--inner-spacing-3);
   }
 
   &[data-icon-position="start"][data-size="medium"]
     [data-content]:has([data-icon]):has([data-text]) {
     padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1));
   }
+
+  &[data-icon-position="end"][data-size="medium"]:has([data-icon]):has(
+      [data-text]
+    ) {
+    padding-inline: var(--inner-spacing-3) var(--inner-spacing-2);
+  }
+
+  &[data-icon-position="end"][data-size="medium"]
+    [data-content]:has([data-icon]):has([data-text]) {
+    padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1));
+  }
 }