@primer/view-components 0.45.2 → 0.46.0-rc.117206e8

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

@@ -1,38 +1 @@
-/* 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;
-  }
-}
+.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}}

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,60 +1 @@
-/* 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 */
-  }
+.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}

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,64 +1 @@
-/* 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);
-  }
+.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)}

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,106 +1 @@
-/* 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;
-  }
+.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)}

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,30 +1 @@
-/* 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;
-    }
+.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}

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):hover",
-    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):focus",
-    ".Truncate-text--expandable:is(.Truncate > .Truncate-text):active"
+    ".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"
   ]
 }

package/app/components/primer/truncate.css

@@ -1,23 +1 @@
-/* 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;
-  }
+.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}

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

@@ -1,13 +1,13 @@
 {
   "name": "truncate",
   "selectors": [
-    ".css-truncate.css-truncate-overflow",
     ".css-truncate .css-truncate-overflow",
-    ".css-truncate.css-truncate-target",
     ".css-truncate .css-truncate-target",
+    ".css-truncate.css-truncate-overflow",
+    ".css-truncate.css-truncate-target",
+    ".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",
-    ".css-truncate.expandable.css-truncate-target:hover"
+    ".css-truncate.expandable:hover .css-truncate-target"
   ]
 }

package/package.json

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

package/static/arguments.json

@@ -2502,13 +2502,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",

package/static/info_arch.json

@@ -7358,13 +7358,7 @@
         "name": "form_arguments",
         "type": "Hash",
         "default": "`{}`",
-        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
-      },
-      {
-        "name": "use_experimental_non_local_form",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
+        "description": "Form arguments. Supported for all fetch strategies."
       },
       {
         "name": "show_filter",
@@ -7444,6 +7438,12 @@
         "name": "show_button",
         "description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
         "parameters": [
+          {
+            "name": "icon",
+            "type": "String",
+            "default": "N/A",
+            "description": "Name of {{link_to_octicons}} to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered."
+          },
           {
             "name": "system_arguments",
             "type": "Hash",
@@ -7767,6 +7767,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",

package/static/previews.json

@@ -6156,6 +6156,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
+        "name": "select_panel_with_icon_button",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",