From c8b452afa8f100df491ae2f88c9cee88595651e8 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 26 Jan 2024 06:48:26 -0500
Subject: [PATCH] fix(Button): adjust button icon in small, medium size
 (#15585)

---
 .../src/components/Button/Button.stories.js   | 20 ++++++-
 .../src/components/Button/button-story.scss   | 56 +++++++++++++++++++
 .../scss/components/button/_button.scss       |  6 ++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/Button/button-story.scss

diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js
index 5c4d2702d529..b8aac1a0b105 100644
--- a/packages/react/src/components/Button/Button.stories.js
+++ b/packages/react/src/components/Button/Button.stories.js
@@ -7,10 +7,11 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Add } from '@carbon/icons-react';
+import { Add, FitToScreen } from '@carbon/icons-react';
 import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Button.mdx';
+import './button-story.scss';
 
 export default {
   title: 'Components/Button',
@@ -62,6 +63,23 @@ export const Default = (args) => {
   return <Button {...args}>Button</Button>;
 };
 
+export const ButtonTest = () => {
+  const sizes = ['sm', 'md', 'lg', 'xl'];
+  return (
+    <div>
+      {sizes.map((size) => (
+        <div key={size} className="container">
+          <Button size={size} renderIcon={FitToScreen}>
+            <span>label</span>
+          </Button>
+          <div className={`ruler top ${size}`} />
+          <div className={`ruler bottom ${size}`} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export const Secondary = (args) => {
   return (
     <Button kind="secondary" {...args}>
diff --git a/packages/react/src/components/Button/button-story.scss b/packages/react/src/components/Button/button-story.scss
new file mode 100644
index 000000000000..3a1cd113ac45
--- /dev/null
+++ b/packages/react/src/components/Button/button-story.scss
@@ -0,0 +1,56 @@
+.container {
+  margin: 1rem;
+  position: relative;
+
+  button > span {
+    background-color: rebeccapurple;
+  }
+
+  button > svg {
+    background-color: rebeccapurple;
+  }
+
+  .ruler {
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    border-top: 1px dotted black;
+    box-sizing: border-box;
+
+    &.top {
+      &.sm {
+        top: 6px;
+      }
+
+      &.md {
+        top: 10px;
+      }
+
+      &.lg {
+        top: 14px;
+      }
+
+      &.xl {
+        top: 14px;
+      }
+    }
+
+    &.bottom {
+      &.sm {
+        top: 25px;
+      }
+
+      &.md {
+        top: 29px;
+      }
+
+      &.lg {
+        top: 33px;
+      }
+
+      &.xl {
+        top: 33px;
+      }
+    }
+  }
+}
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
index 35766ff05cd4..53dc9a605c4a 100644
--- a/packages/styles/scss/components/button/_button.scss
+++ b/packages/styles/scss/components/button/_button.scss
@@ -176,6 +176,12 @@
     }
   }
 
+  // Adjust icon positioning in small, medium variants only
+  .#{$prefix}--btn--sm:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon,
+  .#{$prefix}--btn--md:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
     background: $background-selected;
   }