primer_view_components 0.33.0 → 0.35.0

data/app/components/primer/beta/progress_bar.pcss

@@ -5,7 +5,7 @@
   height: 8px;
   overflow: hidden;
   background-color: var(--bgColor-neutral-muted);
-  border-radius: 6px;
+  border-radius: var(--borderRadius-medium);
   outline: 1px solid transparent; /* Support Firefox custom colors */
 }
 
@@ -22,5 +22,5 @@
 }
 
 .Progress-item + .Progress-item {
-  margin-left: 2px;
+  margin-left: var(--base-size-2);
 }

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

@@ -1 +1 @@
-.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:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) 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,.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-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) 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}

data/app/components/primer/beta/state.css.map

@@ -1 +1 @@
-{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CACjD,oEAAqE,CAHrE,+BAIF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  padding: 5px var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}
+{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cAYE,iBAAkB,CAVlB,oBAAqB,CAGrB,sCAAuC,CACvC,0CAA2C,CAE3C,+CAAgD,CAJhD,qEAAsE,CAKtE,iBAAkB,CAClB,kBAGF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CACjD,oEAAqE,CAHrE,+BAIF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAGE,qCAAsC,CAEtC,+BAAgC,CAHhC,cAQF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--base-size-4) var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--control-medium-lineBoxHeight);\n  text-align: center;\n  white-space: nowrap;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-neutral-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n  box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);\n}\n\n.State--open {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n  box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0 10px;\n  font-size: var(--text-body-size-small);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--base-size-24);\n\n  & .octicon {\n    width: 1em; /* Ensures different icons don't change State indicator width */\n  }\n}\n"]}

data/app/components/primer/beta/state.pcss

@@ -5,12 +5,15 @@
 .state, /* TODO: Deprecate */
 .State {
   display: inline-block;
-  padding: 5px var(--control-medium-paddingInline-normal);
+  /* 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;
 }
 
@@ -44,8 +47,10 @@
 /* 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);
 
   & .octicon {

data/app/components/primer/beta/subhead.css.map

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,oEAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,qCAAsC,CADtC,6CAKF,CAGA,mBACE,8BACF,CAGA,iBAEE,aAAc,CADd,0CAA2C,CAE3C,OACF,CAEA,wBACE,6BACF,CAEA,yBACE,uCACF,CAGA,yBAEE,2BAA4B,CAD5B,4CAEF,CAGA,qBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,iEAAkE,CAGlE,OAKF,CAHE,sCACE,6BACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAME,oEAAqE,CALrE,YAAa,CAMb,kBAAmB,CACnB,wBAAyB,CAHzB,qCAAsC,CAFtC,6CAMF,CAGA,mBACE,8BACF,CAGA,iBAEE,aAAc,CADd,0CAA2C,CAE3C,OACF,CAEA,wBAEE,6BACF,CAEA,yBACE,uCACF,CAGA,yBAEE,2BAA4B,CAD5B,4CAEF,CAGA,qBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,iEAAkE,CAGlE,OAKF,CAHE,sCACE,6BACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-bottom: var(--stack-padding-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/beta/subhead.pcss

@@ -2,7 +2,9 @@
 
 .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;
@@ -22,6 +24,7 @@
 }
 
 .Subhead-heading--large {
+  /* stylelint-disable-next-line primer/typography */
   font-size: var(--base-size-24);
 }
 

data/app/components/primer/beta/timeline_item.css.map

@@ -1 +1 @@
-{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,mCAAoC,CADpC,qCAAsC,CAFtC,iBAqBF,CAfE,qBAQE,yCAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAGF,CAEA,yCACE,+CAAgD,CAChD,mDACF,CAGF,oBASE,kBAAmB,CACnB,6CAA8C,CAC9C,4DAA6D,CAC7D,iBAAkB,CAJlB,0BAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,iCAAkC,CAQlC,sBAAuB,CANvB,qDAAwD,CADxD,qDAAsD,CALtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAaF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAIE,0BAA2B,CAC3B,SAAU,CAFV,6BAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CANvE,gCAAiC,CACjC,QAAS,CACT,8CAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,8BAgBF,CAZE,oCACE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--stack-padding-normal) 0;\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  margin-right: var(--controlStack-medium-gap-condensed);\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAIb,mCAAoC,CAFpC,qCAAsC,CAHtC,iBAyBF,CAjBE,qBASE,yCAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAIF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBAWE,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CALlB,0BAA2B,CAP3B,YAAa,CAcb,aAAc,CAZd,iCAAkC,CAWlC,sBAAuB,CAPvB,qDAAwD,CAFxD,qDAAsD,CANtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAgBF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAIE,0BAA2B,CAC3B,SAAU,CAFV,6BAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAGE,UAAW,CAFX,iBAAkB,CAGlB,SACF,CAEA,oBASE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CARvE,gCAAiC,CACjC,QAAS,CAET,8CAAiD,CAEjD,iBAAkB,CAPlB,iBAAkB,CAClB,SAUF,CAEA,yBAEE,gBAAiB,CADjB,8BAiBF,CAbE,oCAEE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--stack-padding-normal) 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--controlStack-medium-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  /* stylelint-disable-next-line primer/spacing */\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}

data/app/components/primer/beta/timeline_item.pcss

@@ -3,7 +3,9 @@
 .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 */
@@ -15,11 +17,13 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--borderColor-muted);
   }
 
   &: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);
   }
 }
@@ -30,11 +34,14 @@
   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;
@@ -57,6 +64,7 @@
 
 .TimelineItem-avatar {
   position: absolute;
+  /* stylelint-disable-next-line primer/spacing */
   left: -72px;
   z-index: 1;
 }
@@ -66,7 +74,9 @@
   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;
@@ -79,6 +89,7 @@
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
+    /* stylelint-disable-next-line primer/spacing */
     padding-bottom: var(--stack-gap-normal);
   }
 

data/app/components/primer/beta/truncate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,6CACE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/components/primer/beta/truncate.pcss

@@ -13,6 +13,7 @@
     white-space: nowrap;
 
     & + .Truncate-text {
+      /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--control-small-gap);
     }
 

data/app/components/primer/component.rb

@@ -141,6 +141,10 @@ module Primer
       !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
 
+    def shouldnt_raise_error?
+      !should_raise_error?
+    end
+
     def should_raise_aria_error?
       !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end

data/app/components/primer/dialog_helper.js

@@ -115,7 +115,6 @@ export class DialogHelperElement extends HTMLElement {
 _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
     if (!this.dialog)
         return;
-    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'));
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
         // eslint-disable-next-line no-restricted-syntax

data/app/components/primer/dialog_helper.ts

@@ -96,7 +96,6 @@ export class DialogHelperElement extends HTMLElement {
 
   #handleDialogOpenAttribute() {
     if (!this.dialog) return
-    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'))
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
       // eslint-disable-next-line no-restricted-syntax

data/app/components/primer/primer.d.ts

@@ -9,7 +9,6 @@ import './focus_group';
 import './scrollable_region';
 import './aria_live';
 import './shared_events';
-import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -21,8 +20,8 @@ import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './beta/relative_time';
 import './alpha/tab_container';
-import '../../../lib/primer/forms/primer_multi_input';
-import '../../../lib/primer/forms/primer_text_field';
-import '../../../lib/primer/forms/toggle_switch_input';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';

data/app/components/primer/primer.js

@@ -9,7 +9,6 @@ import './focus_group';
 import './scrollable_region';
 import './aria_live';
 import './shared_events';
-import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';
@@ -21,8 +20,8 @@ import './beta/auto_complete/auto_complete';
 import './beta/clipboard_copy';
 import './beta/relative_time';
 import './alpha/tab_container';
-import '../../../lib/primer/forms/primer_multi_input';
-import '../../../lib/primer/forms/primer_text_field';
-import '../../../lib/primer/forms/toggle_switch_input';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';

data/app/components/primer/primer.pcss

@@ -4,16 +4,19 @@
 @import "./alpha/action_list.pcss";
 @import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/button_marketing.pcss";
 @import "./alpha/dialog.pcss";
 @import "./alpha/dropdown.pcss";
 @import "./alpha/layout.pcss";
+@import "./alpha/menu.pcss";
+@import "./alpha/segmented_control.pcss";
+@import "./alpha/select_panel.pcss";
+@import "./alpha/stack.pcss";
+@import "./alpha/stack_item.pcss";
 @import "./alpha/tab_nav.pcss";
 @import "./alpha/text_field.pcss";
-@import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
-@import "./alpha/segmented_control.pcss";
-@import "./alpha/menu.pcss";
 
 /* beta */
 @import "./beta/avatar.pcss";

data/app/components/primer/primer.ts

@@ -9,7 +9,6 @@ import './focus_group'
 import './scrollable_region'
 import './aria_live'
 import './shared_events'
-import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
@@ -21,8 +20,8 @@ import './beta/auto_complete/auto_complete'
 import './beta/clipboard_copy'
 import './beta/relative_time'
 import './alpha/tab_container'
-import '../../../lib/primer/forms/primer_multi_input'
-import '../../../lib/primer/forms/primer_text_field'
-import '../../../lib/primer/forms/toggle_switch_input'
+import '../../lib/primer/forms/primer_multi_input'
+import '../../lib/primer/forms/primer_text_field'
+import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'

data/app/components/primer/responsive_arg.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Primer
+  # Base class for responsive Stack and StackItem arguments. Used internally.
+  class ResponsiveArg
+    BREAKPOINTS = [:narrow, :regular, :wide].freeze
+
+    include FetchOrFallbackHelper
+
+    class << self
+      def for(values)
+        cache[[values, arg_name].hash] ||= new(values)
+      end
+
+      # :nocov:
+      def arg_name
+        raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+      end
+      # :nocov:
+
+      private
+
+      def cache
+        Thread.current[:pvc_stack_cache] ||= {}
+      end
+    end
+
+    def to_data_attributes
+      @data_attributes ||= data_attributes_for(self.class.arg_name, values)
+    end
+
+    private
+
+    def data_attributes_for(property, values)
+      if values.is_a?(Hash)
+        values.slice(*BREAKPOINTS).each_with_object({}) do |(key, value), memo|
+          next unless value
+          property_with_breakpoint = "#{property}-#{key}"
+          memo[property_with_breakpoint] = value
+        end
+      else
+        values ? { property => values } : {}
+      end
+    end
+
+    def fetch_or_fallback_all(options, values, default)
+      if values.is_a?(Hash)
+        values.each_with_object({}) do |(key, value), memo|
+          memo[key] = fetch_or_fallback(options, value, default).yield_self do |value|
+            block_given? ? yield(value) : value
+          end
+        end
+      else
+        fetch_or_fallback(options, values, default).yield_self do |value|
+          block_given? ? yield(value) : value
+        end
+      end
+    end
+
+    # :nocov:
+    def values
+      raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
+    end
+    # :nocov:
+  end
+end

data/app/forms/caption_template_form/places_bellevue_caption.html.erb

@@ -0,0 +1 @@
+<span>Bellevue caption</span>

data/app/forms/caption_template_form/places_lopez_caption.html.erb

@@ -0,0 +1 @@
+<span>Lopez caption</span>

data/app/forms/caption_template_form/places_seattle_caption.html.erb

@@ -0,0 +1 @@
+<span>Seattle caption</span>

data/app/forms/caption_template_form.rb

@@ -18,5 +18,11 @@ class CaptionTemplateForm < ApplicationForm
       age_radios.radio_button(value: "young", label: "10-15")
       age_radios.radio_button(value: "middle_aged", label: "16-21")
     end
+
+    name_form.check_box_group(name: "places", label: "Cool places") do |check_group|
+      check_group.check_box(value: "lopez", label: "Lopez Island")
+      check_group.check_box(value: "bellevue", label: "Bellevue")
+      check_group.check_box(value: "seattle", label: "Seattle")
+    end
   end
 end

data/app/forms/check_box_group_form.rb

@@ -3,7 +3,7 @@
 # :nodoc:
 class CheckBoxGroupForm < ApplicationForm
   form do |check_form|
-    check_form.check_box_group(label: "I like to eat, eat, eat:") do |check_group|
+    check_form.check_box_group(label: "I like to eat, eat, eat:", caption: "Nom nom nom") do |check_group|
       check_group.check_box(
         name: "long_a",
         label: "Ey-ples and ba-naynays",

data/app/forms/radio_button_group_form.rb

@@ -3,7 +3,11 @@
 # :nodoc:
 class RadioButtonGroupForm < ApplicationForm
   form do |radio_form|
-    radio_form.radio_button_group(name: "channel", label: "How did you hear about us?") do |radio_group|
+    radio_form.radio_button_group(
+      name: "channel",
+      label: "How did you hear about us?",
+      caption: "We love our listeners"
+    ) do |radio_group|
       radio_group.radio_button(value: "online", label: "Online advertisement", caption: "Facebook maybe?")
       radio_group.radio_button(value: "radio", label: "Radio advertisement", caption: "We love us some NPR")
       radio_group.radio_button(value: "friend", label: "From a friend", caption: "Wow, what a good person")

data/app/lib/primer/attributes_helper.rb

@@ -4,7 +4,7 @@ module Primer
   # :nodoc:
   module AttributesHelper
     PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
-    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
+    PLURAL_DATA_ATTRIBUTES = %i[target targets action].freeze
 
     def aria(val, system_arguments)
       system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)

data/{lib → app/lib}/primer/forms/base_component.rb

@@ -61,14 +61,6 @@ module Primer
         self.class.compile! unless self.class.instance_methods(false).include?(:render_template)
         render_template
       end
-
-      def content_tag_if(condition, tag, **kwargs, &block)
-        if condition
-          content_tag(tag, **kwargs, &block)
-        else
-          capture(&block)
-        end
-      end
     end
   end
 end

data/{lib → app/lib}/primer/forms/button.rb

@@ -54,11 +54,14 @@ module Primer
       private
 
       def tag_attributes
+        attrs = { name: @input.name }
+        attrs[:value] = @input.value if @input.value
+
         case @type
         when :submit
-          ButtonAttributeGenerator.submit_tag_attributes(@input.label, name: @input.name)
+          ButtonAttributeGenerator.submit_tag_attributes(@input.label, **attrs)
         else
-          ButtonAttributeGenerator.button_tag_attributes(@input.label, name: @input.name)
+          ButtonAttributeGenerator.button_tag_attributes(@input.label, **attrs)
         end
       end
     end

data/{lib → app/lib}/primer/forms/check_box_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.check_boxes.each do |check_box| %>
         <%= render(check_box.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

data/{lib → app/lib}/primer/forms/check_box_group.rb

@@ -8,7 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb

@@ -50,14 +50,10 @@ module Primer
           false
         end
 
-        private
-
-        def caption_template_name
-          @caption_template_name ||= if @scheme == :array
-                                       :"#{name}_#{value}"
-                                     else
-                                       name.to_sym
-                                     end
+        def values_disambiguate_template_names?
+          # Check boxes submitted as an array all have the same name, so we return true here
+          # to ensure different caption templates can be attached to individual check box inputs.
+          @scheme == :array
         end
       end
     end

data/{lib → app/lib}/primer/forms/dsl/input.rb

@@ -246,6 +246,10 @@ module Primer
           @input_arguments[:id]
         end
 
+        def value
+          @input_arguments[:value]
+        end
+
         # :nocov:
         def name
           raise_for_abstract_method!(__method__)
@@ -296,6 +300,14 @@ module Primer
           ""
         end
 
+        # Whether or not the `value:` argument should be used to determine the caption template
+        # for a given field. This is useful in especially radio button groups where each option
+        # has the same name but a different value. Check box groups where the values are submitted
+        # as an array also use this feature, since each check box also has the same name.
+        def values_disambiguate_template_names?
+          false
+        end
+
         private
 
         def input_data
@@ -305,7 +317,7 @@ module Primer
         def caption_template_name
           return nil unless name
 
-          @caption_template_name ||= if respond_to?(:value)
+          @caption_template_name ||= if values_disambiguate_template_names? && respond_to?(:value) && value.present?
                                        :"#{name}_#{value}"
                                      else
                                        name.to_sym

data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb

@@ -42,6 +42,10 @@ module Primer
         def supports_validation?
           false
         end
+
+        def values_disambiguate_template_names?
+          true
+        end
       end
     end
   end

data/{lib → app/lib}/primer/forms/group.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag_if(horizontal?, :div, class: "FormControl-horizontalGroup") do %>
+<%= render(Primer::Box.new(**@system_arguments)) do %>
   <% @inputs.each do |input| %>
     <%= render(input.to_component) %>
   <% end %>

data/{lib → app/lib}/primer/forms/group.rb

@@ -17,6 +17,11 @@ module Primer
         @form = form
         @layout = layout
         @system_arguments = system_arguments
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "FormControl-horizontalGroup" => horizontal?
+        )
       end
 
       def horizontal?

data/{lib → app/lib}/primer/forms/primer_text_field.js

@@ -47,6 +47,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     clearContents() {
         this.inputElement.value = '';
         this.inputElement.focus();
+        this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
     }
     clearError() {
         this.inputElement.removeAttribute('invalid');

data/{lib → app/lib}/primer/forms/primer_text_field.ts

@@ -57,6 +57,7 @@ export class PrimerTextFieldElement extends HTMLElement {
   clearContents() {
     this.inputElement.value = ''
     this.inputElement.focus()
+    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
   }
 
   clearError(): void {

data/{lib → app/lib}/primer/forms/radio_button_group.html.erb

@@ -5,6 +5,9 @@
         <%= @input.label %>
       <% end %>
     <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
     <%= render(SpacingWrapper.new) do %>
       <% @input.radio_buttons.each do |radio_button| %>
         <%= render(radio_button.to_component) %>
@@ -14,7 +17,4 @@
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
-  <div class="mt-2">
-    <%= render(Caption.new(input: @input)) %>
-  </div>
 </div>

data/{lib → app/lib}/primer/forms/radio_button_group.rb

@@ -8,7 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_label_classes("FormControl-label")
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end