primer_view_components 0.22.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +17 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar.css +1 -1
- data/app/components/primer/alpha/action_bar.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.html.erb +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +2 -0
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +13 -0
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +8 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +42 -0
- data/app/components/primer/beta/button.rb +5 -1
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.css.map +1 -1
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/action_list_preview.rb +1 -1
- data/previews/primer/alpha/select_preview.rb +3 -0
- data/previews/primer/beta/button_preview/label_wrap.html.erb +9 -0
- data/previews/primer/beta/button_preview/link_scheme_label_wrap.html.erb +8 -0
- data/previews/primer/beta/button_preview.rb +31 -2
- data/previews/primer/beta/nav_list_preview.rb +15 -1
- data/static/arguments.json +6 -0
- data/static/classes.json +3 -0
- data/static/info_arch.json +45 -0
- data/static/previews.json +39 -0
- metadata +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAgCF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,kDAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,8CAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,2CAA4C,CAD5C,YAEF,CAEA,wGAEE,uCAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,4CAA6C,CAD7C,WAEF,CAEA,qGAEE,wCAAyC,CADzC,WAEF,CAOA,qGAEE,6CAA8C,CAD9C,UAEF,CAEA,kGAEE,yCAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Progress{background-color:var(--bgColor-neutral-muted
|
|
1
|
+
.Progress{background-color:var(--bgColor-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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,
|
|
1
|
+
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,6CAA8C,CAC9C,iBAAkB,CAJlB,YAAa,CACb,UAAW,CAIX,uBAA8B,CAH9B,eAIF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,eACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n display: flex;\n height: 8px;\n overflow: hidden;\n background-color: var(--bgColor-neutral-muted);\n border-radius: 6px;\n outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n height: 10px;\n}\n\n.Progress--small {\n height: 5px;\n}\n\n.Progress-item {\n outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n margin-left: 2px;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium
|
|
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;color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,
|
|
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,CAFjD,+BAGF,CAEA,aAEE,wEACF,CAEA,4BAJE,+BAOF,CAHA,eAEE,wEACF,CAEA,eAEE,4EAA8E,CAD9E,+BAEF,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}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis, var(--color-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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Subhead{border-bottom:var(--borderWidth-thin
|
|
1
|
+
.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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TimelineItem{display:flex;margin-left:var(--stack-gap-normal
|
|
1
|
+
.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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.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
|
|
1
|
+
.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)}.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}
|
|
@@ -1 +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,wCACE,
|
|
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,wCACE,oCACF,CAEA,gDACE,eACF,CAEA,4KAKE,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"]}
|
|
@@ -11,6 +11,7 @@ module Primer
|
|
|
11
11
|
# @param label text
|
|
12
12
|
# @param caption text
|
|
13
13
|
# @param required toggle
|
|
14
|
+
# @param multiple toggle
|
|
14
15
|
# @param visually_hide_label toggle
|
|
15
16
|
# @param size [Symbol] select [small, medium, large]
|
|
16
17
|
# @param full_width toggle
|
|
@@ -23,6 +24,7 @@ module Primer
|
|
|
23
24
|
label: "Favorite place to visit",
|
|
24
25
|
caption: "They're all good",
|
|
25
26
|
required: false,
|
|
27
|
+
multiple: false,
|
|
26
28
|
visually_hide_label: false,
|
|
27
29
|
size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
|
|
28
30
|
full_width: true,
|
|
@@ -36,6 +38,7 @@ module Primer
|
|
|
36
38
|
label: label,
|
|
37
39
|
caption: caption,
|
|
38
40
|
required: required,
|
|
41
|
+
multiple: multiple,
|
|
39
42
|
visually_hide_label: visually_hide_label,
|
|
40
43
|
size: size,
|
|
41
44
|
full_width: full_width,
|
|
@@ -21,6 +21,7 @@ module Primer
|
|
|
21
21
|
# @param inactive toggle
|
|
22
22
|
# @param align_content select [center, start]
|
|
23
23
|
# @param tag select [a, summary, button]
|
|
24
|
+
# @param label_wrap toggle
|
|
24
25
|
def playground(
|
|
25
26
|
scheme: :default,
|
|
26
27
|
size: :medium,
|
|
@@ -29,7 +30,8 @@ module Primer
|
|
|
29
30
|
align_content: :center,
|
|
30
31
|
tag: :button,
|
|
31
32
|
disabled: false,
|
|
32
|
-
inactive: false
|
|
33
|
+
inactive: false,
|
|
34
|
+
label_wrap: false
|
|
33
35
|
)
|
|
34
36
|
render(Primer::Beta::Button.new(
|
|
35
37
|
scheme: scheme,
|
|
@@ -39,7 +41,8 @@ module Primer
|
|
|
39
41
|
align_content: align_content,
|
|
40
42
|
tag: tag,
|
|
41
43
|
disabled: disabled,
|
|
42
|
-
inactive: inactive
|
|
44
|
+
inactive: inactive,
|
|
45
|
+
label_wrap: label_wrap
|
|
43
46
|
)) do |_c|
|
|
44
47
|
"Button"
|
|
45
48
|
end
|
|
@@ -194,6 +197,26 @@ module Primer
|
|
|
194
197
|
end
|
|
195
198
|
end
|
|
196
199
|
|
|
200
|
+
# @label Label wrap
|
|
201
|
+
# @param scheme select [default, primary, danger, invisible, link]
|
|
202
|
+
# @param size select [small, medium]
|
|
203
|
+
# @param block toggle
|
|
204
|
+
# @param label_wrap toggle
|
|
205
|
+
# @snapshot
|
|
206
|
+
def label_wrap(
|
|
207
|
+
scheme: :default,
|
|
208
|
+
size: :medium,
|
|
209
|
+
block: false,
|
|
210
|
+
label_wrap: true
|
|
211
|
+
)
|
|
212
|
+
render_with_template(locals: {
|
|
213
|
+
scheme: scheme,
|
|
214
|
+
size: size,
|
|
215
|
+
block: block,
|
|
216
|
+
label_wrap: label_wrap
|
|
217
|
+
})
|
|
218
|
+
end
|
|
219
|
+
|
|
197
220
|
# @label Link as button
|
|
198
221
|
# @param scheme select [default, primary, danger, invisible, link]
|
|
199
222
|
# @param size select [small, medium]
|
|
@@ -361,6 +384,12 @@ module Primer
|
|
|
361
384
|
"Button"
|
|
362
385
|
end
|
|
363
386
|
end
|
|
387
|
+
|
|
388
|
+
# @label Link scheme with long label
|
|
389
|
+
# @snapshot
|
|
390
|
+
def link_scheme_label_wrap
|
|
391
|
+
render_with_template(locals: {})
|
|
392
|
+
end
|
|
364
393
|
end
|
|
365
394
|
end
|
|
366
395
|
end
|
|
@@ -139,7 +139,7 @@ module Primer
|
|
|
139
139
|
component.with_item(
|
|
140
140
|
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
141
141
|
truncate_label: truncate_label
|
|
142
|
-
)
|
|
142
|
+
)
|
|
143
143
|
component.with_item(
|
|
144
144
|
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
145
145
|
truncate_label: truncate_label
|
|
@@ -178,6 +178,20 @@ module Primer
|
|
|
178
178
|
end
|
|
179
179
|
end
|
|
180
180
|
end
|
|
181
|
+
|
|
182
|
+
def group_long_label_with_tooltip
|
|
183
|
+
render(Primer::Beta::NavList.new) do |list|
|
|
184
|
+
list.with_heading(title: "Repository settings")
|
|
185
|
+
|
|
186
|
+
list.with_item(label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: :show_tooltip) do |item|
|
|
187
|
+
item.with_leading_visual_icon(icon: :"comment-discussion")
|
|
188
|
+
|
|
189
|
+
item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
|
|
190
|
+
item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
|
|
191
|
+
item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
|
|
192
|
+
end
|
|
193
|
+
end
|
|
194
|
+
end
|
|
181
195
|
end
|
|
182
196
|
end
|
|
183
197
|
end
|
data/static/arguments.json
CHANGED
|
@@ -3400,6 +3400,12 @@
|
|
|
3400
3400
|
"default": "`false`",
|
|
3401
3401
|
"description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
|
|
3402
3402
|
},
|
|
3403
|
+
{
|
|
3404
|
+
"name": "label_wrap",
|
|
3405
|
+
"type": "Boolean",
|
|
3406
|
+
"default": "`false`",
|
|
3407
|
+
"description": "Whether or not the button label text wraps and the button height expands."
|
|
3408
|
+
},
|
|
3403
3409
|
{
|
|
3404
3410
|
"name": "system_arguments",
|
|
3405
3411
|
"type": "Hash",
|
data/static/classes.json
CHANGED
data/static/info_arch.json
CHANGED
|
@@ -10967,6 +10967,12 @@
|
|
|
10967
10967
|
"default": "`false`",
|
|
10968
10968
|
"description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
|
|
10969
10969
|
},
|
|
10970
|
+
{
|
|
10971
|
+
"name": "label_wrap",
|
|
10972
|
+
"type": "Boolean",
|
|
10973
|
+
"default": "`false`",
|
|
10974
|
+
"description": "Whether or not the button label text wraps and the button height expands."
|
|
10975
|
+
},
|
|
10970
10976
|
{
|
|
10971
10977
|
"name": "system_arguments",
|
|
10972
10978
|
"type": "Hash",
|
|
@@ -11151,6 +11157,19 @@
|
|
|
11151
11157
|
]
|
|
11152
11158
|
}
|
|
11153
11159
|
},
|
|
11160
|
+
{
|
|
11161
|
+
"preview_path": "primer/beta/button/label_wrap",
|
|
11162
|
+
"name": "label_wrap",
|
|
11163
|
+
"snapshot": "true",
|
|
11164
|
+
"skip_rules": {
|
|
11165
|
+
"wont_fix": [
|
|
11166
|
+
"region"
|
|
11167
|
+
],
|
|
11168
|
+
"will_fix": [
|
|
11169
|
+
"color-contrast"
|
|
11170
|
+
]
|
|
11171
|
+
}
|
|
11172
|
+
},
|
|
11154
11173
|
{
|
|
11155
11174
|
"preview_path": "primer/beta/button/link_as_button",
|
|
11156
11175
|
"name": "link_as_button",
|
|
@@ -11254,6 +11273,19 @@
|
|
|
11254
11273
|
"color-contrast"
|
|
11255
11274
|
]
|
|
11256
11275
|
}
|
|
11276
|
+
},
|
|
11277
|
+
{
|
|
11278
|
+
"preview_path": "primer/beta/button/link_scheme_label_wrap",
|
|
11279
|
+
"name": "link_scheme_label_wrap",
|
|
11280
|
+
"snapshot": "true",
|
|
11281
|
+
"skip_rules": {
|
|
11282
|
+
"wont_fix": [
|
|
11283
|
+
"region"
|
|
11284
|
+
],
|
|
11285
|
+
"will_fix": [
|
|
11286
|
+
"color-contrast"
|
|
11287
|
+
]
|
|
11288
|
+
}
|
|
11257
11289
|
}
|
|
11258
11290
|
],
|
|
11259
11291
|
"subcomponents": [
|
|
@@ -13438,6 +13470,19 @@
|
|
|
13438
13470
|
"color-contrast"
|
|
13439
13471
|
]
|
|
13440
13472
|
}
|
|
13473
|
+
},
|
|
13474
|
+
{
|
|
13475
|
+
"preview_path": "primer/beta/nav_list/group_long_label_with_tooltip",
|
|
13476
|
+
"name": "group_long_label_with_tooltip",
|
|
13477
|
+
"snapshot": "false",
|
|
13478
|
+
"skip_rules": {
|
|
13479
|
+
"wont_fix": [
|
|
13480
|
+
"region"
|
|
13481
|
+
],
|
|
13482
|
+
"will_fix": [
|
|
13483
|
+
"color-contrast"
|
|
13484
|
+
]
|
|
13485
|
+
}
|
|
13441
13486
|
}
|
|
13442
13487
|
],
|
|
13443
13488
|
"subcomponents": [
|
data/static/previews.json
CHANGED
|
@@ -2137,6 +2137,19 @@
|
|
|
2137
2137
|
]
|
|
2138
2138
|
}
|
|
2139
2139
|
},
|
|
2140
|
+
{
|
|
2141
|
+
"preview_path": "primer/beta/button/label_wrap",
|
|
2142
|
+
"name": "label_wrap",
|
|
2143
|
+
"snapshot": "true",
|
|
2144
|
+
"skip_rules": {
|
|
2145
|
+
"wont_fix": [
|
|
2146
|
+
"region"
|
|
2147
|
+
],
|
|
2148
|
+
"will_fix": [
|
|
2149
|
+
"color-contrast"
|
|
2150
|
+
]
|
|
2151
|
+
}
|
|
2152
|
+
},
|
|
2140
2153
|
{
|
|
2141
2154
|
"preview_path": "primer/beta/button/link_as_button",
|
|
2142
2155
|
"name": "link_as_button",
|
|
@@ -2240,6 +2253,19 @@
|
|
|
2240
2253
|
"color-contrast"
|
|
2241
2254
|
]
|
|
2242
2255
|
}
|
|
2256
|
+
},
|
|
2257
|
+
{
|
|
2258
|
+
"preview_path": "primer/beta/button/link_scheme_label_wrap",
|
|
2259
|
+
"name": "link_scheme_label_wrap",
|
|
2260
|
+
"snapshot": "true",
|
|
2261
|
+
"skip_rules": {
|
|
2262
|
+
"wont_fix": [
|
|
2263
|
+
"region"
|
|
2264
|
+
],
|
|
2265
|
+
"will_fix": [
|
|
2266
|
+
"color-contrast"
|
|
2267
|
+
]
|
|
2268
|
+
}
|
|
2243
2269
|
}
|
|
2244
2270
|
]
|
|
2245
2271
|
},
|
|
@@ -4707,6 +4733,19 @@
|
|
|
4707
4733
|
"color-contrast"
|
|
4708
4734
|
]
|
|
4709
4735
|
}
|
|
4736
|
+
},
|
|
4737
|
+
{
|
|
4738
|
+
"preview_path": "primer/beta/nav_list/group_long_label_with_tooltip",
|
|
4739
|
+
"name": "group_long_label_with_tooltip",
|
|
4740
|
+
"snapshot": "false",
|
|
4741
|
+
"skip_rules": {
|
|
4742
|
+
"wont_fix": [
|
|
4743
|
+
"region"
|
|
4744
|
+
],
|
|
4745
|
+
"will_fix": [
|
|
4746
|
+
"color-contrast"
|
|
4747
|
+
]
|
|
4748
|
+
}
|
|
4710
4749
|
}
|
|
4711
4750
|
]
|
|
4712
4751
|
},
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.23.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-
|
|
11
|
+
date: 2024-04-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -816,8 +816,10 @@ files:
|
|
|
816
816
|
- previews/primer/beta/button_preview.rb
|
|
817
817
|
- previews/primer/beta/button_preview/all_schemes.html.erb
|
|
818
818
|
- previews/primer/beta/button_preview/invisible_all_visuals.html.erb
|
|
819
|
+
- previews/primer/beta/button_preview/label_wrap.html.erb
|
|
819
820
|
- previews/primer/beta/button_preview/leading_visual.html.erb
|
|
820
821
|
- previews/primer/beta/button_preview/leading_visual_svg.html.erb
|
|
822
|
+
- previews/primer/beta/button_preview/link_scheme_label_wrap.html.erb
|
|
821
823
|
- previews/primer/beta/button_preview/trailing_action.html.erb
|
|
822
824
|
- previews/primer/beta/button_preview/trailing_counter.html.erb
|
|
823
825
|
- previews/primer/beta/button_preview/trailing_visual.html.erb
|