primer_view_components 0.21.1 → 0.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/item.rb +1 -1
  8. data/app/components/primer/alpha/action_list.js +15 -12
  9. data/app/components/primer/alpha/action_list.ts +12 -9
  10. data/app/components/primer/alpha/dialog.css +1 -1
  11. data/app/components/primer/alpha/dialog.css.json +1 -0
  12. data/app/components/primer/alpha/dialog.css.map +1 -1
  13. data/app/components/primer/alpha/dialog.pcss +4 -0
  14. data/app/components/primer/alpha/overlay/header.html.erb +1 -0
  15. data/app/components/primer/alpha/overlay/header.rb +12 -0
  16. data/app/components/primer/alpha/tool_tip.js +1 -1
  17. data/app/components/primer/alpha/tool_tip.ts +1 -1
  18. data/lib/primer/view_components/version.rb +2 -2
  19. data/previews/primer/alpha/action_list_preview.rb +19 -1
  20. data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +16 -0
  21. data/previews/primer/alpha/overlay_preview.rb +4 -0
  22. data/previews/primer/alpha/tab_nav_preview.rb +1 -1
  23. data/previews/primer/alpha/tab_panels_preview.rb +2 -2
  24. data/previews/primer/alpha/underline_nav_preview.rb +3 -3
  25. data/previews/primer/alpha/underline_panels_preview.rb +38 -0
  26. data/previews/primer/beta/avatar_stack_preview.rb +1 -1
  27. data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
  28. data/previews/primer/beta/nav_list_preview.rb +9 -3
  29. data/static/classes.json +3 -0
  30. data/static/info_arch.json +52 -2
  31. data/static/previews.json +40 -1
  32. metadata +3 -2
data/app/components/primer/alpha/action_list/item.rb CHANGED
@@ -303,7 +303,7 @@ module Primer
303
303
  )
304
304
 
305
305
  if @truncate_label == :show_tooltip && !tooltip?
306
- with_tooltip(text: @label)
306
+ with_tooltip(text: @label, direction: :ne)
307
307
  end
308
308
 
309
309
  return unless leading_visual
data/app/components/primer/alpha/action_list.js CHANGED
@@ -34,18 +34,21 @@ export class ActionListTruncationObserver {
34
34
  this.resizeObserver.unobserve(el);
35
35
  }
36
36
  update(el) {
37
- const label = el.querySelector('.ActionListItem-label');
38
- if (!label)
39
- return;
40
- const tooltip = el.querySelector('.ActionListItem-truncationTooltip');
41
- if (!tooltip)
42
- return;
43
- const isTruncated = label.scrollWidth > label.clientWidth;
44
- if (isTruncated) {
45
- tooltip.style.display = '';
46
- }
47
- else {
48
- tooltip.style.display = 'none';
37
+ const items = el.querySelectorAll('li');
38
+ for (const item of items) {
39
+ const label = item.querySelector('.ActionListItem-label');
40
+ if (!label)
41
+ continue;
42
+ const tooltip = item.querySelector('.ActionListItem-truncationTooltip');
43
+ if (!tooltip)
44
+ continue;
45
+ const isTruncated = label.scrollWidth > label.clientWidth;
46
+ if (isTruncated) {
47
+ tooltip.style.display = '';
48
+ }
49
+ else {
50
+ tooltip.style.display = 'none';
51
+ }
49
52
  }
50
53
  }
51
54
  }
data/app/components/primer/alpha/action_list.ts CHANGED
@@ -21,18 +21,21 @@ export class ActionListTruncationObserver {
21
21
  }
22
22
 
23
23
  update(el: HTMLElement) {
24
- const label = el.querySelector('.ActionListItem-label')
25
- if (!label) return
24
+ const items = el.querySelectorAll('li')
26
25
 
27
- const tooltip = el.querySelector('.ActionListItem-truncationTooltip') as HTMLElement | null
28
- if (!tooltip) return
26
+ for (const item of items) {
27
+ const label = item.querySelector('.ActionListItem-label') as HTMLElement
28
+ if (!label) continue
29
+ const tooltip = item.querySelector('.ActionListItem-truncationTooltip') as HTMLElement
30
+ if (!tooltip) continue
29
31
 
30
- const isTruncated = label.scrollWidth > label.clientWidth
32
+ const isTruncated = label.scrollWidth > label.clientWidth
31
33
 
32
- if (isTruncated) {
33
- tooltip.style.display = ''
34
- } else {
35
- tooltip.style.display = 'none'
34
+ if (isTruncated) {
35
+ tooltip.style.display = ''
36
+ } else {
37
+ tooltip.style.display = 'none'
38
+ }
36
39
  }
37
40
  }
38
41
  }
data/app/components/primer/alpha/dialog.css CHANGED
@@ -1 +1 @@
1
- body.has-modal{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,var(--color-canvas-overlay));border:0;border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));color:var(--fgColor-default,var(--color-fg-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,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);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,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);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,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) 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
+ body.has-modal{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,var(--color-canvas-overlay));border:0;border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));color:var(--fgColor-default,var(--color-fg-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,var(--color-fg-default));z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) var(--borderColor-default,var(--color-border-default));padding-bottom:var(--stack-padding-condensed,.5rem)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal,1rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--stack-gap-condensed,.5rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-title-size-medium,1.25rem)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--text-body-size-medium,.875rem)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed,.5rem);padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap,.25rem);padding:calc(var(--stack-gap-condensed,.5rem)*.75) 0 calc(var(--stack-gap-condensed,.5rem)*.75) var(--stack-gap-condensed,.5rem)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed,.5rem) var(--stack-gap-condensed,.5rem) 0 var(--stack-gap-condensed,.5rem)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);overflow-y:auto;padding:var(--stack-padding-normal,1rem);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed,.5rem);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,1rem) var(--stack-padding-normal,1rem) var(--stack-padding-normal,1rem);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-default,var(--color-border-default));padding-top:var(--stack-padding-normal,1rem)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed,.5rem);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,2rem);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,2rem)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-bgColor-hover,var(--color-btn-hover-bg))}.Overlay-closeButton.close-button{border:var(--borderWidth-thin,max(1px,.0625rem)) 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%)}}
data/app/components/primer/alpha/dialog.css.json CHANGED
@@ -44,6 +44,7 @@
44
44
  ".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",
45
45
  ".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",
46
46
  ".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",
47
+ ".Overlay-headerFilter",
47
48
  ".Overlay-body",
48
49
  ".Overlay-body.Overlay-body--paddingCondensed",
49
50
  ".Overlay-body.Overlay-body--paddingNone",
data/app/components/primer/alpha/dialog.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !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 display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\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 height: 100%;\n max-height: unset;\n position: fixed;\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 flex-direction: column;\n color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\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/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\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 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 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 height: 100%;\n max-height: 100vh;\n position: fixed;\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 inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\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":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !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 display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\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 height: 100%;\n max-height: unset;\n position: fixed;\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 flex-direction: column;\n color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\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 padding-top: 0;\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 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 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 height: 100%;\n max-height: 100vh;\n position: fixed;\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 inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\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"]}
data/app/components/primer/alpha/dialog.pcss CHANGED
@@ -265,6 +265,10 @@ dialog.Overlay:not([open]) {
265
265
  }
266
266
  }
267
267
 
268
+ .Overlay-headerFilter {
269
+ padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
270
+ }
271
+
268
272
  /* generic body content slot */
269
273
  .Overlay-body {
270
274
  padding: var(--stack-padding-normal);
data/app/components/primer/alpha/overlay/header.html.erb CHANGED
@@ -14,4 +14,5 @@
14
14
  </div>
15
15
  <% end %>
16
16
  </div>
17
+ <%= filter %>
17
18
  <% end %>
data/app/components/primer/alpha/overlay/header.rb CHANGED
@@ -13,6 +13,18 @@ module Primer
13
13
  }.freeze
14
14
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
15
15
 
16
+ # Optional filter slot for adding a filter input to the header.
17
+ #
18
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
19
+ renders_one :filter, lambda { |**system_arguments|
20
+ system_arguments[:tag] = :div
21
+ system_arguments[:classes] = class_names(
22
+ "Overlay-headerFilter",
23
+ system_arguments[:classes]
24
+ )
25
+ Primer::BaseComponent.new(**system_arguments)
26
+ }
27
+
16
28
  # @param title [String] Describes the content of the Overlay.
17
29
  # @param subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
18
30
  # @param overlay_id [String] Provides the id of the overlay element so the close button can close it
data/app/components/primer/alpha/tool_tip.js CHANGED
@@ -132,7 +132,7 @@ class ToolTipElement extends HTMLElement {
132
132
  display: block;
133
133
  right: 0;
134
134
  left: 0;
135
- height: 12px;
135
+ height: var(--overlay-offset, 0.25rem);
136
136
  content: "";
137
137
  }
138
138
 
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -117,7 +117,7 @@ class ToolTipElement extends HTMLElement {
117
117
  display: block;
118
118
  right: 0;
119
119
  left: 0;
120
- height: 12px;
120
+ height: var(--overlay-offset, 0.25rem);
121
121
  content: "";
122
122
  }
123
123
 
data/lib/primer/view_components/version.rb CHANGED
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 21
9
- PATCH = 1
8
+ MINOR = 22
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
data/previews/primer/alpha/action_list_preview.rb CHANGED
@@ -470,6 +470,18 @@ module Primer
470
470
  label: "Really really long label that may wrap, truncate, or appear as a tooltip",
471
471
  truncate_label: truncate_label
472
472
  )
473
+ component.with_item(
474
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
475
+ truncate_label: truncate_label
476
+ )
477
+ component.with_item(
478
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
479
+ truncate_label: truncate_label
480
+ )
481
+ component.with_item(
482
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
483
+ truncate_label: truncate_label
484
+ )
473
485
  end
474
486
  end
475
487
 
@@ -499,8 +511,14 @@ module Primer
499
511
  ) do |item|
500
512
  item.with_tooltip(text: "this is a tooltip")
501
513
  end
514
+ component.with_item(
515
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
516
+ truncate_label: truncate_label
517
+ ) do |item|
518
+ item.with_tooltip(text: "this is a tooltip")
519
+ end
502
520
  end
503
521
  end
504
522
  end
505
523
  end
506
- end
524
+ end
data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb ADDED
@@ -0,0 +1,16 @@
1
+ <%= render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d| %>
2
+ <% d.with_header(title: "Large Dialog Header", divider: true) do |header| %>
3
+ <% header.with_filter do %>
4
+ <%= render Primer::Alpha::TextField.new(
5
+ autofocus: true,
6
+ visually_hide_label:
7
+ true,
8
+ name: "filter",
9
+ label: "Filter Overlay"
10
+ ) %>
11
+ <% end %>
12
+ <% end %>
13
+ <% d.with_show_button { "Show Overlay" } %>
14
+ <% d.with_footer { "Large Dialog Footer" } %>
15
+ <% d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 } %>
16
+ <% end %>
data/previews/primer/alpha/overlay_preview.rb CHANGED
@@ -179,6 +179,10 @@ module Primer
179
179
  d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
180
180
  end
181
181
  end
182
+
183
+ def overlay_with_header_filter
184
+ render_with_template(locals: {})
185
+ end
182
186
  end
183
187
  end
184
188
  end
data/previews/primer/alpha/tab_nav_preview.rb CHANGED
@@ -11,7 +11,7 @@ module Primer
11
11
  # @param with_counters [Boolean] toggle
12
12
  def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
13
13
  render(Primer::Alpha::TabNav.new(label: "label")) do |component|
14
- Array.new(number_of_tabs || 3) do |i|
14
+ Array.new(number_of_tabs&.to_i || 3) do |i|
15
15
  component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
16
16
  tab.with_icon(icon: :star) if with_icons
17
17
  tab.with_text { "Tab #{i + 1}" }
data/previews/primer/alpha/tab_panels_preview.rb CHANGED
@@ -10,7 +10,7 @@ module Primer
10
10
  # @param align [Symbol] select [left, right]
11
11
  def playground(number_of_panels: 3, align: :left)
12
12
  render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
13
- Array.new(number_of_panels || 3) do |i|
13
+ Array.new(number_of_panels&.to_i || 3) do |i|
14
14
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
15
15
  tab.with_panel { "Panel #{i + 1}" }
16
16
  tab.with_text { "Tab #{i + 1}" }
@@ -26,7 +26,7 @@ module Primer
26
26
  # @snapshot
27
27
  def default(number_of_panels: 3, align: :left)
28
28
  render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
29
- Array.new(number_of_panels || 3) do |i|
29
+ Array.new(number_of_panels&.to_i || 3) do |i|
30
30
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
31
31
  tab.with_panel { "Panel #{i + 1}" }
32
32
  tab.with_text { "Tab #{i + 1}" }
data/previews/primer/alpha/underline_nav_preview.rb CHANGED
@@ -15,7 +15,7 @@ module Primer
15
15
  label: label,
16
16
  tag: tag,
17
17
  align: align,
18
- number_of_panels: number_of_panels
18
+ number_of_panels: number_of_panels.to_i,
19
19
  })
20
20
  end
21
21
 
@@ -31,7 +31,7 @@ module Primer
31
31
  label: label,
32
32
  tag: tag,
33
33
  align: align,
34
- number_of_panels: number_of_panels
34
+ number_of_panels: number_of_panels.to_i,
35
35
  })
36
36
  end
37
37
 
@@ -44,7 +44,7 @@ module Primer
44
44
  # @param number_of_panels [Integer] number
45
45
  def with_icons_and_counters(label: "With icons and counters", number_of_panels: 3, align: :left, tag: :nav)
46
46
  render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component|
47
- Array.new(number_of_panels || 3) do |i|
47
+ Array.new(number_of_panels.to_i || 3) do |i|
48
48
  component.with_tab(href: "#", selected: i.zero?) do |tab|
49
49
  tab.with_icon(icon: :star)
50
50
  tab.with_text { "Item #{i + 1}" }
data/previews/primer/alpha/underline_panels_preview.rb CHANGED
@@ -21,9 +21,44 @@ module Primer
21
21
 
22
22
  # @label Default options
23
23
  #
24
+ # @snapshot
24
25
  # @param number_of_panels [Integer] number
25
26
  # @param align [Symbol] select [left, right]
26
27
  def default(number_of_panels: 3, align: :left)
28
+ render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
29
+ Array.new(number_of_panels&.to_i || 3) do |i|
30
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
31
+ tab.with_panel { "Panel #{i + 1}" }
32
+ tab.with_text { "Tab #{i + 1}" }
33
+ end
34
+ end
35
+ end
36
+ end
37
+
38
+ # @label With Icons and Counters
39
+ #
40
+ # @snapshot
41
+ # @param number_of_panels [Integer] number
42
+ # @param align [Symbol] select [left, right]
43
+ def with_icons_and_counters(number_of_panels: 3, align: :left)
44
+ render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
45
+ Array.new(number_of_panels || 3) do |i|
46
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
47
+ tab.with_panel { "Panel #{i + 1}" }
48
+ tab.with_text { "Tab #{i + 1}" }
49
+ tab.with_icon(icon: :star)
50
+ tab.with_counter(count: (i + 1) * 5)
51
+ end
52
+ end
53
+ end
54
+ end
55
+
56
+ # @label With Actions
57
+ #
58
+ # @snapshot
59
+ # @param number_of_panels [Integer] number
60
+ # @param align [Symbol] select [left, right]
61
+ def with_actions(number_of_panels: 3, align: :right)
27
62
  render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
28
63
  Array.new(number_of_panels || 3) do |i|
29
64
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
@@ -31,6 +66,9 @@ module Primer
31
66
  tab.with_text { "Tab #{i + 1}" }
32
67
  end
33
68
  end
69
+ component.with_actions do
70
+ "Actions Content"
71
+ end
34
72
  end
35
73
  end
36
74
  end
data/previews/primer/beta/avatar_stack_preview.rb CHANGED
@@ -13,7 +13,7 @@ module Primer
13
13
  # @param tooltip_label text
14
14
  def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
15
15
  render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component|
16
- Array.new(number_of_avatars || 1) do
16
+ Array.new(number_of_avatars&.to_i || 1) do
17
17
  component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
18
18
  end
19
19
  end
data/previews/primer/beta/breadcrumbs_preview.rb CHANGED
@@ -9,7 +9,7 @@ module Primer
9
9
  # @param number_of_links [Integer] number
10
10
  def playground(number_of_links: 2)
11
11
  render(Primer::Beta::Breadcrumbs.new) do |component|
12
- Array.new(number_of_links || 3) do |i|
12
+ Array.new(number_of_links&.to_i || 3) do |i|
13
13
  component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
14
14
  end
15
15
  end
@@ -21,7 +21,7 @@ module Primer
21
21
  # @snapshot
22
22
  def default(number_of_links: 2)
23
23
  render(Primer::Beta::Breadcrumbs.new) do |component|
24
- Array.new(number_of_links || 3) do |i|
24
+ Array.new(number_of_links&.to_i || 3) do |i|
25
25
  component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
26
26
  end
27
27
  end
data/previews/primer/beta/nav_list_preview.rb CHANGED
@@ -139,9 +139,15 @@ module Primer
139
139
  component.with_item(
140
140
  label: "Really really long label that may wrap, truncate, or appear as a tooltip",
141
141
  truncate_label: truncate_label
142
- ) do |item|
143
- item.with_trailing_visual_icon(icon: :plus)
144
- end
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
+ )
145
151
  end
146
152
  end
147
153
 
data/static/classes.json CHANGED
@@ -402,6 +402,9 @@
402
402
  "Overlay-header": [
403
403
  "Primer::Alpha::Dialog"
404
404
  ],
405
+ "Overlay-headerFilter": [
406
+ "Primer::Alpha::Dialog"
407
+ ],
405
408
  "Popover": [
406
409
  "Primer::Beta::Popover"
407
410
  ],
data/static/info_arch.json CHANGED
@@ -6081,6 +6081,19 @@
6081
6081
  "color-contrast"
6082
6082
  ]
6083
6083
  }
6084
+ },
6085
+ {
6086
+ "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
6087
+ "name": "overlay_with_header_filter",
6088
+ "snapshot": "false",
6089
+ "skip_rules": {
6090
+ "wont_fix": [
6091
+ "region"
6092
+ ],
6093
+ "will_fix": [
6094
+ "color-contrast"
6095
+ ]
6096
+ }
6084
6097
  }
6085
6098
  ],
6086
6099
  "subcomponents": [
@@ -6142,7 +6155,18 @@
6142
6155
  }
6143
6156
  ],
6144
6157
  "slots": [
6145
-
6158
+ {
6159
+ "name": "filter",
6160
+ "description": "Optional filter slot for adding a filter input to the header.",
6161
+ "parameters": [
6162
+ {
6163
+ "name": "system_arguments",
6164
+ "type": "Hash",
6165
+ "default": "N/A",
6166
+ "description": "{{link_to_system_arguments_docs}}"
6167
+ }
6168
+ ]
6169
+ }
6146
6170
  ],
6147
6171
  "methods": [
6148
6172
 
@@ -9141,7 +9165,33 @@
9141
9165
  {
9142
9166
  "preview_path": "primer/alpha/underline_panels/default",
9143
9167
  "name": "default",
9144
- "snapshot": "false",
9168
+ "snapshot": "true",
9169
+ "skip_rules": {
9170
+ "wont_fix": [
9171
+ "region"
9172
+ ],
9173
+ "will_fix": [
9174
+ "color-contrast"
9175
+ ]
9176
+ }
9177
+ },
9178
+ {
9179
+ "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
9180
+ "name": "with_icons_and_counters",
9181
+ "snapshot": "true",
9182
+ "skip_rules": {
9183
+ "wont_fix": [
9184
+ "region"
9185
+ ],
9186
+ "will_fix": [
9187
+ "color-contrast"
9188
+ ]
9189
+ }
9190
+ },
9191
+ {
9192
+ "preview_path": "primer/alpha/underline_panels/with_actions",
9193
+ "name": "with_actions",
9194
+ "snapshot": "true",
9145
9195
  "skip_rules": {
9146
9196
  "wont_fix": [
9147
9197
  "region"
data/static/previews.json CHANGED
@@ -4874,6 +4874,19 @@
4874
4874
  "color-contrast"
4875
4875
  ]
4876
4876
  }
4877
+ },
4878
+ {
4879
+ "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
4880
+ "name": "overlay_with_header_filter",
4881
+ "snapshot": "false",
4882
+ "skip_rules": {
4883
+ "wont_fix": [
4884
+ "region"
4885
+ ],
4886
+ "will_fix": [
4887
+ "color-contrast"
4888
+ ]
4889
+ }
4877
4890
  }
4878
4891
  ]
4879
4892
  },
@@ -7072,7 +7085,33 @@
7072
7085
  {
7073
7086
  "preview_path": "primer/alpha/underline_panels/default",
7074
7087
  "name": "default",
7075
- "snapshot": "false",
7088
+ "snapshot": "true",
7089
+ "skip_rules": {
7090
+ "wont_fix": [
7091
+ "region"
7092
+ ],
7093
+ "will_fix": [
7094
+ "color-contrast"
7095
+ ]
7096
+ }
7097
+ },
7098
+ {
7099
+ "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
7100
+ "name": "with_icons_and_counters",
7101
+ "snapshot": "true",
7102
+ "skip_rules": {
7103
+ "wont_fix": [
7104
+ "region"
7105
+ ],
7106
+ "will_fix": [
7107
+ "color-contrast"
7108
+ ]
7109
+ }
7110
+ },
7111
+ {
7112
+ "preview_path": "primer/alpha/underline_panels/with_actions",
7113
+ "name": "with_actions",
7114
+ "snapshot": "true",
7076
7115
  "skip_rules": {
7077
7116
  "wont_fix": [
7078
7117
  "region"