Repository: Sage/carbon (ts)

Issue:
Button Minor with Tooltip - Icon moves up vertically when hovered
### Current behaviour

Tooltip Icon moves up vertically when hovered.

![Screenshot 2023-03-28 at 17 57 39](https://user-images.githubusercontent.com/56251247/228313471-96fec3b8-bd4b-4de7-a90b-fb06da1cc20b.png)

![Screenshot 2023-03-28 at 17 57 47](https://user-images.githubusercontent.com/56251247/228313451-3130ea22-8567-41fb-9f02-eec85e2615e7.png)


### Expected behaviour

Tooltip Icon should remain in the same position when Button Minor is hovered over.

### CodeSandbox or Storybook URL

https://carbon.sage.com/?path=/docs/button-minor--primary-button#icon-only-button

### JIRA Ticket (Sage Only)

_No response_

### Suggested Solution

_No response_

### Carbon Version

Latest

### Design Tokens Version

_No response_

### What browsers are you seeing the problem on?

Firefox, Chrome, Safari

### What Operating System are you seeing the problem on?

MacOS

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
 feat(minor-button): add position: absolute property to icon when component is icon only
fix #5946

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes.

If applicable, add screenshots of a codesandbox to help explain your request. You can paste these directly into GitHub.

Please DO NOT share screenshots or the source code of your project.

You can create a codesandbox to show the behaviour before/after this pull request by forking this template https://codesandbox.io/s/carbon-quickstart-j5pb2

If you include a CodeSandbox link, the bot will fork it with the new built version of carbon.
If you have a commit that includes fixes #XXXX and issue #XXXX has a CodeSandbox link in the body, the bot will fork
it with the new built version of carbon.
-->

This PR will add 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

![2023-04-14 12 10 25](https://user-images.githubusercontent.com/114918852/232029667-90db72b5-8a0c-4d29-8100-5dde63a0f673.gif)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change.

If applicable, add screenshots. You can paste these directly into GitHub.
-->

Currently, the `Icon` rendered within the component and Portal used to to provide a tooltip message stack on top of one another, this is due to the rendred `Icon` having relative positioning, which is needed for other variants of the button and a reduction in padding implemented during the components composition.

![2023-04-14 12 09 44](https://user-images.githubusercontent.com/114918852/232029922-79d466d9-55ca-44aa-a447-876b5365f518.gif)

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [x] Cypress automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in CodeSandbox/storybook
- [ ] Add new Cypress test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!-- How can a reviewer test this PR? -->

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by `codesandbox[bot]`.

<!-- Add CodeSandbox here -->


Patch:
diff --git a/src/components/button-minor/button-minor.spec.tsx b/src/components/button-minor/button-minor.spec.tsx
index 30180737c..3abe74ecc 100644
--- a/src/components/button-minor/button-minor.spec.tsx
+++ b/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,28 @@ describe("Button Minor", () => {
     }
   );
 
+  it("with icon and text children, icon's position is undefined", () => {
+    const wrapper = mount(<ButtonMinor iconType="bin">Foo </ButtonMinor>);
+    assertStyleMatch(
+      {
+        position: undefined,
+      },
+      wrapper,
+      { modifier: `${StyledIcon}` }
+    );
+  });
+
+  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(
diff --git a/src/components/button-minor/button-minor.style.ts b/src/components/button-minor/button-minor.style.ts
index e8b56ebf4..a200554d7 100644
--- a/src/components/button-minor/button-minor.style.ts
+++ b/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 &&


Test patch:
diff --git a/cypress/components/button-minor/button-minor.test.js b/cypress/components/button-minor/button-minor.test.js
index e84b62ffa..728b9e818 100644
--- a/cypress/components/button-minor/button-minor.test.js
+++ b/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],