@primer/view-components 0.18.0-rc.be38013c → 0.18.1-rc.096ff957
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.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/segmented_control.css.json +0 -1
- package/app/components/primer/dialog_helper.js +17 -7
- package/package.json +1 -1
- package/static/constants.json +1 -2
- package/static/info_arch.json +13 -65
- package/static/previews.json +13 -65
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--
|
|
1
|
+
.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
"name": "alpha/segmented_control",
|
|
3
3
|
"selectors": [
|
|
4
4
|
".SegmentedControl",
|
|
5
|
-
".SegmentedControl--iconOnly .Button--iconOnly.Button--large",
|
|
6
5
|
".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
|
|
7
6
|
".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
|
|
8
7
|
".SegmentedControl--small",
|
|
@@ -18,7 +18,6 @@ function dialogInvokerButtonHandler(event) {
|
|
|
18
18
|
// If the user is clicking a valid dialog trigger
|
|
19
19
|
let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
|
|
20
20
|
if (dialogId) {
|
|
21
|
-
event.stopPropagation();
|
|
22
21
|
const dialog = document.getElementById(dialogId);
|
|
23
22
|
if (dialog instanceof HTMLDialogElement) {
|
|
24
23
|
dialog.showModal();
|
|
@@ -26,7 +25,6 @@ function dialogInvokerButtonHandler(event) {
|
|
|
26
25
|
// If the behaviour is allowed through the dialog will be shown but then
|
|
27
26
|
// quickly hidden- as if it were never shown. This prevents that.
|
|
28
27
|
event.preventDefault();
|
|
29
|
-
event.stopPropagation();
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
30
|
dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
|
|
@@ -54,6 +52,21 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
54
52
|
for (const record of records) {
|
|
55
53
|
if (record.target === this.dialog) {
|
|
56
54
|
this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
|
|
55
|
+
// In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
|
|
56
|
+
// opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
|
|
57
|
+
// any popover that is currently open, regardless of whether or not another top layer element,
|
|
58
|
+
// such as a <dialog> is nested inside.
|
|
59
|
+
// See https://github.com/whatwg/html/issues/9998.
|
|
60
|
+
// This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
|
|
61
|
+
// we must undo the work they did to hide ancestral popovers of the dialog:
|
|
62
|
+
if (this.dialog.hasAttribute('open')) {
|
|
63
|
+
let node = this.dialog;
|
|
64
|
+
while (node) {
|
|
65
|
+
node = node.closest('[popover]:not(:popover-open)');
|
|
66
|
+
if (node)
|
|
67
|
+
node.showPopover();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
57
70
|
}
|
|
58
71
|
}
|
|
59
72
|
}).observe(this, { subtree: true, attributeFilter: ['open'] });
|
|
@@ -65,11 +78,8 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
65
78
|
handleEvent(event) {
|
|
66
79
|
const target = event.target;
|
|
67
80
|
const dialog = this.dialog;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
// if the target is inside the dialog, but is not the dialog itself, leave
|
|
71
|
-
// the dialog open
|
|
72
|
-
if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) === dialog && target !== dialog)
|
|
81
|
+
// The click target _must_ be the dialog element itself, and not elements underneath or inside.
|
|
82
|
+
if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
|
|
73
83
|
return;
|
|
74
84
|
const rect = dialog.getBoundingClientRect();
|
|
75
85
|
const clickWasInsideDialog = rect.top <= event.clientY &&
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.1-rc.096ff957",
|
|
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/constants.json
CHANGED
package/static/info_arch.json
CHANGED
|
@@ -3375,6 +3375,19 @@
|
|
|
3375
3375
|
"color-contrast"
|
|
3376
3376
|
]
|
|
3377
3377
|
}
|
|
3378
|
+
},
|
|
3379
|
+
{
|
|
3380
|
+
"preview_path": "primer/alpha/dialog/dialog_inside_overlay",
|
|
3381
|
+
"name": "dialog_inside_overlay",
|
|
3382
|
+
"snapshot": "false",
|
|
3383
|
+
"skip_rules": {
|
|
3384
|
+
"wont_fix": [
|
|
3385
|
+
"region"
|
|
3386
|
+
],
|
|
3387
|
+
"will_fix": [
|
|
3388
|
+
"color-contrast"
|
|
3389
|
+
]
|
|
3390
|
+
}
|
|
3378
3391
|
}
|
|
3379
3392
|
],
|
|
3380
3393
|
"subcomponents": [
|
|
@@ -6657,19 +6670,6 @@
|
|
|
6657
6670
|
]
|
|
6658
6671
|
}
|
|
6659
6672
|
},
|
|
6660
|
-
{
|
|
6661
|
-
"preview_path": "primer/alpha/segmented_control/full_width_large",
|
|
6662
|
-
"name": "full_width_large",
|
|
6663
|
-
"snapshot": "true",
|
|
6664
|
-
"skip_rules": {
|
|
6665
|
-
"wont_fix": [
|
|
6666
|
-
"region"
|
|
6667
|
-
],
|
|
6668
|
-
"will_fix": [
|
|
6669
|
-
"color-contrast"
|
|
6670
|
-
]
|
|
6671
|
-
}
|
|
6672
|
-
},
|
|
6673
6673
|
{
|
|
6674
6674
|
"preview_path": "primer/alpha/segmented_control/icons_and_text_small",
|
|
6675
6675
|
"name": "icons_and_text_small",
|
|
@@ -6696,19 +6696,6 @@
|
|
|
6696
6696
|
]
|
|
6697
6697
|
}
|
|
6698
6698
|
},
|
|
6699
|
-
{
|
|
6700
|
-
"preview_path": "primer/alpha/segmented_control/icons_and_text_large",
|
|
6701
|
-
"name": "icons_and_text_large",
|
|
6702
|
-
"snapshot": "true",
|
|
6703
|
-
"skip_rules": {
|
|
6704
|
-
"wont_fix": [
|
|
6705
|
-
"region"
|
|
6706
|
-
],
|
|
6707
|
-
"will_fix": [
|
|
6708
|
-
"color-contrast"
|
|
6709
|
-
]
|
|
6710
|
-
}
|
|
6711
|
-
},
|
|
6712
6699
|
{
|
|
6713
6700
|
"preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
|
|
6714
6701
|
"name": "trailing_label_width_small",
|
|
@@ -6735,19 +6722,6 @@
|
|
|
6735
6722
|
]
|
|
6736
6723
|
}
|
|
6737
6724
|
},
|
|
6738
|
-
{
|
|
6739
|
-
"preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
|
|
6740
|
-
"name": "trailing_label_width_large",
|
|
6741
|
-
"snapshot": "true",
|
|
6742
|
-
"skip_rules": {
|
|
6743
|
-
"wont_fix": [
|
|
6744
|
-
"region"
|
|
6745
|
-
],
|
|
6746
|
-
"will_fix": [
|
|
6747
|
-
"color-contrast"
|
|
6748
|
-
]
|
|
6749
|
-
}
|
|
6750
|
-
},
|
|
6751
6725
|
{
|
|
6752
6726
|
"preview_path": "primer/alpha/segmented_control/icon_only_small",
|
|
6753
6727
|
"name": "icon_only_small",
|
|
@@ -6774,19 +6748,6 @@
|
|
|
6774
6748
|
]
|
|
6775
6749
|
}
|
|
6776
6750
|
},
|
|
6777
|
-
{
|
|
6778
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_large",
|
|
6779
|
-
"name": "icon_only_large",
|
|
6780
|
-
"snapshot": "true",
|
|
6781
|
-
"skip_rules": {
|
|
6782
|
-
"wont_fix": [
|
|
6783
|
-
"region"
|
|
6784
|
-
],
|
|
6785
|
-
"will_fix": [
|
|
6786
|
-
"color-contrast"
|
|
6787
|
-
]
|
|
6788
|
-
}
|
|
6789
|
-
},
|
|
6790
6751
|
{
|
|
6791
6752
|
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
|
|
6792
6753
|
"name": "icon_only_full_width_small",
|
|
@@ -6813,19 +6774,6 @@
|
|
|
6813
6774
|
]
|
|
6814
6775
|
}
|
|
6815
6776
|
},
|
|
6816
|
-
{
|
|
6817
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
|
|
6818
|
-
"name": "icon_only_full_width_large",
|
|
6819
|
-
"snapshot": "false",
|
|
6820
|
-
"skip_rules": {
|
|
6821
|
-
"wont_fix": [
|
|
6822
|
-
"region"
|
|
6823
|
-
],
|
|
6824
|
-
"will_fix": [
|
|
6825
|
-
"color-contrast"
|
|
6826
|
-
]
|
|
6827
|
-
}
|
|
6828
|
-
},
|
|
6829
6777
|
{
|
|
6830
6778
|
"preview_path": "primer/alpha/segmented_control/with_link_as_tag",
|
|
6831
6779
|
"name": "with_link_as_tag",
|
package/static/previews.json
CHANGED
|
@@ -3139,6 +3139,19 @@
|
|
|
3139
3139
|
"color-contrast"
|
|
3140
3140
|
]
|
|
3141
3141
|
}
|
|
3142
|
+
},
|
|
3143
|
+
{
|
|
3144
|
+
"preview_path": "primer/alpha/dialog/dialog_inside_overlay",
|
|
3145
|
+
"name": "dialog_inside_overlay",
|
|
3146
|
+
"snapshot": "false",
|
|
3147
|
+
"skip_rules": {
|
|
3148
|
+
"wont_fix": [
|
|
3149
|
+
"region"
|
|
3150
|
+
],
|
|
3151
|
+
"will_fix": [
|
|
3152
|
+
"color-contrast"
|
|
3153
|
+
]
|
|
3154
|
+
}
|
|
3142
3155
|
}
|
|
3143
3156
|
]
|
|
3144
3157
|
},
|
|
@@ -5209,19 +5222,6 @@
|
|
|
5209
5222
|
]
|
|
5210
5223
|
}
|
|
5211
5224
|
},
|
|
5212
|
-
{
|
|
5213
|
-
"preview_path": "primer/alpha/segmented_control/full_width_large",
|
|
5214
|
-
"name": "full_width_large",
|
|
5215
|
-
"snapshot": "true",
|
|
5216
|
-
"skip_rules": {
|
|
5217
|
-
"wont_fix": [
|
|
5218
|
-
"region"
|
|
5219
|
-
],
|
|
5220
|
-
"will_fix": [
|
|
5221
|
-
"color-contrast"
|
|
5222
|
-
]
|
|
5223
|
-
}
|
|
5224
|
-
},
|
|
5225
5225
|
{
|
|
5226
5226
|
"preview_path": "primer/alpha/segmented_control/icons_and_text_small",
|
|
5227
5227
|
"name": "icons_and_text_small",
|
|
@@ -5248,19 +5248,6 @@
|
|
|
5248
5248
|
]
|
|
5249
5249
|
}
|
|
5250
5250
|
},
|
|
5251
|
-
{
|
|
5252
|
-
"preview_path": "primer/alpha/segmented_control/icons_and_text_large",
|
|
5253
|
-
"name": "icons_and_text_large",
|
|
5254
|
-
"snapshot": "true",
|
|
5255
|
-
"skip_rules": {
|
|
5256
|
-
"wont_fix": [
|
|
5257
|
-
"region"
|
|
5258
|
-
],
|
|
5259
|
-
"will_fix": [
|
|
5260
|
-
"color-contrast"
|
|
5261
|
-
]
|
|
5262
|
-
}
|
|
5263
|
-
},
|
|
5264
5251
|
{
|
|
5265
5252
|
"preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
|
|
5266
5253
|
"name": "trailing_label_width_small",
|
|
@@ -5287,19 +5274,6 @@
|
|
|
5287
5274
|
]
|
|
5288
5275
|
}
|
|
5289
5276
|
},
|
|
5290
|
-
{
|
|
5291
|
-
"preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
|
|
5292
|
-
"name": "trailing_label_width_large",
|
|
5293
|
-
"snapshot": "true",
|
|
5294
|
-
"skip_rules": {
|
|
5295
|
-
"wont_fix": [
|
|
5296
|
-
"region"
|
|
5297
|
-
],
|
|
5298
|
-
"will_fix": [
|
|
5299
|
-
"color-contrast"
|
|
5300
|
-
]
|
|
5301
|
-
}
|
|
5302
|
-
},
|
|
5303
5277
|
{
|
|
5304
5278
|
"preview_path": "primer/alpha/segmented_control/icon_only_small",
|
|
5305
5279
|
"name": "icon_only_small",
|
|
@@ -5326,19 +5300,6 @@
|
|
|
5326
5300
|
]
|
|
5327
5301
|
}
|
|
5328
5302
|
},
|
|
5329
|
-
{
|
|
5330
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_large",
|
|
5331
|
-
"name": "icon_only_large",
|
|
5332
|
-
"snapshot": "true",
|
|
5333
|
-
"skip_rules": {
|
|
5334
|
-
"wont_fix": [
|
|
5335
|
-
"region"
|
|
5336
|
-
],
|
|
5337
|
-
"will_fix": [
|
|
5338
|
-
"color-contrast"
|
|
5339
|
-
]
|
|
5340
|
-
}
|
|
5341
|
-
},
|
|
5342
5303
|
{
|
|
5343
5304
|
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
|
|
5344
5305
|
"name": "icon_only_full_width_small",
|
|
@@ -5365,19 +5326,6 @@
|
|
|
5365
5326
|
]
|
|
5366
5327
|
}
|
|
5367
5328
|
},
|
|
5368
|
-
{
|
|
5369
|
-
"preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
|
|
5370
|
-
"name": "icon_only_full_width_large",
|
|
5371
|
-
"snapshot": "false",
|
|
5372
|
-
"skip_rules": {
|
|
5373
|
-
"wont_fix": [
|
|
5374
|
-
"region"
|
|
5375
|
-
],
|
|
5376
|
-
"will_fix": [
|
|
5377
|
-
"color-contrast"
|
|
5378
|
-
]
|
|
5379
|
-
}
|
|
5380
|
-
},
|
|
5381
5329
|
{
|
|
5382
5330
|
"preview_path": "primer/alpha/segmented_control/with_link_as_tag",
|
|
5383
5331
|
"name": "with_link_as_tag",
|