From 5d579084d96b21140fb44a8b81d00a1d8e7ff9c1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 23 Jan 2026 16:08:55 -0500 Subject: [PATCH 1/3] docs(truncate): Updates truncation design guidelines. --- .../components/truncate/img/end-line.svg | 2 +- .../components/truncate/img/front-line.svg | 2 +- .../components/truncate/img/mid-line.svg | 2 +- .../components/truncate/img/truncate.svg | 36 +++++++++ .../content/components/truncate/truncate.md | 79 +++++++++++-------- .../content-design/grammar/truncation.md | 2 +- 6 files changed, 88 insertions(+), 35 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/truncate/img/truncate.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg index f31625d646..2d72a119c0 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg @@ -2,5 +2,5 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg index d1d0405829..d10c159db0 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg @@ -2,5 +2,5 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg index 946779224c..3795b46800 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg @@ -2,5 +2,5 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/truncate.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/truncate.svg new file mode 100644 index 0000000000..02e2bca308 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/truncate.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md b/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md index f1a6a59c02..56a96dd2ce 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md @@ -6,55 +6,72 @@ section: components import '../components.css'; ## Elements -* **Content**: text string to truncate -* **Position**: where the text will be truncated from, ie. front, middle, or end -* **Tooltip hover**: displayes full-text string -* **Ellipsis**: indicates a truncate is used + +
+![A text input field containing a string truncated in the middle with an ellipsis. A black tooltip below shows the full text string.](./img/truncate.svg) +
+ +1. **Content:** A long text string that requires truncation. +2. **Ellipsis:** The truncation indicator (...) placed at the start, middle, or end of a string, depending on the [variation](#variations). +3. **Tooltip:** The message shown on hover to display the full text string. ## Usage -Truncated items are indicated by an ellipsis (...) and are used when trying to avoid multiple lines of text or when a container is being overflowed by content. Truncation should only be used when 3 or more characters are being represented and there are still at least 4 non-truncated characters displayed. Truncated items should always include a tooltip on hover, showcasing the full string sequence. -* **Breadcrumbs**: Use a breadcrumbs truncate when there isn’t enough room to display the entire breadcrumbs list, or as a way of managing relevance. +Truncated items are indicated by an ellipsis (...) and are used to reduce multiple lines of text or when a container is being overflowed by content. Truncation should only be used when 3 or more characters are being represented and there are still at least 4 non-truncated characters displayed. + +Truncated items should always include a tooltip on hover, showcasing the full string sequence. + +### Breadcrumbs +Use a breadcrumbs truncate when there isn’t enough room to display the entire breadcrumbs list, or to manage relevance. -
![image showing breadcrumbs truncation](./img/breadcrumb-truncate.svg)
+
+![A row of text strings separated by right-angle carets. Between the first two strings, an ellipsis replaces text, and a black tooltip displays "Breadcrumb 2 Breadcrumb 3" to show the truncated items.](./img/breadcrumb-truncate.svg) +
-* **Long URL's**: Use a URL truncate when the url overflows its container. +### Long URLs +Use a URL truncate when the URL overflows its container. -
![image showing long url truncation](./img/long-url.svg)
+
+![A URL path truncated in the middle by an ellipsis. A black tooltip is displayed above the path showing the full URL.](./img/long-url.svg) +
-* **Description text/alerts**: Use a truncate for description text to create more room on the page. +### Description text/alerts +Use a truncate for description text to create more room on the page. -
![image showing alert truncation](./img/text-alerts.svg)
+
+![Two alert components, one with a title that is truncated at the end with an ellipsis, and one where the description is truncated.](./img/text-alerts.svg) +
-* **Table inputs**: Use truncation when the data within a table overflows its container. +### Table inputs +Use truncation when the data within a table overflows its container. If a table column is resizable, the truncated text should adjust accordingly. -
![image showing table truncation](./img/table-truncate.svg)
+
+![A data table where one column contains truncated text. An ellipsis appears at the end of the cell content to indicate it has been shortened, and a tooltip displays the full context.](./img/table-truncate.svg) +
## Behavior - A truncate indicates that the text string has been shortened, when the user hovers a mouse over the ellipsis, the full text will be displayed as a tooltip. +A truncate component indicates that a text string has been shortened. When a user hovers over truncated text, the full text will be displayed as a tooltip. ## Variations -### Front-line -A front-line truncate is used at the beginning of a text string to indicate the text is being continued from a previous location. +### Default (end) +The default truncate is used at the end of a text string to shorten the sequence and indicate that there is more content located elsewhere. -
![image showing truncation at the start of a text string](./img/front-line.svg)
+
![A text string where the last several characters are replaced by an ellipsis at the end of the line.](./img/end-line.svg)
-### Mid-line -A mid-line truncate is used to shorten a text string when the end of it can’t be truncated by an ellipsis. Also used when several text strings have the exact same middle characters, but the beginning and endings vary. +### Start +A start truncate is used at the beginning of a text string to indicate the text is being continued from a previous location. -
![image showing truncation at the middle of a text string](./img/mid-line.svg)
+
![A text string where the beginning characters are replaced by an ellipsis, while the end of the string remains visible.](./img/front-line.svg)
-### End-line -An end-line truncate is used at the end of a text string to shorten the sequence and indicate that there is more content located elsewhere. +### Middle +A middle truncate is used to shorten a text string when the end of it can’t be truncated by an ellipsis. Also used when several text strings have the exact same middle characters, but the beginning and endings vary. -
![image showing truncation at the end of a text string](./img/end-line.svg)
+
![A text string where an ellipsis is placed in the center, keeping both the start and the end of the string visible.](./img/mid-line.svg)
## Content considerations -* If the text string is part of a link, the ellipsis should also be a part of the link. -* Always include hover tooltip to display the entire string to the user. -* Avoid abbreviations or truncated text in navigation items. -* Truncate text within tables where the content overflows the container. Avoid truncating table headings. -* When truncating text, aim to leave at least four characters un-truncated so the user understands what it is (for example, don’t truncate “demo1.internal-el6satelite” to “de…”). -* Truncate long item names if necessary. -* Avoid truncation directly before or after punctuation. -* If a table column is resizable, the truncated text should adjust accordingly. \ No newline at end of file +- Include the ellipsis as part of a link when the truncated text is a link. +- Always provide a tooltip to display the entire string to the user upon hover. +- Avoid truncating navigation items. +- Truncate text within tables when it overflows the cell, but avoid truncating table headings. +- Maintain at least 4 visible characters so users can better understand content (for example, don’t truncate “demo1.internal-el6satelite” to “de…”). +- Avoid placing truncation directly before or after punctuation. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/content-design/grammar/truncation.md b/packages/documentation-site/patternfly-docs/content/content-design/grammar/truncation.md index 84f3f99a62..ca128b6450 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/grammar/truncation.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/grammar/truncation.md @@ -4,7 +4,7 @@ section: content-design subsection: grammar --- -**Truncate**, or shorten, your content whenever a string overflows the container and you don't want multiple lines of text. Typically, this is done by utilizing ellipses (...). +**Truncate**, or shorten, your content whenever a string overflows the container and you don't want multiple lines of text. Typically, this is done by utilizing ellipses (...), either manually, or via our [truncate component](/components/truncate). For example, use truncation when a URL overflows its container: From 8e38e0da2fce58afc885dbd1abb8c620ab688de8 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 23 Jan 2026 16:09:59 -0500 Subject: [PATCH 2/3] Fix typo and update a couple of spacing things. --- .../content/components/truncate/truncate.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md b/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md index 56a96dd2ce..d76224f131 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/truncate.md @@ -56,22 +56,28 @@ A truncate component indicates that a text string has been shortened. When a use ### Default (end) The default truncate is used at the end of a text string to shorten the sequence and indicate that there is more content located elsewhere. -
![A text string where the last several characters are replaced by an ellipsis at the end of the line.](./img/end-line.svg)
+
+![A text string where the last several characters are replaced by an ellipsis at the end of the line.](./img/end-line.svg) +
### Start A start truncate is used at the beginning of a text string to indicate the text is being continued from a previous location. -
![A text string where the beginning characters are replaced by an ellipsis, while the end of the string remains visible.](./img/front-line.svg)
+
+![A text string where the beginning characters are replaced by an ellipsis, while the end of the string remains visible.](./img/front-line.svg) +
### Middle A middle truncate is used to shorten a text string when the end of it can’t be truncated by an ellipsis. Also used when several text strings have the exact same middle characters, but the beginning and endings vary. -
![A text string where an ellipsis is placed in the center, keeping both the start and the end of the string visible.](./img/mid-line.svg)
+
+![A text string where an ellipsis is placed in the center, keeping both the start and the end of the string visible.](./img/mid-line.svg) +
## Content considerations - Include the ellipsis as part of a link when the truncated text is a link. - Always provide a tooltip to display the entire string to the user upon hover. - Avoid truncating navigation items. - Truncate text within tables when it overflows the cell, but avoid truncating table headings. -- Maintain at least 4 visible characters so users can better understand content (for example, don’t truncate “demo1.internal-el6satelite” to “de…”). +- Maintain at least 4 visible characters so users can better understand content (for example, don’t truncate “demo1.internal-el6satellite” to “de…”). - Avoid placing truncation directly before or after punctuation. \ No newline at end of file From 90f3819092eff01ea446c8ea8311ed06bd347c27 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 27 Jan 2026 13:49:30 -0500 Subject: [PATCH 3/3] Update images. --- .../content/components/truncate/img/end-line.svg | 10 +++++----- .../content/components/truncate/img/front-line.svg | 10 +++++----- .../content/components/truncate/img/mid-line.svg | 10 +++++----- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg index 2d72a119c0..91edce806a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/end-line.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg index d10c159db0..f4b601626d 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/front-line.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg b/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg index 3795b46800..aa7480f94a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg +++ b/packages/documentation-site/patternfly-docs/content/components/truncate/img/mid-line.svg @@ -1,6 +1,6 @@ - - - - - + + + + +