[terra-hyperlink] Hyperlink ellipses (#4072)

Co-authored-by: BenBoersma <[email protected]>

package.json

@@ -108,7 +108,7 @@
     "wdio:lowlight": "terra wdio --themes clinical-lowlight-theme",
     "wdio:fusion": "terra wdio --themes orion-fusion-theme",
     "wdio:redwood": "terra wdio --themes redwood-theme",
-    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme redwood-theme",
+    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme",
     "wdio:docker": "terra wdio --disable-selenium-service=true --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
   }
 }

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+* Added
+  * Added an example for `terra-hyperlink` to demonstrate text ellipses when its content should overflow.
 * Changed
   * Fixed typos and imports in `terra-list` docs.
 

packages/terra-core-docs/src/terra-dev-site/test/hyperlink/TruncatedHyperlink.test.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable react/forbid-dom-props */
+import React from 'react';
+import Hyperlink from 'terra-hyperlink';
+
+const styles = {
+  truncated: {
+    width: '150px',
+    height: '50px',
+    borderStyle: 'dashed',
+    marginBottom: '10px',
+  },
+};
+
+export default () => (
+  <div role="main">
+    <div style={styles.truncated}>
+      Basic Test
+      <Hyperlink id="basic-hyperlink1" href="https://www.cerner.com" text="Default hyperlink that is really long and will get truncated" />
+    </div>
+    <div style={styles.truncated}>
+      <Hyperlink id="basic-hyperlink2" href="https://www.cerner.com" text="Default hyperlink that is really long and will get truncated" />
+    </div>
+
+    <div style={styles.truncated}>
+      External Test
+      <Hyperlink id="external-hyperlink1" href="https://www.cerner.com" variant="external" text="External Hyperlink that is really long and will get truncated" />
+    </div>
+    <div style={styles.truncated}>
+      <Hyperlink id="external-hyperlink2" href="https://www.cerner.com" variant="external" text="External Hyperlink that is really long and will get truncated" />
+    </div>
+
+    <div style={styles.truncated}>
+      Button Test
+      <Hyperlink id="button-hyperlink1" href="https://www.cerner.com" onClick={() => {}} text="Button Hyperlink that is really long and will get truncated" />
+    </div>
+    <div style={styles.truncated}>
+      <Hyperlink id="button-hyperlink2" href="https://www.cerner.com" onClick={() => {}} text="Button Hyperlink that is really long and will get truncated" />
+    </div>
+
+    <div style={styles.truncated}>
+      Document Test
+      <Hyperlink id="document-hyperlink1" href="https://www.cerner.com" onClick={() => {}} variant="document" text="Document Hyperlink that is really long and will get truncated" />
+    </div>
+    <div style={styles.truncated}>
+      <Hyperlink id="document-hyperlink2" href="https://www.cerner.com" onClick={() => {}} variant="document" text="Document Hyperlink that is really long and will get truncated" />
+    </div>
+  </div>
+);

packages/terra-hyperlink/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Hyperlink now ellipses when its content should overflow.
+
 ## 2.67.1 - (February 27, 2024)
 
 * Fixed

packages/terra-hyperlink/src/Hyperlink.jsx

@@ -245,7 +245,9 @@ class Hyperlink extends React.Component {
           ref={this.linkRef}
         >
           <span className={cx('button-inner')}>
-            {text || children}
+            <span className={cx('inner-text')}>
+              {text || children}
+            </span>
             {getHyperlinkIcon(intl, variant)}
           </span>
         </button>
@@ -271,7 +273,9 @@ class Hyperlink extends React.Component {
         ref={this.linkRef}
         title={title}
       >
-        {text || children}
+        <span className={cx('inner-text')}>
+          {text || children}
+        </span>
         {getHyperlinkIcon(intl, variant)}
       </a>
     );

packages/terra-hyperlink/src/Hyperlink.module.scss

@@ -8,11 +8,14 @@
     background-color: transparent; // Remove the gray background on active links in IE 10
     color: var(--terra-hyperlink-color, #006fc3);
     cursor: pointer;
-    display: inline-block; // prevents variant icon from breaking onto its own line
     outline: none;
     text-decoration: var(--terra-hyperlink-text-decoration, underline);
     touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
     vertical-align: baseline;
+    display: inline-flex;
+    align-items: baseline;
+    max-width: min-content;
+    width: 100%;
 
     &:visited,
     &.is-visited {
@@ -129,14 +132,15 @@
     line-height: inherit;
     margin: 0; // reset for Safari, defaults to 2px
     outline: none;
-    overflow: visible; // reset for IE
+    overflow: hidden; // reset for IE
     padding: 0;
     pointer-events: auto;
     position: relative; // reset for IE
     text-align: left;
     top: 0;  // reset for IE
     touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
     vertical-align: baseline;
+    width: 100%;
 
     .button-inner {
       font-family: inherit;
@@ -145,6 +149,15 @@
       min-width: 0;
       position: relative; // reset for IE
       top: 0;  // reset for IE
+      display: flex;
+      min-width: 0;
+      max-width: min-content;
     }  
   } 
+
+  .inner-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }

packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap

@@ -83,7 +83,11 @@ exports[`Hyperlink correctly applies the theme context className 1`] = `
         onKeyUp={[Function]}
         onMouseDown={[Function]}
       >
-        Default hyperlink
+        <span
+          className="inner-text"
+        >
+          Default hyperlink
+        </span>
       </a>
     </Hyperlink>
   </InjectIntl(Hyperlink)>
@@ -97,7 +101,11 @@ exports[`Hyperlink should render a audio hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Audio hyperlink
+  <span
+    class="inner-text"
+  >
+    Audio hyperlink
+  </span>
   <span
     class="icon"
   >
@@ -127,7 +135,11 @@ exports[`Hyperlink should render a default hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Default hyperlink
+  <span
+    class="inner-text"
+  >
+    Default hyperlink
+  </span>
 </a>
 `;
 
@@ -138,7 +150,11 @@ exports[`Hyperlink should render a disabled hyperlink 1`] = `
   data-focus-styles-enabled="true"
   role="link"
 >
-  Disabled hyperlink
+  <span
+    class="inner-text"
+  >
+    Disabled hyperlink
+  </span>
 </a>
 `;
 
@@ -149,7 +165,11 @@ exports[`Hyperlink should render a document hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Document hyperlink
+  <span
+    class="inner-text"
+  >
+    Document hyperlink
+  </span>
   <span
     class="icon"
   >
@@ -182,7 +202,11 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
   rel="noopener noreferrer"
   target="_blank"
 >
-  External hyperlink
+  <span
+    class="inner-text"
+  >
+    External hyperlink
+  </span>
   <span
     class="icon"
   >
@@ -214,7 +238,11 @@ exports[`Hyperlink should render a hyperlink button when oonClick is provided 1`
   <span
     class="button-inner"
   >
-    Default hyperlink button
+    <span
+      class="inner-text"
+    >
+      Default hyperlink button
+    </span>
   </span>
 </button>
 `;
@@ -226,7 +254,11 @@ exports[`Hyperlink should render a image hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Image hyperlink
+  <span
+    class="inner-text"
+  >
+    Image hyperlink
+  </span>
   <span
     class="icon"
   >
@@ -256,7 +288,11 @@ exports[`Hyperlink should render a underline hidden hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Underline hidden hyperlink
+  <span
+    class="inner-text"
+  >
+    Underline hidden hyperlink
+  </span>
 </a>
 `;
 
@@ -267,7 +303,11 @@ exports[`Hyperlink should render a video hyperlink 1`] = `
   data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
-  Video hyperlink
+  <span
+    class="inner-text"
+  >
+    Video hyperlink
+  </span>
   <span
     class="icon"
   >
@@ -299,7 +339,11 @@ exports[`Hyperlink should render with custom props 1`] = `
   rel="nofollow"
   target="_self"
 >
-  Custom props hyperlink
+  <span
+    class="inner-text"
+  >
+    Custom props hyperlink
+  </span>
 </a>
 `;
 
@@ -312,7 +356,11 @@ exports[`Hyperlink should render with custom props with external variant 1`] = `
   rel="external"
   target="_parent"
 >
-  Custom target and rel props external hyperlink
+  <span
+    class="inner-text"
+  >
+    Custom target and rel props external hyperlink
+  </span>
   <span
     class="icon"
   >

packages/terra-hyperlink/tests/wdio/hyperlink-spec.js

@@ -85,4 +85,9 @@ Terra.describeViewports('Hyperlink', ['tiny'], () => {
 
     Terra.validates.element('hyperlink-button');
   });
+
+  it('should render Hyperlinks with ellipses when the context should overflow', () => {
+    browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/truncated-hyperlink');
+    Terra.validates.element('truncated');
+  });
 });