primer_view_components 0.37.0 → 0.39.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 +18 -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/alpha/select_panel.html.erb +5 -0
- data/app/components/primer/alpha/select_panel.rb +23 -24
- data/app/components/primer/alpha/select_panel_element.js +6 -4
- data/app/components/primer/alpha/select_panel_element.ts +8 -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/app/components/primer/dialog_helper.js +3 -0
- data/app/components/primer/dialog_helper.ts +3 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/select_panel_preview/remote_fetch_form.html.erb +34 -0
- data/previews/primer/alpha/select_panel_preview.rb +9 -0
- 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 +5 -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":"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","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":"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","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
|
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
|
2
|
+
<% if required_form_arguments_given? %>
|
|
3
|
+
<span data-select-panel-inputs="true">
|
|
4
|
+
<%= @form_builder.hidden_field(@input_name, multiple: multi_select?, skip_default_ids: true, value: @value) %>
|
|
5
|
+
</span>
|
|
6
|
+
<% end %>
|
|
2
7
|
<dialog-helper>
|
|
3
8
|
<%= show_button %>
|
|
4
9
|
<%= render(@dialog) do %>
|
|
@@ -152,27 +152,6 @@ module Primer
|
|
|
152
152
|
# end
|
|
153
153
|
# end
|
|
154
154
|
# ```
|
|
155
|
-
#
|
|
156
|
-
# If items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call
|
|
157
|
-
# happens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the
|
|
158
|
-
# view that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:
|
|
159
|
-
#
|
|
160
|
-
# ```erb
|
|
161
|
-
# <% builder = ActionView::Helpers::FormBuilder.new(
|
|
162
|
-
# "address", # the name of the model, used to wrap input names, eg 'address[country]'
|
|
163
|
-
# nil, # object (eg. the Address instance, which we can omit)
|
|
164
|
-
# self, # template
|
|
165
|
-
# {} # options
|
|
166
|
-
# ) %>
|
|
167
|
-
# <%= render(Primer::Alpha::SelectPanel::ItemList.new(
|
|
168
|
-
# form_arguments: { builder: builder, name: "country" }
|
|
169
|
-
# )) do |list| %>
|
|
170
|
-
# <% countries.each do |country| %>
|
|
171
|
-
# <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>
|
|
172
|
-
# <% end %>
|
|
173
|
-
# <% end %>
|
|
174
|
-
# ```
|
|
175
|
-
#
|
|
176
155
|
# ### JavaScript API
|
|
177
156
|
#
|
|
178
157
|
# `SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.
|
|
@@ -375,7 +354,9 @@ module Primer
|
|
|
375
354
|
# @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
|
|
376
355
|
# @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
|
|
377
356
|
# @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
|
|
378
|
-
# @param form_arguments [Hash] Form arguments
|
|
357
|
+
# @param form_arguments [Hash] Form arguments
|
|
358
|
+
|
|
359
|
+
# @param use_experimental_non_local_form [Boolean] 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.
|
|
379
360
|
# @param show_filter [Boolean] Whether or not to show the filter input.
|
|
380
361
|
# @param open_on_load [Boolean] Open the panel when the page loads.
|
|
381
362
|
# @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
|
|
@@ -397,6 +378,7 @@ module Primer
|
|
|
397
378
|
dynamic_label_prefix: nil,
|
|
398
379
|
dynamic_aria_label_prefix: nil,
|
|
399
380
|
body_id: nil,
|
|
381
|
+
use_experimental_non_local_form: false,
|
|
400
382
|
list_arguments: {},
|
|
401
383
|
form_arguments: {},
|
|
402
384
|
show_filter: true,
|
|
@@ -429,6 +411,15 @@ module Primer
|
|
|
429
411
|
@dynamic_aria_label_prefix = dynamic_aria_label_prefix
|
|
430
412
|
@loading_label = loading_label
|
|
431
413
|
@loading_description_id = nil
|
|
414
|
+
|
|
415
|
+
if use_experimental_non_local_form
|
|
416
|
+
@form_builder = form_arguments[:builder]
|
|
417
|
+
@value = form_arguments[:value]
|
|
418
|
+
@input_name = form_arguments[:name]
|
|
419
|
+
end
|
|
420
|
+
|
|
421
|
+
@list_form_arguments = use_experimental_non_local_form ? {} : form_arguments
|
|
422
|
+
|
|
432
423
|
if loading_description.present?
|
|
433
424
|
@loading_description_id = "#{@panel_id}-loading-description"
|
|
434
425
|
end
|
|
@@ -471,7 +462,7 @@ module Primer
|
|
|
471
462
|
|
|
472
463
|
@list = Primer::Alpha::SelectPanel::ItemList.new(
|
|
473
464
|
**list_arguments,
|
|
474
|
-
form_arguments:
|
|
465
|
+
form_arguments: @list_form_arguments,
|
|
475
466
|
id: "#{@panel_id}-list",
|
|
476
467
|
select_variant: @select_variant,
|
|
477
468
|
aria: {
|
|
@@ -546,6 +537,14 @@ module Primer
|
|
|
546
537
|
def before_render
|
|
547
538
|
content
|
|
548
539
|
end
|
|
540
|
+
|
|
541
|
+
def required_form_arguments_given?
|
|
542
|
+
@input_name && @form_builder
|
|
543
|
+
end
|
|
544
|
+
|
|
545
|
+
def multi_select?
|
|
546
|
+
select_variant == :multiple
|
|
547
|
+
end
|
|
549
548
|
end
|
|
550
549
|
end
|
|
551
|
-
end
|
|
550
|
+
end
|
|
@@ -893,7 +893,8 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
|
|
|
893
893
|
};
|
|
894
894
|
_SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
895
895
|
if (this.selectVariant === 'single') {
|
|
896
|
-
const input = this.querySelector(`[data-
|
|
896
|
+
const input = this.querySelector(`[data-select-panel-inputs=true] input`) ??
|
|
897
|
+
this.querySelector(`[data-list-inputs=true] input`);
|
|
897
898
|
if (!input)
|
|
898
899
|
return;
|
|
899
900
|
const selectedItem = this.selectedItems[0];
|
|
@@ -903,13 +904,14 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
903
904
|
input.name = selectedItem.inputName;
|
|
904
905
|
input.removeAttribute('disabled');
|
|
905
906
|
}
|
|
906
|
-
else {
|
|
907
|
+
else if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
|
|
907
908
|
input.setAttribute('disabled', 'disabled');
|
|
908
909
|
}
|
|
909
910
|
}
|
|
910
911
|
else if (this.selectVariant !== 'none') {
|
|
911
912
|
// multiple select variant
|
|
912
|
-
const
|
|
913
|
+
const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]');
|
|
914
|
+
const inputList = this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]');
|
|
913
915
|
if (!inputList)
|
|
914
916
|
return;
|
|
915
917
|
const inputs = inputList.querySelectorAll('input');
|
|
@@ -918,7 +920,7 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
918
920
|
}
|
|
919
921
|
for (const selectedItem of this.selectedItems) {
|
|
920
922
|
const newInput = document.createElement('input');
|
|
921
|
-
newInput.setAttribute('data-list-input'
|
|
923
|
+
newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true');
|
|
922
924
|
newInput.type = 'hidden';
|
|
923
925
|
newInput.autocomplete = 'off';
|
|
924
926
|
newInput.name = selectedItem.inputName || __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f");
|
|
@@ -959,7 +959,9 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
959
959
|
|
|
960
960
|
#updateInput() {
|
|
961
961
|
if (this.selectVariant === 'single') {
|
|
962
|
-
const input =
|
|
962
|
+
const input =
|
|
963
|
+
(this.querySelector(`[data-select-panel-inputs=true] input`) as HTMLInputElement) ??
|
|
964
|
+
(this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement)
|
|
963
965
|
if (!input) return
|
|
964
966
|
|
|
965
967
|
const selectedItem = this.selectedItems[0]
|
|
@@ -968,12 +970,14 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
968
970
|
input.value = (selectedItem.value || selectedItem.label || '').trim()
|
|
969
971
|
if (selectedItem.inputName) input.name = selectedItem.inputName
|
|
970
972
|
input.removeAttribute('disabled')
|
|
971
|
-
} else {
|
|
973
|
+
} else if (this.#hasLoadedData) {
|
|
972
974
|
input.setAttribute('disabled', 'disabled')
|
|
973
975
|
}
|
|
974
976
|
} else if (this.selectVariant !== 'none') {
|
|
975
977
|
// multiple select variant
|
|
976
|
-
const
|
|
978
|
+
const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]')
|
|
979
|
+
const inputList =
|
|
980
|
+
this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]')
|
|
977
981
|
if (!inputList) return
|
|
978
982
|
|
|
979
983
|
const inputs = inputList.querySelectorAll('input')
|
|
@@ -984,7 +988,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
984
988
|
|
|
985
989
|
for (const selectedItem of this.selectedItems) {
|
|
986
990
|
const newInput = document.createElement('input')
|
|
987
|
-
newInput.setAttribute('data-list-input'
|
|
991
|
+
newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true')
|
|
988
992
|
newInput.type = 'hidden'
|
|
989
993
|
newInput.autocomplete = 'off'
|
|
990
994
|
newInput.name = selectedItem.inputName || this.#inputName
|
|
@@ -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
|
|
@@ -102,6 +102,9 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
102
102
|
// The click target _must_ be the dialog element itself, and not elements underneath or inside.
|
|
103
103
|
if (target !== dialog || !dialog?.open)
|
|
104
104
|
return;
|
|
105
|
+
// If the dialog contains a form, do not close the dialog when clicking outside of the dialog
|
|
106
|
+
if (dialog.querySelector('form'))
|
|
107
|
+
return;
|
|
105
108
|
const rect = dialog.getBoundingClientRect();
|
|
106
109
|
const clickWasInsideDialog = rect.top <= event.clientY &&
|
|
107
110
|
event.clientY <= rect.top + rect.height &&
|
|
@@ -111,6 +111,9 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
111
111
|
// The click target _must_ be the dialog element itself, and not elements underneath or inside.
|
|
112
112
|
if (target !== dialog || !dialog?.open) return
|
|
113
113
|
|
|
114
|
+
// If the dialog contains a form, do not close the dialog when clicking outside of the dialog
|
|
115
|
+
if (dialog.querySelector('form')) return
|
|
116
|
+
|
|
114
117
|
const rect = dialog.getBoundingClientRect()
|
|
115
118
|
const clickWasInsideDialog =
|
|
116
119
|
rect.top <= event.clientY &&
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<% subject_id = SecureRandom.hex %>
|
|
2
|
+
|
|
3
|
+
<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
|
|
4
|
+
<%= render(Primer::Alpha::SelectPanel.new(
|
|
5
|
+
data: { interaction_subject: subject_id },
|
|
6
|
+
select_variant: :single,
|
|
7
|
+
src: select_panel_items_path(
|
|
8
|
+
select_variant: :single,
|
|
9
|
+
selected_items: selected_items,
|
|
10
|
+
),
|
|
11
|
+
open_on_load: open_on_load,
|
|
12
|
+
dynamic_label: true,
|
|
13
|
+
dynamic_label_prefix: "Item",
|
|
14
|
+
use_experimental_non_local_form: true,
|
|
15
|
+
form_arguments: {
|
|
16
|
+
name: :item,
|
|
17
|
+
builder: builder,
|
|
18
|
+
value: 3,
|
|
19
|
+
}
|
|
20
|
+
)) do |panel| %>
|
|
21
|
+
<% panel.with_show_button { "Sci-fi equipment" } %>
|
|
22
|
+
<% panel.with_footer(show_divider: true) do %>
|
|
23
|
+
I'm a footer!
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
26
|
+
|
|
27
|
+
<hr>
|
|
28
|
+
|
|
29
|
+
<%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
|
|
30
|
+
Submit
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
|
|
34
|
+
<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
|
|
@@ -259,6 +259,15 @@ module Primer
|
|
|
259
259
|
render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
|
|
260
260
|
end
|
|
261
261
|
|
|
262
|
+
# @label Remote fetch form
|
|
263
|
+
#
|
|
264
|
+
# @snapshot interactive
|
|
265
|
+
# @param open_on_load toggle
|
|
266
|
+
# @param selected_items text
|
|
267
|
+
def remote_fetch_form(open_on_load: false, selected_items: "Phaser", route_format: :html)
|
|
268
|
+
render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items, route_format: route_format })
|
|
269
|
+
end
|
|
270
|
+
|
|
262
271
|
# @label Multi-select form
|
|
263
272
|
#
|
|
264
273
|
# @snapshot interactive
|
|
@@ -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,
|