Move Truncate styles to PVC (#1590)

primer · Nov 10, 2022 · 820022c · 820022c
1 parent cad5c23
commit 820022c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 1 deletion.
diff --git a/.changeset/slow-grapes-dance.md b/.changeset/slow-grapes-dance.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `Truncate` styles to PVC
diff --git a/app/components/primer/beta/truncate.pcss b/app/components/primer/beta/truncate.pcss
@@ -0,0 +1,31 @@
+/* Truncate */
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+
+  & > .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    & + .Truncate-text {
+      margin-left: var(--primer-control-small-gap, 4px);
+    }
+
+    &.Truncate-text--primary {
+      flex-basis: 200%;
+    }
+
+    &.Truncate-text--expandable:hover,
+    &.Truncate-text--expandable:focus,
+    &.Truncate-text--expandable:active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
@@ -5,3 +5,5 @@
 @import "./beta/button.pcss";
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
+@import "./beta/truncate.pcss";
+@import "./truncate.pcss";
diff --git a/app/components/primer/truncate.pcss b/app/components/primer/truncate.pcss
@@ -0,0 +1,30 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+.css-truncate {
+  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+  &.css-truncate-overflow,
+  & .css-truncate-overflow,
+  &.css-truncate-target,
+  & .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* css-truncate-target will shorten text with an ellipsis and a max width */
+  &.css-truncate-target,
+  & .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+  &.expandable.zeroclipboard-is-hover .css-truncate-target,
+  &.expandable.zeroclipboard-is-hover.css-truncate-target,
+  &.expandable:hover .css-truncate-target,
+  &.expandable:hover.css-truncate-target {
+    max-width: 10000px !important;
+  }
+}
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
@@ -14,7 +14,6 @@
  *= require @primer/css/dist/navigation.css
  *= require @primer/css/dist/pagination.css
  *= require @primer/css/dist/tooltips.css
- *= require @primer/css/dist/truncate.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/alerts.css