@primer/view-components 0.1.8 → 0.1.9-rc.4a184d98
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/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/lib/primer/forms/toggle_switch_input.js +7 -2
- package/package.json +1 -1
|
@@ -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);
|
|
@@ -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