openproject-primer_view_components 0.59.2 → 0.60.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 +10 -0
- 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/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.json +2 -0
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +11 -1
- data/app/components/primer/alpha/banner.rb +5 -3
- 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/select.rb +1 -0
- data/app/components/primer/alpha/select_panel.rb +2 -3
- data/app/components/primer/alpha/text_area.rb +1 -0
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +6 -4
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +5 -1
- data/app/components/primer/alpha/text_field.rb +1 -0
- 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/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/open_project/input_group.css +1 -1
- data/app/components/primer/open_project/input_group.css.json +1 -0
- data/app/components/primer/open_project/input_group.css.map +1 -1
- data/app/components/primer/open_project/input_group.pcss +5 -1
- data/app/components/primer/open_project/input_group.rb +1 -0
- data/app/lib/primer/forms/dsl/input.rb +4 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/banner_preview.rb +9 -3
- data/previews/primer/alpha/select_preview.rb +1 -1
- data/previews/primer/alpha/text_area_preview.rb +1 -1
- data/previews/primer/alpha/text_field_preview.rb +3 -3
- data/previews/primer/forms_preview/custom_width_fields_form.html.erb +9 -0
- data/previews/primer/open_project/input_group_preview.rb +1 -1
- data/static/arguments.json +104 -2
- data/static/constants.json +6 -2
- data/static/info_arch.json +117 -2
- data/static/previews.json +13 -0
- metadata +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,
|
|
1
|
+
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,eAAgB,CANhB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,iCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,4BAAqB,CAArB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,yBAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDAEE,qDAAsD,CACtD,kBAAyB,CAFzB,6CAGF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,qDAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,uCAAwC,CACxC,eACF,CAMA,4GACE,0CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAGE,yCAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAaF,CARA,yBAGE,sCAAuC,CAGvC,uBAEF,CAEA,mBAME,gDAAiD,CACjD,wEAAyE,CACzE,wCAAyC,CALzC,QAAS,CAMT,0EAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,4BAA6B,CAF7B,sCAAuC,CACvC,8CAA+C,CAF/C,iBAAkB,CAIlB,gBACF,CAEA,yBACE,YAAa,CAGb,kBAAoB,CAFpB,yBAGF,CAGE,0CACE,qCACF,CAEA,yCAEE,iCAAkC,CADlC,yBAEF,CAIA,6CACE,0BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n align-items: center;\n display: inline-flex;\n gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64);\n height: var(--control-medium-size);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 1px;\n }\n\n &:hover {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active {\n background-color: var(--controlTrack-bgColor-active);\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n color: var(--control-checked-fgColor-disabled);\n background-color: var(--controlTrack-bgColor-disabled);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--control-checked-bgColor-rest);\n border-color: var(--borderColor-transparent);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--control-checked-bgColor-hover);\n }\n\n &:active {\n background-color: var(--control-checked-bgColor-active);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--controlKnob-bgColor-checked);\n border-color: var(--controlKnob-borderColor-checked);\n transform: translateX(100%);\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[disabled] {\n cursor: not-allowed;\n background-color: var(--controlTrack-bgColor-disabled);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--borderColor-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n /* stylelint-disable-next-line primer/typography */\n line-height: 0;\n color: var(--control-checked-fgColor-rest);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n /* stylelint-disable-next-line primer/typography */\n line-height: 0;\n color: var(--controlTrack-fgColor-rest);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n width: 50%;\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-title-lineHeight-large);\n color: var(--fgColor-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n display: flex;\n width: var(--base-size-16);\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--text-body-size-small);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48);\n height: var(--control-xsmall-size);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--fgColor-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}\n",null]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){
|
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted);margin-right:var(--control-small-gap)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin) 0;margin-top:calc(var(--borderWidth-thin)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default)}.warning{background-color:var(--bgColor-attention-muted);font-weight:var(--base-text-weight-semibold);margin-bottom:.8em;padding:.5em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBAME,yFAA2F,CAC3F,4CAA6C,CAG7C,wCAAyC,CAFzC,kBAAmB,CACnB,oCAAqC,CAJrC,4BAA6B,CAH7B,wEAAyE,CADzE,iBAoBF,CATE,6BAEE,2BAA4B,CAD5B,gCAEF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCASE,
|
|
1
|
+
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBAME,yFAA2F,CAC3F,4CAA6C,CAG7C,wCAAyC,CAFzC,kBAAmB,CACnB,oCAAqC,CAJrC,4BAA6B,CAH7B,wEAAyE,CADzE,iBAoBF,CATE,6BAEE,2BAA4B,CAD5B,gCAEF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCASE,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,sCAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,qCAAsC,CADtC,eAgBF,CAZE,gDAEE,0BAA2B,CAD3B,qCAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,kCACE,8BACF,CAGF,0BAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,mCACE,2BACF,CAGF,4BAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,qCACE,4BACF,CAKF,yBAGE,eAAgB,CADhB,sCAAuC,CADvC,2CAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,uCACF,CAGA,SAIE,+CAAgD,CADhD,4CAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n & .octicon {\n margin-right: var(--base-size-12);\n color: var(--fgColor-accent);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(
|
|
1
|
+
.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--xsmall{max-width:min(144px,100vw - 2rem)}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(680px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"name": "open_project/input_group",
|
|
3
3
|
"selectors": [
|
|
4
4
|
".InputGroup.InputGroup-input-width--auto",
|
|
5
|
+
".InputGroup.InputGroup-input-width--xsmall",
|
|
5
6
|
".InputGroup.InputGroup-input-width--small",
|
|
6
7
|
".InputGroup.InputGroup-input-width--medium",
|
|
7
8
|
".InputGroup.InputGroup-input-width--large",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n &.InputGroup-input-width--auto {\n width: auto;\n }\n\n &.InputGroup-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--xlarge {\n max-width: min(
|
|
1
|
+
{"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n &.InputGroup-input-width--auto {\n width: auto;\n }\n\n &.InputGroup-input-width--xsmall {\n max-width: min(144px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--xlarge {\n max-width: min(680px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n"]}
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
width: auto;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
&.InputGroup-input-width--xsmall {
|
|
7
|
+
max-width: min(144px, 100vw - 2rem);
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
&.InputGroup-input-width--small {
|
|
7
11
|
max-width: min(256px, 100vw - 2rem);
|
|
8
12
|
}
|
|
@@ -16,7 +20,7 @@
|
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
&.InputGroup-input-width--xlarge {
|
|
19
|
-
max-width: min(
|
|
23
|
+
max-width: min(680px, 100vw - 2rem);
|
|
20
24
|
}
|
|
21
25
|
|
|
22
26
|
&.InputGroup-input-width--xxlarge {
|
|
@@ -9,6 +9,7 @@ module Primer
|
|
|
9
9
|
DEFAULT_INPUT_WIDTH = :auto
|
|
10
10
|
INPUT_WIDTH_MAPPINGS = {
|
|
11
11
|
DEFAULT_INPUT_WIDTH => "InputGroup-input-width--auto",
|
|
12
|
+
:xsmall => "InputGroup-input-width--xsmall",
|
|
12
13
|
:small => "InputGroup-input-width--small",
|
|
13
14
|
:medium => "InputGroup-input-width--medium",
|
|
14
15
|
:large => "InputGroup-input-width--large",
|
|
@@ -33,6 +33,9 @@ module Primer
|
|
|
33
33
|
# @!macro [new] form_full_width_arguments
|
|
34
34
|
# @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
|
|
35
35
|
|
|
36
|
+
# @!macro [new] form_input_width_arguments
|
|
37
|
+
# @param input_width [Symbol] The width of the field. <%= one_of(Primer::Forms::Dsl::Input::INPUT_WIDTH_OPTIONS) %>
|
|
38
|
+
|
|
36
39
|
# @!macro [new] form_system_arguments
|
|
37
40
|
# @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
|
|
38
41
|
|
|
@@ -48,6 +51,7 @@ module Primer
|
|
|
48
51
|
DEFAULT_INPUT_WIDTH = :auto
|
|
49
52
|
INPUT_WIDTH_MAPPINGS = {
|
|
50
53
|
DEFAULT_INPUT_WIDTH => "FormControl-input-width--auto",
|
|
54
|
+
:xsmall => "FormControl-input-width--xsmall",
|
|
51
55
|
:small => "FormControl-input-width--small",
|
|
52
56
|
:medium => "FormControl-input-width--medium",
|
|
53
57
|
:large => "FormControl-input-width--large",
|
|
@@ -11,7 +11,7 @@ module Primer
|
|
|
11
11
|
# @param dismiss_scheme [Symbol] select [none, remove, hide]
|
|
12
12
|
# @param dismiss_label text
|
|
13
13
|
# @param icon [Symbol] octicon
|
|
14
|
-
# @param scheme [Symbol] select [default, warning, danger, success]
|
|
14
|
+
# @param scheme [Symbol] select [default, warning, danger, success, upsell]
|
|
15
15
|
# @param content text
|
|
16
16
|
# @param description text
|
|
17
17
|
def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, dismiss_label: Primer::Alpha::Banner::DEFAULT_DISMISS_LABEL, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
|
|
@@ -49,6 +49,12 @@ module Primer
|
|
|
49
49
|
def scheme_warning
|
|
50
50
|
render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
|
|
51
51
|
end
|
|
52
|
+
|
|
53
|
+
# @label Upsell
|
|
54
|
+
# @snapshot
|
|
55
|
+
def scheme_upsell
|
|
56
|
+
render(Primer::Alpha::Banner.new(scheme: :upsell)) { "This is a upsell banner!" }
|
|
57
|
+
end
|
|
52
58
|
#
|
|
53
59
|
# @!endgroup
|
|
54
60
|
|
|
@@ -78,7 +84,7 @@ module Primer
|
|
|
78
84
|
# @param full toggle
|
|
79
85
|
# @param dismiss_scheme [Symbol] select [none, remove, hide]
|
|
80
86
|
# @param icon [Symbol] octicon
|
|
81
|
-
# @param scheme [Symbol] select [default, warning, danger, success]
|
|
87
|
+
# @param scheme [Symbol] select [default, warning, danger, success, upsell]
|
|
82
88
|
# @param content text
|
|
83
89
|
# @snapshot
|
|
84
90
|
def with_action_button(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner with an action!")
|
|
@@ -91,7 +97,7 @@ module Primer
|
|
|
91
97
|
# @param full toggle
|
|
92
98
|
# @param dismiss_scheme [Symbol] select [none, remove, hide]
|
|
93
99
|
# @param icon [Symbol] octicon
|
|
94
|
-
# @param scheme [Symbol] select [default, warning, danger, success]
|
|
100
|
+
# @param scheme [Symbol] select [default, warning, danger, success, upsell]
|
|
95
101
|
# @param content text
|
|
96
102
|
# @snapshot
|
|
97
103
|
def with_action_content(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "Did you know? Comments can be edited.")
|
|
@@ -18,7 +18,7 @@ module Primer
|
|
|
18
18
|
# @param disabled toggle
|
|
19
19
|
# @param invalid toggle
|
|
20
20
|
# @param validation_message text
|
|
21
|
-
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
|
21
|
+
# @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
|
|
22
22
|
def playground(
|
|
23
23
|
name: "my-select-list",
|
|
24
24
|
id: "my-select-list",
|
|
@@ -16,7 +16,7 @@ module Primer
|
|
|
16
16
|
# @param disabled toggle
|
|
17
17
|
# @param invalid toggle
|
|
18
18
|
# @param validation_message text
|
|
19
|
-
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
|
19
|
+
# @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
|
|
20
20
|
def playground(
|
|
21
21
|
name: "my-text-area",
|
|
22
22
|
id: "my-text-area",
|
|
@@ -24,7 +24,7 @@ module Primer
|
|
|
24
24
|
# @param monospace toggle
|
|
25
25
|
# @param leading_visual_icon octicon
|
|
26
26
|
# @param leading_spinner toggle
|
|
27
|
-
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
|
27
|
+
# @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
|
|
28
28
|
def playground(
|
|
29
29
|
name: "my-text-field",
|
|
30
30
|
id: "my-text-field",
|
|
@@ -200,7 +200,7 @@ module Primer
|
|
|
200
200
|
end
|
|
201
201
|
|
|
202
202
|
# @label With trailing label
|
|
203
|
-
# @snapshot
|
|
203
|
+
# @snapshot
|
|
204
204
|
def with_trailing_label
|
|
205
205
|
render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
|
|
206
206
|
end
|
|
@@ -219,7 +219,7 @@ module Primer
|
|
|
219
219
|
#
|
|
220
220
|
# @!endgroup
|
|
221
221
|
|
|
222
|
-
# @!group Auto check
|
|
222
|
+
# @!group Auto check
|
|
223
223
|
#
|
|
224
224
|
# @label Auto check request ok
|
|
225
225
|
def with_auto_check_ok
|
|
@@ -28,6 +28,15 @@
|
|
|
28
28
|
caption: "What else do you need?",
|
|
29
29
|
input_width: :small
|
|
30
30
|
)
|
|
31
|
+
|
|
32
|
+
f.text_field(
|
|
33
|
+
name: :hours,
|
|
34
|
+
label: "hours",
|
|
35
|
+
type: :number,
|
|
36
|
+
required: true,
|
|
37
|
+
trailing_visual: { text: { text: "min" } },
|
|
38
|
+
input_width: :xsmall
|
|
39
|
+
)
|
|
31
40
|
end
|
|
32
41
|
end
|
|
33
42
|
%>
|
|
@@ -21,7 +21,7 @@ module Primer
|
|
|
21
21
|
# @param value [String]
|
|
22
22
|
# @param visually_hide_label toggle
|
|
23
23
|
# @param readonly toggle
|
|
24
|
-
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
|
24
|
+
# @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
|
|
25
25
|
# @param caption [String]
|
|
26
26
|
def playground(
|
|
27
27
|
trailing_action: :clipboardCopy,
|
data/static/arguments.json
CHANGED
|
@@ -674,7 +674,7 @@
|
|
|
674
674
|
"name": "scheme",
|
|
675
675
|
"type": "Symbol",
|
|
676
676
|
"default": "`:default`",
|
|
677
|
-
"description": "One of `:danger`, `:default`, `:success`, or `:warning`."
|
|
677
|
+
"description": "One of `:danger`, `:default`, `:success`, `:upsell`, or `:warning`."
|
|
678
678
|
},
|
|
679
679
|
{
|
|
680
680
|
"name": "system_arguments",
|
|
@@ -2316,6 +2316,12 @@
|
|
|
2316
2316
|
"default": "N/A",
|
|
2317
2317
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
2318
2318
|
},
|
|
2319
|
+
{
|
|
2320
|
+
"name": "input_width",
|
|
2321
|
+
"type": "Symbol",
|
|
2322
|
+
"default": "N/A",
|
|
2323
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
2324
|
+
},
|
|
2319
2325
|
{
|
|
2320
2326
|
"name": "multiple",
|
|
2321
2327
|
"type": "Boolean",
|
|
@@ -2344,11 +2350,95 @@
|
|
|
2344
2350
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
|
|
2345
2351
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
|
|
2346
2352
|
"parameters": [
|
|
2353
|
+
{
|
|
2354
|
+
"name": "src",
|
|
2355
|
+
"type": "String",
|
|
2356
|
+
"default": "`nil`",
|
|
2357
|
+
"description": "The URL to fetch search results from."
|
|
2358
|
+
},
|
|
2359
|
+
{
|
|
2360
|
+
"name": "title",
|
|
2361
|
+
"type": "String",
|
|
2362
|
+
"default": "`\"Menu\"`",
|
|
2363
|
+
"description": "The title that appears at the top of the panel."
|
|
2364
|
+
},
|
|
2365
|
+
{
|
|
2366
|
+
"name": "id",
|
|
2367
|
+
"type": "String",
|
|
2368
|
+
"default": "`self.class.generate_id`",
|
|
2369
|
+
"description": "The unique ID of the panel."
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"name": "size",
|
|
2373
|
+
"type": "Symbol",
|
|
2374
|
+
"default": "`:small`",
|
|
2375
|
+
"description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
|
|
2376
|
+
},
|
|
2377
|
+
{
|
|
2378
|
+
"name": "select_variant",
|
|
2379
|
+
"type": "Symbol",
|
|
2380
|
+
"default": "`:single`",
|
|
2381
|
+
"description": "One of `:multiple`, `:none`, or `:single`."
|
|
2382
|
+
},
|
|
2383
|
+
{
|
|
2384
|
+
"name": "fetch_strategy",
|
|
2385
|
+
"type": "Symbol",
|
|
2386
|
+
"default": "`:remote`",
|
|
2387
|
+
"description": "One of `:eventually_local`, `:local`, or `:remote`."
|
|
2388
|
+
},
|
|
2389
|
+
{
|
|
2390
|
+
"name": "no_results_label",
|
|
2391
|
+
"type": "String",
|
|
2392
|
+
"default": "`\"No results found\"`",
|
|
2393
|
+
"description": "The label to display when no results are found."
|
|
2394
|
+
},
|
|
2395
|
+
{
|
|
2396
|
+
"name": "preload",
|
|
2397
|
+
"type": "Boolean",
|
|
2398
|
+
"default": "`false`",
|
|
2399
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
|
|
2400
|
+
},
|
|
2401
|
+
{
|
|
2402
|
+
"name": "dynamic_label",
|
|
2403
|
+
"type": "Boolean",
|
|
2404
|
+
"default": "`false`",
|
|
2405
|
+
"description": "Whether or not to display the text of the currently selected item in the show button."
|
|
2406
|
+
},
|
|
2407
|
+
{
|
|
2408
|
+
"name": "dynamic_label_prefix",
|
|
2409
|
+
"type": "String",
|
|
2410
|
+
"default": "`nil`",
|
|
2411
|
+
"description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
|
|
2412
|
+
},
|
|
2413
|
+
{
|
|
2414
|
+
"name": "dynamic_aria_label_prefix",
|
|
2415
|
+
"type": "String",
|
|
2416
|
+
"default": "`nil`",
|
|
2417
|
+
"description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
|
|
2418
|
+
},
|
|
2419
|
+
{
|
|
2420
|
+
"name": "body_id",
|
|
2421
|
+
"type": "String",
|
|
2422
|
+
"default": "`nil`",
|
|
2423
|
+
"description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
|
|
2424
|
+
},
|
|
2425
|
+
{
|
|
2426
|
+
"name": "list_arguments",
|
|
2427
|
+
"type": "Hash",
|
|
2428
|
+
"default": "`{}`",
|
|
2429
|
+
"description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
|
|
2430
|
+
},
|
|
2431
|
+
{
|
|
2432
|
+
"name": "form_arguments",
|
|
2433
|
+
"type": "Hash",
|
|
2434
|
+
"default": "`{}`",
|
|
2435
|
+
"description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
|
|
2436
|
+
},
|
|
2347
2437
|
{
|
|
2348
2438
|
"name": "use_experimental_non_local_form",
|
|
2349
2439
|
"type": "Boolean",
|
|
2350
2440
|
"default": "`false`",
|
|
2351
|
-
"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."
|
|
2441
|
+
"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."
|
|
2352
2442
|
},
|
|
2353
2443
|
{
|
|
2354
2444
|
"name": "show_filter",
|
|
@@ -2771,6 +2861,12 @@
|
|
|
2771
2861
|
"type": "Hash",
|
|
2772
2862
|
"default": "N/A",
|
|
2773
2863
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
2864
|
+
},
|
|
2865
|
+
{
|
|
2866
|
+
"name": "input_width",
|
|
2867
|
+
"type": "Symbol",
|
|
2868
|
+
"default": "N/A",
|
|
2869
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
2774
2870
|
}
|
|
2775
2871
|
]
|
|
2776
2872
|
},
|
|
@@ -2902,6 +2998,12 @@
|
|
|
2902
2998
|
"default": "N/A",
|
|
2903
2999
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
2904
3000
|
},
|
|
3001
|
+
{
|
|
3002
|
+
"name": "input_width",
|
|
3003
|
+
"type": "Symbol",
|
|
3004
|
+
"default": "N/A",
|
|
3005
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
3006
|
+
},
|
|
2905
3007
|
{
|
|
2906
3008
|
"name": "placeholder",
|
|
2907
3009
|
"type": "String",
|
data/static/constants.json
CHANGED
|
@@ -197,7 +197,8 @@
|
|
|
197
197
|
"default": "bell",
|
|
198
198
|
"warning": "alert",
|
|
199
199
|
"danger": "stop",
|
|
200
|
-
"success": "check-circle"
|
|
200
|
+
"success": "check-circle",
|
|
201
|
+
"upsell": "info"
|
|
201
202
|
},
|
|
202
203
|
"DEFAULT_SCHEME": "default",
|
|
203
204
|
"DEFAULT_TAG": "div",
|
|
@@ -217,7 +218,8 @@
|
|
|
217
218
|
"default": "",
|
|
218
219
|
"warning": "Banner--warning",
|
|
219
220
|
"danger": "Banner--error",
|
|
220
|
-
"success": "Banner--success"
|
|
221
|
+
"success": "Banner--success",
|
|
222
|
+
"upsell": "Banner--upsell"
|
|
221
223
|
},
|
|
222
224
|
"TAG_OPTIONS": [
|
|
223
225
|
"div",
|
|
@@ -1621,6 +1623,7 @@
|
|
|
1621
1623
|
"GeneratedSlotMethods": "Primer::OpenProject::InputGroup::GeneratedSlotMethods",
|
|
1622
1624
|
"INPUT_WIDTH_MAPPINGS": {
|
|
1623
1625
|
"auto": "InputGroup-input-width--auto",
|
|
1626
|
+
"xsmall": "InputGroup-input-width--xsmall",
|
|
1624
1627
|
"small": "InputGroup-input-width--small",
|
|
1625
1628
|
"medium": "InputGroup-input-width--medium",
|
|
1626
1629
|
"large": "InputGroup-input-width--large",
|
|
@@ -1629,6 +1632,7 @@
|
|
|
1629
1632
|
},
|
|
1630
1633
|
"INPUT_WIDTH_OPTIONS": [
|
|
1631
1634
|
"auto",
|
|
1635
|
+
"xsmall",
|
|
1632
1636
|
"small",
|
|
1633
1637
|
"medium",
|
|
1634
1638
|
"large",
|
data/static/info_arch.json
CHANGED
|
@@ -2483,7 +2483,7 @@
|
|
|
2483
2483
|
"name": "scheme",
|
|
2484
2484
|
"type": "Symbol",
|
|
2485
2485
|
"default": "`:default`",
|
|
2486
|
-
"description": "One of `:danger`, `:default`, `:success`, or `:warning`."
|
|
2486
|
+
"description": "One of `:danger`, `:default`, `:success`, `:upsell`, or `:warning`."
|
|
2487
2487
|
},
|
|
2488
2488
|
{
|
|
2489
2489
|
"name": "system_arguments",
|
|
@@ -2583,6 +2583,19 @@
|
|
|
2583
2583
|
]
|
|
2584
2584
|
}
|
|
2585
2585
|
},
|
|
2586
|
+
{
|
|
2587
|
+
"preview_path": "primer/alpha/banner/scheme_upsell",
|
|
2588
|
+
"name": "scheme_upsell",
|
|
2589
|
+
"snapshot": "true",
|
|
2590
|
+
"skip_rules": {
|
|
2591
|
+
"wont_fix": [
|
|
2592
|
+
"region"
|
|
2593
|
+
],
|
|
2594
|
+
"will_fix": [
|
|
2595
|
+
"color-contrast"
|
|
2596
|
+
]
|
|
2597
|
+
}
|
|
2598
|
+
},
|
|
2586
2599
|
{
|
|
2587
2600
|
"preview_path": "primer/alpha/banner/dismissible",
|
|
2588
2601
|
"name": "dismissible",
|
|
@@ -7268,6 +7281,12 @@
|
|
|
7268
7281
|
"default": "N/A",
|
|
7269
7282
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
7270
7283
|
},
|
|
7284
|
+
{
|
|
7285
|
+
"name": "input_width",
|
|
7286
|
+
"type": "Symbol",
|
|
7287
|
+
"default": "N/A",
|
|
7288
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
7289
|
+
},
|
|
7271
7290
|
{
|
|
7272
7291
|
"name": "multiple",
|
|
7273
7292
|
"type": "Boolean",
|
|
@@ -7450,11 +7469,95 @@
|
|
|
7450
7469
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
|
|
7451
7470
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
|
|
7452
7471
|
"parameters": [
|
|
7472
|
+
{
|
|
7473
|
+
"name": "src",
|
|
7474
|
+
"type": "String",
|
|
7475
|
+
"default": "`nil`",
|
|
7476
|
+
"description": "The URL to fetch search results from."
|
|
7477
|
+
},
|
|
7478
|
+
{
|
|
7479
|
+
"name": "title",
|
|
7480
|
+
"type": "String",
|
|
7481
|
+
"default": "`\"Menu\"`",
|
|
7482
|
+
"description": "The title that appears at the top of the panel."
|
|
7483
|
+
},
|
|
7484
|
+
{
|
|
7485
|
+
"name": "id",
|
|
7486
|
+
"type": "String",
|
|
7487
|
+
"default": "`self.class.generate_id`",
|
|
7488
|
+
"description": "The unique ID of the panel."
|
|
7489
|
+
},
|
|
7490
|
+
{
|
|
7491
|
+
"name": "size",
|
|
7492
|
+
"type": "Symbol",
|
|
7493
|
+
"default": "`:small`",
|
|
7494
|
+
"description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
|
|
7495
|
+
},
|
|
7496
|
+
{
|
|
7497
|
+
"name": "select_variant",
|
|
7498
|
+
"type": "Symbol",
|
|
7499
|
+
"default": "`:single`",
|
|
7500
|
+
"description": "One of `:multiple`, `:none`, or `:single`."
|
|
7501
|
+
},
|
|
7502
|
+
{
|
|
7503
|
+
"name": "fetch_strategy",
|
|
7504
|
+
"type": "Symbol",
|
|
7505
|
+
"default": "`:remote`",
|
|
7506
|
+
"description": "One of `:eventually_local`, `:local`, or `:remote`."
|
|
7507
|
+
},
|
|
7508
|
+
{
|
|
7509
|
+
"name": "no_results_label",
|
|
7510
|
+
"type": "String",
|
|
7511
|
+
"default": "`\"No results found\"`",
|
|
7512
|
+
"description": "The label to display when no results are found."
|
|
7513
|
+
},
|
|
7514
|
+
{
|
|
7515
|
+
"name": "preload",
|
|
7516
|
+
"type": "Boolean",
|
|
7517
|
+
"default": "`false`",
|
|
7518
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
|
|
7519
|
+
},
|
|
7520
|
+
{
|
|
7521
|
+
"name": "dynamic_label",
|
|
7522
|
+
"type": "Boolean",
|
|
7523
|
+
"default": "`false`",
|
|
7524
|
+
"description": "Whether or not to display the text of the currently selected item in the show button."
|
|
7525
|
+
},
|
|
7526
|
+
{
|
|
7527
|
+
"name": "dynamic_label_prefix",
|
|
7528
|
+
"type": "String",
|
|
7529
|
+
"default": "`nil`",
|
|
7530
|
+
"description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
|
|
7531
|
+
},
|
|
7532
|
+
{
|
|
7533
|
+
"name": "dynamic_aria_label_prefix",
|
|
7534
|
+
"type": "String",
|
|
7535
|
+
"default": "`nil`",
|
|
7536
|
+
"description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
|
|
7537
|
+
},
|
|
7538
|
+
{
|
|
7539
|
+
"name": "body_id",
|
|
7540
|
+
"type": "String",
|
|
7541
|
+
"default": "`nil`",
|
|
7542
|
+
"description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
|
|
7543
|
+
},
|
|
7544
|
+
{
|
|
7545
|
+
"name": "list_arguments",
|
|
7546
|
+
"type": "Hash",
|
|
7547
|
+
"default": "`{}`",
|
|
7548
|
+
"description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}} component. Only has an effect for the local fetch strategy."
|
|
7549
|
+
},
|
|
7550
|
+
{
|
|
7551
|
+
"name": "form_arguments",
|
|
7552
|
+
"type": "Hash",
|
|
7553
|
+
"default": "`{}`",
|
|
7554
|
+
"description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
|
|
7555
|
+
},
|
|
7453
7556
|
{
|
|
7454
7557
|
"name": "use_experimental_non_local_form",
|
|
7455
7558
|
"type": "Boolean",
|
|
7456
7559
|
"default": "`false`",
|
|
7457
|
-
"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."
|
|
7560
|
+
"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."
|
|
7458
7561
|
},
|
|
7459
7562
|
{
|
|
7460
7563
|
"name": "show_filter",
|
|
@@ -8773,6 +8876,12 @@
|
|
|
8773
8876
|
"type": "Hash",
|
|
8774
8877
|
"default": "N/A",
|
|
8775
8878
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
8879
|
+
},
|
|
8880
|
+
{
|
|
8881
|
+
"name": "input_width",
|
|
8882
|
+
"type": "Symbol",
|
|
8883
|
+
"default": "N/A",
|
|
8884
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
8776
8885
|
}
|
|
8777
8886
|
],
|
|
8778
8887
|
"slots": [
|
|
@@ -9038,6 +9147,12 @@
|
|
|
9038
9147
|
"default": "N/A",
|
|
9039
9148
|
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
|
9040
9149
|
},
|
|
9150
|
+
{
|
|
9151
|
+
"name": "input_width",
|
|
9152
|
+
"type": "Symbol",
|
|
9153
|
+
"default": "N/A",
|
|
9154
|
+
"description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
|
|
9155
|
+
},
|
|
9041
9156
|
{
|
|
9042
9157
|
"name": "placeholder",
|
|
9043
9158
|
"type": "String",
|
data/static/previews.json
CHANGED
|
@@ -1556,6 +1556,19 @@
|
|
|
1556
1556
|
]
|
|
1557
1557
|
}
|
|
1558
1558
|
},
|
|
1559
|
+
{
|
|
1560
|
+
"preview_path": "primer/alpha/banner/scheme_upsell",
|
|
1561
|
+
"name": "scheme_upsell",
|
|
1562
|
+
"snapshot": "true",
|
|
1563
|
+
"skip_rules": {
|
|
1564
|
+
"wont_fix": [
|
|
1565
|
+
"region"
|
|
1566
|
+
],
|
|
1567
|
+
"will_fix": [
|
|
1568
|
+
"color-contrast"
|
|
1569
|
+
]
|
|
1570
|
+
}
|
|
1571
|
+
},
|
|
1559
1572
|
{
|
|
1560
1573
|
"preview_path": "primer/alpha/banner/dismissible",
|
|
1561
1574
|
"name": "dismissible",
|