primer_view_components 0.20.0 → 0.21.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +16 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +4 -4
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +1 -2
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +8 -7
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +1 -0
- data/app/components/primer/alpha/tool_tip.js +46 -77
- data/app/components/primer/alpha/tool_tip.ts +46 -77
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +4 -4
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview.rb +80 -0
- data/static/info_arch.json +104 -0
- data/static/previews.json +104 -0
- metadata +10 -2
@@ -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(--
|
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:
|
96
|
-
|
97
|
-
|
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
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
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
|
-
|
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
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
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
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
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
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
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 = '
|
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 = '
|
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 = '
|
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 = '
|
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:
|
400
|
+
anchorOffset: 0,
|
432
401
|
})
|
433
402
|
const anchorSide = position.anchorSide
|
434
403
|
const align = position.anchorAlign
|
@@ -1 +1 @@
|
|
1
|
-
.flash:not(.Banner){background-
|
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}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,
|
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"]}
|
@@ -10,7 +10,7 @@
|
|
10
10
|
|
11
11
|
/* Default color */
|
12
12
|
color: var(--fgColor-default);
|
13
|
-
background-
|
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-
|
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-
|
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-
|
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 {
|
@@ -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": [
|
data/static/previews.json
CHANGED
@@ -6797,6 +6797,110 @@
|
|
6797
6797
|
"color-contrast"
|
6798
6798
|
]
|
6799
6799
|
}
|
6800
|
+
},
|
6801
|
+
{
|
6802
|
+
"preview_path": "primer/alpha/tooltip/tooltip_n",
|
6803
|
+
"name": "tooltip_n",
|
6804
|
+
"snapshot": "interactive",
|
6805
|
+
"skip_rules": {
|
6806
|
+
"wont_fix": [
|
6807
|
+
"region"
|
6808
|
+
],
|
6809
|
+
"will_fix": [
|
6810
|
+
"color-contrast"
|
6811
|
+
]
|
6812
|
+
}
|
6813
|
+
},
|
6814
|
+
{
|
6815
|
+
"preview_path": "primer/alpha/tooltip/tooltip_s",
|
6816
|
+
"name": "tooltip_s",
|
6817
|
+
"snapshot": "interactive",
|
6818
|
+
"skip_rules": {
|
6819
|
+
"wont_fix": [
|
6820
|
+
"region"
|
6821
|
+
],
|
6822
|
+
"will_fix": [
|
6823
|
+
"color-contrast"
|
6824
|
+
]
|
6825
|
+
}
|
6826
|
+
},
|
6827
|
+
{
|
6828
|
+
"preview_path": "primer/alpha/tooltip/tooltip_e",
|
6829
|
+
"name": "tooltip_e",
|
6830
|
+
"snapshot": "interactive",
|
6831
|
+
"skip_rules": {
|
6832
|
+
"wont_fix": [
|
6833
|
+
"region"
|
6834
|
+
],
|
6835
|
+
"will_fix": [
|
6836
|
+
"color-contrast"
|
6837
|
+
]
|
6838
|
+
}
|
6839
|
+
},
|
6840
|
+
{
|
6841
|
+
"preview_path": "primer/alpha/tooltip/tooltip_w",
|
6842
|
+
"name": "tooltip_w",
|
6843
|
+
"snapshot": "interactive",
|
6844
|
+
"skip_rules": {
|
6845
|
+
"wont_fix": [
|
6846
|
+
"region"
|
6847
|
+
],
|
6848
|
+
"will_fix": [
|
6849
|
+
"color-contrast"
|
6850
|
+
]
|
6851
|
+
}
|
6852
|
+
},
|
6853
|
+
{
|
6854
|
+
"preview_path": "primer/alpha/tooltip/tooltip_se",
|
6855
|
+
"name": "tooltip_se",
|
6856
|
+
"snapshot": "interactive",
|
6857
|
+
"skip_rules": {
|
6858
|
+
"wont_fix": [
|
6859
|
+
"region"
|
6860
|
+
],
|
6861
|
+
"will_fix": [
|
6862
|
+
"color-contrast"
|
6863
|
+
]
|
6864
|
+
}
|
6865
|
+
},
|
6866
|
+
{
|
6867
|
+
"preview_path": "primer/alpha/tooltip/tooltip_sw",
|
6868
|
+
"name": "tooltip_sw",
|
6869
|
+
"snapshot": "interactive",
|
6870
|
+
"skip_rules": {
|
6871
|
+
"wont_fix": [
|
6872
|
+
"region"
|
6873
|
+
],
|
6874
|
+
"will_fix": [
|
6875
|
+
"color-contrast"
|
6876
|
+
]
|
6877
|
+
}
|
6878
|
+
},
|
6879
|
+
{
|
6880
|
+
"preview_path": "primer/alpha/tooltip/tooltip_ne",
|
6881
|
+
"name": "tooltip_ne",
|
6882
|
+
"snapshot": "interactive",
|
6883
|
+
"skip_rules": {
|
6884
|
+
"wont_fix": [
|
6885
|
+
"region"
|
6886
|
+
],
|
6887
|
+
"will_fix": [
|
6888
|
+
"color-contrast"
|
6889
|
+
]
|
6890
|
+
}
|
6891
|
+
},
|
6892
|
+
{
|
6893
|
+
"preview_path": "primer/alpha/tooltip/tooltip_nw",
|
6894
|
+
"name": "tooltip_nw",
|
6895
|
+
"snapshot": "interactive",
|
6896
|
+
"skip_rules": {
|
6897
|
+
"wont_fix": [
|
6898
|
+
"region"
|
6899
|
+
],
|
6900
|
+
"will_fix": [
|
6901
|
+
"color-contrast"
|
6902
|
+
]
|
6903
|
+
}
|
6800
6904
|
}
|
6801
6905
|
]
|
6802
6906
|
},
|