Merge pull request #4028 from Sage/FE-4076-tile-select-title-adornmen…

…t-pill-styling-with-word-wrap fix(pill): fix text wrap if there are multiple words - FE-4076
Sage · May 18, 2021 · e120c1f · e120c1f
2 parents 37d6ad0 + 55680f1
commit e120c1f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/pill/pill.spec.js b/src/components/pill/pill.spec.js
@@ -23,6 +23,17 @@ describe("Pill", () => {
     return renderer(<Pill {...props}>My Text</Pill>);
   };
 
+  it("has required styles", () => {
+    const wrapper = render();
+
+    assertStyleMatch(
+      {
+        whiteSpace: "nowrap",
+      },
+      wrapper
+    );
+  });
+
   describe("when the children prop is passed to the component", () => {
     let instance, pill;
     beforeEach(() => {

diff --git a/src/components/pill/pill.style.js b/src/components/pill/pill.style.js
@@ -68,6 +68,7 @@ const PillStyle = styled.span`
       justify-content: center;
       border: 2px solid ${pillColor};
       height: auto;
+      white-space: nowrap;
 
       ${inFill &&
       css`