@openproject/primer-view-components 0.12.1 → 0.13.0
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/app/components/primer/alpha/tool_tip.d.ts +1 -0
- 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/action_bar_element.js +9 -4
- package/app/components/primer/alpha/action_menu/action_menu_element.js +160 -85
- package/app/components/primer/alpha/modal_dialog.js +10 -13
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/segmented_control.css.json +14 -13
- package/app/components/primer/alpha/text_field.css +1 -1
- package/app/components/primer/alpha/tool_tip.d.ts +1 -0
- package/app/components/primer/alpha/tool_tip.js +26 -93
- package/app/components/primer/beta/button.css +1 -1
- package/app/components/primer/focus_group.js +28 -3
- package/package.json +6 -6
- package/static/arguments.json +18 -1
- package/static/classes.json +12 -0
- package/static/constants.json +12 -1
- package/static/info_arch.json +137 -161
- package/static/previews.json +91 -172
|
@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
9
9
|
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");
|
|
10
10
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
11
11
|
};
|
|
12
|
-
var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
|
|
12
|
+
var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
|
|
13
13
|
import '@oddbird/popover-polyfill';
|
|
14
14
|
import { getAnchoredPosition } from '@primer/behaviors';
|
|
15
15
|
const isPopoverOpen = (() => {
|
|
@@ -32,9 +32,8 @@ const isPopoverOpen = (() => {
|
|
|
32
32
|
}
|
|
33
33
|
return (el) => (selector ? el.matches(selector) : setSelector(el));
|
|
34
34
|
})();
|
|
35
|
-
const TOOLTIP_ARROW_EDGE_OFFSET = 6;
|
|
36
35
|
const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
|
|
37
|
-
const TOOLTIP_OFFSET =
|
|
36
|
+
const TOOLTIP_OFFSET = 4;
|
|
38
37
|
const DIRECTION_CLASSES = [
|
|
39
38
|
'tooltip-n',
|
|
40
39
|
'tooltip-s',
|
|
@@ -60,6 +59,15 @@ function closeOpenTooltips(except) {
|
|
|
60
59
|
function focusOutListener() {
|
|
61
60
|
closeOpenTooltips();
|
|
62
61
|
}
|
|
62
|
+
function focusInListener(event) {
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
for (const tooltip of openTooltips) {
|
|
65
|
+
if (isPopoverOpen(tooltip) && tooltip.showReason === 'focus' && tooltip.control !== event.target) {
|
|
66
|
+
tooltip.hidePopover();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, 0);
|
|
70
|
+
}
|
|
63
71
|
const tooltips = new Set();
|
|
64
72
|
const openTooltips = new Set();
|
|
65
73
|
class ToolTipElement extends HTMLElement {
|
|
@@ -70,14 +78,14 @@ class ToolTipElement extends HTMLElement {
|
|
|
70
78
|
_ToolTipElement_align.set(this, 'center');
|
|
71
79
|
_ToolTipElement_side.set(this, 'outside-bottom');
|
|
72
80
|
_ToolTipElement_allowUpdatePosition.set(this, false);
|
|
81
|
+
_ToolTipElement_showReason.set(this, 'mouse');
|
|
73
82
|
}
|
|
74
83
|
styles() {
|
|
75
84
|
return `
|
|
76
85
|
:host {
|
|
77
|
-
padding:
|
|
78
|
-
font:
|
|
79
|
-
-
|
|
80
|
-
color: var(--color-fg-on-emphasis) !important;
|
|
86
|
+
padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
|
|
87
|
+
font: var(--text-body-shorthand-small);
|
|
88
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
|
|
81
89
|
text-align: center;
|
|
82
90
|
text-decoration: none;
|
|
83
91
|
text-shadow: none;
|
|
@@ -85,25 +93,17 @@ class ToolTipElement extends HTMLElement {
|
|
|
85
93
|
letter-spacing: normal;
|
|
86
94
|
word-wrap: break-word;
|
|
87
95
|
white-space: pre;
|
|
88
|
-
background: var(--color-neutral-emphasis-plus) !important;
|
|
89
|
-
border-radius:
|
|
96
|
+
background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
|
|
97
|
+
border-radius: var(--borderRadius-medium);
|
|
90
98
|
border: 0 !important;
|
|
91
99
|
opacity: 0;
|
|
92
|
-
max-width:
|
|
100
|
+
max-width: var(--overlay-width-small);
|
|
93
101
|
word-wrap: break-word;
|
|
94
102
|
white-space: normal;
|
|
95
103
|
width: max-content !important;
|
|
96
104
|
inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
|
|
97
105
|
overflow: visible !important;
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
:host:before{
|
|
101
|
-
position: absolute;
|
|
102
|
-
z-index: 1000001;
|
|
103
|
-
color: var(--color-neutral-emphasis-plus);
|
|
104
|
-
content: "";
|
|
105
|
-
border: 6px solid transparent;
|
|
106
|
-
opacity: 0
|
|
106
|
+
text-wrap: balance;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
@keyframes tooltip-appear {
|
|
@@ -115,94 +115,25 @@ class ToolTipElement extends HTMLElement {
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
:host:after{
|
|
119
|
-
position: absolute;
|
|
120
|
-
display: block;
|
|
121
|
-
right: 0;
|
|
122
|
-
left: 0;
|
|
123
|
-
height: 12px;
|
|
124
|
-
content: ""
|
|
125
|
-
}
|
|
126
|
-
|
|
127
118
|
:host(:popover-open),
|
|
128
119
|
:host(:popover-open):before {
|
|
129
120
|
animation-name: tooltip-appear;
|
|
130
121
|
animation-duration: .1s;
|
|
131
122
|
animation-fill-mode: forwards;
|
|
132
123
|
animation-timing-function: ease-in;
|
|
133
|
-
animation-delay: .4s
|
|
134
124
|
}
|
|
135
125
|
|
|
136
|
-
:host(.\\:popover-open)
|
|
137
|
-
:host(.\\:popover-open):before {
|
|
126
|
+
:host(.\\:popover-open) {
|
|
138
127
|
animation-name: tooltip-appear;
|
|
139
128
|
animation-duration: .1s;
|
|
140
129
|
animation-fill-mode: forwards;
|
|
141
130
|
animation-timing-function: ease-in;
|
|
142
|
-
animation-delay: .4s
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
:host(.tooltip-s):before,
|
|
146
|
-
:host(.tooltip-n):before {
|
|
147
|
-
right: 50%;
|
|
148
|
-
margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
:host(.tooltip-s):before,
|
|
152
|
-
:host(.tooltip-se):before,
|
|
153
|
-
:host(.tooltip-sw):before {
|
|
154
|
-
bottom: 100%;
|
|
155
|
-
border-bottom-color: var(--color-neutral-emphasis-plus)
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
:host(.tooltip-s):after,
|
|
159
|
-
:host(.tooltip-se):after,
|
|
160
|
-
:host(.tooltip-sw):after {
|
|
161
|
-
bottom: 100%
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
:host(.tooltip-n):before,
|
|
165
|
-
:host(.tooltip-ne):before,
|
|
166
|
-
:host(.tooltip-nw):before {
|
|
167
|
-
top: 100%;
|
|
168
|
-
border-top-color: var(--color-neutral-emphasis-plus)
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
:host(.tooltip-n):after,
|
|
172
|
-
:host(.tooltip-ne):after,
|
|
173
|
-
:host(.tooltip-nw):after {
|
|
174
|
-
top: 100%
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
:host(.tooltip-se):before,
|
|
178
|
-
:host(.tooltip-ne):before {
|
|
179
|
-
left: 0;
|
|
180
|
-
margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
:host(.tooltip-sw):before,
|
|
184
|
-
:host(.tooltip-nw):before {
|
|
185
|
-
right: 0;
|
|
186
|
-
margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
:host(.tooltip-w):before {
|
|
190
|
-
top: 50%;
|
|
191
|
-
bottom: 50%;
|
|
192
|
-
left: 100%;
|
|
193
|
-
margin-top: -6px;
|
|
194
|
-
border-left-color: var(--color-neutral-emphasis-plus)
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
:host(.tooltip-e):before {
|
|
198
|
-
top: 50%;
|
|
199
|
-
right: 100%;
|
|
200
|
-
bottom: 50%;
|
|
201
|
-
margin-top: -6px;
|
|
202
|
-
border-right-color: var(--color-neutral-emphasis-plus)
|
|
203
131
|
}
|
|
204
132
|
`;
|
|
205
133
|
}
|
|
134
|
+
get showReason() {
|
|
135
|
+
return __classPrivateFieldGet(this, _ToolTipElement_showReason, "f");
|
|
136
|
+
}
|
|
206
137
|
get htmlFor() {
|
|
207
138
|
return this.getAttribute('for') || '';
|
|
208
139
|
}
|
|
@@ -269,6 +200,7 @@ class ToolTipElement extends HTMLElement {
|
|
|
269
200
|
signal
|
|
270
201
|
});
|
|
271
202
|
this.ownerDocument.addEventListener('focusout', focusOutListener);
|
|
203
|
+
this.ownerDocument.addEventListener('focusin', focusInListener);
|
|
272
204
|
this.ownerDocument.addEventListener('keydown', this, { signal });
|
|
273
205
|
}
|
|
274
206
|
disconnectedCallback() {
|
|
@@ -293,6 +225,7 @@ class ToolTipElement extends HTMLElement {
|
|
|
293
225
|
const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
|
|
294
226
|
await Promise.resolve();
|
|
295
227
|
if (!showing && shouldShow && !isPopoverOpen(this)) {
|
|
228
|
+
__classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
|
|
296
229
|
this.showPopover();
|
|
297
230
|
}
|
|
298
231
|
else if (showing && shouldHide && isPopoverOpen(this)) {
|
|
@@ -313,7 +246,7 @@ class ToolTipElement extends HTMLElement {
|
|
|
313
246
|
}
|
|
314
247
|
}
|
|
315
248
|
}
|
|
316
|
-
_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(isOpen) {
|
|
249
|
+
_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
|
|
317
250
|
if (isOpen) {
|
|
318
251
|
openTooltips.add(this);
|
|
319
252
|
this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
|
|
1
|
+
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
|
|
@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
9
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
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
|
-
var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
|
|
12
|
+
var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
|
|
13
13
|
import '@oddbird/popover-polyfill';
|
|
14
14
|
const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
|
|
15
15
|
const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
|
|
@@ -19,6 +19,7 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
_FocusGroupElement_instances.add(this);
|
|
22
|
+
_FocusGroupElement_retainSignal.set(this, null);
|
|
22
23
|
_FocusGroupElement_abortController.set(this, null);
|
|
23
24
|
}
|
|
24
25
|
get nowrap() {
|
|
@@ -57,11 +58,35 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
57
58
|
(_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
|
58
59
|
}
|
|
59
60
|
handleEvent(event) {
|
|
61
|
+
var _a;
|
|
60
62
|
const { direction, nowrap } = this;
|
|
61
63
|
if (event.type === 'focusin') {
|
|
62
64
|
if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
|
|
65
|
+
(_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
|
66
|
+
const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
|
|
63
67
|
for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
|
|
64
68
|
item.setAttribute('tabindex', item === event.target ? '0' : '-1');
|
|
69
|
+
const popover = event.target.closest('[popover]');
|
|
70
|
+
if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
|
|
71
|
+
popover.addEventListener('toggle', (toggleEvent) => {
|
|
72
|
+
var _a, _b;
|
|
73
|
+
if (!(toggleEvent.target instanceof Element))
|
|
74
|
+
return;
|
|
75
|
+
if (toggleEvent.newState === 'closed') {
|
|
76
|
+
(_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
|
77
|
+
item.setAttribute('tabindex', '-1');
|
|
78
|
+
if (popover.id) {
|
|
79
|
+
const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
|
|
80
|
+
if (invoker) {
|
|
81
|
+
invoker.setAttribute('tabindex', '0');
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
(_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}, { signal });
|
|
89
|
+
}
|
|
65
90
|
}
|
|
66
91
|
}
|
|
67
92
|
}
|
|
@@ -121,7 +146,7 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
121
146
|
let el = focusEl;
|
|
122
147
|
do {
|
|
123
148
|
el = el.closest(`[popover]:not(:popover-open)`);
|
|
124
|
-
if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
|
|
149
|
+
if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
|
|
125
150
|
el.showPopover();
|
|
126
151
|
}
|
|
127
152
|
el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
|
|
@@ -131,7 +156,7 @@ export default class FocusGroupElement extends HTMLElement {
|
|
|
131
156
|
}
|
|
132
157
|
}
|
|
133
158
|
}
|
|
134
|
-
_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
|
|
159
|
+
_FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
|
|
135
160
|
return this.querySelectorAll(menuItemSelector);
|
|
136
161
|
};
|
|
137
162
|
if (!customElements.get('focus-group')) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openproject/primer-view-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "ViewComponents of the Primer Design System for OpenProject",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@github/auto-check-element": "^5.2.0",
|
|
46
46
|
"@github/auto-complete-element": "^3.3.4",
|
|
47
47
|
"@github/catalyst": "^1.6.0",
|
|
48
|
-
"@github/clipboard-copy-element": "^1.
|
|
48
|
+
"@github/clipboard-copy-element": "^1.3.0",
|
|
49
49
|
"@github/details-menu-element": "^1.0.12",
|
|
50
50
|
"@github/image-crop-element": "^5.0.0",
|
|
51
51
|
"@github/include-fragment-element": "^6.1.1",
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@changesets/changelog-github": "^0.4.6",
|
|
59
|
+
"@changesets/cli": "^2.24.1",
|
|
59
60
|
"@github/axe-github": "^0.5.0",
|
|
60
61
|
"@github/browserslist-config": "^1.0.0",
|
|
61
62
|
"@github/markdownlint-github": "^0.2.2",
|
|
@@ -70,12 +71,12 @@
|
|
|
70
71
|
"@typescript-eslint/parser": "^5.31.0",
|
|
71
72
|
"axe-core": "^4.7.1",
|
|
72
73
|
"chokidar-cli": "^3.0.0",
|
|
73
|
-
"cssnano": "^
|
|
74
|
+
"cssnano": "^6.0.1",
|
|
74
75
|
"eslint": "^8.23.1",
|
|
75
76
|
"eslint-plugin-custom-elements": "^0.0.6",
|
|
76
|
-
"eslint-plugin-github": "^4.
|
|
77
|
+
"eslint-plugin-github": "^4.9.2",
|
|
77
78
|
"eslint-plugin-prettier": "^4.2.1",
|
|
78
|
-
"markdownlint-cli2": "^0.
|
|
79
|
+
"markdownlint-cli2": "^0.10.0",
|
|
79
80
|
"mocha": "^10.0.0",
|
|
80
81
|
"playwright": "^1.35.1",
|
|
81
82
|
"postcss": "^8.4.16",
|
|
@@ -85,7 +86,6 @@
|
|
|
85
86
|
"postcss-mixins": "^9.0.3",
|
|
86
87
|
"postcss-preset-env": "^7.8.0",
|
|
87
88
|
"prettier": "2.7.1",
|
|
88
|
-
"primer-changesets-cli": "2.2.0",
|
|
89
89
|
"rollup": "^2.77.1",
|
|
90
90
|
"rollup-plugin-terser": "^7.0.2",
|
|
91
91
|
"stylelint": "^14.13.0",
|
package/static/arguments.json
CHANGED
|
@@ -46,7 +46,18 @@
|
|
|
46
46
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
|
|
47
47
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
|
|
48
48
|
"parameters": [
|
|
49
|
-
|
|
49
|
+
{
|
|
50
|
+
"name": "item_content",
|
|
51
|
+
"type": "String",
|
|
52
|
+
"default": "N/A",
|
|
53
|
+
"description": "The content to render inside the item."
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "item_arguments",
|
|
57
|
+
"type": "Hash",
|
|
58
|
+
"default": "N/A",
|
|
59
|
+
"description": "[System arguments](/system-arguments)"
|
|
60
|
+
}
|
|
50
61
|
]
|
|
51
62
|
},
|
|
52
63
|
{
|
|
@@ -3117,6 +3128,12 @@
|
|
|
3117
3128
|
"default": "`false`",
|
|
3118
3129
|
"description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
|
|
3119
3130
|
},
|
|
3131
|
+
{
|
|
3132
|
+
"name": "inactive",
|
|
3133
|
+
"type": "Boolean",
|
|
3134
|
+
"default": "`false`",
|
|
3135
|
+
"description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
|
|
3136
|
+
},
|
|
3120
3137
|
{
|
|
3121
3138
|
"name": "system_arguments",
|
|
3122
3139
|
"type": "Hash",
|
package/static/classes.json
CHANGED
|
@@ -507,6 +507,18 @@
|
|
|
507
507
|
"SegmentedControl--fullWidth": [
|
|
508
508
|
"Primer::Alpha::SegmentedControl"
|
|
509
509
|
],
|
|
510
|
+
"SegmentedControl--iconOnly": [
|
|
511
|
+
"Primer::Alpha::SegmentedControl"
|
|
512
|
+
],
|
|
513
|
+
"SegmentedControl--large": [
|
|
514
|
+
"Primer::Alpha::SegmentedControl"
|
|
515
|
+
],
|
|
516
|
+
"SegmentedControl--medium": [
|
|
517
|
+
"Primer::Alpha::SegmentedControl"
|
|
518
|
+
],
|
|
519
|
+
"SegmentedControl--small": [
|
|
520
|
+
"Primer::Alpha::SegmentedControl"
|
|
521
|
+
],
|
|
510
522
|
"SegmentedControl-item": [
|
|
511
523
|
"Primer::Alpha::SegmentedControl"
|
|
512
524
|
],
|
package/static/constants.json
CHANGED
|
@@ -544,9 +544,20 @@
|
|
|
544
544
|
"Primer::Alpha::RadioButtonGroup": {
|
|
545
545
|
},
|
|
546
546
|
"Primer::Alpha::SegmentedControl": {
|
|
547
|
+
"DEFAULT_SIZE": "medium",
|
|
547
548
|
"FULL_WIDTH_DEFAULT": false,
|
|
548
549
|
"HIDE_LABELS_DEFAULT": false,
|
|
549
|
-
"Item": "Primer::Alpha::SegmentedControl::Item"
|
|
550
|
+
"Item": "Primer::Alpha::SegmentedControl::Item",
|
|
551
|
+
"SIZE_MAPPINGS": {
|
|
552
|
+
"small": "SegmentedControl--small",
|
|
553
|
+
"medium": "SegmentedControl--medium",
|
|
554
|
+
"large": "SegmentedControl--large"
|
|
555
|
+
},
|
|
556
|
+
"SIZE_OPTIONS": [
|
|
557
|
+
"small",
|
|
558
|
+
"medium",
|
|
559
|
+
"large"
|
|
560
|
+
]
|
|
550
561
|
},
|
|
551
562
|
"Primer::Alpha::SegmentedControl::Item": {
|
|
552
563
|
},
|