primer_view_components 0.20.1 → 0.21.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) 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/banner.css +1 -1
  8. data/app/components/primer/alpha/banner.css.map +1 -1
  9. data/app/components/primer/alpha/banner.pcss +4 -4
  10. data/app/components/primer/alpha/dialog.css +1 -1
  11. data/app/components/primer/alpha/dialog.css.json +1 -2
  12. data/app/components/primer/alpha/dialog.css.map +1 -1
  13. data/app/components/primer/alpha/dialog.pcss +8 -7
  14. data/app/components/primer/alpha/dropdown.css +1 -1
  15. data/app/components/primer/alpha/dropdown.css.map +1 -1
  16. data/app/components/primer/alpha/dropdown.pcss +1 -1
  17. data/app/components/primer/alpha/segmented_control.css +1 -1
  18. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  19. data/app/components/primer/alpha/segmented_control.pcss +1 -0
  20. data/app/components/primer/alpha/tool_tip.js +46 -77
  21. data/app/components/primer/alpha/tool_tip.ts +46 -77
  22. data/app/components/primer/beta/flash.css +1 -1
  23. data/app/components/primer/beta/flash.css.map +1 -1
  24. data/app/components/primer/beta/flash.pcss +4 -4
  25. data/app/components/primer/beta/popover.css +1 -1
  26. data/app/components/primer/beta/popover.css.map +1 -1
  27. data/app/components/primer/beta/popover.pcss +3 -0
  28. data/app/components/primer/beta/popover.rb +0 -1
  29. data/lib/primer/view_components/version.rb +2 -2
  30. data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb +6 -0
  31. data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb +6 -0
  32. data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb +6 -0
  33. data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb +6 -0
  34. data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb +6 -0
  35. data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb +6 -0
  36. data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb +6 -0
  37. data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb +6 -0
  38. data/previews/primer/alpha/tooltip_preview.rb +80 -0
  39. data/static/info_arch.json +104 -0
  40. data/static/previews.json +104 -0
  41. metadata +10 -2
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -21,9 +21,7 @@ const isPopoverOpen = (() => {
21
21
  return (el: Element) => (selector ? el.matches(selector) : setSelector(el))
22
22
  })()
23
23
 
24
- const TOOLTIP_ARROW_EDGE_OFFSET = 6
25
24
  const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
26
- const TOOLTIP_OFFSET = 10
27
25
 
28
26
  type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
29
27
 
@@ -69,6 +67,8 @@ class ToolTipElement extends HTMLElement {
69
67
  styles() {
70
68
  return `
71
69
  :host {
70
+ --tooltip-top: var(--tool-tip-position-top, 0);
71
+ --tooltip-left: var(--tool-tip-position-left, 0);
72
72
  padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
73
73
  font: var(--text-body-shorthand-small);
74
74
  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
@@ -87,27 +87,29 @@ class ToolTipElement extends HTMLElement {
87
87
  word-wrap: break-word;
88
88
  white-space: normal;
89
89
  width: max-content !important;
90
- inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
90
+ inset: var(--tooltip-top) auto auto var(--tooltip-left) !important;
91
91
  overflow: visible !important;
92
92
  text-wrap: balance;
93
93
  }
94
94
 
95
- :host:before{
96
- position: absolute;
97
- z-index: 1000001;
98
- color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
99
- content: "";
100
- border: 6px solid transparent;
101
- opacity: 0;
95
+ :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) {
96
+ --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem));
97
+ --tooltip-left: var(--tool-tip-position-left);
102
98
  }
103
99
 
104
- @keyframes tooltip-appear {
105
- from {
106
- opacity: 0;
107
- }
108
- to {
109
- opacity: 1;
110
- }
100
+ :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) {
101
+ --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem));
102
+ --tooltip-left: var(--tool-tip-position-left);
103
+ }
104
+
105
+ :host(.tooltip-w) {
106
+ --tooltip-top: var(--tool-tip-position-top);
107
+ --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem));
108
+ }
109
+
110
+ :host(.tooltip-e) {
111
+ --tooltip-top: var(--tool-tip-position-top);
112
+ --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem));
111
113
  }
112
114
 
113
115
  :host:after{
@@ -119,73 +121,40 @@ class ToolTipElement extends HTMLElement {
119
121
  content: "";
120
122
  }
121
123
 
122
- :host(:popover-open),
123
- :host(:popover-open):before {
124
- animation-name: tooltip-appear;
125
- animation-duration: .1s;
126
- animation-fill-mode: forwards;
127
- animation-timing-function: ease-in;
128
- }
129
-
130
- :host(.\\:popover-open),
131
- :host(.\\:popover-open):before {
132
- animation-name: tooltip-appear;
133
- animation-duration: .1s;
134
- animation-fill-mode: forwards;
135
- animation-timing-function: ease-in;
136
- animation-delay: .4s;
137
- }
138
-
139
- :host(.tooltip-s):before,
140
- :host(.tooltip-n):before {
141
- right: 50%;
142
- margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
143
- }
144
- :host(.tooltip-s):before,
145
- :host(.tooltip-se):before,
146
- :host(.tooltip-sw):before {
147
- bottom: 100%;
148
- border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
149
- }
150
124
  :host(.tooltip-s):after,
151
125
  :host(.tooltip-se):after,
152
126
  :host(.tooltip-sw):after {
153
127
  bottom: 100%
154
128
  }
155
- :host(.tooltip-n):before,
156
- :host(.tooltip-ne):before,
157
- :host(.tooltip-nw):before {
158
- top: 100%;
159
- border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
160
- }
129
+
161
130
  :host(.tooltip-n):after,
162
131
  :host(.tooltip-ne):after,
163
132
  :host(.tooltip-nw):after {
164
133
  top: 100%;
165
134
  }
166
- :host(.tooltip-se):before,
167
- :host(.tooltip-ne):before {
168
- left: 0;
169
- margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
170
- }
171
- :host(.tooltip-sw):before,
172
- :host(.tooltip-nw):before {
173
- right: 0;
174
- margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
135
+
136
+ @keyframes tooltip-appear {
137
+ from {
138
+ opacity: 0;
139
+ }
140
+ to {
141
+ opacity: 1;
142
+ }
175
143
  }
176
- :host(.tooltip-w):before {
177
- top: 50%;
178
- bottom: 50%;
179
- left: 100%;
180
- margin-top: -6px;
181
- border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
144
+
145
+ :host(:popover-open),
146
+ :host(:popover-open):before {
147
+ animation-name: tooltip-appear;
148
+ animation-duration: .1s;
149
+ animation-fill-mode: forwards;
150
+ animation-timing-function: ease-in;
182
151
  }
183
- :host(.tooltip-e):before {
184
- top: 50%;
185
- right: 100%;
186
- bottom: 50%;
187
- margin-top: -6px;
188
- border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
152
+
153
+ :host(.\\:popover-open) {
154
+ animation-name: tooltip-appear;
155
+ animation-duration: .1s;
156
+ animation-fill-mode: forwards;
157
+ animation-timing-function: ease-in;
189
158
  }
190
159
 
191
160
  @media (forced-colors: active) {
@@ -398,25 +367,25 @@ class ToolTipElement extends HTMLElement {
398
367
  this.#align = 'center'
399
368
  this.#side = 'outside-top'
400
369
  } else if (direction === 'ne') {
401
- this.#align = 'start'
370
+ this.#align = 'end'
402
371
  this.#side = 'outside-top'
403
372
  } else if (direction === 'e') {
404
373
  this.#align = 'center'
405
374
  this.#side = 'outside-right'
406
375
  } else if (direction === 'se') {
407
- this.#align = 'start'
376
+ this.#align = 'end'
408
377
  this.#side = 'outside-bottom'
409
378
  } else if (direction === 's') {
410
379
  this.#align = 'center'
411
380
  this.#side = 'outside-bottom'
412
381
  } else if (direction === 'sw') {
413
- this.#align = 'end'
382
+ this.#align = 'start'
414
383
  this.#side = 'outside-bottom'
415
384
  } else if (direction === 'w') {
416
385
  this.#align = 'center'
417
386
  this.#side = 'outside-left'
418
387
  } else if (direction === 'nw') {
419
- this.#align = 'end'
388
+ this.#align = 'start'
420
389
  this.#side = 'outside-top'
421
390
  }
422
391
  }
@@ -428,7 +397,7 @@ class ToolTipElement extends HTMLElement {
428
397
  const position = getAnchoredPosition(this, this.control, {
429
398
  side: this.#side,
430
399
  align: this.#align,
431
- anchorOffset: TOOLTIP_OFFSET,
400
+ anchorOffset: 0,
432
401
  })
433
402
  const anchorSide = position.anchorSide
434
403
  const align = position.anchorAlign
data/app/components/primer/beta/flash.css CHANGED
@@ -1 +1 @@
1
- .flash:not(.Banner){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-color:var(--bgColor-success-muted,var(--color-success-subtle));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
1
+ .flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
data/app/components/primer/beta/flash.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uEAA6C,CAC7C,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6EAAgD,CAChD,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,yEAA8C,CAC9C,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-attention-muted);\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-danger-muted);\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-success-muted);\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
1
+ {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
data/app/components/primer/beta/flash.pcss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  /* Default color */
12
12
  color: var(--fgColor-default);
13
- background-color: var(--bgColor-accent-muted);
13
+ background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
14
14
  border-color: var(--borderColor-accent-muted);
15
15
 
16
16
  & .octicon {
@@ -78,7 +78,7 @@
78
78
 
79
79
  .flash-warn:not(.Banner) {
80
80
  color: var(--fgColor-default);
81
- background-color: var(--bgColor-attention-muted);
81
+ background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
82
82
  border-color: var(--borderColor-attention-muted);
83
83
 
84
84
  & .octicon {
@@ -88,7 +88,7 @@
88
88
 
89
89
  .flash-error:not(.Banner) {
90
90
  color: var(--fgColor-default);
91
- background-color: var(--bgColor-danger-muted);
91
+ background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
92
92
  border-color: var(--borderColor-danger-muted);
93
93
 
94
94
  & .octicon {
@@ -98,7 +98,7 @@
98
98
 
99
99
  .flash-success:not(.Banner) {
100
100
  color: var(--fgColor-default);
101
- background-color: var(--bgColor-success-muted);
101
+ background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
102
102
  border-color: var(--borderColor-success-muted);
103
103
 
104
104
  & .octicon {
data/app/components/primer/beta/popover.css CHANGED
@@ -1 +1 @@
1
- .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
1
+ .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
data/app/components/primer/beta/popover.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
1
+ {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAgCF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
data/app/components/primer/beta/popover.pcss CHANGED
@@ -14,6 +14,9 @@
14
14
  border: var(--borderWidth-thin) solid var(--borderColor-default);
15
15
  border-radius: var(--borderRadius-medium);
16
16
 
17
+ /* adding !important to override utility classes used in dotcom */
18
+ box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
19
+
17
20
  /* Carets */
18
21
  &::before,
19
22
  &::after {
data/app/components/primer/beta/popover.rb CHANGED
@@ -54,7 +54,6 @@ module Primer
54
54
  @body_arguments[:mt] ||= 2
55
55
  @body_arguments[:mx] ||= :auto
56
56
  @body_arguments[:text_align] ||= :left
57
- @body_arguments[:box_shadow] ||= :large
58
57
 
59
58
  Primer::Content.new
60
59
  }
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 = 20
9
- PATCH = 1
8
+ MINOR = 21
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-e")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :e) %>
4
+ Tooltip east
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-n")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :n) %>
4
+ Tooltip north
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-ne")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :ne) %>
4
+ Tooltip northeast
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-nw")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :nw) %>
4
+ Tooltip northwest
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-s")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :s) %>
4
+ Tooltip south
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-se")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :se) %>
4
+ Tooltip southeast
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-sw")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :sw) %>
4
+ Tooltip southwest
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-w")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :w) %>
4
+ Tooltip west
5
+ <% end %>
6
+ </div>
data/previews/primer/alpha/tooltip_preview.rb CHANGED
@@ -88,6 +88,86 @@ module Primer
88
88
  def tooltip_with_dialog_moving_focus_to_input
89
89
  render_with_template(locals: {})
90
90
  end
91
+
92
+ # @label Direction: North
93
+ # @snapshot interactive
94
+ def tooltip_n(type: :description)
95
+ render_with_template(
96
+ locals: {
97
+ type: type,
98
+ }
99
+ )
100
+ end
101
+
102
+ # @label Direction: South
103
+ # @snapshot interactive
104
+ def tooltip_s(type: :description)
105
+ render_with_template(
106
+ locals: {
107
+ type: type,
108
+ }
109
+ )
110
+ end
111
+
112
+ # @label Direction: East
113
+ # @snapshot interactive
114
+ def tooltip_e(type: :description)
115
+ render_with_template(
116
+ locals: {
117
+ type: type,
118
+ }
119
+ )
120
+ end
121
+
122
+ # @label Direction: West
123
+ # @snapshot interactive
124
+ def tooltip_w(type: :description)
125
+ render_with_template(
126
+ locals: {
127
+ type: type,
128
+ }
129
+ )
130
+ end
131
+
132
+ # @label Direction: Southeast
133
+ # @snapshot interactive
134
+ def tooltip_se(type: :description)
135
+ render_with_template(
136
+ locals: {
137
+ type: type,
138
+ }
139
+ )
140
+ end
141
+
142
+ # @label Direction: Southwest
143
+ # @snapshot interactive
144
+ def tooltip_sw(type: :description)
145
+ render_with_template(
146
+ locals: {
147
+ type: type,
148
+ }
149
+ )
150
+ end
151
+
152
+ # @label Direction: Northeast
153
+ # @snapshot interactive
154
+ def tooltip_ne(type: :description)
155
+ render_with_template(
156
+ locals: {
157
+ type: type,
158
+ }
159
+ )
160
+ end
161
+
162
+ # @label Direction: Northwest
163
+ # @snapshot interactive
164
+ def tooltip_nw(type: :description)
165
+ render_with_template(
166
+ locals: {
167
+ type: type,
168
+ }
169
+ )
170
+ end
91
171
  end
92
172
  end
93
173
  end
data/static/info_arch.json CHANGED
@@ -8778,6 +8778,110 @@
8778
8778
  "color-contrast"
8779
8779
  ]
8780
8780
  }
8781
+ },
8782
+ {
8783
+ "preview_path": "primer/alpha/tooltip/tooltip_n",
8784
+ "name": "tooltip_n",
8785
+ "snapshot": "interactive",
8786
+ "skip_rules": {
8787
+ "wont_fix": [
8788
+ "region"
8789
+ ],
8790
+ "will_fix": [
8791
+ "color-contrast"
8792
+ ]
8793
+ }
8794
+ },
8795
+ {
8796
+ "preview_path": "primer/alpha/tooltip/tooltip_s",
8797
+ "name": "tooltip_s",
8798
+ "snapshot": "interactive",
8799
+ "skip_rules": {
8800
+ "wont_fix": [
8801
+ "region"
8802
+ ],
8803
+ "will_fix": [
8804
+ "color-contrast"
8805
+ ]
8806
+ }
8807
+ },
8808
+ {
8809
+ "preview_path": "primer/alpha/tooltip/tooltip_e",
8810
+ "name": "tooltip_e",
8811
+ "snapshot": "interactive",
8812
+ "skip_rules": {
8813
+ "wont_fix": [
8814
+ "region"
8815
+ ],
8816
+ "will_fix": [
8817
+ "color-contrast"
8818
+ ]
8819
+ }
8820
+ },
8821
+ {
8822
+ "preview_path": "primer/alpha/tooltip/tooltip_w",
8823
+ "name": "tooltip_w",
8824
+ "snapshot": "interactive",
8825
+ "skip_rules": {
8826
+ "wont_fix": [
8827
+ "region"
8828
+ ],
8829
+ "will_fix": [
8830
+ "color-contrast"
8831
+ ]
8832
+ }
8833
+ },
8834
+ {
8835
+ "preview_path": "primer/alpha/tooltip/tooltip_se",
8836
+ "name": "tooltip_se",
8837
+ "snapshot": "interactive",
8838
+ "skip_rules": {
8839
+ "wont_fix": [
8840
+ "region"
8841
+ ],
8842
+ "will_fix": [
8843
+ "color-contrast"
8844
+ ]
8845
+ }
8846
+ },
8847
+ {
8848
+ "preview_path": "primer/alpha/tooltip/tooltip_sw",
8849
+ "name": "tooltip_sw",
8850
+ "snapshot": "interactive",
8851
+ "skip_rules": {
8852
+ "wont_fix": [
8853
+ "region"
8854
+ ],
8855
+ "will_fix": [
8856
+ "color-contrast"
8857
+ ]
8858
+ }
8859
+ },
8860
+ {
8861
+ "preview_path": "primer/alpha/tooltip/tooltip_ne",
8862
+ "name": "tooltip_ne",
8863
+ "snapshot": "interactive",
8864
+ "skip_rules": {
8865
+ "wont_fix": [
8866
+ "region"
8867
+ ],
8868
+ "will_fix": [
8869
+ "color-contrast"
8870
+ ]
8871
+ }
8872
+ },
8873
+ {
8874
+ "preview_path": "primer/alpha/tooltip/tooltip_nw",
8875
+ "name": "tooltip_nw",
8876
+ "snapshot": "interactive",
8877
+ "skip_rules": {
8878
+ "wont_fix": [
8879
+ "region"
8880
+ ],
8881
+ "will_fix": [
8882
+ "color-contrast"
8883
+ ]
8884
+ }
8781
8885
  }
8782
8886
  ],
8783
8887
  "subcomponents": [