primer_view_components 0.21.1 → 0.22.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.
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"