Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: WDS, adjust inner spacing of buttons with icons (#34210)

Browse Source 
## 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"

### 🔍 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 -->
This commit is contained in:
vadim 2024-06-13 14:21:45 +02:00 committed by GitHub
parent d53fdc7801
commit dae657e3e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
View File

@ -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));
}
}