@primer/view-components 0.3.0-rc.dc2abcf9 → 0.3.0

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

@@ -1 +1,26 @@
-.Progress{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted));
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}

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

@@ -5,6 +5,6 @@
     ".Progress--large",
     ".Progress--small",
     ".Progress-item",
-    ".Progress-item+.Progress-item"
+    ".Progress-item + .Progress-item"
   ]
 }

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

@@ -1 +1,50 @@
-.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-fg))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-fg))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-fg))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  padding: 5px var(--control-medium-paddingInline-normal,0.75rem);
+  font-size: var(--text-body-size-medium,0.875rem);
+  font-weight: var(--base-text-weight-medium,500);
+  line-height: var(--control-medium-lineBoxHeight,1.25rem);
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-neutral-emphasis,var(--color-fg-subtle));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
+}
+
+.State--open {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-open-emphasis,var(--color-open-fg));
+}
+
+.State--merged {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-done-emphasis,var(--color-done-fg));
+}
+
+.State--closed {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-closed-emphasis,var(--color-closed-fg));
+}
+
+/* Small 24px */
+
+.State--small {
+  padding: 0 10px;
+  font-size: var(--text-body-size-small,0.75rem);
+  line-height: var(--base-size-24,1.5rem);
+}
+
+.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,54 @@
-.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
+/* Subhead */
+
+.Subhead {
+  display: flex;
+  padding-bottom: var(--stack-padding-condensed,0.5rem);
+  margin-bottom: var(--stack-gap-normal,1rem);
+  border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-muted,var(--color-neutral-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,2.5rem);
+}
+
+/* <h2> sized heading with normal font weight */
+
+.Subhead-heading {
+  font-size: 24px;
+  font-weight: var(--base-text-weight-normal,400);
+  flex: 1 1 auto;
+  order: 0;
+}
+
+/* Make the text bold and red for dangerous content */
+
+.Subhead-heading--danger {
+  font-weight: var(--base-text-weight-semibold,600);
+  color: var(--fgColor-danger,var(--color-danger-fg));
+}
+
+/* One-liner of supporting text */
+
+.Subhead-description {
+  font-size: var(--text-body-size-medium,0.875rem);
+  color: var(--fgColor-muted,var(--color-fg-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.25rem) 0 var(--base-size-4,0.25rem) var(--base-size-4,0.25rem);
+  align-self: center;
+  justify-content: flex-end;
+  order: 1;
+}
+
+.Subhead-actions + .Subhead-description {
+    margin-top: var(--base-size-4,0.25rem);
+  }

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

@@ -7,6 +7,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,95 @@
-.TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-neutral-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--stack-padding-normal,1rem) 0;
+  margin-left: var(--stack-gap-normal,1rem);
+
+  /* The Timeline */
+}
+
+.TimelineItem::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--borderWidth-thick,max(2px, 0.125rem));
+    content: '';
+    background-color: var(--borderColor-muted,var(--color-neutral-muted));
+  }
+
+.TimelineItem:target .TimelineItem-badge {
+    border-color: var(--borderColor-accent-emphasis,var(--color-accent-fg));
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted,var(--color-accent-muted));
+  }
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--control-medium-size,2rem);
+  height: var(--control-medium-size,2rem);
+  margin-right: var(--controlStack-medium-gap-condensed,0.5rem);
+  margin-left: calc(var(--control-medium-size,2rem) / -2 + 1px);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  align-items: center;
+  background-color: var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));
+  border: var(--borderWidth-thick,max(2px, 0.125rem)) solid var(--bgColor-default,var(--color-canvas-default));
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-success-emphasis,var(--color-success-fg));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4,0.25rem);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--stack-gap-spacious,1.5rem);
+  margin: 0;
+  margin-bottom: calc(var(--stack-gap-normal,1rem) * -1);
+  margin-left: -56px;
+  background-color: var(--bgColor-default,var(--color-canvas-default));
+  border: 0;
+  border-top: var(--borderWidth-thicker,max(4px, 0.25rem)) solid var(--borderColor-default,var(--color-border-default));
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4,0.25rem);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+}
+
+.TimelineItem--condensed:last-child {
+    padding-bottom: var(--stack-gap-normal,1rem);
+  }
+
+.TimelineItem--condensed .TimelineItem-badge {
+    height: var(--base-size-16,1rem);
+    margin-top: var(--base-size-8,0.5rem);
+    margin-bottom: var(--base-size-8,0.5rem);
+    color: var(--fgColor-muted,var(--color-fg-muted));
+    background-color: var(--bgColor-default,var(--color-canvas-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,37 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--control-small-gap,.25rem)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable: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: -moz-fit-content;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+.Truncate > .Truncate-text + .Truncate-text {
+      margin-left: var(--control-small-gap,0.25rem);
+    }
+
+.Truncate > .Truncate-text.Truncate-text--primary {
+      flex-basis: 200%;
+    }
+
+.Truncate > .Truncate-text.Truncate-text--expandable:hover,
+    .Truncate > .Truncate-text.Truncate-text--expandable:focus,
+    .Truncate > .Truncate-text.Truncate-text--expandable:active {
+      max-width: 100% !important;
+    }
+
+.Truncate > .Truncate-text.Truncate-text--expandable:hover,
+    .Truncate > .Truncate-text.Truncate-text--expandable:focus,
+    .Truncate > .Truncate-text.Truncate-text--expandable:active {
+      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",
-    ".Truncate>.Truncate-text+.Truncate-text",
-    ".Truncate>.Truncate-text.Truncate-text--primary",
-    ".Truncate>.Truncate-text.Truncate-text--expandable:active",
-    ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
-    ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
+    ".Truncate > .Truncate-text",
+    ".Truncate > .Truncate-text + .Truncate-text",
+    ".Truncate > .Truncate-text.Truncate-text--primary",
+    ".Truncate > .Truncate-text.Truncate-text--expandable:hover",
+    ".Truncate > .Truncate-text.Truncate-text--expandable:focus",
+    ".Truncate > .Truncate-text.Truncate-text--expandable:active"
   ]
 }

package/app/components/primer/truncate.css

@@ -1 +1,30 @@
-.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.3.0-rc.dc2abcf9",
+  "version": "0.3.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",