[terra-hyperlink] Hyperlink ellipses #4072
Conversation
| border-style: dashed; | ||
| margin-bottom: 10px; | ||
| } | ||
| } |
There was a problem hiding this comment.
If this is only used for a single file, can we use inline styles for this? e.g.
https://css-tricks.com/different-ways-to-write-css-in-react/#aa-write-inline-styles
| 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; |
There was a problem hiding this comment.
Why are we changing the style from inline-block to inline-flex? I would not expect this change to be necessary.
There was a problem hiding this comment.
Since we're needing to have 2 spans with 1 being an ellipses but another being on the same level, we'll need to go with this.
There was a problem hiding this comment.
Also inline-block wasn't allowing us to properly truncate without the hyperlink "clickable" area extending past the "visual" area of the hyperlink or other visual issues. Using inline-flex, we were able to properly have the "text" portion of hyperlink resize itself so it would truncate without issue while allowing the icon to always render at full size.
| @@ -245,7 +245,9 @@ class Hyperlink extends React.Component { | |||
| ref={this.linkRef} | |||
| > | |||
| <span className={cx('button-inner')}> | |||
| {text || children} | |||
| <span className={cx('inner-text')}> | |||
There was a problem hiding this comment.
Shouldn't we be able to accomplish this with one span?
There was a problem hiding this comment.
As per the requirements, we need to make only the text have an ellipsis while the icon stays at the same level. So we need to use 2 spans for this. Otherwise it will start wrapping around if we try to implement the ellipses without having an additional inner span.
Summary
What was changed:
A hyperlink will now truncate with an ellipses if its content should overflow.
Why it was changed:
Feature request from a consuming team
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-10303
Thank you for contributing to Terra.
@cerner/terra