@primer/view-components 0.45.1-rc.015a120e → 0.45.2

package/app/components/primer/beta/progress_bar.css

@@ -1 +1,38 @@
-.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{background:LinkText;outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}@media (forced-colors:active){:root{--progressBar-track-bgColor:CanvasText}.Progress,.Progress-item{forced-color-adjust:none}}
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--progressBar-track-bgColor);
+  border-radius: var(--borderRadius-medium);
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+  background: LinkText;
+}
+
+.Progress-item + .Progress-item {
+  margin-left: var(--base-size-2);
+}
+
+@media (forced-colors: active) {
+  :root {
+    --progressBar-track-bgColor: CanvasText;
+  }
+
+  .Progress, .Progress-item {
+    forced-color-adjust: none;
+  }
+}

package/app/components/primer/beta/progress_bar.css.json

@@ -5,7 +5,7 @@
     ".Progress--large",
     ".Progress--small",
     ".Progress-item",
-    ".Progress-item+.Progress-item",
+    ".Progress-item + .Progress-item",
     ":root"
   ]
 }

package/app/components/primer/beta/state.css

@@ -1 +1,60 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis));border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis));color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--control-medium-lineBoxHeight);
+  text-align: center;
+  white-space: nowrap;
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--fgColor-onEmphasis);
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));
+  border: var(--borderWidth-thin) solid transparent;
+  box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));
+}
+
+.State--open {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);
+}
+
+.State--merged {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);
+}
+
+.State--closed {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
+  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);
+}
+
+/* Small 24px */
+
+.State--small {
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0 10px;
+  font-size: var(--text-body-size-small);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--base-size-24);
+}
+
+.State--small .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }

package/app/components/primer/beta/state.css.json

@@ -1,8 +1,8 @@
 {
   "name": "beta/state",
   "selectors": [
-    ".State",
     ".state",
+    ".State",
     ".State--draft",
     ".State--open",
     ".State--merged",

package/app/components/primer/beta/subhead.css

@@ -1 +1,64 @@
-.Subhead{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.Subhead--spacious{margin-top:var(--base-size-40)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal);order:0}.Subhead-heading--large{font-size:var(--base-size-24)}.Subhead-heading--medium{font-size:var(--text-title-size-medium)}.Subhead-heading--danger{color:var(--fgColor-danger);font-weight:var(--base-text-weight-semibold)}.Subhead-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4)}
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  padding-bottom: var(--stack-padding-condensed);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
+  flex-flow: row wrap;
+  justify-content: flex-end; /* Keep actions right aligned. */
+}
+
+/* Modifier class to give a lot of breathing room between sections of content. */
+
+.Subhead--spacious {
+  margin-top: var(--base-size-40);
+}
+
+/* <h2> sized heading with normal font weight */
+
+.Subhead-heading {
+  font-weight: var(--base-text-weight-normal);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+.Subhead-heading--large {
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-24);
+}
+
+.Subhead-heading--medium {
+  font-size: var(--text-title-size-medium);
+}
+
+/* Make the text bold and red for dangerous content */
+
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-danger);
+}
+
+/* One-liner of supporting text */
+
+.Subhead-description {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: 1 100%;
+  order: 2;
+}
+
+/* Add 1 or 2 buttons to the right of the heading */
+
+.Subhead-actions {
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+}
+
+.Subhead-actions + .Subhead-description {
+    margin-top: var(--base-size-4);
+  }

package/app/components/primer/beta/subhead.css.json

@@ -9,6 +9,6 @@
     ".Subhead-heading--danger",
     ".Subhead-description",
     ".Subhead-actions",
-    ".Subhead-actions+.Subhead-description"
+    ".Subhead-actions + .Subhead-description"
   ]
 }

package/app/components/primer/beta/timeline_item.css

@@ -1 +1,106 @@
-.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:var(--base-size-4);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--stack-padding-normal) 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: var(--stack-gap-normal);
+
+  /* The Timeline */
+}
+
+.TimelineItem::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--borderWidth-thick);
+    content: '';
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--borderColor-muted);
+  }
+
+.TimelineItem:target .TimelineItem-badge {
+    border-color: var(--borderColor-accent-emphasis);
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
+  }
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--control-medium-size);
+  height: var(--control-medium-size);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-right: var(--controlStack-medium-gap-condensed);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: calc(var(--control-medium-size) / -2 + 1px);
+  color: var(--fgColor-muted);
+  align-items: center;
+  background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
+  border: var(--borderWidth-thick) solid var(--bgColor-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-success-emphasis);
+  border: var(--borderWidth-thin) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4);
+  color: var(--fgColor-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  /* stylelint-disable-next-line primer/spacing */
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--stack-gap-spacious);
+  margin: 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: calc(var(--stack-gap-normal) * -1);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: -56px;
+  background-color: var(--bgColor-default);
+  border: 0;
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+}
+
+.TimelineItem--condensed:last-child {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: var(--stack-gap-normal);
+  }
+
+.TimelineItem--condensed .TimelineItem-badge {
+    height: var(--base-size-16);
+    margin-top: var(--base-size-8);
+    margin-bottom: var(--base-size-8);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-default);
+    border: 0;
+  }

package/app/components/primer/beta/timeline_item.css.json

@@ -2,7 +2,7 @@
   "name": "beta/timeline_item",
   "selectors": [
     ".TimelineItem",
-    ".TimelineItem:before",
+    ".TimelineItem::before",
     ".TimelineItem:target .TimelineItem-badge",
     ".TimelineItem-badge",
     ".TimelineItem-badge--success",

package/app/components/primer/beta/truncate.css

@@ -1 +1,30 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
+/* Truncate */
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.Truncate > .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+:is(.Truncate > .Truncate-text) + .Truncate-text {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--control-small-gap);
+    }
+
+.Truncate-text--primary:is(.Truncate > .Truncate-text) {
+      flex-basis: 200%;
+    }
+
+.Truncate-text--expandable:is(.Truncate > .Truncate-text):hover,.Truncate-text--expandable:is(.Truncate > .Truncate-text):focus,.Truncate-text--expandable:is(.Truncate > .Truncate-text):active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }

package/app/components/primer/beta/truncate.css.json

@@ -2,11 +2,11 @@
   "name": "beta/truncate",
   "selectors": [
     ".Truncate",
-    ".Truncate>.Truncate-text",
-    ":is(.Truncate>.Truncate-text)+.Truncate-text",
-    ".Truncate-text--primary:is(.Truncate>.Truncate-text)",
-    ".Truncate-text--expandable:is(.Truncate>.Truncate-text):active",
-    ".Truncate-text--expandable:is(.Truncate>.Truncate-text):focus",
-    ".Truncate-text--expandable:is(.Truncate>.Truncate-text):hover"
+    ".Truncate > .Truncate-text",
+    ":is(.Truncate > .Truncate-text) + .Truncate-text",
+    ".Truncate-text--primary:is(.Truncate > .Truncate-text)",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):hover",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):focus",
+    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):active"
   ]
 }

package/app/components/primer/truncate.css

@@ -1 +1,23 @@
-.css-truncate .css-truncate-overflow,.css-truncate .css-truncate-target,.css-truncate.css-truncate-overflow,.css-truncate.css-truncate-target{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.css-truncate .css-truncate-target,.css-truncate.css-truncate-target{display:inline-block;max-width:125px;vertical-align:top}.css-truncate.expandable.css-truncate-target:hover,.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target{max-width:10000px!important}
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+/* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+
+.css-truncate.css-truncate-overflow,.css-truncate .css-truncate-overflow,.css-truncate.css-truncate-target,.css-truncate .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.css-truncate-target,.css-truncate .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target,.css-truncate.expandable.css-truncate-target:hover {
+    max-width: 10000px !important;
+  }

package/app/components/primer/truncate.css.json

@@ -1,13 +1,13 @@
 {
   "name": "truncate",
   "selectors": [
-    ".css-truncate .css-truncate-overflow",
-    ".css-truncate .css-truncate-target",
     ".css-truncate.css-truncate-overflow",
+    ".css-truncate .css-truncate-overflow",
     ".css-truncate.css-truncate-target",
-    ".css-truncate.expandable.css-truncate-target:hover",
+    ".css-truncate .css-truncate-target",
     ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
     ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
-    ".css-truncate.expandable:hover .css-truncate-target"
+    ".css-truncate.expandable:hover .css-truncate-target",
+    ".css-truncate.expandable.css-truncate-target:hover"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.45.1-rc.015a120e",
+  "version": "0.45.2",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",