@primer/view-components 0.1.9-rc.ec495956 → 0.1.9
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 +6 -0
- package/app/components/primer/alpha/overlay.css +1 -1
- package/app/components/primer/alpha/overlay.css.json +1 -1
- package/app/components/primer/alpha/toggle_switch.css +1 -1
- package/app/components/primer/alpha/toggle_switch.css.json +11 -11
- package/app/components/primer/alpha/toggle_switch.d.ts +1 -1
- package/app/components/primer/alpha/toggle_switch.js +44 -42
- package/app/components/primer/focus_group.js +10 -6
- package/lib/primer/forms/toggle_switch_input.js +7 -2
- package/package.json +4 -3
- package/static/arguments.json +7 -1
- package/static/info_arch.json +312 -1
- package/static/previews.json +5 -0
|
@@ -31,6 +31,10 @@ function clickHandler(event) {
|
|
|
31
31
|
if (dialog instanceof ModalDialogElement) {
|
|
32
32
|
dialog.openButton = button;
|
|
33
33
|
dialog.show();
|
|
34
|
+
// A buttons default behaviour in some browsers it to send a pointer event
|
|
35
|
+
// If the behaviour is allowed through the dialog will be shown but then
|
|
36
|
+
// quickly hidden- as if it were never shown. This prevents that.
|
|
37
|
+
event.preventDefault();
|
|
34
38
|
return;
|
|
35
39
|
}
|
|
36
40
|
}
|
|
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
|
|
|
96
100
|
if (this.open)
|
|
97
101
|
return;
|
|
98
102
|
this.setAttribute('open', '');
|
|
103
|
+
this.setAttribute('aria-disabled', 'false');
|
|
99
104
|
(_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
|
|
100
105
|
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
|
|
101
106
|
document.body.style.overflow = 'hidden';
|
|
@@ -109,6 +114,7 @@ export class ModalDialogElement extends HTMLElement {
|
|
|
109
114
|
if (!this.open)
|
|
110
115
|
return;
|
|
111
116
|
this.removeAttribute('open');
|
|
117
|
+
this.setAttribute('aria-disabled', 'true');
|
|
112
118
|
(_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
|
|
113
119
|
document.body.style.paddingRight = '0';
|
|
114
120
|
document.body.style.overflow = 'initial';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
|
|
1
|
+
.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:popover-open){display:none}anchored-position{display:block}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-
|
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
|
@@ -12,17 +12,17 @@
|
|
|
12
12
|
".ToggleSwitch-track:active",
|
|
13
13
|
".ToggleSwitch-track:before",
|
|
14
14
|
".ToggleSwitch-track *",
|
|
15
|
-
".ToggleSwitch-track[aria-
|
|
16
|
-
".ToggleSwitch-track[aria-
|
|
17
|
-
".ToggleSwitch-track[aria-
|
|
18
|
-
".ToggleSwitch-track[aria-
|
|
19
|
-
".ToggleSwitch-track[aria-
|
|
20
|
-
".ToggleSwitch-track[aria-
|
|
21
|
-
".ToggleSwitch-track[aria-
|
|
22
|
-
".ToggleSwitch-track[
|
|
23
|
-
".ToggleSwitch-track[
|
|
24
|
-
".ToggleSwitch-track[
|
|
25
|
-
".ToggleSwitch-track[
|
|
15
|
+
".ToggleSwitch-track[aria-pressed=true][disabled]",
|
|
16
|
+
".ToggleSwitch-track[aria-pressed=true]",
|
|
17
|
+
".ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover",
|
|
18
|
+
".ToggleSwitch-track[aria-pressed=true]:not([disabled]):active",
|
|
19
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob",
|
|
20
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon",
|
|
21
|
+
".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon",
|
|
22
|
+
".ToggleSwitch-track[disabled]",
|
|
23
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
|
|
24
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
|
|
25
|
+
".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
|
|
26
26
|
".ToggleSwitch-icons",
|
|
27
27
|
".ToggleSwitch-lineIcon",
|
|
28
28
|
".ToggleSwitch-circleIcon",
|
|
@@ -26,46 +26,59 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
|
26
26
|
isRemote() {
|
|
27
27
|
return this.src != null;
|
|
28
28
|
}
|
|
29
|
-
toggle() {
|
|
29
|
+
async toggle() {
|
|
30
30
|
if (this.isDisabled()) {
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
if (this.isRemote()) {
|
|
34
|
-
this.setLoadingState();
|
|
35
|
-
this.submitForm();
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
33
|
+
if (!this.isRemote()) {
|
|
38
34
|
this.performToggle();
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
// toggle immediately to tell screen readers the switch was clicked
|
|
38
|
+
this.performToggle();
|
|
39
|
+
this.setLoadingState();
|
|
40
|
+
try {
|
|
41
|
+
await this.submitForm();
|
|
42
|
+
}
|
|
43
|
+
catch (error) {
|
|
44
|
+
if (error instanceof Error) {
|
|
45
|
+
// because we toggle immediately when the switch is clicked, toggle back to the
|
|
46
|
+
// old state on failure
|
|
47
|
+
this.setErrorState(error.message || 'An error occurred, please try again.');
|
|
48
|
+
this.performToggle();
|
|
49
|
+
}
|
|
50
|
+
return;
|
|
39
51
|
}
|
|
52
|
+
this.setSuccessState();
|
|
40
53
|
}
|
|
41
54
|
turnOn() {
|
|
42
55
|
if (this.isDisabled()) {
|
|
43
56
|
return;
|
|
44
57
|
}
|
|
45
|
-
this.switch.setAttribute('aria-
|
|
58
|
+
this.switch.setAttribute('aria-pressed', 'true');
|
|
46
59
|
this.classList.add('ToggleSwitch--checked');
|
|
47
60
|
}
|
|
48
61
|
turnOff() {
|
|
49
62
|
if (this.isDisabled()) {
|
|
50
63
|
return;
|
|
51
64
|
}
|
|
52
|
-
this.switch.setAttribute('aria-
|
|
65
|
+
this.switch.setAttribute('aria-pressed', 'false');
|
|
53
66
|
this.classList.remove('ToggleSwitch--checked');
|
|
54
67
|
}
|
|
55
68
|
isOn() {
|
|
56
|
-
return this.switch.getAttribute('aria-
|
|
69
|
+
return this.switch.getAttribute('aria-pressed') === 'true';
|
|
57
70
|
}
|
|
58
71
|
isOff() {
|
|
59
72
|
return !this.isOn();
|
|
60
73
|
}
|
|
61
74
|
isDisabled() {
|
|
62
|
-
return this.switch.getAttribute('
|
|
75
|
+
return this.switch.getAttribute('disabled') != null;
|
|
63
76
|
}
|
|
64
77
|
disable() {
|
|
65
|
-
this.switch.setAttribute('
|
|
78
|
+
this.switch.setAttribute('disabled', 'disabled');
|
|
66
79
|
}
|
|
67
80
|
enable() {
|
|
68
|
-
this.switch.
|
|
81
|
+
this.switch.removeAttribute('disabled');
|
|
69
82
|
}
|
|
70
83
|
performToggle() {
|
|
71
84
|
if (this.isOn()) {
|
|
@@ -76,9 +89,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
|
76
89
|
}
|
|
77
90
|
}
|
|
78
91
|
setLoadingState() {
|
|
79
|
-
this.disable();
|
|
80
92
|
this.errorIcon.setAttribute('hidden', 'hidden');
|
|
81
93
|
this.loadingSpinner.removeAttribute('hidden');
|
|
94
|
+
const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
|
|
95
|
+
this.dispatchEvent(event);
|
|
82
96
|
}
|
|
83
97
|
setSuccessState() {
|
|
84
98
|
const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
|
|
@@ -95,43 +109,31 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
|
95
109
|
this.errorIcon.removeAttribute('hidden');
|
|
96
110
|
}
|
|
97
111
|
this.loadingSpinner.setAttribute('hidden', 'hidden');
|
|
98
|
-
this.enable();
|
|
99
112
|
}
|
|
100
113
|
async submitForm() {
|
|
101
114
|
const body = new FormData();
|
|
102
115
|
if (this.csrf) {
|
|
103
116
|
body.append(this.csrfField, this.csrf);
|
|
104
117
|
}
|
|
105
|
-
body.append('value', this.isOn() ? '
|
|
118
|
+
body.append('value', this.isOn() ? '1' : '0');
|
|
119
|
+
if (!this.src)
|
|
120
|
+
throw new Error('invalid src');
|
|
121
|
+
let response;
|
|
106
122
|
try {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
'Requested-With': 'XMLHttpRequest'
|
|
116
|
-
},
|
|
117
|
-
body
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
catch (error) {
|
|
121
|
-
throw new Error('A network error occurred, please try again.');
|
|
122
|
-
}
|
|
123
|
-
if (response.ok) {
|
|
124
|
-
this.setSuccessState();
|
|
125
|
-
this.performToggle();
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
throw new Error(await response.text());
|
|
129
|
-
}
|
|
123
|
+
response = await fetch(this.src, {
|
|
124
|
+
credentials: 'same-origin',
|
|
125
|
+
method: 'POST',
|
|
126
|
+
headers: {
|
|
127
|
+
'Requested-With': 'XMLHttpRequest'
|
|
128
|
+
},
|
|
129
|
+
body
|
|
130
|
+
});
|
|
130
131
|
}
|
|
131
132
|
catch (error) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
133
|
+
throw new Error('A network error occurred, please try again.');
|
|
134
|
+
}
|
|
135
|
+
if (!response.ok) {
|
|
136
|
+
throw new Error(await response.text());
|
|
135
137
|
}
|
|
136
138
|
}
|
|
137
139
|
};
|
|
@@ -146,7 +148,7 @@ __decorate([
|
|
|
146
148
|
], ToggleSwitchElement.prototype, "errorIcon", void 0);
|
|
147
149
|
__decorate([
|
|
148
150
|
debounce(300)
|
|
149
|
-
], ToggleSwitchElement.prototype, "
|
|
151
|
+
], ToggleSwitchElement.prototype, "toggle", null);
|
|
150
152
|
ToggleSwitchElement = __decorate([
|
|
151
153
|
controller
|
|
152
154
|
], ToggleSwitchElement);
|
|
@@ -14,11 +14,11 @@ import '@oddbird/popover-polyfill';
|
|
|
14
14
|
const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
|
|
15
15
|
const popoverSelector = (() => {
|
|
16
16
|
try {
|
|
17
|
-
document.querySelector(':open');
|
|
18
|
-
return ':open';
|
|
17
|
+
document.querySelector(':popover-open');
|
|
18
|
+
return ':popover-open';
|
|
19
19
|
}
|
|
20
20
|
catch (_a) {
|
|
21
|
-
return '.\\:open';
|
|
21
|
+
return '.\\:popover-open';
|
|
22
22
|
}
|
|
23
23
|
})();
|
|
24
24
|
const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
|
|
@@ -80,28 +80,34 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
80
80
|
if (key === 'Up' || key === 'ArrowUp') {
|
|
81
81
|
if (direction === 'vertical' || direction === 'both') {
|
|
82
82
|
index -= index < 0 ? 0 : 1;
|
|
83
|
+
event.preventDefault();
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
else if (key === 'Down' || key === 'ArrowDown') {
|
|
86
87
|
if (direction === 'vertical' || direction === 'both') {
|
|
87
88
|
index += 1;
|
|
89
|
+
event.preventDefault();
|
|
88
90
|
}
|
|
89
91
|
}
|
|
90
92
|
else if (event.key === 'Left' || event.key === 'ArrowLeft') {
|
|
91
93
|
if (direction === 'horizontal' || direction === 'both') {
|
|
92
94
|
index -= 1;
|
|
95
|
+
event.preventDefault();
|
|
93
96
|
}
|
|
94
97
|
}
|
|
95
98
|
else if (event.key === 'Right' || event.key === 'ArrowRight') {
|
|
96
99
|
if (direction === 'horizontal' || direction === 'both') {
|
|
97
100
|
index += 1;
|
|
101
|
+
event.preventDefault();
|
|
98
102
|
}
|
|
99
103
|
}
|
|
100
104
|
else if (event.key === 'Home' || event.key === 'PageUp') {
|
|
101
105
|
index = 0;
|
|
106
|
+
event.preventDefault();
|
|
102
107
|
}
|
|
103
108
|
else if (event.key === 'End' || event.key === 'PageDown') {
|
|
104
109
|
index = items.length - 1;
|
|
110
|
+
event.preventDefault();
|
|
105
111
|
}
|
|
106
112
|
else if (this.mnemonics && printable.test(key)) {
|
|
107
113
|
const mnemonic = key.toLowerCase();
|
|
@@ -126,9 +132,7 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
126
132
|
if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
|
|
127
133
|
el.showPopover();
|
|
128
134
|
}
|
|
129
|
-
|
|
130
|
-
el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
|
|
131
|
-
}
|
|
135
|
+
el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
|
|
132
136
|
} while (el);
|
|
133
137
|
}
|
|
134
138
|
focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable custom-elements/expose-class-on-global */
|
|
1
2
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
3
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
4
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -8,11 +9,15 @@ import { controller, target } from '@github/catalyst';
|
|
|
8
9
|
let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
|
|
9
10
|
connectedCallback() {
|
|
10
11
|
this.addEventListener('toggleSwitchError', (event) => {
|
|
11
|
-
this.validationMessageElement.
|
|
12
|
+
this.validationMessageElement.textContent = event.detail;
|
|
12
13
|
this.validationElement.removeAttribute('hidden');
|
|
13
14
|
});
|
|
14
15
|
this.addEventListener('toggleSwitchSuccess', () => {
|
|
15
|
-
this.validationMessageElement.
|
|
16
|
+
this.validationMessageElement.textContent = '';
|
|
17
|
+
this.validationElement.setAttribute('hidden', 'hidden');
|
|
18
|
+
});
|
|
19
|
+
this.addEventListener('toggleSwitchLoading', () => {
|
|
20
|
+
this.validationMessageElement.textContent = '';
|
|
16
21
|
this.validationElement.setAttribute('hidden', 'hidden');
|
|
17
22
|
});
|
|
18
23
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.1.9
|
|
3
|
+
"version": "0.1.9",
|
|
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",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@github/relative-time-element": "^4.0.0",
|
|
56
56
|
"@github/tab-container-element": "^3.1.2",
|
|
57
57
|
"@oddbird/popover-polyfill": "^0.1.1",
|
|
58
|
-
"@primer/behaviors": "^1.
|
|
58
|
+
"@primer/behaviors": "^1.3.4"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@changesets/changelog-github": "^0.4.6",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@github/prettier-config": "0.0.4",
|
|
66
66
|
"@playwright/test": "^1.27.1",
|
|
67
67
|
"@primer/css": "21.0.1",
|
|
68
|
-
"@primer/primitives": "^7.11.
|
|
68
|
+
"@primer/primitives": "^7.11.10",
|
|
69
69
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
70
70
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
71
71
|
"@typescript-eslint/eslint-plugin": "^5.31.0",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"playwright": "^1.27.1",
|
|
83
83
|
"postcss": "^8.4.16",
|
|
84
84
|
"postcss-cli": "^10.0.0",
|
|
85
|
+
"postcss-custom-properties-fallback": "^1.0.2",
|
|
85
86
|
"postcss-import": "^14.1.0",
|
|
86
87
|
"postcss-mixins": "^9.0.3",
|
|
87
88
|
"postcss-preset-env": "^7.8.0",
|
package/static/arguments.json
CHANGED
|
@@ -1692,7 +1692,13 @@
|
|
|
1692
1692
|
"name": "subtitle",
|
|
1693
1693
|
"type": "String",
|
|
1694
1694
|
"default": "`nil`",
|
|
1695
|
-
"description": "Provides
|
|
1695
|
+
"description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
|
|
1696
|
+
},
|
|
1697
|
+
{
|
|
1698
|
+
"name": "overlay_id",
|
|
1699
|
+
"type": "String",
|
|
1700
|
+
"default": "`nil`",
|
|
1701
|
+
"description": "Provides the id of the overlay element so the close button can close it"
|
|
1696
1702
|
},
|
|
1697
1703
|
{
|
|
1698
1704
|
"name": "size",
|