@primer/view-components 0.13.0 → 0.13.1-rc.1b8d61f8
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,8 +32,9 @@ const isPopoverOpen = (() => {
|
|
|
32
32
|
}
|
|
33
33
|
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
|
34
34
|
})();
|
|
35
|
+
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
|
35
36
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
|
36
|
-
const TOOLTIP_OFFSET =
|
|
37
|
+
const TOOLTIP_OFFSET = 10;
|
|
37
38
|
const DIRECTION_CLASSES = [
|
|
38
39
|
'tooltip-n',
|
|
39
40
|
'tooltip-s',
|
|
@@ -106,15 +107,33 @@ class ToolTipElement extends HTMLElement {
|
|
|
106
107
|
text-wrap: balance;
|
|
107
108
|
}
|
|
108
109
|
|
|
110
|
+
:host:before{
|
|
111
|
+
position: absolute;
|
|
112
|
+
z-index: 1000001;
|
|
113
|
+
color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
114
|
+
content: "";
|
|
115
|
+
border: 6px solid transparent;
|
|
116
|
+
opacity: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
109
119
|
@keyframes tooltip-appear {
|
|
110
120
|
from {
|
|
111
121
|
opacity: 0;
|
|
112
122
|
}
|
|
113
123
|
to {
|
|
114
|
-
opacity: 1
|
|
124
|
+
opacity: 1;
|
|
115
125
|
}
|
|
116
126
|
}
|
|
117
127
|
|
|
128
|
+
:host:after{
|
|
129
|
+
position: absolute;
|
|
130
|
+
display: block;
|
|
131
|
+
right: 0;
|
|
132
|
+
left: 0;
|
|
133
|
+
height: 12px;
|
|
134
|
+
content: "";
|
|
135
|
+
}
|
|
136
|
+
|
|
118
137
|
:host(:popover-open),
|
|
119
138
|
:host(:popover-open):before {
|
|
120
139
|
animation-name: tooltip-appear;
|
|
@@ -123,11 +142,65 @@ class ToolTipElement extends HTMLElement {
|
|
|
123
142
|
animation-timing-function: ease-in;
|
|
124
143
|
}
|
|
125
144
|
|
|
126
|
-
:host(.\\:popover-open)
|
|
145
|
+
:host(.\\:popover-open),
|
|
146
|
+
:host(.\\:popover-open):before {
|
|
127
147
|
animation-name: tooltip-appear;
|
|
128
148
|
animation-duration: .1s;
|
|
129
149
|
animation-fill-mode: forwards;
|
|
130
150
|
animation-timing-function: ease-in;
|
|
151
|
+
animation-delay: .4s;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:host(.tooltip-s):before,
|
|
155
|
+
:host(.tooltip-n):before {
|
|
156
|
+
right: 50%;
|
|
157
|
+
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
158
|
+
}
|
|
159
|
+
:host(.tooltip-s):before,
|
|
160
|
+
:host(.tooltip-se):before,
|
|
161
|
+
:host(.tooltip-sw):before {
|
|
162
|
+
bottom: 100%;
|
|
163
|
+
border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
164
|
+
}
|
|
165
|
+
:host(.tooltip-s):after,
|
|
166
|
+
:host(.tooltip-se):after,
|
|
167
|
+
:host(.tooltip-sw):after {
|
|
168
|
+
bottom: 100%
|
|
169
|
+
}
|
|
170
|
+
:host(.tooltip-n):before,
|
|
171
|
+
:host(.tooltip-ne):before,
|
|
172
|
+
:host(.tooltip-nw):before {
|
|
173
|
+
top: 100%;
|
|
174
|
+
border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
175
|
+
}
|
|
176
|
+
:host(.tooltip-n):after,
|
|
177
|
+
:host(.tooltip-ne):after,
|
|
178
|
+
:host(.tooltip-nw):after {
|
|
179
|
+
top: 100%;
|
|
180
|
+
}
|
|
181
|
+
:host(.tooltip-se):before,
|
|
182
|
+
:host(.tooltip-ne):before {
|
|
183
|
+
left: 0;
|
|
184
|
+
margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
185
|
+
}
|
|
186
|
+
:host(.tooltip-sw):before,
|
|
187
|
+
:host(.tooltip-nw):before {
|
|
188
|
+
right: 0;
|
|
189
|
+
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
190
|
+
}
|
|
191
|
+
:host(.tooltip-w):before {
|
|
192
|
+
top: 50%;
|
|
193
|
+
bottom: 50%;
|
|
194
|
+
left: 100%;
|
|
195
|
+
margin-top: -6px;
|
|
196
|
+
border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
197
|
+
}
|
|
198
|
+
:host(.tooltip-e):before {
|
|
199
|
+
top: 50%;
|
|
200
|
+
right: 100%;
|
|
201
|
+
bottom: 50%;
|
|
202
|
+
margin-top: -6px;
|
|
203
|
+
border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
|
131
204
|
}
|
|
132
205
|
`;
|
|
133
206
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.1-rc.1b8d61f8",
|
|
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",
|
package/static/info_arch.json
CHANGED
|
@@ -2589,7 +2589,84 @@
|
|
|
2589
2589
|
|
|
2590
2590
|
],
|
|
2591
2591
|
"previews": [
|
|
2592
|
-
|
|
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
|
+
}
|
|
2593
2670
|
],
|
|
2594
2671
|
"subcomponents": [
|
|
2595
2672
|
|
|
@@ -5937,7 +6014,84 @@
|
|
|
5937
6014
|
|
|
5938
6015
|
],
|
|
5939
6016
|
"previews": [
|
|
5940
|
-
|
|
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
|
+
}
|
|
5941
6095
|
],
|
|
5942
6096
|
"subcomponents": [
|
|
5943
6097
|
|
package/static/previews.json
CHANGED
|
@@ -2311,6 +2311,92 @@
|
|
|
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
|
+
},
|
|
2314
2400
|
{
|
|
2315
2401
|
"name": "check_box_group",
|
|
2316
2402
|
"component": "CheckBoxGroup",
|
|
@@ -4596,6 +4682,92 @@
|
|
|
4596
4682
|
}
|
|
4597
4683
|
]
|
|
4598
4684
|
},
|
|
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
|
+
},
|
|
4599
4771
|
{
|
|
4600
4772
|
"name": "radio_button_group",
|
|
4601
4773
|
"component": "RadioButtonGroup",
|