primer_view_components 0.37.0 → 0.38.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 +12 -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/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/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":"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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
|
|
|
@@ -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 &&
|
|
@@ -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
|
},
|
|
@@ -4805,8 +4818,8 @@
|
|
|
4805
4818
|
}
|
|
4806
4819
|
},
|
|
4807
4820
|
{
|
|
4808
|
-
"preview_path": "primer/beta/nav_list/
|
|
4809
|
-
"name": "
|
|
4821
|
+
"preview_path": "primer/beta/nav_list/truncate",
|
|
4822
|
+
"name": "truncate",
|
|
4810
4823
|
"snapshot": "true",
|
|
4811
4824
|
"skip_rules": {
|
|
4812
4825
|
"wont_fix": [
|
|
@@ -4830,19 +4843,6 @@
|
|
|
4830
4843
|
]
|
|
4831
4844
|
}
|
|
4832
4845
|
},
|
|
4833
|
-
{
|
|
4834
|
-
"preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
|
|
4835
|
-
"name": "long_label_truncate_no_tooltip",
|
|
4836
|
-
"snapshot": "false",
|
|
4837
|
-
"skip_rules": {
|
|
4838
|
-
"wont_fix": [
|
|
4839
|
-
"region"
|
|
4840
|
-
],
|
|
4841
|
-
"will_fix": [
|
|
4842
|
-
"color-contrast"
|
|
4843
|
-
]
|
|
4844
|
-
}
|
|
4845
|
-
},
|
|
4846
4846
|
{
|
|
4847
4847
|
"preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
|
|
4848
4848
|
"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,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.38.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-
|
|
11
|
+
date: 2025-03-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -325,6 +325,7 @@ files:
|
|
|
325
325
|
- app/components/primer/beta/auto_complete/auto_complete.ts
|
|
326
326
|
- app/components/primer/beta/auto_complete/item.html.erb
|
|
327
327
|
- app/components/primer/beta/auto_complete/item.rb
|
|
328
|
+
- app/components/primer/beta/auto_complete/no_result_item.rb
|
|
328
329
|
- app/components/primer/beta/avatar.css
|
|
329
330
|
- app/components/primer/beta/avatar.css.json
|
|
330
331
|
- app/components/primer/beta/avatar.css.map
|
|
@@ -909,6 +910,7 @@ files:
|
|
|
909
910
|
- previews/primer/beta/markdown_preview.rb
|
|
910
911
|
- previews/primer/beta/nav_list_preview.rb
|
|
911
912
|
- previews/primer/beta/nav_list_preview/trailing_action.html.erb
|
|
913
|
+
- previews/primer/beta/nav_list_preview/truncate.html.erb
|
|
912
914
|
- previews/primer/beta/octicon_preview.rb
|
|
913
915
|
- previews/primer/beta/popover_preview.rb
|
|
914
916
|
- previews/primer/beta/progress_bar_preview.rb
|