fix(link): ensure Icon in component has inline display property to re…

…spect 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

@@ -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", "inherit");
+    });
+
     it.each([
       "top",
       "bottom",

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;

src/components/link/link.style.ts

@@ -176,11 +176,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" &&