fix(Button): preserve icon gap with box-sizing: border-box (#2928)

skbkontur · Jul 11, 2022 · a244b39 · a244b39
1 parent 230e15d
commit a244b39
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts
@@ -626,15 +626,15 @@ export const styles = memoizeStyle({
     `;
   },
 
-  iconNoRightPadding() {
+  iconNoRightMargin() {
     return css`
-      padding-right: 0;
+      margin-right: 0;
     `;
   },
 
   iconLink(t: Theme) {
     return css`
-      padding-right: ${t.btnLinkIconMarginRight};
+      margin-right: ${t.btnLinkIconMarginRight};
     `;
   },
 
@@ -665,19 +665,19 @@ export const styles = memoizeStyle({
   iconSmall(t: Theme) {
     return css`
       width: ${t.btnIconSizeSmall};
-      padding-right: ${t.btnIconGapSmall};
+      margin-right: ${t.btnIconGapSmall};
     `;
   },
   iconMedium(t: Theme) {
     return css`
       width: ${t.btnIconSizeMedium};
-      padding-right: ${t.btnIconGapMedium};
+      margin-right: ${t.btnIconGapMedium};
     `;
   },
   iconLarge(t: Theme) {
     return css`
       width: ${t.btnIconSizeLarge};
-      padding-right: ${t.btnIconGapLarge};
+      margin-right: ${t.btnIconGapLarge};
     `;
   },
 

diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
@@ -331,7 +331,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
       iconNode = (
         <span
           className={cx(styles.icon(), this.getSizeIconClassName(), {
-            [styles.iconNoRightPadding()]: !children,
+            [styles.iconNoRightMargin()]: !children,
             [styles.iconLink(this.theme)]: isLink,
           })}
         >