openproject-primer_view_components 0.56.1 → 0.57.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 +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/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +0 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +1 -4
- data/app/components/primer/beta/auto_complete/item.rb +2 -3
- data/app/components/primer/beta/auto_complete/no_result_item.rb +21 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/beta/auto_complete_preview.rb +6 -0
- data/previews/primer/beta/nav_list_preview/truncate.html.erb +25 -0
- data/previews/primer/beta/nav_list_preview.rb +4 -24
- data/static/arguments.json +11 -0
- data/static/audited_at.json +1 -0
- data/static/constants.json +4 -0
- data/static/info_arch.json +79 -15
- data/static/previews.json +15 -15
- data/static/statuses.json +1 -0
- metadata +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}
|
|
1
|
+
@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"AAiBA,gCACE,eAAgB,CAChB,cAAe,CACf,iBACF,CAEA,iBACE,kDACF,CAEA,8CACE,yBACF,CAEA,2BACE,YACF,CAEA,iBACE,sBACF,CAEA,2BACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAChB,iBAEF,CAMA,sCACE,+BACE,YACF,CACF,CAEA,SAWE,uCAAwC,CACxC,QAAS,CACT,uCAAwC,CACxC,uCAAwC,CANxC,4BAA6B,CAN7B,YAAa,CAQb,qBAAsB,CAMtB,OAAQ,CATR,WAAY,CAFZ,wDAA0D,CAD1D,eAAgB,CAWhB,SAAU,CATV,SAAU,CALV,eAAgB,CAQhB,kBAAmB,CANnB,4CA0IF,CA3HE,4BAGE,6BAA8B,CAD9B,4BAA6B,CAD7B,eAGF,CAEA,4BAEE,YAAa,CADb,WAEF,CAEA,8BACE,qBAAsB,CAEtB,6BACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,sCACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,uCACE,sBAAuB,CACvB,qBACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,WACF,CAEA,mEAEE,WAAY,CACZ,gBAAiB,CAFjB,cAGF,CAGE,yDADF,sGAEI,0FAEJ,CADE,CAGF,iCAIE,2CAA4C,CAD5C,2BAA4B,CAD5B,wBAAyB,CADzB,gBAIF,CAEA,kCAIE,0CAA2C,CAD3C,4BAA6B,CAD7B,yBAA0B,CAD1B,gBAIF,CAGA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,6BACE,UACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,gCACE,6BACF,CAKF,eACE,cACF,CAEA,qCACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAGA,cAIE,WAAY,CAFZ,aAGF,CAEA,8BANE,YAAa,CAEb,qBAkEF,CA9DA,gBAGE,4BAA6B,CAF7B,SA6DF,CAxDE,wCAGE,8EAAiF,CAFjF,6CAGF,CAII,yFACE,8BASF,CAPE,6GACE,uCACF,CAEA,mHACE,sCACF,CAKN,2CAEE,sBAAuB,CADvB,YAAa,CAEb,8BAA+B,CAC/B,0FA6BF,CA3BE,oEACE,YAAa,CACb,kBAAmB,CACnB,8BACF,CAEA,mEACE,YAAa,CAGb,qBAAsB,CACtB,WAAY,CACZ,4BAA6B,CAJ7B,8GAkBF,CAZE,uFAEE,sCAAuC,CACvC,4CAA6C,CAF7C,QAGF,CAEA,6FAIE,0BAA2B,CAF3B,qCAAsC,CACtC,0CAA2C,CAF3C,QAIF,CAKN,sBACE,0FACF,CAGA,cAKE,WAAY,CADZ,sCAAuC,CAFvC,eAAgB,CADhB,mCAAoC,CAEpC,oBAYF,CARE,6CACE,sCAAuC,CACvC,aACF,CAEA,wCACE,SACF,CAIF,gBAEE,YAAa,CAEb,kBAAmB,CACnB,aAAc,CACd,cAAe,CAHf,6FAA8F,CAF9F,SA2BF,CApBE,wCAGE,qEAAsE,CAFtE,uCAGF,CAEA,2CAEE,8BAA+B,CAD/B,0BAEF,CAEA,4CAEE,8BAA+B,CAD/B,sBAEF,CAEA,yCAEE,8BAA+B,CAD/B,wBAEF,CAIF,qBAeE,qBAAsB,CANtB,wBAA6B,CAC7B,0CAAiD,CACjD,wCAAyC,CALzC,0BAA2B,CAC3B,cAAe,CALf,YAAa,CAcb,aAAc,CAZd,0BAA2B,CAC3B,SAAU,CASV,oBAAqB,CAbrB,iBAAkB,CAWlB,sCAA6C,CAC7C,uDAA0D,CAL1D,wBAAiB,CAAjB,gBAAiB,CALjB,yBA0BF,CAXE,sDAEE,oDAAqD,CAErD,iEACF,CAGA,kCACE,0CACF,CAQF,eAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAKA,yBACE,iFAEE,WAAY,CACZ,gBAAiB,CAFjB,cAGF,CAEA,4CAIE,0CAA2C,CAD3C,2BAA4B,CAD5B,wBAAyB,CADzB,gBAIF,CAEA,6CAIE,0CAA2C,CAD3C,4BAA6B,CAD7B,yBAA0B,CAD1B,gBAIF,CAEA,8CAKE,sCAAuC,CADvC,2BAA4B,CAD5B,4BAA6B,CAG7B,cAAe,CAJf,eAAgB,CADhB,UAMF,CAEA,0BAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CACF,CAEA,qCACE,GACE,2BACF,CACF,CAEA,mCACE,GACE,0BACF,CACF,CAEA,wCACE,GACE,2BACF,CACF,CAEA,uCACE,GACE,0BACF,CACF","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: \"<length>\";\n}\n\nbody:has(:modal) {\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\nbody:has(dialog:modal.Overlay--disableScroll) {\n overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n position: static;\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n padding: 0;\n margin: auto;\n color: var(--fgColor-default);\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n inset: 0;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n position: fixed;\n height: 100%;\n max-height: unset;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n color: var(--fgColor-default);\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n position: fixed;\n height: 100%;\n max-height: 100vh;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideUp;\n inset: auto 0 0;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"AAiBA,gCACE,eAAgB,CAChB,cAAe,CACf,iBACF,CAEA,8CAEE,yBAA2B,CAD3B,kDAEF,CAEA,2BACE,YACF,CAEA,iBACE,sBACF,CAEA,2BACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAChB,iBAEF,CAMA,sCACE,+BACE,YACF,CACF,CAEA,SAWE,uCAAwC,CACxC,QAAS,CACT,uCAAwC,CACxC,uCAAwC,CANxC,4BAA6B,CAN7B,YAAa,CAQb,qBAAsB,CAMtB,OAAQ,CATR,WAAY,CAFZ,wDAA0D,CAD1D,eAAgB,CAWhB,SAAU,CATV,SAAU,CALV,eAAgB,CAQhB,kBAAmB,CANnB,4CA0IF,CA3HE,4BAGE,6BAA8B,CAD9B,4BAA6B,CAD7B,eAGF,CAEA,4BAEE,YAAa,CADb,WAEF,CAEA,8BACE,qBAAsB,CAEtB,6BACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,sCACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,uCACE,sBAAuB,CACvB,qBACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,WACF,CAEA,mEAEE,WAAY,CACZ,gBAAiB,CAFjB,cAGF,CAGE,yDADF,sGAEI,0FAEJ,CADE,CAGF,iCAIE,2CAA4C,CAD5C,2BAA4B,CAD5B,wBAAyB,CADzB,gBAIF,CAEA,kCAIE,0CAA2C,CAD3C,4BAA6B,CAD7B,yBAA0B,CAD1B,gBAIF,CAGA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,6BACE,UACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,gCACE,6BACF,CAKF,eACE,cACF,CAEA,qCACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAGA,cAIE,WAAY,CAFZ,aAGF,CAEA,8BANE,YAAa,CAEb,qBAkEF,CA9DA,gBAGE,4BAA6B,CAF7B,SA6DF,CAxDE,wCAGE,8EAAiF,CAFjF,6CAGF,CAII,yFACE,8BASF,CAPE,6GACE,uCACF,CAEA,mHACE,sCACF,CAKN,2CAEE,sBAAuB,CADvB,YAAa,CAEb,8BAA+B,CAC/B,0FA6BF,CA3BE,oEACE,YAAa,CACb,kBAAmB,CACnB,8BACF,CAEA,mEACE,YAAa,CAGb,qBAAsB,CACtB,WAAY,CACZ,4BAA6B,CAJ7B,8GAkBF,CAZE,uFAEE,sCAAuC,CACvC,4CAA6C,CAF7C,QAGF,CAEA,6FAIE,0BAA2B,CAF3B,qCAAsC,CACtC,0CAA2C,CAF3C,QAIF,CAKN,sBACE,0FACF,CAGA,cAKE,WAAY,CADZ,sCAAuC,CAFvC,eAAgB,CADhB,mCAAoC,CAEpC,oBAYF,CARE,6CACE,sCAAuC,CACvC,aACF,CAEA,wCACE,SACF,CAIF,gBAEE,YAAa,CAEb,kBAAmB,CACnB,aAAc,CACd,cAAe,CAHf,6FAA8F,CAF9F,SA2BF,CApBE,wCAGE,qEAAsE,CAFtE,uCAGF,CAEA,2CAEE,8BAA+B,CAD/B,0BAEF,CAEA,4CAEE,8BAA+B,CAD/B,sBAEF,CAEA,yCAEE,8BAA+B,CAD/B,wBAEF,CAIF,qBAeE,qBAAsB,CANtB,wBAA6B,CAC7B,0CAAiD,CACjD,wCAAyC,CALzC,0BAA2B,CAC3B,cAAe,CALf,YAAa,CAcb,aAAc,CAZd,0BAA2B,CAC3B,SAAU,CASV,oBAAqB,CAbrB,iBAAkB,CAWlB,sCAA6C,CAC7C,uDAA0D,CAL1D,wBAAiB,CAAjB,gBAAiB,CALjB,yBA0BF,CAXE,sDAEE,oDAAqD,CAErD,iEACF,CAGA,kCACE,0CACF,CAQF,eAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAKA,yBACE,iFAEE,WAAY,CACZ,gBAAiB,CAFjB,cAGF,CAEA,4CAIE,0CAA2C,CAD3C,2BAA4B,CAD5B,wBAAyB,CADzB,gBAIF,CAEA,6CAIE,0CAA2C,CAD3C,4BAA6B,CAD7B,yBAA0B,CAD1B,gBAIF,CAEA,8CAKE,sCAAuC,CADvC,2BAA4B,CAD5B,4BAA6B,CAG7B,cAAe,CAJf,eAAgB,CADhB,UAMF,CAEA,0BAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CACF,CAEA,qCACE,GACE,2BACF,CACF,CAEA,mCACE,GACE,0BACF,CACF,CAEA,wCACE,GACE,2BACF,CACF,CAEA,uCACE,GACE,0BACF,CACF","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: \"<length>\";\n}\n\nbody:has(dialog:modal.Overlay--disableScroll) {\n padding-right: var(--dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n position: static;\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n padding: 0;\n margin: auto;\n color: var(--fgColor-default);\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n inset: 0;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n position: fixed;\n height: 100%;\n max-height: unset;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n color: var(--fgColor-default);\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n position: fixed;\n height: 100%;\n max-height: 100vh;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideUp;\n inset: auto 0 0;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
|
|
@@ -21,11 +21,8 @@
|
|
|
21
21
|
syntax: "<length>";
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
body:has(:modal) {
|
|
25
|
-
padding-right: var(--dialog-scrollgutter) !important;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
24
|
body:has(dialog:modal.Overlay--disableScroll) {
|
|
25
|
+
padding-right: var(--dialog-scrollgutter) !important;
|
|
29
26
|
overflow: hidden !important;
|
|
30
27
|
}
|
|
31
28
|
|
|
@@ -45,14 +45,13 @@ module Primer
|
|
|
45
45
|
# @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
|
|
46
46
|
# @param description [String] Display description text below label
|
|
47
47
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
48
|
-
def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, **system_arguments)
|
|
48
|
+
def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, role: :option, **system_arguments)
|
|
49
49
|
@description_variant = fetch_or_fallback(
|
|
50
50
|
DESCRIPTION_VARIANT_OPTIONS, description_variant, DEFAULT_DESCRIPTION_VARIANT
|
|
51
51
|
)
|
|
52
|
-
|
|
53
52
|
@system_arguments = deny_tag_argument(**system_arguments)
|
|
54
53
|
@system_arguments[:tag] = :div
|
|
55
|
-
@system_arguments[:role] =
|
|
54
|
+
@system_arguments[:role] = role
|
|
56
55
|
@system_arguments[:"data-autocomplete-value"] = value
|
|
57
56
|
|
|
58
57
|
@system_arguments[:"aria-selected"] = true if selected
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
module Primer
|
|
2
|
+
module Beta
|
|
3
|
+
class AutoComplete
|
|
4
|
+
class NoResultItem < Item
|
|
5
|
+
def initialize(**system_arguments)
|
|
6
|
+
super(
|
|
7
|
+
role: :presentation,
|
|
8
|
+
aria: merge_aria(
|
|
9
|
+
{ aria: { hidden: true } },
|
|
10
|
+
system_arguments
|
|
11
|
+
),
|
|
12
|
+
value: "",
|
|
13
|
+
disabled: true,
|
|
14
|
+
'data-no-result-found': true,
|
|
15
|
+
**system_arguments
|
|
16
|
+
)
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
end
|
|
@@ -282,6 +282,12 @@ module Primer
|
|
|
282
282
|
def inset
|
|
283
283
|
render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path, show_clear_button: false, inset: true))
|
|
284
284
|
end
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
def no_results
|
|
288
|
+
render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false, src: UrlHelpers.autocomplete_no_results_path))
|
|
289
|
+
end
|
|
290
|
+
|
|
285
291
|
end
|
|
286
292
|
end
|
|
287
293
|
end
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<% if truncate_label == :truncate %>
|
|
2
|
+
<div style="margin-bottom:1rem">
|
|
3
|
+
<%= render(
|
|
4
|
+
Primer::Alpha::Banner.new(
|
|
5
|
+
scheme: :warning,
|
|
6
|
+
description: 'If you must use truncation, ensure that users can still access the truncated content in an accessible manner, as truncation should be used sparingly.'
|
|
7
|
+
)
|
|
8
|
+
) { "Inaccessible pattern" } %>
|
|
9
|
+
</div>
|
|
10
|
+
<% end %>
|
|
11
|
+
|
|
12
|
+
<%= render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component| %>
|
|
13
|
+
<% component.with_item(
|
|
14
|
+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
15
|
+
truncate_label: truncate_label
|
|
16
|
+
) %>
|
|
17
|
+
<% component.with_item(
|
|
18
|
+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
19
|
+
truncate_label: truncate_label
|
|
20
|
+
) %>
|
|
21
|
+
<% component.with_item(
|
|
22
|
+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
23
|
+
truncate_label: truncate_label
|
|
24
|
+
) %>
|
|
25
|
+
<% end %>
|
|
@@ -134,21 +134,10 @@ module Primer
|
|
|
134
134
|
#
|
|
135
135
|
# @param truncate_label [Symbol] select [none, truncate, show_tooltip]
|
|
136
136
|
# @snapshot
|
|
137
|
-
def
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
truncate_label: truncate_label
|
|
142
|
-
)
|
|
143
|
-
component.with_item(
|
|
144
|
-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
145
|
-
truncate_label: truncate_label
|
|
146
|
-
)
|
|
147
|
-
component.with_item(
|
|
148
|
-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
149
|
-
truncate_label: truncate_label
|
|
150
|
-
)
|
|
151
|
-
end
|
|
137
|
+
def truncate(truncate_label: :none)
|
|
138
|
+
render_with_template(locals: {
|
|
139
|
+
truncate_label: truncate_label
|
|
140
|
+
})
|
|
152
141
|
end
|
|
153
142
|
|
|
154
143
|
def long_label_wrap(truncate_label: :none)
|
|
@@ -160,15 +149,6 @@ module Primer
|
|
|
160
149
|
end
|
|
161
150
|
end
|
|
162
151
|
|
|
163
|
-
def long_label_truncate_no_tooltip(truncate_label: :truncate)
|
|
164
|
-
render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
|
|
165
|
-
component.with_item(
|
|
166
|
-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
|
|
167
|
-
truncate_label: truncate_label
|
|
168
|
-
)
|
|
169
|
-
end
|
|
170
|
-
end
|
|
171
|
-
|
|
172
152
|
def long_label_show_tooltip_no_truncate_label
|
|
173
153
|
render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
|
|
174
154
|
component.with_item(
|
data/static/arguments.json
CHANGED
|
@@ -3377,6 +3377,17 @@
|
|
|
3377
3377
|
}
|
|
3378
3378
|
]
|
|
3379
3379
|
},
|
|
3380
|
+
{
|
|
3381
|
+
"component": "AutoComplete::NoResultItem",
|
|
3382
|
+
"status": "beta",
|
|
3383
|
+
"a11y_reviewed": false,
|
|
3384
|
+
"short_name": "AutoCompleteNoResultItem",
|
|
3385
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
|
|
3386
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
|
|
3387
|
+
"parameters": [
|
|
3388
|
+
|
|
3389
|
+
]
|
|
3390
|
+
},
|
|
3380
3391
|
{
|
|
3381
3392
|
"component": "Avatar",
|
|
3382
3393
|
"status": "beta",
|
data/static/audited_at.json
CHANGED
|
@@ -68,6 +68,7 @@
|
|
|
68
68
|
"Primer::BaseComponent": "",
|
|
69
69
|
"Primer::Beta::AutoComplete": "",
|
|
70
70
|
"Primer::Beta::AutoComplete::Item": "",
|
|
71
|
+
"Primer::Beta::AutoComplete::NoResultItem": "",
|
|
71
72
|
"Primer::Beta::Avatar": "",
|
|
72
73
|
"Primer::Beta::AvatarStack": "",
|
|
73
74
|
"Primer::Beta::BaseButton": "",
|
data/static/constants.json
CHANGED
|
@@ -807,6 +807,7 @@
|
|
|
807
807
|
"DEFAULT_WIDTH": "auto",
|
|
808
808
|
"GeneratedSlotMethods": "Primer::Beta::AutoComplete::GeneratedSlotMethods",
|
|
809
809
|
"Item": "Primer::Beta::AutoComplete::Item",
|
|
810
|
+
"NoResultItem": "Primer::Beta::AutoComplete::NoResultItem",
|
|
810
811
|
"SIZE_MAPPINGS": {
|
|
811
812
|
"small": "FormControl-small",
|
|
812
813
|
"medium": "FormControl-medium",
|
|
@@ -846,6 +847,9 @@
|
|
|
846
847
|
],
|
|
847
848
|
"GeneratedSlotMethods": "Primer::Beta::AutoComplete::Item::GeneratedSlotMethods"
|
|
848
849
|
},
|
|
850
|
+
"Primer::Beta::AutoComplete::NoResultItem": {
|
|
851
|
+
"GeneratedSlotMethods": "Primer::Beta::AutoComplete::NoResultItem::GeneratedSlotMethods"
|
|
852
|
+
},
|
|
849
853
|
"Primer::Beta::Avatar": {
|
|
850
854
|
"DEFAULT_SHAPE": "circle",
|
|
851
855
|
"DEFAULT_SIZE": 20,
|
data/static/info_arch.json
CHANGED
|
@@ -10771,6 +10771,19 @@
|
|
|
10771
10771
|
"color-contrast"
|
|
10772
10772
|
]
|
|
10773
10773
|
}
|
|
10774
|
+
},
|
|
10775
|
+
{
|
|
10776
|
+
"preview_path": "primer/beta/auto_complete/no_results",
|
|
10777
|
+
"name": "no_results",
|
|
10778
|
+
"snapshot": "false",
|
|
10779
|
+
"skip_rules": {
|
|
10780
|
+
"wont_fix": [
|
|
10781
|
+
"region"
|
|
10782
|
+
],
|
|
10783
|
+
"will_fix": [
|
|
10784
|
+
"color-contrast"
|
|
10785
|
+
]
|
|
10786
|
+
}
|
|
10774
10787
|
}
|
|
10775
10788
|
],
|
|
10776
10789
|
"subcomponents": [
|
|
@@ -10871,6 +10884,70 @@
|
|
|
10871
10884
|
],
|
|
10872
10885
|
"subcomponents": [
|
|
10873
10886
|
|
|
10887
|
+
]
|
|
10888
|
+
},
|
|
10889
|
+
{
|
|
10890
|
+
"fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
|
|
10891
|
+
"description": "",
|
|
10892
|
+
"accessibility_docs": null,
|
|
10893
|
+
"is_form_component": false,
|
|
10894
|
+
"is_published": true,
|
|
10895
|
+
"requires_js": false,
|
|
10896
|
+
"component": "AutoComplete::NoResultItem",
|
|
10897
|
+
"status": "beta",
|
|
10898
|
+
"a11y_reviewed": false,
|
|
10899
|
+
"short_name": "AutoCompleteNoResultItem",
|
|
10900
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
|
|
10901
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
|
|
10902
|
+
"parameters": [
|
|
10903
|
+
|
|
10904
|
+
],
|
|
10905
|
+
"slots": [
|
|
10906
|
+
{
|
|
10907
|
+
"name": "leading_visual",
|
|
10908
|
+
"description": "The leading visual rendered before the link.",
|
|
10909
|
+
"parameters": [
|
|
10910
|
+
{
|
|
10911
|
+
"name": "kwargs",
|
|
10912
|
+
"type": "Hash",
|
|
10913
|
+
"default": "N/A",
|
|
10914
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
|
|
10915
|
+
}
|
|
10916
|
+
]
|
|
10917
|
+
},
|
|
10918
|
+
{
|
|
10919
|
+
"name": "trailing_visual",
|
|
10920
|
+
"description": "The trailing visual rendered after the link.",
|
|
10921
|
+
"parameters": [
|
|
10922
|
+
{
|
|
10923
|
+
"name": "kwargs",
|
|
10924
|
+
"type": "Hash",
|
|
10925
|
+
"default": "N/A",
|
|
10926
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
|
|
10927
|
+
}
|
|
10928
|
+
]
|
|
10929
|
+
},
|
|
10930
|
+
{
|
|
10931
|
+
"name": "description",
|
|
10932
|
+
"description": "Optional description",
|
|
10933
|
+
"parameters": [
|
|
10934
|
+
{
|
|
10935
|
+
"name": "system_arguments",
|
|
10936
|
+
"type": "Hash",
|
|
10937
|
+
"default": "N/A",
|
|
10938
|
+
"description": "{{link_to_system_arguments_docs}}"
|
|
10939
|
+
}
|
|
10940
|
+
]
|
|
10941
|
+
}
|
|
10942
|
+
],
|
|
10943
|
+
"methods": [
|
|
10944
|
+
|
|
10945
|
+
],
|
|
10946
|
+
"previews": [
|
|
10947
|
+
|
|
10948
|
+
],
|
|
10949
|
+
"subcomponents": [
|
|
10950
|
+
|
|
10874
10951
|
]
|
|
10875
10952
|
}
|
|
10876
10953
|
]
|
|
@@ -14853,8 +14930,8 @@
|
|
|
14853
14930
|
}
|
|
14854
14931
|
},
|
|
14855
14932
|
{
|
|
14856
|
-
"preview_path": "primer/beta/nav_list/
|
|
14857
|
-
"name": "
|
|
14933
|
+
"preview_path": "primer/beta/nav_list/truncate",
|
|
14934
|
+
"name": "truncate",
|
|
14858
14935
|
"snapshot": "true",
|
|
14859
14936
|
"skip_rules": {
|
|
14860
14937
|
"wont_fix": [
|
|
@@ -14878,19 +14955,6 @@
|
|
|
14878
14955
|
]
|
|
14879
14956
|
}
|
|
14880
14957
|
},
|
|
14881
|
-
{
|
|
14882
|
-
"preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
|
|
14883
|
-
"name": "long_label_truncate_no_tooltip",
|
|
14884
|
-
"snapshot": "false",
|
|
14885
|
-
"skip_rules": {
|
|
14886
|
-
"wont_fix": [
|
|
14887
|
-
"region"
|
|
14888
|
-
],
|
|
14889
|
-
"will_fix": [
|
|
14890
|
-
"color-contrast"
|
|
14891
|
-
]
|
|
14892
|
-
}
|
|
14893
|
-
},
|
|
14894
14958
|
{
|
|
14895
14959
|
"preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
|
|
14896
14960
|
"name": "long_label_show_tooltip_no_truncate_label",
|
data/static/previews.json
CHANGED
|
@@ -1154,6 +1154,19 @@
|
|
|
1154
1154
|
"color-contrast"
|
|
1155
1155
|
]
|
|
1156
1156
|
}
|
|
1157
|
+
},
|
|
1158
|
+
{
|
|
1159
|
+
"preview_path": "primer/beta/auto_complete/no_results",
|
|
1160
|
+
"name": "no_results",
|
|
1161
|
+
"snapshot": "false",
|
|
1162
|
+
"skip_rules": {
|
|
1163
|
+
"wont_fix": [
|
|
1164
|
+
"region"
|
|
1165
|
+
],
|
|
1166
|
+
"will_fix": [
|
|
1167
|
+
"color-contrast"
|
|
1168
|
+
]
|
|
1169
|
+
}
|
|
1157
1170
|
}
|
|
1158
1171
|
]
|
|
1159
1172
|
},
|
|
@@ -5397,8 +5410,8 @@
|
|
|
5397
5410
|
}
|
|
5398
5411
|
},
|
|
5399
5412
|
{
|
|
5400
|
-
"preview_path": "primer/beta/nav_list/
|
|
5401
|
-
"name": "
|
|
5413
|
+
"preview_path": "primer/beta/nav_list/truncate",
|
|
5414
|
+
"name": "truncate",
|
|
5402
5415
|
"snapshot": "true",
|
|
5403
5416
|
"skip_rules": {
|
|
5404
5417
|
"wont_fix": [
|
|
@@ -5422,19 +5435,6 @@
|
|
|
5422
5435
|
]
|
|
5423
5436
|
}
|
|
5424
5437
|
},
|
|
5425
|
-
{
|
|
5426
|
-
"preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
|
|
5427
|
-
"name": "long_label_truncate_no_tooltip",
|
|
5428
|
-
"snapshot": "false",
|
|
5429
|
-
"skip_rules": {
|
|
5430
|
-
"wont_fix": [
|
|
5431
|
-
"region"
|
|
5432
|
-
],
|
|
5433
|
-
"will_fix": [
|
|
5434
|
-
"color-contrast"
|
|
5435
|
-
]
|
|
5436
|
-
}
|
|
5437
|
-
},
|
|
5438
5438
|
{
|
|
5439
5439
|
"preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
|
|
5440
5440
|
"name": "long_label_show_tooltip_no_truncate_label",
|
data/static/statuses.json
CHANGED
|
@@ -68,6 +68,7 @@
|
|
|
68
68
|
"Primer::BaseComponent": "beta",
|
|
69
69
|
"Primer::Beta::AutoComplete": "beta",
|
|
70
70
|
"Primer::Beta::AutoComplete::Item": "beta",
|
|
71
|
+
"Primer::Beta::AutoComplete::NoResultItem": "beta",
|
|
71
72
|
"Primer::Beta::Avatar": "beta",
|
|
72
73
|
"Primer::Beta::AvatarStack": "beta",
|
|
73
74
|
"Primer::Beta::BaseButton": "beta",
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: openproject-primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.57.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-03-
|
|
12
|
+
date: 2025-03-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|
|
@@ -330,6 +330,7 @@ files:
|
|
|
330
330
|
- app/components/primer/beta/auto_complete/auto_complete.ts
|
|
331
331
|
- app/components/primer/beta/auto_complete/item.html.erb
|
|
332
332
|
- app/components/primer/beta/auto_complete/item.rb
|
|
333
|
+
- app/components/primer/beta/auto_complete/no_result_item.rb
|
|
333
334
|
- app/components/primer/beta/avatar.css
|
|
334
335
|
- app/components/primer/beta/avatar.css.json
|
|
335
336
|
- app/components/primer/beta/avatar.css.map
|
|
@@ -993,6 +994,7 @@ files:
|
|
|
993
994
|
- previews/primer/beta/markdown_preview.rb
|
|
994
995
|
- previews/primer/beta/nav_list_preview.rb
|
|
995
996
|
- previews/primer/beta/nav_list_preview/trailing_action.html.erb
|
|
997
|
+
- previews/primer/beta/nav_list_preview/truncate.html.erb
|
|
996
998
|
- previews/primer/beta/octicon_preview.rb
|
|
997
999
|
- previews/primer/beta/popover_preview.rb
|
|
998
1000
|
- previews/primer/beta/progress_bar_preview.rb
|