feat(minor-button): add position: absolute property to icon when comp…

…onent is icon only

adds position: absolute CSS property to `Icon` when component is icon only.
This prevents the rendered `Icon` from moving position on hover due to a reduction
in padding added during `ButtonMinor`s composition, which causes the `Icon` and
Portal used to to provide a tooltip message to stack on top of one another

fix #5946

cypress/components/button-minor/button-minor.test.js

@@ -94,6 +94,11 @@ context("Test for Button Minor component", () => {
       }
     );
 
+    it("when icon only, icon's position is absolute", () => {
+      CypressMountWithProviders(<ButtonMinor iconType="bin" />);
+      icon().should("have.css", "position", "absolute");
+    });
+
     it.each([
       [BUTTON_SIZES[0], 32],
       [BUTTON_SIZES[1], 40],

src/components/button-minor/button-minor.spec.tsx

@@ -6,6 +6,7 @@ import {
   ButtonTypes,
   SizeOptions,
 } from "../button/button.component";
+import StyledIcon from "../icon/icon.style";
 import ButtonMinor from "./button-minor.component";
 import { assertStyleMatch } from "../../__spec_helper__/test-utils";
 
@@ -88,6 +89,17 @@ describe("Button Minor", () => {
     }
   );
 
+  it("when icon only, icon's position is absolute", () => {
+    const wrapper = mount(<ButtonMinor iconType="bin" />);
+    assertStyleMatch(
+      {
+        position: "absolute",
+      },
+      wrapper,
+      { modifier: `${StyledIcon}` }
+    );
+  });
+
   it("when destructive prop is passed, renders with destructive styling", () => {
     const wrapper = mount(<ButtonMinor destructive>foo</ButtonMinor>);
     assertStyleMatch(

src/components/button-minor/button-minor.style.ts

@@ -17,6 +17,14 @@ function makeColors(color: string) {
 }
 
 const StyledButtonMinor = styled(Button)`
+  ${({ children }) =>
+    !children &&
+    css`
+      ${StyledIcon} {
+        position: absolute;
+      }
+    `}
+
   ${({ buttonType, destructive, disabled }) =>
     !destructive &&
     !disabled &&