diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb-truncate.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb-truncate.svg new file mode 100644 index 0000000000..00bdbe8351 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb-truncate.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb.png deleted file mode 100644 index ffada436ff..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/breadcrumb.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/end-line.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/end-line.svg new file mode 100644 index 0000000000..f31625d646 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/end-line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/endline.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/endline.png deleted file mode 100644 index b2a4676406..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/endline.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/front-line.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/front-line.svg new file mode 100644 index 0000000000..d1d0405829 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/front-line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/frontline.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/frontline.png deleted file mode 100644 index 7cab1bb296..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/frontline.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/long-url.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/long-url.svg new file mode 100644 index 0000000000..885e12ed65 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/long-url.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/longurl.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/longurl.png deleted file mode 100644 index bb59957a0c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/longurl.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/mid-line.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/mid-line.svg new file mode 100644 index 0000000000..946779224c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/mid-line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/midline.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/midline.png deleted file mode 100644 index a6f421fc0b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/midline.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/table-truncate.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/table-truncate.svg new file mode 100644 index 0000000000..8ba3ef1569 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/table-truncate.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/tabletruncate.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/tabletruncate.png deleted file mode 100644 index dcbee4898d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/tabletruncate.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/text-alerts.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/text-alerts.svg new file mode 100644 index 0000000000..6dfc1da2b9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/text-alerts.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncate examples tooltip.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncate examples tooltip.png deleted file mode 100644 index efbb65768f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncate examples tooltip.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncatealert.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncatealert.png deleted file mode 100644 index 6b80f3c7f5..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/img/truncatealert.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md index 9d3aa4da26..f1a6a59c02 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md @@ -3,6 +3,8 @@ id: Truncate section: components --- +import '../components.css'; + ## Elements * **Content**: text string to truncate * **Position**: where the text will be truncated from, ie. front, middle, or end @@ -13,19 +15,19 @@ section: components 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. - image showing breadcrumbs truncation +
![image showing breadcrumbs truncation](./img/breadcrumb-truncate.svg)
* **Long URL's**: Use a URL truncate when the url overflows its container. - image showing long url truncation +
![image showing long url truncation](./img/long-url.svg)
* **Description text/alerts**: Use a truncate for description text to create more room on the page. - img showing alert truncate +
![image showing alert truncation](./img/text-alerts.svg)
* **Table inputs**: Use truncation when the data within a table overflows its container. - image showing table truncate +
![image showing table truncation](./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. @@ -35,17 +37,17 @@ Truncated items are indicated by an ellipsis (...) and are used when trying to a ### 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. - image showing table truncate +
![image showing truncation at the start of a text string](./img/front-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. - image showing table truncate +
![image showing truncation at the middle of a text string](./img/mid-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. - - image showing table truncate + +
![image showing truncation at the end of a text string](./img/end-line.svg)
## Content considerations * If the text string is part of a link, the ellipsis should also be a part of the link. @@ -55,6 +57,4 @@ An end-line truncate is used at the end of a text string to shorten the sequence * 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. - - +* If a table column is resizable, the truncated text should adjust accordingly. \ No newline at end of file