@openproject/primer-view-components 0.83.0-rc.ae05103d7 → 0.83.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/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 +67 -76
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +2 -1
- package/app/components/primer/alpha/tool_tip.js +1 -1
- package/app/components/primer/dialog_helper.js +7 -1
- package/package.json +1 -1
- package/static/arguments.json +32 -1
- package/static/classes.json +3 -0
- package/static/constants.json +17 -0
- package/static/info_arch.json +69 -56
- package/static/previews.json +13 -0
|
@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
15
15
|
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");
|
|
16
16
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
17
|
};
|
|
18
|
-
var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get
|
|
18
|
+
var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_pendingUpdate, _ActionBarElement_performUpdate, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
|
|
19
19
|
import { controller, targets, target } from '@github/catalyst';
|
|
20
20
|
import { focusZone, FocusKeys } from '@primer/behaviors';
|
|
21
21
|
const instersectionObserver = new IntersectionObserver(entries => {
|
|
@@ -35,27 +35,21 @@ const resizeObserver = new ResizeObserver(entries => {
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
// These are definitely used, but eslint is dumb apparently
|
|
38
|
-
var ItemType;
|
|
39
|
-
(function (ItemType) {
|
|
40
|
-
ItemType[ItemType["Item"] = 0] = "Item";
|
|
41
|
-
ItemType[ItemType["Divider"] = 1] = "Divider";
|
|
42
|
-
})(ItemType || (ItemType = {}));
|
|
43
38
|
let ActionBarElement = class ActionBarElement extends HTMLElement {
|
|
44
39
|
constructor() {
|
|
45
40
|
super(...arguments);
|
|
46
41
|
_ActionBarElement_instances.add(this);
|
|
47
42
|
_ActionBarElement_focusZoneAbortController.set(this, null);
|
|
43
|
+
_ActionBarElement_pendingUpdate.set(this, false);
|
|
48
44
|
}
|
|
49
45
|
connectedCallback() {
|
|
50
46
|
resizeObserver.observe(this);
|
|
51
47
|
instersectionObserver.observe(this);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
this.update();
|
|
58
|
-
});
|
|
48
|
+
// This overflow visible is needed for browsers that don't support PopoverElement
|
|
49
|
+
// to ensure the menu and tooltips are visible when the action bar is in a collapsed state
|
|
50
|
+
// once popover is fully supported we can remove this.style.overflow = 'visible'
|
|
51
|
+
this.style.overflow = 'visible';
|
|
52
|
+
this.update();
|
|
59
53
|
}
|
|
60
54
|
disconnectedCallback() {
|
|
61
55
|
resizeObserver.unobserve(this);
|
|
@@ -69,75 +63,81 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
|
|
|
69
63
|
}
|
|
70
64
|
}
|
|
71
65
|
update() {
|
|
72
|
-
|
|
73
|
-
if (!firstItem)
|
|
66
|
+
if (__classPrivateFieldGet(this, _ActionBarElement_pendingUpdate, "f"))
|
|
74
67
|
return;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
if (type === ItemType.Item) {
|
|
80
|
-
if (itemTop > firstItemTop) {
|
|
81
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
|
|
82
|
-
if (this.moreMenu.hidden) {
|
|
83
|
-
this.moreMenu.hidden = false;
|
|
84
|
-
}
|
|
85
|
-
if (previousItemType === ItemType.Divider) {
|
|
86
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
|
|
91
|
-
if (index === this.items.length - 1) {
|
|
92
|
-
this.moreMenu.hidden = true;
|
|
93
|
-
}
|
|
94
|
-
if (previousItemType === ItemType.Divider) {
|
|
95
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
previousItemType = type;
|
|
100
|
-
return true;
|
|
68
|
+
__classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, true, "f");
|
|
69
|
+
requestAnimationFrame(() => {
|
|
70
|
+
__classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, false, "f");
|
|
71
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_performUpdate).call(this);
|
|
101
72
|
});
|
|
102
|
-
if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
|
|
103
|
-
__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
|
|
104
|
-
}
|
|
105
|
-
__classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
|
|
106
|
-
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
|
|
107
|
-
focusOutBehavior: 'wrap',
|
|
108
|
-
focusableElementFilter: element => {
|
|
109
|
-
const idx = this.items.indexOf(element.parentElement);
|
|
110
|
-
const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
|
|
111
|
-
const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
|
|
112
|
-
return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
|
|
113
|
-
},
|
|
114
|
-
}), "f");
|
|
115
73
|
}
|
|
116
74
|
};
|
|
117
75
|
_ActionBarElement_focusZoneAbortController = new WeakMap();
|
|
76
|
+
_ActionBarElement_pendingUpdate = new WeakMap();
|
|
118
77
|
_ActionBarElement_instances = new WeakSet();
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
78
|
+
_ActionBarElement_performUpdate = function _ActionBarElement_performUpdate() {
|
|
79
|
+
const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
|
|
80
|
+
if (!firstItem)
|
|
81
|
+
return;
|
|
82
|
+
const baseTop = firstItem.getBoundingClientRect().top;
|
|
83
|
+
const cachedMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get);
|
|
84
|
+
// Snapshot geometry in one pass before mutating the DOM
|
|
85
|
+
const snapshots = Array.from(this.items, el => ({
|
|
86
|
+
top: el.getBoundingClientRect().top,
|
|
87
|
+
isDivider: el.classList.contains('ActionBar-divider'),
|
|
88
|
+
}));
|
|
89
|
+
// Apply visibility changes after all reads are complete
|
|
90
|
+
let prevWasDivider = false;
|
|
91
|
+
for (let n = 0; n < snapshots.length; n++) {
|
|
92
|
+
const snap = snapshots[n];
|
|
93
|
+
if (snap.isDivider) {
|
|
94
|
+
prevWasDivider = true;
|
|
95
|
+
continue;
|
|
96
|
+
}
|
|
97
|
+
if (snap.top > baseTop) {
|
|
98
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n, cachedMenuItems);
|
|
99
|
+
if (this.moreMenu.hidden)
|
|
100
|
+
this.moreMenu.hidden = false;
|
|
101
|
+
if (prevWasDivider)
|
|
102
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n - 1, cachedMenuItems);
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n, cachedMenuItems);
|
|
106
|
+
if (n === this.items.length - 1)
|
|
107
|
+
this.moreMenu.hidden = true;
|
|
108
|
+
if (prevWasDivider)
|
|
109
|
+
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n - 1, cachedMenuItems);
|
|
125
110
|
}
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
111
|
+
prevWasDivider = false;
|
|
112
|
+
}
|
|
113
|
+
if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
|
|
114
|
+
__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
|
|
115
|
+
}
|
|
116
|
+
__classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
|
|
117
|
+
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
|
|
118
|
+
focusOutBehavior: 'wrap',
|
|
119
|
+
focusableElementFilter: element => {
|
|
120
|
+
const idx = this.items.indexOf(element.parentElement);
|
|
121
|
+
const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
|
|
122
|
+
const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
|
|
123
|
+
return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
|
|
124
|
+
},
|
|
125
|
+
}), "f");
|
|
126
|
+
};
|
|
127
|
+
_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
|
|
128
|
+
return this.items.find(el => !el.classList.contains('ActionBar-divider')) ?? null;
|
|
129
129
|
};
|
|
130
|
-
_ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
|
|
130
|
+
_ActionBarElement_showItem = function _ActionBarElement_showItem(index, menuItems) {
|
|
131
131
|
const item = this.items[index];
|
|
132
|
-
const menuItem =
|
|
132
|
+
const menuItem = menuItems[index];
|
|
133
133
|
if (!item || !menuItem)
|
|
134
134
|
return;
|
|
135
135
|
item.style.setProperty('visibility', 'visible');
|
|
136
136
|
menuItem.hidden = true;
|
|
137
137
|
};
|
|
138
|
-
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
|
|
138
|
+
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index, menuItems) {
|
|
139
139
|
const item = this.items[index];
|
|
140
|
-
const menuItem =
|
|
140
|
+
const menuItem = menuItems[index];
|
|
141
141
|
if (!item || !menuItem)
|
|
142
142
|
return;
|
|
143
143
|
item.style.setProperty('visibility', 'hidden');
|
|
@@ -146,15 +146,6 @@ _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
|
|
|
146
146
|
_ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
|
|
147
147
|
return this.moreMenu.querySelectorAll('[role="menu"] > li');
|
|
148
148
|
};
|
|
149
|
-
_ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
|
|
150
|
-
for (let i = 0; i < this.items.length; i++) {
|
|
151
|
-
const item = this.items[i];
|
|
152
|
-
const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
|
|
153
|
-
if (!callback(item, i, type)) {
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
149
|
__decorate([
|
|
159
150
|
targets
|
|
160
151
|
], ActionBarElement.prototype, "items", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
|
1
|
+
@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}.Overlay--fullscreen-whenNarrow{border-radius:unset!important;height:100vh;left:0;margin:0;max-height:none!important;max-width:none!important;position:fixed;top:0;width:100vw}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
".Overlay.Overlay--placement-left-whenNarrow",
|
|
62
62
|
".Overlay.Overlay--placement-right-whenNarrow",
|
|
63
63
|
".Overlay.Overlay--placement-bottom-whenNarrow",
|
|
64
|
-
".Overlay--full-whenNarrow"
|
|
64
|
+
".Overlay--full-whenNarrow",
|
|
65
|
+
".Overlay--fullscreen-whenNarrow"
|
|
65
66
|
]
|
|
66
67
|
}
|
|
@@ -99,7 +99,7 @@ class ToolTipElement extends HTMLElement {
|
|
|
99
99
|
border-radius: var(--borderRadius-medium);
|
|
100
100
|
border: 0 !important;
|
|
101
101
|
opacity: 0;
|
|
102
|
-
max-width: var(--overlay-width-small);
|
|
102
|
+
max-width: min(var(--overlay-width-small), 100vw);
|
|
103
103
|
word-wrap: break-word;
|
|
104
104
|
white-space: normal;
|
|
105
105
|
width: max-content !important;
|
|
@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
12
|
var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
|
|
13
|
+
function setScrollGutter(doc) {
|
|
14
|
+
if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
|
|
15
|
+
return;
|
|
16
|
+
doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
|
|
17
|
+
}
|
|
13
18
|
function dialogInvokerButtonHandler(event) {
|
|
14
19
|
const target = event.target;
|
|
15
20
|
const button = target?.closest('button');
|
|
@@ -20,6 +25,7 @@ function dialogInvokerButtonHandler(event) {
|
|
|
20
25
|
if (dialogId) {
|
|
21
26
|
const dialog = document.getElementById(dialogId);
|
|
22
27
|
if (dialog instanceof HTMLDialogElement) {
|
|
28
|
+
setScrollGutter(dialog.ownerDocument);
|
|
23
29
|
dialog.showModal();
|
|
24
30
|
// A buttons default behaviour in some browsers it to send a pointer event
|
|
25
31
|
// If the behaviour is allowed through the dialog will be shown but then
|
|
@@ -92,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
92
98
|
const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
|
|
93
99
|
document.addEventListener('click', dialogInvokerButtonHandler, true);
|
|
94
100
|
document.addEventListener('click', this, { signal });
|
|
95
|
-
this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
|
|
96
101
|
new MutationObserver(records => {
|
|
97
102
|
for (const record of records) {
|
|
98
103
|
if (record.target === this.dialog) {
|
|
@@ -132,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
|
|
|
132
137
|
// eslint-disable-next-line no-restricted-syntax
|
|
133
138
|
this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
|
|
134
139
|
this.dialog.close();
|
|
140
|
+
setScrollGutter(this.dialog.ownerDocument);
|
|
135
141
|
this.dialog.showModal();
|
|
136
142
|
}
|
|
137
143
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openproject/primer-view-components",
|
|
3
|
-
"version": "0.83.0
|
|
3
|
+
"version": "0.83.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",
|
package/static/arguments.json
CHANGED
|
@@ -464,6 +464,12 @@
|
|
|
464
464
|
"default": "N/A",
|
|
465
465
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
466
466
|
},
|
|
467
|
+
{
|
|
468
|
+
"name": "anchor_when_narrow",
|
|
469
|
+
"type": "Symbol",
|
|
470
|
+
"default": "N/A",
|
|
471
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
|
|
472
|
+
},
|
|
467
473
|
{
|
|
468
474
|
"name": "menu_id",
|
|
469
475
|
"type": "String",
|
|
@@ -540,6 +546,12 @@
|
|
|
540
546
|
"default": "`:outside_bottom`",
|
|
541
547
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
542
548
|
},
|
|
549
|
+
{
|
|
550
|
+
"name": "anchor_when_narrow",
|
|
551
|
+
"type": "Symbol",
|
|
552
|
+
"default": "`:inherit`",
|
|
553
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
|
|
554
|
+
},
|
|
543
555
|
{
|
|
544
556
|
"name": "dynamic_label",
|
|
545
557
|
"type": "Boolean",
|
|
@@ -586,6 +598,12 @@
|
|
|
586
598
|
"default": "`:outside_right`",
|
|
587
599
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
588
600
|
},
|
|
601
|
+
{
|
|
602
|
+
"name": "anchor_when_narrow",
|
|
603
|
+
"type": "Symbol",
|
|
604
|
+
"default": "`:inherit`",
|
|
605
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
|
|
606
|
+
},
|
|
589
607
|
{
|
|
590
608
|
"name": "overlay_arguments",
|
|
591
609
|
"type": "Hash",
|
|
@@ -2009,6 +2027,12 @@
|
|
|
2009
2027
|
"default": "`:normal`",
|
|
2010
2028
|
"description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
|
|
2011
2029
|
},
|
|
2030
|
+
{
|
|
2031
|
+
"name": "anchor_when_narrow",
|
|
2032
|
+
"type": "Symbol",
|
|
2033
|
+
"default": "`:inherit`",
|
|
2034
|
+
"description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
|
|
2035
|
+
},
|
|
2012
2036
|
{
|
|
2013
2037
|
"name": "allow_out_of_bounds",
|
|
2014
2038
|
"type": "Boolean",
|
|
@@ -4009,7 +4033,14 @@
|
|
|
4009
4033
|
"short_name": "AutoCompleteNoResultItem",
|
|
4010
4034
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
|
|
4011
4035
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
|
|
4012
|
-
"parameters": [
|
|
4036
|
+
"parameters": [
|
|
4037
|
+
{
|
|
4038
|
+
"name": "system_arguments",
|
|
4039
|
+
"type": "Hash",
|
|
4040
|
+
"default": "N/A",
|
|
4041
|
+
"description": "[System arguments](/system-arguments)"
|
|
4042
|
+
}
|
|
4043
|
+
]
|
|
4013
4044
|
},
|
|
4014
4045
|
{
|
|
4015
4046
|
"component": "Avatar",
|
package/static/classes.json
CHANGED
package/static/constants.json
CHANGED
|
@@ -193,11 +193,13 @@
|
|
|
193
193
|
"Primer::Alpha::ActionMenu::PrimaryMenu": {
|
|
194
194
|
"DEFAULT_ANCHOR_ALIGN": "start",
|
|
195
195
|
"DEFAULT_ANCHOR_SIDE": "outside_bottom",
|
|
196
|
+
"DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
|
|
196
197
|
"GeneratedSlotMethods": "Primer::Alpha::ActionMenu::PrimaryMenu::GeneratedSlotMethods"
|
|
197
198
|
},
|
|
198
199
|
"Primer::Alpha::ActionMenu::SubMenu": {
|
|
199
200
|
"DEFAULT_ANCHOR_ALIGN": "start",
|
|
200
201
|
"DEFAULT_ANCHOR_SIDE": "outside_right",
|
|
202
|
+
"DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
|
|
201
203
|
"GeneratedSlotMethods": "Primer::Alpha::ActionMenu::SubMenu::GeneratedSlotMethods"
|
|
202
204
|
},
|
|
203
205
|
"Primer::Alpha::ActionMenu::SubMenuItem": {
|
|
@@ -599,11 +601,26 @@
|
|
|
599
601
|
"outside_left",
|
|
600
602
|
"outside_right"
|
|
601
603
|
],
|
|
604
|
+
"ANCHOR_WHEN_NARROW_MAPPINGS": {
|
|
605
|
+
"inherit": "",
|
|
606
|
+
"bottom": "Overlay--placement-bottom-whenNarrow",
|
|
607
|
+
"fullscreen": "Overlay--fullscreen-whenNarrow",
|
|
608
|
+
"left": "Overlay--placement-left-whenNarrow",
|
|
609
|
+
"right": "Overlay--placement-right-whenNarrow"
|
|
610
|
+
},
|
|
611
|
+
"ANCHOR_WHEN_NARROW_OPTIONS": [
|
|
612
|
+
"inherit",
|
|
613
|
+
"bottom",
|
|
614
|
+
"fullscreen",
|
|
615
|
+
"left",
|
|
616
|
+
"right"
|
|
617
|
+
],
|
|
602
618
|
"Body": "Primer::Alpha::Overlay::Body",
|
|
603
619
|
"DEFAULT_ALIGN_CONTENT": "end",
|
|
604
620
|
"DEFAULT_ANCHOR_ALIGN": "start",
|
|
605
621
|
"DEFAULT_ANCHOR_OFFSET": "normal",
|
|
606
622
|
"DEFAULT_ANCHOR_SIDE": "outside_bottom",
|
|
623
|
+
"DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
|
|
607
624
|
"DEFAULT_PADDING": "normal",
|
|
608
625
|
"DEFAULT_POPOVER": "auto",
|
|
609
626
|
"DEFAULT_SIZE": "auto",
|
package/static/info_arch.json
CHANGED
|
@@ -1633,6 +1633,19 @@
|
|
|
1633
1633
|
]
|
|
1634
1634
|
}
|
|
1635
1635
|
},
|
|
1636
|
+
{
|
|
1637
|
+
"preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
|
|
1638
|
+
"name": "fullscreen_when_narrow",
|
|
1639
|
+
"snapshot": "false",
|
|
1640
|
+
"skip_rules": {
|
|
1641
|
+
"wont_fix": [
|
|
1642
|
+
"region"
|
|
1643
|
+
],
|
|
1644
|
+
"will_fix": [
|
|
1645
|
+
"color-contrast"
|
|
1646
|
+
]
|
|
1647
|
+
}
|
|
1648
|
+
},
|
|
1636
1649
|
{
|
|
1637
1650
|
"preview_path": "primer/alpha/action_menu/sub_menus",
|
|
1638
1651
|
"name": "sub_menus",
|
|
@@ -1674,6 +1687,12 @@
|
|
|
1674
1687
|
"default": "N/A",
|
|
1675
1688
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
1676
1689
|
},
|
|
1690
|
+
{
|
|
1691
|
+
"name": "anchor_when_narrow",
|
|
1692
|
+
"type": "Symbol",
|
|
1693
|
+
"default": "N/A",
|
|
1694
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
|
|
1695
|
+
},
|
|
1677
1696
|
{
|
|
1678
1697
|
"name": "menu_id",
|
|
1679
1698
|
"type": "String",
|
|
@@ -1749,6 +1768,12 @@
|
|
|
1749
1768
|
"parameters": [],
|
|
1750
1769
|
"return_types": []
|
|
1751
1770
|
},
|
|
1771
|
+
{
|
|
1772
|
+
"name": "anchor_when_narrow",
|
|
1773
|
+
"description": "Returns the value of attribute anchor_when_narrow.",
|
|
1774
|
+
"parameters": [],
|
|
1775
|
+
"return_types": []
|
|
1776
|
+
},
|
|
1752
1777
|
{
|
|
1753
1778
|
"name": "list",
|
|
1754
1779
|
"description": "Returns the value of attribute list.",
|
|
@@ -1927,6 +1952,12 @@
|
|
|
1927
1952
|
"default": "`:outside_right`",
|
|
1928
1953
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
1929
1954
|
},
|
|
1955
|
+
{
|
|
1956
|
+
"name": "anchor_when_narrow",
|
|
1957
|
+
"type": "Symbol",
|
|
1958
|
+
"default": "`:inherit`",
|
|
1959
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
|
|
1960
|
+
},
|
|
1930
1961
|
{
|
|
1931
1962
|
"name": "overlay_arguments",
|
|
1932
1963
|
"type": "Hash",
|
|
@@ -2045,6 +2076,12 @@
|
|
|
2045
2076
|
"default": "`:outside_bottom`",
|
|
2046
2077
|
"description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
|
2047
2078
|
},
|
|
2079
|
+
{
|
|
2080
|
+
"name": "anchor_when_narrow",
|
|
2081
|
+
"type": "Symbol",
|
|
2082
|
+
"default": "`:inherit`",
|
|
2083
|
+
"description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
|
|
2084
|
+
},
|
|
2048
2085
|
{
|
|
2049
2086
|
"name": "dynamic_label",
|
|
2050
2087
|
"type": "Boolean",
|
|
@@ -6405,6 +6442,12 @@
|
|
|
6405
6442
|
"default": "`:normal`",
|
|
6406
6443
|
"description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
|
|
6407
6444
|
},
|
|
6445
|
+
{
|
|
6446
|
+
"name": "anchor_when_narrow",
|
|
6447
|
+
"type": "Symbol",
|
|
6448
|
+
"default": "`:inherit`",
|
|
6449
|
+
"description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
|
|
6450
|
+
},
|
|
6408
6451
|
{
|
|
6409
6452
|
"name": "allow_out_of_bounds",
|
|
6410
6453
|
"type": "Boolean",
|
|
@@ -12388,6 +12431,32 @@
|
|
|
12388
12431
|
}
|
|
12389
12432
|
],
|
|
12390
12433
|
"subcomponents": [
|
|
12434
|
+
{
|
|
12435
|
+
"fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
|
|
12436
|
+
"description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
|
|
12437
|
+
"accessibility_docs": null,
|
|
12438
|
+
"is_form_component": false,
|
|
12439
|
+
"is_published": true,
|
|
12440
|
+
"requires_js": false,
|
|
12441
|
+
"component": "AutoComplete::NoResultItem",
|
|
12442
|
+
"status": "beta",
|
|
12443
|
+
"a11y_reviewed": false,
|
|
12444
|
+
"short_name": "AutoCompleteNoResultItem",
|
|
12445
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
|
|
12446
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
|
|
12447
|
+
"parameters": [
|
|
12448
|
+
{
|
|
12449
|
+
"name": "system_arguments",
|
|
12450
|
+
"type": "Hash",
|
|
12451
|
+
"default": "N/A",
|
|
12452
|
+
"description": "{{link_to_system_arguments_docs}}"
|
|
12453
|
+
}
|
|
12454
|
+
],
|
|
12455
|
+
"slots": [],
|
|
12456
|
+
"methods": [],
|
|
12457
|
+
"previews": [],
|
|
12458
|
+
"subcomponents": []
|
|
12459
|
+
},
|
|
12391
12460
|
{
|
|
12392
12461
|
"fully_qualified_name": "Primer::Beta::AutoComplete::Item",
|
|
12393
12462
|
"description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
|
|
@@ -12480,62 +12549,6 @@
|
|
|
12480
12549
|
"methods": [],
|
|
12481
12550
|
"previews": [],
|
|
12482
12551
|
"subcomponents": []
|
|
12483
|
-
},
|
|
12484
|
-
{
|
|
12485
|
-
"fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
|
|
12486
|
-
"description": "",
|
|
12487
|
-
"accessibility_docs": null,
|
|
12488
|
-
"is_form_component": false,
|
|
12489
|
-
"is_published": true,
|
|
12490
|
-
"requires_js": false,
|
|
12491
|
-
"component": "AutoComplete::NoResultItem",
|
|
12492
|
-
"status": "beta",
|
|
12493
|
-
"a11y_reviewed": false,
|
|
12494
|
-
"short_name": "AutoCompleteNoResultItem",
|
|
12495
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
|
|
12496
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
|
|
12497
|
-
"parameters": [],
|
|
12498
|
-
"slots": [
|
|
12499
|
-
{
|
|
12500
|
-
"name": "leading_visual",
|
|
12501
|
-
"description": "The leading visual rendered before the link.",
|
|
12502
|
-
"parameters": [
|
|
12503
|
-
{
|
|
12504
|
-
"name": "kwargs",
|
|
12505
|
-
"type": "Hash",
|
|
12506
|
-
"default": "N/A",
|
|
12507
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
|
|
12508
|
-
}
|
|
12509
|
-
]
|
|
12510
|
-
},
|
|
12511
|
-
{
|
|
12512
|
-
"name": "trailing_visual",
|
|
12513
|
-
"description": "The trailing visual rendered after the link.",
|
|
12514
|
-
"parameters": [
|
|
12515
|
-
{
|
|
12516
|
-
"name": "kwargs",
|
|
12517
|
-
"type": "Hash",
|
|
12518
|
-
"default": "N/A",
|
|
12519
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
|
|
12520
|
-
}
|
|
12521
|
-
]
|
|
12522
|
-
},
|
|
12523
|
-
{
|
|
12524
|
-
"name": "description",
|
|
12525
|
-
"description": "Optional description",
|
|
12526
|
-
"parameters": [
|
|
12527
|
-
{
|
|
12528
|
-
"name": "system_arguments",
|
|
12529
|
-
"type": "Hash",
|
|
12530
|
-
"default": "N/A",
|
|
12531
|
-
"description": "{{link_to_system_arguments_docs}}"
|
|
12532
|
-
}
|
|
12533
|
-
]
|
|
12534
|
-
}
|
|
12535
|
-
],
|
|
12536
|
-
"methods": [],
|
|
12537
|
-
"previews": [],
|
|
12538
|
-
"subcomponents": []
|
|
12539
12552
|
}
|
|
12540
12553
|
]
|
|
12541
12554
|
},
|
package/static/previews.json
CHANGED
|
@@ -827,6 +827,19 @@
|
|
|
827
827
|
]
|
|
828
828
|
}
|
|
829
829
|
},
|
|
830
|
+
{
|
|
831
|
+
"preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
|
|
832
|
+
"name": "fullscreen_when_narrow",
|
|
833
|
+
"snapshot": "false",
|
|
834
|
+
"skip_rules": {
|
|
835
|
+
"wont_fix": [
|
|
836
|
+
"region"
|
|
837
|
+
],
|
|
838
|
+
"will_fix": [
|
|
839
|
+
"color-contrast"
|
|
840
|
+
]
|
|
841
|
+
}
|
|
842
|
+
},
|
|
830
843
|
{
|
|
831
844
|
"preview_path": "primer/alpha/action_menu/sub_menus",
|
|
832
845
|
"name": "sub_menus",
|