@primer/view-components 0.13.0-rc.07828c4f → 0.13.0-rc.17f47a8b
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.
|
@@ -32,9 +32,8 @@ const isPopoverOpen = (() => {
|
|
|
32
32
|
}
|
|
33
33
|
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
|
34
34
|
})();
|
|
35
|
-
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
|
36
35
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
|
37
|
-
const TOOLTIP_OFFSET =
|
|
36
|
+
const TOOLTIP_OFFSET = 4;
|
|
38
37
|
const DIRECTION_CLASSES = [
|
|
39
38
|
'tooltip-n',
|
|
40
39
|
'tooltip-s',
|
|
@@ -84,10 +83,9 @@ class ToolTipElement extends HTMLElement {
|
|
|
84
83
|
styles() {
|
|
85
84
|
return `
|
|
86
85
|
:host {
|
|
87
|
-
padding:
|
|
88
|
-
font:
|
|
89
|
-
-
|
|
90
|
-
color: var(--color-fg-on-emphasis) !important;
|
|
86
|
+
padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
|
|
87
|
+
font: var(--text-body-shorthand-small);
|
|
88
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
|
|
91
89
|
text-align: center;
|
|
92
90
|
text-decoration: none;
|
|
93
91
|
text-shadow: none;
|
|
@@ -95,25 +93,17 @@ class ToolTipElement extends HTMLElement {
|
|
|
95
93
|
letter-spacing: normal;
|
|
96
94
|
word-wrap: break-word;
|
|
97
95
|
white-space: pre;
|
|
98
|
-
background: var(--color-neutral-emphasis-plus) !important;
|
|
99
|
-
border-radius:
|
|
96
|
+
background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
|
|
97
|
+
border-radius: var(--borderRadius-medium);
|
|
100
98
|
border: 0 !important;
|
|
101
99
|
opacity: 0;
|
|
102
|
-
max-width:
|
|
100
|
+
max-width: var(--overlay-width-small);
|
|
103
101
|
word-wrap: break-word;
|
|
104
102
|
white-space: normal;
|
|
105
103
|
width: max-content !important;
|
|
106
104
|
inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
|
|
107
105
|
overflow: visible !important;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
:host:before{
|
|
111
|
-
position: absolute;
|
|
112
|
-
z-index: 1000001;
|
|
113
|
-
color: var(--color-neutral-emphasis-plus);
|
|
114
|
-
content: "";
|
|
115
|
-
border: 6px solid transparent;
|
|
116
|
-
opacity: 0
|
|
106
|
+
text-wrap: balance;
|
|
117
107
|
}
|
|
118
108
|
|
|
119
109
|
@keyframes tooltip-appear {
|
|
@@ -125,91 +115,19 @@ class ToolTipElement extends HTMLElement {
|
|
|
125
115
|
}
|
|
126
116
|
}
|
|
127
117
|
|
|
128
|
-
:host:after{
|
|
129
|
-
position: absolute;
|
|
130
|
-
display: block;
|
|
131
|
-
right: 0;
|
|
132
|
-
left: 0;
|
|
133
|
-
height: 12px;
|
|
134
|
-
content: ""
|
|
135
|
-
}
|
|
136
|
-
|
|
137
118
|
:host(:popover-open),
|
|
138
119
|
:host(:popover-open):before {
|
|
139
120
|
animation-name: tooltip-appear;
|
|
140
121
|
animation-duration: .1s;
|
|
141
122
|
animation-fill-mode: forwards;
|
|
142
123
|
animation-timing-function: ease-in;
|
|
143
|
-
animation-delay: .4s
|
|
144
124
|
}
|
|
145
125
|
|
|
146
|
-
:host(.\\:popover-open)
|
|
147
|
-
:host(.\\:popover-open):before {
|
|
126
|
+
:host(.\\:popover-open) {
|
|
148
127
|
animation-name: tooltip-appear;
|
|
149
128
|
animation-duration: .1s;
|
|
150
129
|
animation-fill-mode: forwards;
|
|
151
130
|
animation-timing-function: ease-in;
|
|
152
|
-
animation-delay: .4s
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
:host(.tooltip-s):before,
|
|
156
|
-
:host(.tooltip-n):before {
|
|
157
|
-
right: 50%;
|
|
158
|
-
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
:host(.tooltip-s):before,
|
|
162
|
-
:host(.tooltip-se):before,
|
|
163
|
-
:host(.tooltip-sw):before {
|
|
164
|
-
bottom: 100%;
|
|
165
|
-
border-bottom-color: var(--color-neutral-emphasis-plus)
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
:host(.tooltip-s):after,
|
|
169
|
-
:host(.tooltip-se):after,
|
|
170
|
-
:host(.tooltip-sw):after {
|
|
171
|
-
bottom: 100%
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
:host(.tooltip-n):before,
|
|
175
|
-
:host(.tooltip-ne):before,
|
|
176
|
-
:host(.tooltip-nw):before {
|
|
177
|
-
top: 100%;
|
|
178
|
-
border-top-color: var(--color-neutral-emphasis-plus)
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
:host(.tooltip-n):after,
|
|
182
|
-
:host(.tooltip-ne):after,
|
|
183
|
-
:host(.tooltip-nw):after {
|
|
184
|
-
top: 100%
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
:host(.tooltip-se):before,
|
|
188
|
-
:host(.tooltip-ne):before {
|
|
189
|
-
left: 0;
|
|
190
|
-
margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
:host(.tooltip-sw):before,
|
|
194
|
-
:host(.tooltip-nw):before {
|
|
195
|
-
right: 0;
|
|
196
|
-
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
:host(.tooltip-w):before {
|
|
200
|
-
top: 50%;
|
|
201
|
-
bottom: 50%;
|
|
202
|
-
left: 100%;
|
|
203
|
-
margin-top: -6px;
|
|
204
|
-
border-left-color: var(--color-neutral-emphasis-plus)
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
:host(.tooltip-e):before {
|
|
208
|
-
top: 50%;
|
|
209
|
-
right: 100%;
|
|
210
|
-
bottom: 50%;
|
|
211
|
-
margin-top: -6px;
|
|
212
|
-
border-right-color: var(--color-neutral-emphasis-plus)
|
|
213
131
|
}
|
|
214
132
|
`;
|
|
215
133
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.13.0-rc.
|
|
3
|
+
"version": "0.13.0-rc.17f47a8b",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"cssnano": "^5.1.13",
|
|
75
75
|
"eslint": "^8.23.1",
|
|
76
76
|
"eslint-plugin-custom-elements": "^0.0.6",
|
|
77
|
-
"eslint-plugin-github": "^4.
|
|
77
|
+
"eslint-plugin-github": "^4.9.2",
|
|
78
78
|
"eslint-plugin-prettier": "^4.2.1",
|
|
79
79
|
"markdownlint-cli2": "^0.5.1",
|
|
80
80
|
"mocha": "^10.0.0",
|
package/static/info_arch.json
CHANGED
|
@@ -2589,84 +2589,7 @@
|
|
|
2589
2589
|
|
|
2590
2590
|
],
|
|
2591
2591
|
"previews": [
|
|
2592
|
-
|
|
2593
|
-
"preview_path": "primer/alpha/check_box/playground",
|
|
2594
|
-
"name": "playground",
|
|
2595
|
-
"snapshot": "false",
|
|
2596
|
-
"skip_rules": {
|
|
2597
|
-
"wont_fix": [
|
|
2598
|
-
"region"
|
|
2599
|
-
],
|
|
2600
|
-
"will_fix": [
|
|
2601
|
-
"color-contrast"
|
|
2602
|
-
]
|
|
2603
|
-
}
|
|
2604
|
-
},
|
|
2605
|
-
{
|
|
2606
|
-
"preview_path": "primer/alpha/check_box/default",
|
|
2607
|
-
"name": "default",
|
|
2608
|
-
"snapshot": "false",
|
|
2609
|
-
"skip_rules": {
|
|
2610
|
-
"wont_fix": [
|
|
2611
|
-
"region"
|
|
2612
|
-
],
|
|
2613
|
-
"will_fix": [
|
|
2614
|
-
"color-contrast"
|
|
2615
|
-
]
|
|
2616
|
-
}
|
|
2617
|
-
},
|
|
2618
|
-
{
|
|
2619
|
-
"preview_path": "primer/alpha/check_box/with_caption",
|
|
2620
|
-
"name": "with_caption",
|
|
2621
|
-
"snapshot": "true",
|
|
2622
|
-
"skip_rules": {
|
|
2623
|
-
"wont_fix": [
|
|
2624
|
-
"region"
|
|
2625
|
-
],
|
|
2626
|
-
"will_fix": [
|
|
2627
|
-
"color-contrast"
|
|
2628
|
-
]
|
|
2629
|
-
}
|
|
2630
|
-
},
|
|
2631
|
-
{
|
|
2632
|
-
"preview_path": "primer/alpha/check_box/checked",
|
|
2633
|
-
"name": "checked",
|
|
2634
|
-
"snapshot": "false",
|
|
2635
|
-
"skip_rules": {
|
|
2636
|
-
"wont_fix": [
|
|
2637
|
-
"region"
|
|
2638
|
-
],
|
|
2639
|
-
"will_fix": [
|
|
2640
|
-
"color-contrast"
|
|
2641
|
-
]
|
|
2642
|
-
}
|
|
2643
|
-
},
|
|
2644
|
-
{
|
|
2645
|
-
"preview_path": "primer/alpha/check_box/visually_hide_label",
|
|
2646
|
-
"name": "visually_hide_label",
|
|
2647
|
-
"snapshot": "false",
|
|
2648
|
-
"skip_rules": {
|
|
2649
|
-
"wont_fix": [
|
|
2650
|
-
"region"
|
|
2651
|
-
],
|
|
2652
|
-
"will_fix": [
|
|
2653
|
-
"color-contrast"
|
|
2654
|
-
]
|
|
2655
|
-
}
|
|
2656
|
-
},
|
|
2657
|
-
{
|
|
2658
|
-
"preview_path": "primer/alpha/check_box/disabled",
|
|
2659
|
-
"name": "disabled",
|
|
2660
|
-
"snapshot": "false",
|
|
2661
|
-
"skip_rules": {
|
|
2662
|
-
"wont_fix": [
|
|
2663
|
-
"region"
|
|
2664
|
-
],
|
|
2665
|
-
"will_fix": [
|
|
2666
|
-
"color-contrast"
|
|
2667
|
-
]
|
|
2668
|
-
}
|
|
2669
|
-
}
|
|
2592
|
+
|
|
2670
2593
|
],
|
|
2671
2594
|
"subcomponents": [
|
|
2672
2595
|
|
|
@@ -6014,84 +5937,7 @@
|
|
|
6014
5937
|
|
|
6015
5938
|
],
|
|
6016
5939
|
"previews": [
|
|
6017
|
-
|
|
6018
|
-
"preview_path": "primer/alpha/radio_button/playground",
|
|
6019
|
-
"name": "playground",
|
|
6020
|
-
"snapshot": "false",
|
|
6021
|
-
"skip_rules": {
|
|
6022
|
-
"wont_fix": [
|
|
6023
|
-
"region"
|
|
6024
|
-
],
|
|
6025
|
-
"will_fix": [
|
|
6026
|
-
"color-contrast"
|
|
6027
|
-
]
|
|
6028
|
-
}
|
|
6029
|
-
},
|
|
6030
|
-
{
|
|
6031
|
-
"preview_path": "primer/alpha/radio_button/default",
|
|
6032
|
-
"name": "default",
|
|
6033
|
-
"snapshot": "true",
|
|
6034
|
-
"skip_rules": {
|
|
6035
|
-
"wont_fix": [
|
|
6036
|
-
"region"
|
|
6037
|
-
],
|
|
6038
|
-
"will_fix": [
|
|
6039
|
-
"color-contrast"
|
|
6040
|
-
]
|
|
6041
|
-
}
|
|
6042
|
-
},
|
|
6043
|
-
{
|
|
6044
|
-
"preview_path": "primer/alpha/radio_button/with_caption",
|
|
6045
|
-
"name": "with_caption",
|
|
6046
|
-
"snapshot": "true",
|
|
6047
|
-
"skip_rules": {
|
|
6048
|
-
"wont_fix": [
|
|
6049
|
-
"region"
|
|
6050
|
-
],
|
|
6051
|
-
"will_fix": [
|
|
6052
|
-
"color-contrast"
|
|
6053
|
-
]
|
|
6054
|
-
}
|
|
6055
|
-
},
|
|
6056
|
-
{
|
|
6057
|
-
"preview_path": "primer/alpha/radio_button/checked",
|
|
6058
|
-
"name": "checked",
|
|
6059
|
-
"snapshot": "true",
|
|
6060
|
-
"skip_rules": {
|
|
6061
|
-
"wont_fix": [
|
|
6062
|
-
"region"
|
|
6063
|
-
],
|
|
6064
|
-
"will_fix": [
|
|
6065
|
-
"color-contrast"
|
|
6066
|
-
]
|
|
6067
|
-
}
|
|
6068
|
-
},
|
|
6069
|
-
{
|
|
6070
|
-
"preview_path": "primer/alpha/radio_button/visually_hide_label",
|
|
6071
|
-
"name": "visually_hide_label",
|
|
6072
|
-
"snapshot": "true",
|
|
6073
|
-
"skip_rules": {
|
|
6074
|
-
"wont_fix": [
|
|
6075
|
-
"region"
|
|
6076
|
-
],
|
|
6077
|
-
"will_fix": [
|
|
6078
|
-
"color-contrast"
|
|
6079
|
-
]
|
|
6080
|
-
}
|
|
6081
|
-
},
|
|
6082
|
-
{
|
|
6083
|
-
"preview_path": "primer/alpha/radio_button/disabled",
|
|
6084
|
-
"name": "disabled",
|
|
6085
|
-
"snapshot": "true",
|
|
6086
|
-
"skip_rules": {
|
|
6087
|
-
"wont_fix": [
|
|
6088
|
-
"region"
|
|
6089
|
-
],
|
|
6090
|
-
"will_fix": [
|
|
6091
|
-
"color-contrast"
|
|
6092
|
-
]
|
|
6093
|
-
}
|
|
6094
|
-
}
|
|
5940
|
+
|
|
6095
5941
|
],
|
|
6096
5942
|
"subcomponents": [
|
|
6097
5943
|
|
package/static/previews.json
CHANGED
|
@@ -2311,92 +2311,6 @@
|
|
|
2311
2311
|
}
|
|
2312
2312
|
]
|
|
2313
2313
|
},
|
|
2314
|
-
{
|
|
2315
|
-
"name": "check_box",
|
|
2316
|
-
"component": "CheckBox",
|
|
2317
|
-
"status": "alpha",
|
|
2318
|
-
"lookup_path": "primer/alpha/check_box",
|
|
2319
|
-
"examples": [
|
|
2320
|
-
{
|
|
2321
|
-
"preview_path": "primer/alpha/check_box/playground",
|
|
2322
|
-
"name": "playground",
|
|
2323
|
-
"snapshot": "false",
|
|
2324
|
-
"skip_rules": {
|
|
2325
|
-
"wont_fix": [
|
|
2326
|
-
"region"
|
|
2327
|
-
],
|
|
2328
|
-
"will_fix": [
|
|
2329
|
-
"color-contrast"
|
|
2330
|
-
]
|
|
2331
|
-
}
|
|
2332
|
-
},
|
|
2333
|
-
{
|
|
2334
|
-
"preview_path": "primer/alpha/check_box/default",
|
|
2335
|
-
"name": "default",
|
|
2336
|
-
"snapshot": "false",
|
|
2337
|
-
"skip_rules": {
|
|
2338
|
-
"wont_fix": [
|
|
2339
|
-
"region"
|
|
2340
|
-
],
|
|
2341
|
-
"will_fix": [
|
|
2342
|
-
"color-contrast"
|
|
2343
|
-
]
|
|
2344
|
-
}
|
|
2345
|
-
},
|
|
2346
|
-
{
|
|
2347
|
-
"preview_path": "primer/alpha/check_box/with_caption",
|
|
2348
|
-
"name": "with_caption",
|
|
2349
|
-
"snapshot": "true",
|
|
2350
|
-
"skip_rules": {
|
|
2351
|
-
"wont_fix": [
|
|
2352
|
-
"region"
|
|
2353
|
-
],
|
|
2354
|
-
"will_fix": [
|
|
2355
|
-
"color-contrast"
|
|
2356
|
-
]
|
|
2357
|
-
}
|
|
2358
|
-
},
|
|
2359
|
-
{
|
|
2360
|
-
"preview_path": "primer/alpha/check_box/checked",
|
|
2361
|
-
"name": "checked",
|
|
2362
|
-
"snapshot": "false",
|
|
2363
|
-
"skip_rules": {
|
|
2364
|
-
"wont_fix": [
|
|
2365
|
-
"region"
|
|
2366
|
-
],
|
|
2367
|
-
"will_fix": [
|
|
2368
|
-
"color-contrast"
|
|
2369
|
-
]
|
|
2370
|
-
}
|
|
2371
|
-
},
|
|
2372
|
-
{
|
|
2373
|
-
"preview_path": "primer/alpha/check_box/visually_hide_label",
|
|
2374
|
-
"name": "visually_hide_label",
|
|
2375
|
-
"snapshot": "false",
|
|
2376
|
-
"skip_rules": {
|
|
2377
|
-
"wont_fix": [
|
|
2378
|
-
"region"
|
|
2379
|
-
],
|
|
2380
|
-
"will_fix": [
|
|
2381
|
-
"color-contrast"
|
|
2382
|
-
]
|
|
2383
|
-
}
|
|
2384
|
-
},
|
|
2385
|
-
{
|
|
2386
|
-
"preview_path": "primer/alpha/check_box/disabled",
|
|
2387
|
-
"name": "disabled",
|
|
2388
|
-
"snapshot": "false",
|
|
2389
|
-
"skip_rules": {
|
|
2390
|
-
"wont_fix": [
|
|
2391
|
-
"region"
|
|
2392
|
-
],
|
|
2393
|
-
"will_fix": [
|
|
2394
|
-
"color-contrast"
|
|
2395
|
-
]
|
|
2396
|
-
}
|
|
2397
|
-
}
|
|
2398
|
-
]
|
|
2399
|
-
},
|
|
2400
2314
|
{
|
|
2401
2315
|
"name": "check_box_group",
|
|
2402
2316
|
"component": "CheckBoxGroup",
|
|
@@ -4682,92 +4596,6 @@
|
|
|
4682
4596
|
}
|
|
4683
4597
|
]
|
|
4684
4598
|
},
|
|
4685
|
-
{
|
|
4686
|
-
"name": "radio_button",
|
|
4687
|
-
"component": "RadioButton",
|
|
4688
|
-
"status": "alpha",
|
|
4689
|
-
"lookup_path": "primer/alpha/radio_button",
|
|
4690
|
-
"examples": [
|
|
4691
|
-
{
|
|
4692
|
-
"preview_path": "primer/alpha/radio_button/playground",
|
|
4693
|
-
"name": "playground",
|
|
4694
|
-
"snapshot": "false",
|
|
4695
|
-
"skip_rules": {
|
|
4696
|
-
"wont_fix": [
|
|
4697
|
-
"region"
|
|
4698
|
-
],
|
|
4699
|
-
"will_fix": [
|
|
4700
|
-
"color-contrast"
|
|
4701
|
-
]
|
|
4702
|
-
}
|
|
4703
|
-
},
|
|
4704
|
-
{
|
|
4705
|
-
"preview_path": "primer/alpha/radio_button/default",
|
|
4706
|
-
"name": "default",
|
|
4707
|
-
"snapshot": "true",
|
|
4708
|
-
"skip_rules": {
|
|
4709
|
-
"wont_fix": [
|
|
4710
|
-
"region"
|
|
4711
|
-
],
|
|
4712
|
-
"will_fix": [
|
|
4713
|
-
"color-contrast"
|
|
4714
|
-
]
|
|
4715
|
-
}
|
|
4716
|
-
},
|
|
4717
|
-
{
|
|
4718
|
-
"preview_path": "primer/alpha/radio_button/with_caption",
|
|
4719
|
-
"name": "with_caption",
|
|
4720
|
-
"snapshot": "true",
|
|
4721
|
-
"skip_rules": {
|
|
4722
|
-
"wont_fix": [
|
|
4723
|
-
"region"
|
|
4724
|
-
],
|
|
4725
|
-
"will_fix": [
|
|
4726
|
-
"color-contrast"
|
|
4727
|
-
]
|
|
4728
|
-
}
|
|
4729
|
-
},
|
|
4730
|
-
{
|
|
4731
|
-
"preview_path": "primer/alpha/radio_button/checked",
|
|
4732
|
-
"name": "checked",
|
|
4733
|
-
"snapshot": "true",
|
|
4734
|
-
"skip_rules": {
|
|
4735
|
-
"wont_fix": [
|
|
4736
|
-
"region"
|
|
4737
|
-
],
|
|
4738
|
-
"will_fix": [
|
|
4739
|
-
"color-contrast"
|
|
4740
|
-
]
|
|
4741
|
-
}
|
|
4742
|
-
},
|
|
4743
|
-
{
|
|
4744
|
-
"preview_path": "primer/alpha/radio_button/visually_hide_label",
|
|
4745
|
-
"name": "visually_hide_label",
|
|
4746
|
-
"snapshot": "true",
|
|
4747
|
-
"skip_rules": {
|
|
4748
|
-
"wont_fix": [
|
|
4749
|
-
"region"
|
|
4750
|
-
],
|
|
4751
|
-
"will_fix": [
|
|
4752
|
-
"color-contrast"
|
|
4753
|
-
]
|
|
4754
|
-
}
|
|
4755
|
-
},
|
|
4756
|
-
{
|
|
4757
|
-
"preview_path": "primer/alpha/radio_button/disabled",
|
|
4758
|
-
"name": "disabled",
|
|
4759
|
-
"snapshot": "true",
|
|
4760
|
-
"skip_rules": {
|
|
4761
|
-
"wont_fix": [
|
|
4762
|
-
"region"
|
|
4763
|
-
],
|
|
4764
|
-
"will_fix": [
|
|
4765
|
-
"color-contrast"
|
|
4766
|
-
]
|
|
4767
|
-
}
|
|
4768
|
-
}
|
|
4769
|
-
]
|
|
4770
|
-
},
|
|
4771
4599
|
{
|
|
4772
4600
|
"name": "radio_button_group",
|
|
4773
4601
|
"component": "RadioButtonGroup",
|