From be0a33c07b18cc36633ad65369915f2256e54ae2 Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Thu, 5 Oct 2023 14:43:23 +0100
Subject: [PATCH] fix(link): ensure Icon in component has inline display
 property to respect dimensions of the parent

all children of anchor elements in `Link` have the inline-block display property applied.
However due to our new `Icon` font sizes this now causes `Icon`s to not respect the dimensions
of parent containers. To mitigate this we've set display to inline instead when `Link`s are
rendered with no children and an `Icon`, ensuring the parents dimensions are properly respected

fix #6295
---
 cypress/components/link/link.cy.tsx       | 15 ++++++++++-
 src/components/link/link-test.stories.tsx | 33 ++++++++++++++++++++++-
 src/components/link/link.spec.tsx         | 26 ++++++++++++++++++
 src/components/link/link.style.ts         |  4 +--
 4 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/cypress/components/link/link.cy.tsx b/cypress/components/link/link.cy.tsx
index ad53cbcdec..d0edf14a38 100644
--- a/cypress/components/link/link.cy.tsx
+++ b/cypress/components/link/link.cy.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable jest/valid-expect, jest/no-disabled-tests, no-unused-expressions */
 import React from "react";
-import { LinkProps } from "components/link";
+import Link, { LinkProps } from "../../../src/components/link";
 import { LinkComponent } from "../../../src/components/link/link-test.stories";
 import { skipLink } from "../../locators/link/index";
 import { keyCode } from "../../support/helper";
 import { CHARACTERS } from "../../support/component-helper/constants";
 import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
 import Box from "../../../src/components/box";
+import { ICON } from "../../locators/locators";
 import {
   icon,
   tooltipPreview,
@@ -72,6 +73,18 @@ context("Test for Link component", () => {
       tooltipPreview().should("have.text", testCypress);
     });
 
+    it("when no children are passed, there should be no text decoration on the anchor element", () => {
+      CypressMountWithProviders(<Link icon="bin" href="www.sage.com" />);
+
+      link().find("a").should("have.css", "text-decoration-line", "none");
+    });
+
+    it("when no children are passed, link should have the inline display property", () => {
+      CypressMountWithProviders(<Link icon="bin" href="www.sage.com" />);
+
+      link().find(ICON).should("have.css", "display", "inline");
+    });
+
     it.each([
       "top",
       "bottom",
diff --git a/src/components/link/link-test.stories.tsx b/src/components/link/link-test.stories.tsx
index 92568ddb1d..b2f7d707b9 100644
--- a/src/components/link/link-test.stories.tsx
+++ b/src/components/link/link-test.stories.tsx
@@ -3,10 +3,11 @@ import { action } from "@storybook/addon-actions";
 import { ICONS } from "../icon/icon-config";
 import { LINK_ALIGNMENTS, LINK_POSITIONS, LINK_VARIANTS } from "./link.config";
 import Link, { LinkProps } from "./link.component";
+import Box from "../box";
 
 export default {
   title: "Link/Test",
-  includeStories: ["DefaultStory"],
+  includeStories: ["DefaultStory", "FlexContainer"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -94,6 +95,36 @@ DefaultStory.args = {
   isDarkBackground: false,
 };
 
+export const FlexContainer = () => {
+  const link = (
+    <Box
+      display="flex"
+      flexDirection="row"
+      justifyContent="flex-end"
+      alignItems="center"
+      width="60px"
+      height="40px"
+      bg="red"
+      mx={5}
+    >
+      <Link icon="close" variant="neutral" />
+    </Box>
+  );
+  return (
+    <div
+      style={{
+        margin: "64px",
+        width: "fit-content",
+        padding: "8px",
+      }}
+    >
+      {link}
+    </div>
+  );
+};
+
+FlexContainer.parameters = { chromatic: { disableSnapshot: false } };
+
 export const LinkComponent = (props: LinkProps) => {
   return (
     <div
diff --git a/src/components/link/link.spec.tsx b/src/components/link/link.spec.tsx
index f3ba40df40..6cc4a52063 100644
--- a/src/components/link/link.spec.tsx
+++ b/src/components/link/link.spec.tsx
@@ -208,6 +208,32 @@ describe("Link", () => {
     });
   });
 
+  describe("when a link is rendered with an icon and no children", () => {
+    beforeEach(() => {
+      wrapper = mount(<Link icon="home" href="www.sage.com" />);
+    });
+
+    it("there should be no text decoration on the anchor element", () => {
+      assertStyleMatch(
+        {
+          textDecoration: "none",
+        },
+        wrapper.find(StyledLink),
+        { modifier: "a" }
+      );
+    });
+
+    it("link should have the inline display property", () => {
+      assertStyleMatch(
+        {
+          display: "inline",
+        },
+        wrapper.find(StyledLink),
+        { modifier: `a > ${StyledIcon}` }
+      );
+    });
+  });
+
   describe("when the `onKeyDown` event is triggered", () => {
     let onClickFn: () => jest.Mock;
     let onKeyDownFn: () => jest.Mock;
diff --git a/src/components/link/link.style.ts b/src/components/link/link.style.ts
index 903111f3ba..60ada37c3c 100644
--- a/src/components/link/link.style.ts
+++ b/src/components/link/link.style.ts
@@ -161,11 +161,11 @@ const StyledLink = styled.span<StyledLinkProps & PrivateStyledLinkProps>`
 
       a,
       button {
-        text-decoration: underline;
+        text-decoration: ${hasContent ? "underline" : "none"};
         ${isMenuItem && "display: inline-block;"}
 
         > ${StyledIcon} {
-          display: inline-block;
+          display: ${hasContent ? "inline-block" : "inline"};
           position: relative;
           vertical-align: middle;
           ${iconAlign === "left" &&