primer_view_components 0.0.100 → 0.0.102
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +24 -0
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/action-list.pcss +16 -29
- data/app/components/primer/alpha/action_list/item.rb +13 -11
- data/app/components/primer/alpha/action_list.rb +0 -2
- data/app/components/primer/alpha/nav_list/item.rb +43 -9
- data/app/components/primer/alpha/nav_list/section.rb +0 -5
- data/app/components/primer/alpha/toggle_switch.d.ts +2 -1
- data/app/components/primer/alpha/toggle_switch.js +0 -1
- data/app/components/primer/alpha/toggle_switch.ts +1 -1
- data/app/components/primer/alpha/tool-tip-element.d.ts +23 -0
- data/app/components/primer/alpha/tool-tip-element.js +352 -0
- data/app/components/primer/beta/button.pcss +3 -0
- data/app/components/primer/clipboard_copy_component.d.ts +1 -0
- data/app/components/primer/clipboard_copy_component.js +43 -0
- data/app/components/primer/layout_component.html.erb +1 -2
- data/app/components/primer/layout_component.rb +2 -0
- data/lib/primer/deprecations.rb +0 -2
- data/lib/primer/forms/check_box.html.erb +1 -5
- data/lib/primer/forms/check_box.rb +6 -0
- data/lib/primer/forms/dsl/check_box_input.rb +3 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +0 -2
- data/lib/tasks/test.rake +21 -1
- data/previews/primer/alpha/underline_nav_preview.rb +1 -1
- data/static/arguments.json +6 -60
- data/static/audited_at.json +0 -2
- data/static/constants.json +0 -60
- data/static/statuses.json +0 -2
- metadata +11 -9
- data/app/components/primer/flex_component.rb +0 -146
- data/app/components/primer/flex_item_component.rb +0 -55
@@ -0,0 +1,352 @@
|
|
1
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
2
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
3
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
5
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
6
|
+
};
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
11
|
+
};
|
12
|
+
var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
|
13
|
+
import { getAnchoredPosition } from '@primer/behaviors';
|
14
|
+
const TOOLTIP_OPEN_CLASS = 'tooltip-open';
|
15
|
+
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
16
|
+
const DIRECTION_CLASSES = [
|
17
|
+
'tooltip-n',
|
18
|
+
'tooltip-s',
|
19
|
+
'tooltip-e',
|
20
|
+
'tooltip-w',
|
21
|
+
'tooltip-ne',
|
22
|
+
'tooltip-se',
|
23
|
+
'tooltip-nw',
|
24
|
+
'tooltip-sw'
|
25
|
+
];
|
26
|
+
class ToolTipElement extends HTMLElement {
|
27
|
+
constructor() {
|
28
|
+
super(...arguments);
|
29
|
+
_ToolTipElement_instances.add(this);
|
30
|
+
_ToolTipElement_abortController.set(this, void 0);
|
31
|
+
_ToolTipElement_align.set(this, 'center');
|
32
|
+
_ToolTipElement_side.set(this, 'outside-bottom');
|
33
|
+
_ToolTipElement_allowUpdatePosition.set(this, false);
|
34
|
+
}
|
35
|
+
styles() {
|
36
|
+
return `
|
37
|
+
:host {
|
38
|
+
position: absolute;
|
39
|
+
z-index: 1000000;
|
40
|
+
padding: .5em .75em;
|
41
|
+
font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
42
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
43
|
+
color: var(--color-fg-on-emphasis);
|
44
|
+
text-align: center;
|
45
|
+
text-decoration: none;
|
46
|
+
text-shadow: none;
|
47
|
+
text-transform: none;
|
48
|
+
letter-spacing: normal;
|
49
|
+
word-wrap: break-word;
|
50
|
+
white-space: pre;
|
51
|
+
background: var(--color-neutral-emphasis-plus);
|
52
|
+
border-radius: 6px;
|
53
|
+
opacity: 0;
|
54
|
+
max-width: 250px;
|
55
|
+
word-wrap: break-word;
|
56
|
+
white-space: normal;
|
57
|
+
width: max-content;
|
58
|
+
}
|
59
|
+
|
60
|
+
:host:before{
|
61
|
+
position: absolute;
|
62
|
+
z-index: 1000001;
|
63
|
+
color: var(--color-neutral-emphasis-plus);
|
64
|
+
content: "";
|
65
|
+
border: 6px solid transparent;
|
66
|
+
opacity: 0
|
67
|
+
}
|
68
|
+
|
69
|
+
@keyframes tooltip-appear {
|
70
|
+
from {
|
71
|
+
opacity: 0
|
72
|
+
}
|
73
|
+
to {
|
74
|
+
opacity: 1
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
:host:after{
|
79
|
+
position: absolute;
|
80
|
+
display: block;
|
81
|
+
right: 0;
|
82
|
+
left: 0;
|
83
|
+
height: 12px;
|
84
|
+
content: ""
|
85
|
+
}
|
86
|
+
|
87
|
+
:host(.${TOOLTIP_OPEN_CLASS}),
|
88
|
+
:host(.${TOOLTIP_OPEN_CLASS}):before {
|
89
|
+
animation-name: tooltip-appear;
|
90
|
+
animation-duration: .1s;
|
91
|
+
animation-fill-mode: forwards;
|
92
|
+
animation-timing-function: ease-in;
|
93
|
+
animation-delay: .4s
|
94
|
+
}
|
95
|
+
|
96
|
+
:host(.tooltip-s):before,
|
97
|
+
:host(.tooltip-n):before {
|
98
|
+
right: 50%;
|
99
|
+
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
100
|
+
}
|
101
|
+
|
102
|
+
:host(.tooltip-s):before,
|
103
|
+
:host(.tooltip-se):before,
|
104
|
+
:host(.tooltip-sw):before {
|
105
|
+
bottom: 100%;
|
106
|
+
border-bottom-color: var(--color-neutral-emphasis-plus)
|
107
|
+
}
|
108
|
+
|
109
|
+
:host(.tooltip-s):after,
|
110
|
+
:host(.tooltip-se):after,
|
111
|
+
:host(.tooltip-sw):after {
|
112
|
+
bottom: 100%
|
113
|
+
}
|
114
|
+
|
115
|
+
:host(.tooltip-n):before,
|
116
|
+
:host(.tooltip-ne):before,
|
117
|
+
:host(.tooltip-nw):before {
|
118
|
+
top: 100%;
|
119
|
+
border-top-color: var(--color-neutral-emphasis-plus)
|
120
|
+
}
|
121
|
+
|
122
|
+
:host(.tooltip-n):after,
|
123
|
+
:host(.tooltip-ne):after,
|
124
|
+
:host(.tooltip-nw):after {
|
125
|
+
top: 100%
|
126
|
+
}
|
127
|
+
|
128
|
+
:host(.tooltip-se):before,
|
129
|
+
:host(.tooltip-ne):before {
|
130
|
+
left: 0;
|
131
|
+
margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
132
|
+
}
|
133
|
+
|
134
|
+
:host(.tooltip-sw):before,
|
135
|
+
:host(.tooltip-nw):before {
|
136
|
+
right: 0;
|
137
|
+
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
138
|
+
}
|
139
|
+
|
140
|
+
:host(.tooltip-w):before {
|
141
|
+
top: 50%;
|
142
|
+
bottom: 50%;
|
143
|
+
left: 100%;
|
144
|
+
margin-top: -6px;
|
145
|
+
border-left-color: var(--color-neutral-emphasis-plus)
|
146
|
+
}
|
147
|
+
|
148
|
+
:host(.tooltip-e):before {
|
149
|
+
top: 50%;
|
150
|
+
right: 100%;
|
151
|
+
bottom: 50%;
|
152
|
+
margin-top: -6px;
|
153
|
+
border-right-color: var(--color-neutral-emphasis-plus)
|
154
|
+
}
|
155
|
+
`;
|
156
|
+
}
|
157
|
+
get htmlFor() {
|
158
|
+
return this.getAttribute('for') || '';
|
159
|
+
}
|
160
|
+
set htmlFor(value) {
|
161
|
+
this.setAttribute('for', value);
|
162
|
+
}
|
163
|
+
get type() {
|
164
|
+
const type = this.getAttribute('data-type');
|
165
|
+
return type === 'label' ? 'label' : 'description';
|
166
|
+
}
|
167
|
+
set type(value) {
|
168
|
+
this.setAttribute('data-type', value);
|
169
|
+
}
|
170
|
+
get direction() {
|
171
|
+
return (this.getAttribute('data-direction') || 's');
|
172
|
+
}
|
173
|
+
set direction(value) {
|
174
|
+
this.setAttribute('data-direction', value);
|
175
|
+
}
|
176
|
+
get control() {
|
177
|
+
return this.ownerDocument.getElementById(this.htmlFor);
|
178
|
+
}
|
179
|
+
connectedCallback() {
|
180
|
+
var _a;
|
181
|
+
if (!this.shadowRoot) {
|
182
|
+
const shadow = this.attachShadow({ mode: 'open' });
|
183
|
+
// eslint-disable-next-line github/no-inner-html
|
184
|
+
shadow.innerHTML = `
|
185
|
+
<style>
|
186
|
+
${this.styles()}
|
187
|
+
</style>
|
188
|
+
<slot></slot>
|
189
|
+
`;
|
190
|
+
}
|
191
|
+
this.hidden = true;
|
192
|
+
__classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
|
193
|
+
if (!this.id) {
|
194
|
+
this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
|
195
|
+
}
|
196
|
+
if (!this.control)
|
197
|
+
return;
|
198
|
+
this.setAttribute('role', 'tooltip');
|
199
|
+
(_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
200
|
+
__classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
|
201
|
+
const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
|
202
|
+
this.addEventListener('mouseleave', this, { signal });
|
203
|
+
this.control.addEventListener('mouseenter', this, { signal });
|
204
|
+
this.control.addEventListener('mouseleave', this, { signal });
|
205
|
+
this.control.addEventListener('focus', this, { signal });
|
206
|
+
this.control.addEventListener('blur', this, { signal });
|
207
|
+
this.ownerDocument.addEventListener('keydown', this, { signal });
|
208
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
|
209
|
+
}
|
210
|
+
disconnectedCallback() {
|
211
|
+
var _a;
|
212
|
+
(_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
213
|
+
}
|
214
|
+
handleEvent(event) {
|
215
|
+
if (!this.control)
|
216
|
+
return;
|
217
|
+
// Ensures that tooltip stays open when hovering between tooltip and element
|
218
|
+
// WCAG Success Criterion 1.4.13 Hoverable
|
219
|
+
if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
|
220
|
+
this.hidden = false;
|
221
|
+
}
|
222
|
+
else if (event.type === 'blur') {
|
223
|
+
this.hidden = true;
|
224
|
+
}
|
225
|
+
else if (event.type === 'mouseleave' &&
|
226
|
+
event.relatedTarget !== this.control &&
|
227
|
+
event.relatedTarget !== this) {
|
228
|
+
this.hidden = true;
|
229
|
+
}
|
230
|
+
else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
|
231
|
+
this.hidden = true;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
attributeChangedCallback(name) {
|
235
|
+
if (name === 'id' || name === 'data-type') {
|
236
|
+
if (!this.id || !this.control)
|
237
|
+
return;
|
238
|
+
if (this.type === 'label') {
|
239
|
+
this.control.setAttribute('aria-labelledby', this.id);
|
240
|
+
this.setAttribute('aria-hidden', 'true');
|
241
|
+
}
|
242
|
+
else {
|
243
|
+
let describedBy = this.control.getAttribute('aria-describedby');
|
244
|
+
describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
|
245
|
+
this.control.setAttribute('aria-describedby', describedBy);
|
246
|
+
}
|
247
|
+
}
|
248
|
+
else if (this.isConnected && name === 'hidden') {
|
249
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
|
250
|
+
}
|
251
|
+
else if (name === 'data-direction') {
|
252
|
+
this.classList.remove(...DIRECTION_CLASSES);
|
253
|
+
const direction = this.direction;
|
254
|
+
if (direction === 'n') {
|
255
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
|
256
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
257
|
+
}
|
258
|
+
else if (direction === 'ne') {
|
259
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
260
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
261
|
+
}
|
262
|
+
else if (direction === 'e') {
|
263
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
|
264
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
|
265
|
+
}
|
266
|
+
else if (direction === 'se') {
|
267
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
|
268
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
269
|
+
}
|
270
|
+
else if (direction === 's') {
|
271
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
|
272
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
273
|
+
}
|
274
|
+
else if (direction === 'sw') {
|
275
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
276
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
|
277
|
+
}
|
278
|
+
else if (direction === 'w') {
|
279
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
|
280
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
|
281
|
+
}
|
282
|
+
else if (direction === 'nw') {
|
283
|
+
__classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
|
284
|
+
__classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
|
285
|
+
}
|
286
|
+
}
|
287
|
+
}
|
288
|
+
}
|
289
|
+
_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
|
290
|
+
if (this.hidden) {
|
291
|
+
this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
|
292
|
+
}
|
293
|
+
else {
|
294
|
+
this.classList.add(TOOLTIP_OPEN_CLASS);
|
295
|
+
for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
|
296
|
+
if (tooltip !== this)
|
297
|
+
tooltip.hidden = true;
|
298
|
+
}
|
299
|
+
__classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
|
300
|
+
}
|
301
|
+
}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
|
302
|
+
if (!this.control)
|
303
|
+
return;
|
304
|
+
if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
|
305
|
+
return;
|
306
|
+
const TOOLTIP_OFFSET = 10;
|
307
|
+
this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
|
308
|
+
const position = getAnchoredPosition(this, this.control, {
|
309
|
+
side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
|
310
|
+
align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
|
311
|
+
anchorOffset: TOOLTIP_OFFSET
|
312
|
+
});
|
313
|
+
const anchorSide = position.anchorSide;
|
314
|
+
const align = position.anchorAlign;
|
315
|
+
this.style.top = `${position.top}px`;
|
316
|
+
this.style.left = `${position.left}px`;
|
317
|
+
let direction = 's';
|
318
|
+
if (anchorSide === 'outside-left') {
|
319
|
+
direction = 'w';
|
320
|
+
}
|
321
|
+
else if (anchorSide === 'outside-right') {
|
322
|
+
direction = 'e';
|
323
|
+
}
|
324
|
+
else if (anchorSide === 'outside-top') {
|
325
|
+
if (align === 'center') {
|
326
|
+
direction = 'n';
|
327
|
+
}
|
328
|
+
else if (align === 'start') {
|
329
|
+
direction = 'ne';
|
330
|
+
}
|
331
|
+
else {
|
332
|
+
direction = 'nw';
|
333
|
+
}
|
334
|
+
}
|
335
|
+
else {
|
336
|
+
if (align === 'center') {
|
337
|
+
direction = 's';
|
338
|
+
}
|
339
|
+
else if (align === 'start') {
|
340
|
+
direction = 'se';
|
341
|
+
}
|
342
|
+
else {
|
343
|
+
direction = 'sw';
|
344
|
+
}
|
345
|
+
}
|
346
|
+
this.classList.add(`tooltip-${direction}`);
|
347
|
+
};
|
348
|
+
ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
|
349
|
+
if (!window.customElements.get('tool-tip')) {
|
350
|
+
window.ToolTipElement = ToolTipElement;
|
351
|
+
window.customElements.define('tool-tip', ToolTipElement);
|
352
|
+
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/* CSS for Button */
|
2
|
+
|
2
3
|
/* temporary, pre primitives release */
|
3
4
|
:root {
|
4
5
|
--primer-duration-fast: 80ms;
|
@@ -79,6 +80,7 @@ summary.Button {
|
|
79
80
|
grid-template-columns: min-content minmax(0, auto) min-content;
|
80
81
|
align-items: center;
|
81
82
|
place-content: center;
|
83
|
+
|
82
84
|
/* padding-bottom: 1px; optical alignment for firefox */
|
83
85
|
|
84
86
|
& > :not(:last-child) {
|
@@ -324,6 +326,7 @@ summary.Button {
|
|
324
326
|
}
|
325
327
|
}
|
326
328
|
|
329
|
+
|
327
330
|
.Button--iconOnly {
|
328
331
|
display: grid;
|
329
332
|
place-content: center;
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@github/clipboard-copy-element';
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import '@github/clipboard-copy-element';
|
2
|
+
const CLIPBOARD_COPY_TIMER_DURATION = 2000;
|
3
|
+
function showSVG(svg) {
|
4
|
+
svg.style.display = 'inline-block';
|
5
|
+
}
|
6
|
+
function hideSVG(svg) {
|
7
|
+
svg.style.display = 'none';
|
8
|
+
}
|
9
|
+
// Toggle a copy button.
|
10
|
+
function showCopy(button) {
|
11
|
+
const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
|
12
|
+
if (!copyIcon || !checkIcon)
|
13
|
+
return;
|
14
|
+
showSVG(copyIcon);
|
15
|
+
hideSVG(checkIcon);
|
16
|
+
}
|
17
|
+
// Toggle a copy button.
|
18
|
+
function showCheck(button) {
|
19
|
+
const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
|
20
|
+
if (!copyIcon || !checkIcon)
|
21
|
+
return;
|
22
|
+
hideSVG(copyIcon);
|
23
|
+
showSVG(checkIcon);
|
24
|
+
}
|
25
|
+
const clipboardCopyElementTimers = new WeakMap();
|
26
|
+
document.addEventListener('clipboard-copy', function ({ target }) {
|
27
|
+
if (!(target instanceof HTMLElement))
|
28
|
+
return;
|
29
|
+
if (!target.hasAttribute('data-view-component'))
|
30
|
+
return;
|
31
|
+
const currentTimeout = clipboardCopyElementTimers.get(target);
|
32
|
+
if (currentTimeout) {
|
33
|
+
clearTimeout(currentTimeout);
|
34
|
+
clipboardCopyElementTimers.delete(target);
|
35
|
+
}
|
36
|
+
else {
|
37
|
+
showCheck(target);
|
38
|
+
}
|
39
|
+
clipboardCopyElementTimers.set(target, setTimeout(() => {
|
40
|
+
showCopy(target);
|
41
|
+
clipboardCopyElementTimers.delete(target);
|
42
|
+
}, CLIPBOARD_COPY_TIMER_DURATION));
|
43
|
+
});
|
@@ -61,6 +61,8 @@ module Primer
|
|
61
61
|
@system_arguments[:classes]
|
62
62
|
)
|
63
63
|
@system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
|
64
|
+
@system_arguments[:display] = :flex
|
65
|
+
@system_arguments[:tag] = :div
|
64
66
|
|
65
67
|
@sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
|
66
68
|
@main_col = MAX_COL - @sidebar_col
|
data/lib/primer/deprecations.rb
CHANGED
@@ -13,8 +13,6 @@ module Primer
|
|
13
13
|
"Primer::CounterComponent" => "Primer::Beta::Counter",
|
14
14
|
"Primer::DetailsComponent" => "Primer::Beta::Details",
|
15
15
|
"Primer::DropdownMenuComponent" => nil,
|
16
|
-
"Primer::FlexComponent" => nil,
|
17
|
-
"Primer::FlexItemComponent" => nil,
|
18
16
|
"Primer::HeadingComponent" => "Primer::Beta::Heading",
|
19
17
|
"Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
|
20
18
|
"Primer::IconButton" => "Primer::Beta::IconButton",
|
@@ -1,9 +1,5 @@
|
|
1
1
|
<div class="FormControl-checkbox-wrap">
|
2
|
-
|
3
|
-
<%= builder.check_box(@input.name, @input.input_arguments, checked_value, nil) %>
|
4
|
-
<% else %>
|
5
|
-
<%= builder.check_box(@input.name, @input.input_arguments) %>
|
6
|
-
<% end %>
|
2
|
+
<%= builder.check_box(@input.name, @input.input_arguments, checked_value, unchecked_value) %>
|
7
3
|
<span class="FormControl-checkbox-labelWrap">
|
8
4
|
<%= builder.label(@input.name, **@input.label_arguments) do %>
|
9
5
|
<%= @input.label %>
|
@@ -8,9 +8,9 @@ module Primer
|
|
8
8
|
DEFAULT_SCHEME = :boolean
|
9
9
|
SCHEMES = [DEFAULT_SCHEME, :array].freeze
|
10
10
|
|
11
|
-
attr_reader :name, :label, :value, :scheme
|
11
|
+
attr_reader :name, :label, :value, :unchecked_value, :scheme
|
12
12
|
|
13
|
-
def initialize(name:, label:, value: nil, scheme: DEFAULT_SCHEME, **system_arguments)
|
13
|
+
def initialize(name:, label:, value: nil, unchecked_value: nil, scheme: DEFAULT_SCHEME, **system_arguments)
|
14
14
|
raise ArgumentError, "Check box scheme must be one of #{SCHEMES.join(', ')}" unless SCHEMES.include?(scheme)
|
15
15
|
|
16
16
|
raise ArgumentError, "Check box needs an explicit value if scheme is array" if scheme == :array && value.nil?
|
@@ -18,6 +18,7 @@ module Primer
|
|
18
18
|
@name = name
|
19
19
|
@label = label
|
20
20
|
@value = value
|
21
|
+
@unchecked_value = unchecked_value
|
21
22
|
@scheme = scheme
|
22
23
|
|
23
24
|
super(**system_arguments)
|
data/lib/tasks/docs.rake
CHANGED
data/lib/tasks/test.rake
CHANGED
@@ -4,7 +4,7 @@ require "rake/testtask"
|
|
4
4
|
|
5
5
|
namespace :test do
|
6
6
|
desc "Run all tests"
|
7
|
-
task all: [:fast, :system]
|
7
|
+
task all: [:fast, :system, :accessibility, :bench]
|
8
8
|
|
9
9
|
Rake::TestTask.new(:single) do |t|
|
10
10
|
ENV["TZ"] = "Asia/Taipei"
|
@@ -22,6 +22,7 @@ namespace :test do
|
|
22
22
|
t.test_files = FileList[
|
23
23
|
"test/components/**/*_test.rb",
|
24
24
|
"test/lib/**/*_test.rb",
|
25
|
+
"test/forms/**/*_test.rb",
|
25
26
|
"test/primer/**/*_test.rb",
|
26
27
|
"test/linters/**/*_test.rb",
|
27
28
|
"test/rubocop/**/*_test.rb"
|
@@ -36,6 +37,25 @@ namespace :test do
|
|
36
37
|
t.test_files = FileList["test/system/**/*_test.rb"]
|
37
38
|
end
|
38
39
|
|
40
|
+
Rake::TestTask.new(:accessibility) do |t|
|
41
|
+
ENV["TZ"] = "Asia/Taipei"
|
42
|
+
|
43
|
+
t.libs << "test"
|
44
|
+
t.libs << "lib"
|
45
|
+
t.test_files = FileList["test/accessibility_test.rb"]
|
46
|
+
end
|
47
|
+
|
48
|
+
Rake::TestTask.new(:snapshots) do |t|
|
49
|
+
# Clear folder
|
50
|
+
FileUtils.rm_rf("test/snapshots")
|
51
|
+
|
52
|
+
ENV["TZ"] = "Asia/Taipei"
|
53
|
+
|
54
|
+
t.libs << "test"
|
55
|
+
t.libs << "lib"
|
56
|
+
t.test_files = FileList["test/snapshots_test.rb"]
|
57
|
+
end
|
58
|
+
|
39
59
|
Rake::TestTask.new(:bench) do |t|
|
40
60
|
t.libs << "test"
|
41
61
|
t.test_files = FileList["test/benchmarks/**/bench_*.rb"]
|
data/static/arguments.json
CHANGED
@@ -123,6 +123,12 @@
|
|
123
123
|
"default": "`nil`",
|
124
124
|
"description": "CSS classes that will be added to the label."
|
125
125
|
},
|
126
|
+
{
|
127
|
+
"name": "content_arguments",
|
128
|
+
"type": "Hash",
|
129
|
+
"default": "`{}`",
|
130
|
+
"description": "[System arguments](/system-arguments) used to construct the item's anchor or span tag."
|
131
|
+
},
|
126
132
|
{
|
127
133
|
"name": "truncate_label",
|
128
134
|
"type": "Boolean",
|
@@ -1553,66 +1559,6 @@
|
|
1553
1559
|
}
|
1554
1560
|
]
|
1555
1561
|
},
|
1556
|
-
{
|
1557
|
-
"component": "Flex",
|
1558
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb",
|
1559
|
-
"parameters": [
|
1560
|
-
{
|
1561
|
-
"name": "justify_content",
|
1562
|
-
"type": "Symbol",
|
1563
|
-
"default": "`JUSTIFY_CONTENT_DEFAULT`",
|
1564
|
-
"description": "Use this param to distribute space between and around flex items along the main axis of the container. One of `nil`, `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`."
|
1565
|
-
},
|
1566
|
-
{
|
1567
|
-
"name": "inline",
|
1568
|
-
"type": "Boolean",
|
1569
|
-
"default": "`false`",
|
1570
|
-
"description": "Defaults to false."
|
1571
|
-
},
|
1572
|
-
{
|
1573
|
-
"name": "flex_wrap",
|
1574
|
-
"type": "Boolean",
|
1575
|
-
"default": "`FLEX_WRAP_DEFAULT`",
|
1576
|
-
"description": "Defaults to nil."
|
1577
|
-
},
|
1578
|
-
{
|
1579
|
-
"name": "align_items",
|
1580
|
-
"type": "Symbol",
|
1581
|
-
"default": "`ALIGN_ITEMS_DEFAULT`",
|
1582
|
-
"description": "Use this param to align items on the cross axis. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
|
1583
|
-
},
|
1584
|
-
{
|
1585
|
-
"name": "direction",
|
1586
|
-
"type": "Symbol",
|
1587
|
-
"default": "`nil`",
|
1588
|
-
"description": "Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. One of `nil`, `:column`, `:column_reverse`, `:row`, or `:row_reverse`."
|
1589
|
-
},
|
1590
|
-
{
|
1591
|
-
"name": "system_arguments",
|
1592
|
-
"type": "Hash",
|
1593
|
-
"default": "N/A",
|
1594
|
-
"description": "[System arguments](/system-arguments)"
|
1595
|
-
}
|
1596
|
-
]
|
1597
|
-
},
|
1598
|
-
{
|
1599
|
-
"component": "FlexItem",
|
1600
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb",
|
1601
|
-
"parameters": [
|
1602
|
-
{
|
1603
|
-
"name": "flex_auto",
|
1604
|
-
"type": "Boolean",
|
1605
|
-
"default": "`false`",
|
1606
|
-
"description": "Fills available space and auto-sizes based on the content. Defaults to false"
|
1607
|
-
},
|
1608
|
-
{
|
1609
|
-
"name": "system_arguments",
|
1610
|
-
"type": "Hash",
|
1611
|
-
"default": "N/A",
|
1612
|
-
"description": "[System arguments](/system-arguments)"
|
1613
|
-
}
|
1614
|
-
]
|
1615
|
-
},
|
1616
1562
|
{
|
1617
1563
|
"component": "HellipButton",
|
1618
1564
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb",
|
data/static/audited_at.json
CHANGED
@@ -60,8 +60,6 @@
|
|
60
60
|
"Primer::Dropdown::Menu": "",
|
61
61
|
"Primer::Dropdown::Menu::Item": "",
|
62
62
|
"Primer::DropdownMenuComponent": "",
|
63
|
-
"Primer::FlexComponent": "",
|
64
|
-
"Primer::FlexItemComponent": "",
|
65
63
|
"Primer::HeadingComponent": "",
|
66
64
|
"Primer::HellipButton": "",
|
67
65
|
"Primer::HiddenTextExpander": "",
|