diff --git a/package.json b/package.json
index 72ec28dc371..18210f9a44d 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index c823c505632..83fdbd05272 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/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.
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/TruncatedHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/TruncatedHyperlink.test.jsx
new file mode 100644
index 00000000000..3aa88886a02
--- /dev/null
+++ b/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 () => (
+
+
+ Basic Test
+
+
+
+
+
+
+
+ External Test
+
+
+
+
+
+
+
+ Button Test
+ {}} text="Button Hyperlink that is really long and will get truncated" />
+
+
+ {}} text="Button Hyperlink that is really long and will get truncated" />
+
+
+
+ Document Test
+ {}} variant="document" text="Document Hyperlink that is really long and will get truncated" />
+
+
+ {}} variant="document" text="Document Hyperlink that is really long and will get truncated" />
+
+
+);
diff --git a/packages/terra-hyperlink/CHANGELOG.md b/packages/terra-hyperlink/CHANGELOG.md
index 164e827d579..d3dbc686014 100644
--- a/packages/terra-hyperlink/CHANGELOG.md
+++ b/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
diff --git a/packages/terra-hyperlink/src/Hyperlink.jsx b/packages/terra-hyperlink/src/Hyperlink.jsx
index c003439ad93..8ce2e83f805 100644
--- a/packages/terra-hyperlink/src/Hyperlink.jsx
+++ b/packages/terra-hyperlink/src/Hyperlink.jsx
@@ -245,7 +245,9 @@ class Hyperlink extends React.Component {
ref={this.linkRef}
>
- {text || children}
+
+ {text || children}
+
{getHyperlinkIcon(intl, variant)}
@@ -271,7 +273,9 @@ class Hyperlink extends React.Component {
ref={this.linkRef}
title={title}
>
- {text || children}
+
+ {text || children}
+
{getHyperlinkIcon(intl, variant)}
);
diff --git a/packages/terra-hyperlink/src/Hyperlink.module.scss b/packages/terra-hyperlink/src/Hyperlink.module.scss
index a02f075ae2b..54f35140448 100644
--- a/packages/terra-hyperlink/src/Hyperlink.module.scss
+++ b/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,7 +132,7 @@
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
@@ -137,6 +140,7 @@
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;
+ }
}
diff --git a/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap b/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
index 9f5139df98b..c0a308d0e3b 100644
--- a/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
+++ b/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
+
+ Default 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
+
+ Audio hyperlink
+
@@ -127,7 +135,11 @@ exports[`Hyperlink should render a default hyperlink 1`] = `
data-focus-styles-enabled="true"
href="https://www.cerner.com"
>
- Default hyperlink
+
+ Default hyperlink
+
`;
@@ -138,7 +150,11 @@ exports[`Hyperlink should render a disabled hyperlink 1`] = `
data-focus-styles-enabled="true"
role="link"
>
- Disabled hyperlink
+
+ Disabled hyperlink
+
`;
@@ -149,7 +165,11 @@ exports[`Hyperlink should render a document hyperlink 1`] = `
data-focus-styles-enabled="true"
href="https://www.cerner.com"
>
- Document hyperlink
+
+ Document hyperlink
+
@@ -182,7 +202,11 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
rel="noopener noreferrer"
target="_blank"
>
- External hyperlink
+
+ External hyperlink
+
@@ -214,7 +238,11 @@ exports[`Hyperlink should render a hyperlink button when oonClick is provided 1`
- Default hyperlink button
+
+ Default hyperlink 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
+
+ Image hyperlink
+
@@ -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
+
+ Underline hidden hyperlink
+
`;
@@ -267,7 +303,11 @@ exports[`Hyperlink should render a video hyperlink 1`] = `
data-focus-styles-enabled="true"
href="https://www.cerner.com"
>
- Video hyperlink
+
+ Video hyperlink
+
@@ -299,7 +339,11 @@ exports[`Hyperlink should render with custom props 1`] = `
rel="nofollow"
target="_self"
>
- Custom props hyperlink
+
+ Custom props hyperlink
+
`;
@@ -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
+
+ Custom target and rel props external hyperlink
+
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png
index 0835402992f..e74b44ea11b 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png
index 3c07accc041..2b81d553b06 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index 63d385941f1..1e9466043d2 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/truncated.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/truncated.png
new file mode 100644
index 00000000000..c9ceb9ac778
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/truncated.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png
index c8aa03151b2..d445f149ab3 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png
index e19ebb64278..935d63196fb 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png
index 27f662c3e2a..b131112f007 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
index 1cc00b0ca32..c6527530631 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png
index 44055a4c37b..693e7356327 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index e4f3c2c8000..b65258a82c5 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/truncated.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/truncated.png
new file mode 100644
index 00000000000..10253162e08
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/truncated.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png
index 9c341e8cc10..4991df3cda4 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png
index 11a273a90bf..376b1b3d3ad 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png
index 8d3733429d7..23f929fe12f 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png
index f5302eaacac..1e93eac8b21 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index 9754098c306..1082aff9250 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/truncated.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/truncated.png
new file mode 100644
index 00000000000..5def01a6fbc
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/truncated.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png
index a204e5e36aa..a04c709d568 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js b/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
index 94b6d442822..4ece32808b5 100644
--- a/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
+++ b/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');
+ });
});