@primer/view-components 0.12.0 → 0.12.1-rc.65690ec4
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/modal_dialog.js +9 -12
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/segmented_control.css.json +14 -13
- package/package.json +1 -1
- package/static/classes.json +12 -0
|
@@ -38,19 +38,16 @@ function clickHandler(event) {
|
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
|
|
42
|
-
const topLevelDialog = overlayStack[overlayStack.length - 1];
|
|
43
|
-
if (!topLevelDialog)
|
|
41
|
+
if (!overlayStack.length)
|
|
44
42
|
return;
|
|
45
|
-
dialogId = button.getAttribute('data-close-dialog-id');
|
|
46
|
-
if (dialogId
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
topLevelDialog.close(true);
|
|
43
|
+
dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
|
|
44
|
+
if (dialogId) {
|
|
45
|
+
const dialog = document.getElementById(dialogId);
|
|
46
|
+
if (dialog instanceof ModalDialogElement) {
|
|
47
|
+
const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId);
|
|
48
|
+
overlayStack.splice(dialogIndex, 1);
|
|
49
|
+
dialog.close(button.hasAttribute('data-submit-dialog-id'));
|
|
50
|
+
}
|
|
54
51
|
}
|
|
55
52
|
}
|
|
56
53
|
function keydownHandler(event) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;
|
|
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--large,.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--large .SegmentedControl-item{height:var(--control-large-size,2.5rem)}.SegmentedControl--large .SegmentedControl-item .Button{padding-inline:calc(var(--control-large-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding))}.SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-large-size,2.5rem)}.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-withTooltip{width:100%}.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,20 @@
|
|
|
2
2
|
"name": "alpha/segmented_control",
|
|
3
3
|
"selectors": [
|
|
4
4
|
".SegmentedControl",
|
|
5
|
+
".SegmentedControl--iconOnly .Button--iconOnly.Button--large",
|
|
6
|
+
".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
|
|
7
|
+
".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
|
|
8
|
+
".SegmentedControl--small",
|
|
9
|
+
".SegmentedControl--small .SegmentedControl-item",
|
|
10
|
+
".SegmentedControl--small .SegmentedControl-item .Button",
|
|
11
|
+
".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
|
|
12
|
+
".SegmentedControl--medium .SegmentedControl-item",
|
|
13
|
+
".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
|
|
14
|
+
".SegmentedControl--large .SegmentedControl-item",
|
|
15
|
+
".SegmentedControl--large .SegmentedControl-item .Button",
|
|
16
|
+
".SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item",
|
|
5
17
|
".SegmentedControl-item",
|
|
18
|
+
".SegmentedControl-item .Button-withTooltip",
|
|
6
19
|
".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
|
|
7
20
|
".SegmentedControl-item .Button--invisible:active:not(:disabled)",
|
|
8
21
|
".SegmentedControl-item.SegmentedControl-item--selected",
|
|
@@ -14,20 +27,8 @@
|
|
|
14
27
|
".SegmentedControl-item:not(:first-child):before",
|
|
15
28
|
".SegmentedControl-item .Button",
|
|
16
29
|
".SegmentedControl-item .Button:focus-visible",
|
|
17
|
-
".SegmentedControl-item .Button--small",
|
|
18
|
-
".SegmentedControl-item .Button--small.Button--iconOnly",
|
|
19
|
-
".SegmentedControl-item .Button--small.Button--iconOnly:before",
|
|
20
|
-
".SegmentedControl-item .Button--medium",
|
|
21
|
-
".SegmentedControl-item .Button--medium.Button--iconOnly",
|
|
22
|
-
".SegmentedControl-item .Button--medium.Button--iconOnly:before",
|
|
23
|
-
".SegmentedControl-item .Button--large",
|
|
24
|
-
".SegmentedControl-item .Button--large.Button--iconOnly",
|
|
25
|
-
".SegmentedControl-item .Button--large.Button--iconOnly:before",
|
|
26
|
-
".SegmentedControl-item .Button--iconOnly",
|
|
27
30
|
".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
|
|
28
31
|
".SegmentedControl--fullWidth",
|
|
29
|
-
".SegmentedControl--fullWidth .SegmentedControl-item"
|
|
30
|
-
".SegmentedControl--fullWidth .Button--iconOnly",
|
|
31
|
-
".SegmentedControl--fullWidth .Button-withTooltip"
|
|
32
|
+
".SegmentedControl--fullWidth .SegmentedControl-item"
|
|
32
33
|
]
|
|
33
34
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1-rc.65690ec4",
|
|
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/classes.json
CHANGED
|
@@ -477,6 +477,18 @@
|
|
|
477
477
|
"SegmentedControl--fullWidth": [
|
|
478
478
|
"Primer::Alpha::SegmentedControl"
|
|
479
479
|
],
|
|
480
|
+
"SegmentedControl--iconOnly": [
|
|
481
|
+
"Primer::Alpha::SegmentedControl"
|
|
482
|
+
],
|
|
483
|
+
"SegmentedControl--large": [
|
|
484
|
+
"Primer::Alpha::SegmentedControl"
|
|
485
|
+
],
|
|
486
|
+
"SegmentedControl--medium": [
|
|
487
|
+
"Primer::Alpha::SegmentedControl"
|
|
488
|
+
],
|
|
489
|
+
"SegmentedControl--small": [
|
|
490
|
+
"Primer::Alpha::SegmentedControl"
|
|
491
|
+
],
|
|
480
492
|
"SegmentedControl-item": [
|
|
481
493
|
"Primer::Alpha::SegmentedControl"
|
|
482
494
|
],
|