@primer/view-components 0.1.9-rc.ec495956 → 0.1.9-rc.ed6f20bc
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 +2 -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 +6 -0
- package/lib/primer/forms/toggle_switch_input.js +7 -2
- package/package.json +3 -2
- package/static/arguments.json +7 -1
- package/static/info_arch.json +12 -1
- package/static/previews.json +5 -0
|
@@ -96,6 +96,7 @@ export class ModalDialogElement extends HTMLElement {
|
|
|
96
96
|
if (this.open)
|
|
97
97
|
return;
|
|
98
98
|
this.setAttribute('open', '');
|
|
99
|
+
this.setAttribute('aria-disabled', 'false');
|
|
99
100
|
(_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
|
|
100
101
|
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
|
|
101
102
|
document.body.style.overflow = 'hidden';
|
|
@@ -109,6 +110,7 @@ export class ModalDialogElement extends HTMLElement {
|
|
|
109
110
|
if (!this.open)
|
|
110
111
|
return;
|
|
111
112
|
this.removeAttribute('open');
|
|
113
|
+
this.setAttribute('aria-disabled', 'true');
|
|
112
114
|
(_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
|
|
113
115
|
document.body.style.paddingRight = '0';
|
|
114
116
|
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);
|
|
@@ -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();
|
|
@@ -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-rc.
|
|
3
|
+
"version": "0.1.9-rc.ed6f20bc",
|
|
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",
|
|
@@ -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",
|
package/static/info_arch.json
CHANGED
|
@@ -3645,6 +3645,11 @@
|
|
|
3645
3645
|
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
|
|
3646
3646
|
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
|
|
3647
3647
|
"name": "middle_of_page"
|
|
3648
|
+
},
|
|
3649
|
+
{
|
|
3650
|
+
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page_with_relative_container",
|
|
3651
|
+
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page_with_relative_container",
|
|
3652
|
+
"name": "middle_of_page_with_relative_container"
|
|
3648
3653
|
}
|
|
3649
3654
|
],
|
|
3650
3655
|
"subcomponents": [
|
|
@@ -3668,7 +3673,13 @@
|
|
|
3668
3673
|
"name": "subtitle",
|
|
3669
3674
|
"type": "String",
|
|
3670
3675
|
"default": "`nil`",
|
|
3671
|
-
"description": "Provides
|
|
3676
|
+
"description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
|
|
3677
|
+
},
|
|
3678
|
+
{
|
|
3679
|
+
"name": "overlay_id",
|
|
3680
|
+
"type": "String",
|
|
3681
|
+
"default": "`nil`",
|
|
3682
|
+
"description": "Provides the id of the overlay element so the close button can close it"
|
|
3672
3683
|
},
|
|
3673
3684
|
{
|
|
3674
3685
|
"name": "size",
|
package/static/previews.json
CHANGED
|
@@ -1411,6 +1411,11 @@
|
|
|
1411
1411
|
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
|
|
1412
1412
|
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
|
|
1413
1413
|
"name": "middle_of_page"
|
|
1414
|
+
},
|
|
1415
|
+
{
|
|
1416
|
+
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page_with_relative_container",
|
|
1417
|
+
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page_with_relative_container",
|
|
1418
|
+
"name": "middle_of_page_with_relative_container"
|
|
1414
1419
|
}
|
|
1415
1420
|
]
|
|
1416
1421
|
},
|