primer_view_components 0.1.5 → 0.1.6
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 +16 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.rb +2 -2
- data/app/components/primer/alpha/action_list.rb +1 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +1 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +48 -22
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +50 -19
- data/app/components/primer/alpha/action_menu/list.rb +19 -9
- data/app/components/primer/alpha/action_menu.rb +56 -17
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +0 -2
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +0 -4
- data/app/components/primer/alpha/dropdown/menu.rb +1 -1
- data/app/components/primer/alpha/modal_dialog.js +12 -0
- data/app/components/primer/alpha/modal_dialog.ts +17 -0
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +1 -1
- data/app/components/primer/alpha/overlay.rb +9 -5
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -1
- data/app/components/primer/beta/auto_complete.rb +19 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +0 -2
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +2 -4
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/action_menu_preview/content_labels.html.erb +9 -0
- data/previews/primer/alpha/action_menu_preview.rb +43 -36
- data/previews/primer/beta/auto_complete_preview.rb +36 -23
- data/static/arguments.json +6 -0
- data/static/constants.json +19 -8
- data/static/info_arch.json +35 -6
- data/static/previews.json +5 -0
- metadata +7 -6
@@ -191,8 +191,6 @@ module Primer
|
|
191
191
|
"ActionListItem--disabled" => @disabled
|
192
192
|
)
|
193
193
|
|
194
|
-
@system_arguments[:role] = :none
|
195
|
-
|
196
194
|
@system_arguments[:data] ||= {}
|
197
195
|
@system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
|
198
196
|
|
@@ -237,6 +235,8 @@ module Primer
|
|
237
235
|
ActionList::DEFAULT_MENU_ITEM_ROLE
|
238
236
|
end
|
239
237
|
|
238
|
+
@system_arguments[:role] = @list.acts_as_menu? ? :none : nil
|
239
|
+
|
240
240
|
@description_wrapper_arguments = {
|
241
241
|
classes: class_names(
|
242
242
|
"ActionListItem-descriptionWrap",
|
@@ -107,7 +107,7 @@ module Primer
|
|
107
107
|
"ActionListWrap--divided" => @show_dividers
|
108
108
|
)
|
109
109
|
|
110
|
-
@role = role || allows_selection? ? MENU_ROLE : DEFAULT_ROLE
|
110
|
+
@role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
|
111
111
|
@system_arguments[:role] = @role
|
112
112
|
|
113
113
|
@list_wrapper_arguments = {}
|
@@ -10,6 +10,7 @@ export declare class ActionMenuElement extends HTMLElement {
|
|
10
10
|
set dynamicLabel(value: boolean);
|
11
11
|
get popoverElement(): HTMLElement | null;
|
12
12
|
get invokerElement(): HTMLElement | null;
|
13
|
+
get invokerLabel(): HTMLElement | null;
|
13
14
|
connectedCallback(): void;
|
14
15
|
disconnectedCallback(): void;
|
15
16
|
handleEvent(event: Event): void;
|
@@ -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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
|
12
|
+
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
|
13
13
|
import '@github/include-fragment-element';
|
14
14
|
const popoverSelector = (() => {
|
15
15
|
try {
|
@@ -20,7 +20,7 @@ const popoverSelector = (() => {
|
|
20
20
|
return '.\\:open';
|
21
21
|
}
|
22
22
|
})();
|
23
|
-
const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'
|
23
|
+
const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
|
24
24
|
export class ActionMenuElement extends HTMLElement {
|
25
25
|
constructor() {
|
26
26
|
super(...arguments);
|
@@ -68,6 +68,11 @@ export class ActionMenuElement extends HTMLElement {
|
|
68
68
|
}
|
69
69
|
return null;
|
70
70
|
}
|
71
|
+
get invokerLabel() {
|
72
|
+
if (!this.invokerElement)
|
73
|
+
return null;
|
74
|
+
return this.invokerElement.querySelector('.Button-label');
|
75
|
+
}
|
71
76
|
connectedCallback() {
|
72
77
|
const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
|
73
78
|
this.addEventListener('keydown', this, { signal });
|
@@ -81,17 +86,21 @@ export class ActionMenuElement extends HTMLElement {
|
|
81
86
|
}
|
82
87
|
handleEvent(event) {
|
83
88
|
var _a, _b, _c, _d;
|
84
|
-
if (
|
89
|
+
if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
|
90
|
+
if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
|
91
|
+
event.preventDefault();
|
92
|
+
(_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
|
93
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
|
94
|
+
return;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
|
85
98
|
return;
|
86
99
|
if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
|
87
|
-
(
|
100
|
+
(_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
|
88
101
|
}
|
89
|
-
else if ((event instanceof
|
90
|
-
event.
|
91
|
-
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
92
|
-
event.key === 'Enter') ||
|
93
|
-
(event instanceof MouseEvent && event.type === 'click')) {
|
94
|
-
const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
|
102
|
+
else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
|
103
|
+
const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
|
95
104
|
if (!item)
|
96
105
|
return;
|
97
106
|
const ariaChecked = item.getAttribute('aria-checked');
|
@@ -107,31 +116,48 @@ export class ActionMenuElement extends HTMLElement {
|
|
107
116
|
}
|
108
117
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
|
109
118
|
}
|
110
|
-
event.
|
111
|
-
|
119
|
+
if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
|
120
|
+
// prevent buttons from being clicked twice
|
121
|
+
event.preventDefault();
|
122
|
+
}
|
123
|
+
// Hide popover after current event loop to prevent changes in focus from
|
124
|
+
// altering the target of the event. Not doing this specifically affects
|
125
|
+
// <a> tags. It causes the event to be sent to the currently focused element
|
126
|
+
// instead of the anchor, which effectively prevents navigation, i.e. it
|
127
|
+
// appears as if hitting enter does nothing. Curiously, clicking instead
|
128
|
+
// works fine.
|
129
|
+
if (this.selectVariant !== 'multiple') {
|
130
|
+
setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
|
131
|
+
}
|
112
132
|
}
|
113
133
|
}
|
114
134
|
}
|
115
135
|
_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
|
116
136
|
if (!this.dynamicLabel)
|
117
137
|
return;
|
118
|
-
const
|
119
|
-
if (!
|
138
|
+
const invokerLabel = this.invokerLabel;
|
139
|
+
if (!invokerLabel)
|
120
140
|
return;
|
121
|
-
const
|
122
|
-
|
123
|
-
|
124
|
-
__classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
|
141
|
+
const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
|
142
|
+
if (itemLabel && this.dynamicLabel) {
|
143
|
+
__classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
|
125
144
|
const prefixSpan = document.createElement('span');
|
126
145
|
prefixSpan.classList.add('color-fg-muted');
|
127
146
|
const contentSpan = document.createElement('span');
|
128
147
|
prefixSpan.textContent = this.dynamicLabelPrefix;
|
129
|
-
contentSpan.textContent =
|
130
|
-
|
148
|
+
contentSpan.textContent = itemLabel.textContent || '';
|
149
|
+
invokerLabel.replaceChildren(prefixSpan, contentSpan);
|
131
150
|
}
|
132
151
|
else {
|
133
|
-
|
134
|
-
}
|
152
|
+
invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
|
153
|
+
}
|
154
|
+
}, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
|
155
|
+
return (event instanceof KeyboardEvent &&
|
156
|
+
event.type === 'keydown' &&
|
157
|
+
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
158
|
+
event.key === 'Enter');
|
159
|
+
}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
|
160
|
+
return this.querySelector(menuItemSelectors.join(','));
|
135
161
|
};
|
136
162
|
if (!window.customElements.get('action-menu')) {
|
137
163
|
window.ActionMenuElement = ActionMenuElement;
|
@@ -11,7 +11,7 @@ const popoverSelector = (() => {
|
|
11
11
|
|
12
12
|
type SelectVariant = 'single' | 'multiple' | null
|
13
13
|
|
14
|
-
const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'
|
14
|
+
const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
|
15
15
|
|
16
16
|
export class ActionMenuElement extends HTMLElement {
|
17
17
|
#abortController: AbortController
|
@@ -60,6 +60,11 @@ export class ActionMenuElement extends HTMLElement {
|
|
60
60
|
return null
|
61
61
|
}
|
62
62
|
|
63
|
+
get invokerLabel(): HTMLElement | null {
|
64
|
+
if (!this.invokerElement) return null
|
65
|
+
return this.invokerElement.querySelector('.Button-label')
|
66
|
+
}
|
67
|
+
|
63
68
|
connectedCallback() {
|
64
69
|
const {signal} = (this.#abortController = new AbortController())
|
65
70
|
this.addEventListener('keydown', this, {signal})
|
@@ -74,17 +79,20 @@ export class ActionMenuElement extends HTMLElement {
|
|
74
79
|
}
|
75
80
|
|
76
81
|
handleEvent(event: Event) {
|
82
|
+
if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
|
83
|
+
if (this.#firstItem) {
|
84
|
+
event.preventDefault()
|
85
|
+
this.popoverElement?.showPopover()
|
86
|
+
this.#firstItem.focus()
|
87
|
+
return
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
77
91
|
if (!this.popoverElement?.matches(popoverSelector)) return
|
78
92
|
|
79
93
|
if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
|
80
94
|
this.popoverElement?.hidePopover()
|
81
|
-
} else if (
|
82
|
-
(event instanceof KeyboardEvent &&
|
83
|
-
event.type === 'keydown' &&
|
84
|
-
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
85
|
-
event.key === 'Enter') ||
|
86
|
-
(event instanceof MouseEvent && event.type === 'click')
|
87
|
-
) {
|
95
|
+
} else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
|
88
96
|
const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
|
89
97
|
if (!item) return
|
90
98
|
const ariaChecked = item.getAttribute('aria-checked')
|
@@ -100,29 +108,52 @@ export class ActionMenuElement extends HTMLElement {
|
|
100
108
|
}
|
101
109
|
this.#setDynamicLabel()
|
102
110
|
}
|
103
|
-
event.
|
104
|
-
|
111
|
+
if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
|
112
|
+
// prevent buttons from being clicked twice
|
113
|
+
event.preventDefault()
|
114
|
+
}
|
115
|
+
// Hide popover after current event loop to prevent changes in focus from
|
116
|
+
// altering the target of the event. Not doing this specifically affects
|
117
|
+
// <a> tags. It causes the event to be sent to the currently focused element
|
118
|
+
// instead of the anchor, which effectively prevents navigation, i.e. it
|
119
|
+
// appears as if hitting enter does nothing. Curiously, clicking instead
|
120
|
+
// works fine.
|
121
|
+
if (this.selectVariant !== 'multiple') {
|
122
|
+
setTimeout(() => this.popoverElement?.hidePopover())
|
123
|
+
}
|
105
124
|
}
|
106
125
|
}
|
107
126
|
|
108
127
|
#setDynamicLabel() {
|
109
128
|
if (!this.dynamicLabel) return
|
110
|
-
const
|
111
|
-
if (!
|
112
|
-
const
|
113
|
-
|
114
|
-
|
115
|
-
this.#originalLabel ||= invoker.textContent || ''
|
129
|
+
const invokerLabel = this.invokerLabel
|
130
|
+
if (!invokerLabel) return
|
131
|
+
const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
|
132
|
+
if (itemLabel && this.dynamicLabel) {
|
133
|
+
this.#originalLabel ||= invokerLabel.textContent || ''
|
116
134
|
const prefixSpan = document.createElement('span')
|
117
135
|
prefixSpan.classList.add('color-fg-muted')
|
118
136
|
const contentSpan = document.createElement('span')
|
119
137
|
prefixSpan.textContent = this.dynamicLabelPrefix
|
120
|
-
contentSpan.textContent =
|
121
|
-
|
138
|
+
contentSpan.textContent = itemLabel.textContent || ''
|
139
|
+
invokerLabel.replaceChildren(prefixSpan, contentSpan)
|
122
140
|
} else {
|
123
|
-
|
141
|
+
invokerLabel.textContent = this.#originalLabel
|
124
142
|
}
|
125
143
|
}
|
144
|
+
|
145
|
+
#isEnterKeydown(event: Event): boolean {
|
146
|
+
return (
|
147
|
+
event instanceof KeyboardEvent &&
|
148
|
+
event.type === 'keydown' &&
|
149
|
+
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
150
|
+
event.key === 'Enter'
|
151
|
+
)
|
152
|
+
}
|
153
|
+
|
154
|
+
get #firstItem(): HTMLElement | null {
|
155
|
+
return this.querySelector(menuItemSelectors.join(','))
|
156
|
+
}
|
126
157
|
}
|
127
158
|
|
128
159
|
if (!window.customElements.get('action-menu')) {
|
@@ -7,9 +7,8 @@ module Primer
|
|
7
7
|
# This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
|
8
8
|
# used as a standalone component.
|
9
9
|
class List < Primer::Alpha::ActionList
|
10
|
-
DEFAULT_ITEM_TAG = :
|
10
|
+
DEFAULT_ITEM_TAG = :button
|
11
11
|
ITEM_TAG_OPTIONS = [:a, :button, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
|
12
|
-
ITEM_ACTION_OPTIONS = [:classes, :onclick, :href, :value].freeze
|
13
12
|
|
14
13
|
# Adds a new item to the list.
|
15
14
|
#
|
@@ -31,11 +30,11 @@ module Primer
|
|
31
30
|
|
32
31
|
# rubocop:disable Style/IfUnlessModifier
|
33
32
|
if content_arguments[:tag] == :a
|
34
|
-
content_arguments[:href]
|
33
|
+
content_arguments[:href] ||= system_arguments.delete(:href)
|
35
34
|
end
|
36
35
|
# rubocop:enable Style/IfUnlessModifier
|
37
36
|
|
38
|
-
|
37
|
+
content_arguments[:tabindex] = -1
|
39
38
|
system_arguments[:autofocus] = "" if system_arguments[:autofocus]
|
40
39
|
|
41
40
|
if system_arguments[:disabled]
|
@@ -52,11 +51,22 @@ module Primer
|
|
52
51
|
content_arguments[:disabled] = "" if content_arguments[:tag] == :button
|
53
52
|
end
|
54
53
|
|
55
|
-
super(
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
54
|
+
super(**system_arguments, content_arguments: content_arguments) do |item|
|
55
|
+
# Prevent double renders by using the capture method on the component
|
56
|
+
# that originally received the block.
|
57
|
+
#
|
58
|
+
# Handle blocks that originate from C code such as `&:method` by checking
|
59
|
+
# source_location. Such blocks don't allow access to their receiver.
|
60
|
+
if block&.source_location
|
61
|
+
block_context = block.binding.receiver
|
62
|
+
|
63
|
+
if block_context.class < ActionView::Base
|
64
|
+
block_context.capture(item, &block)
|
65
|
+
else
|
66
|
+
capture(item, &block)
|
67
|
+
end
|
68
|
+
end
|
69
|
+
end
|
60
70
|
end
|
61
71
|
|
62
72
|
# @param menu_id [String] ID of the parent menu.
|
@@ -43,7 +43,10 @@ module Primer
|
|
43
43
|
#
|
44
44
|
# @example With caret
|
45
45
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
|
46
|
-
# <% c.with_show_button
|
46
|
+
# <% c.with_show_button do |button| %>
|
47
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
48
|
+
# Menu
|
49
|
+
# <% end %>
|
47
50
|
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
48
51
|
# Primer Design
|
49
52
|
# <% end %>
|
@@ -81,7 +84,7 @@ module Primer
|
|
81
84
|
# <% c.with_item(tag: :button, type: "button") do %>
|
82
85
|
# Quote Reply
|
83
86
|
# <% end %>
|
84
|
-
# <% c.
|
87
|
+
# <% c.with_divider %>
|
85
88
|
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
86
89
|
# Copy Text
|
87
90
|
# <% end %>
|
@@ -109,7 +112,10 @@ module Primer
|
|
109
112
|
# Align the menu to the center of the trigger button
|
110
113
|
# @code
|
111
114
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
|
112
|
-
# <% c.with_show_button
|
115
|
+
# <% c.with_show_button do |button| %>
|
116
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
117
|
+
# Outside top
|
118
|
+
# <% end %>
|
113
119
|
# <% c.with_item do %>
|
114
120
|
# Item 1 that does something
|
115
121
|
# <% end %>
|
@@ -118,7 +124,10 @@ module Primer
|
|
118
124
|
# <% end %>
|
119
125
|
# <% end %>
|
120
126
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
|
121
|
-
# <% c.with_show_button
|
127
|
+
# <% c.with_show_button do |button| %>
|
128
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
129
|
+
# Outside left
|
130
|
+
# <% end %>
|
122
131
|
# <% c.with_item do %>
|
123
132
|
# Item 1 that does something
|
124
133
|
# <% end %>
|
@@ -127,7 +136,10 @@ module Primer
|
|
127
136
|
# <% end %>
|
128
137
|
# <% end %>
|
129
138
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
|
130
|
-
# <% c.with_show_button
|
139
|
+
# <% c.with_show_button do |button| %>
|
140
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
141
|
+
# Outside right
|
142
|
+
# <% end %>
|
131
143
|
# <% c.with_item do %>
|
132
144
|
# Item 1 that does something
|
133
145
|
# <% end %>
|
@@ -136,7 +148,10 @@ module Primer
|
|
136
148
|
# <% end %>
|
137
149
|
# <% end %>
|
138
150
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
|
139
|
-
# <% c.with_show_button
|
151
|
+
# <% c.with_show_button do |button| %>
|
152
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
153
|
+
# Outside bottom
|
154
|
+
# <% end %>
|
140
155
|
# <% c.with_item do %>
|
141
156
|
# Item 1 that does something
|
142
157
|
# <% end %>
|
@@ -150,7 +165,10 @@ module Primer
|
|
150
165
|
# Align the menu to the start of the trigger button
|
151
166
|
# @code
|
152
167
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
|
153
|
-
# <% c.with_show_button
|
168
|
+
# <% c.with_show_button do |button| %>
|
169
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
170
|
+
# Outside top
|
171
|
+
# <% end %>
|
154
172
|
# <% c.with_item do %>
|
155
173
|
# Item 1 that does something
|
156
174
|
# <% end %>
|
@@ -159,7 +177,10 @@ module Primer
|
|
159
177
|
# <% end %>
|
160
178
|
# <% end %>
|
161
179
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
|
162
|
-
# <% c.with_show_button
|
180
|
+
# <% c.with_show_button do |button| %>
|
181
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
182
|
+
# Outside left
|
183
|
+
# <% end %>
|
163
184
|
# <% c.with_item do %>
|
164
185
|
# Item 1 that does something
|
165
186
|
# <% end %>
|
@@ -168,7 +189,10 @@ module Primer
|
|
168
189
|
# <% end %>
|
169
190
|
# <% end %>
|
170
191
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
|
171
|
-
# <% c.with_show_button
|
192
|
+
# <% c.with_show_button do |button| %>
|
193
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
194
|
+
# Outside right
|
195
|
+
# <% end %>
|
172
196
|
# <% c.with_item do %>
|
173
197
|
# Item 1 that does something
|
174
198
|
# <% end %>
|
@@ -177,7 +201,10 @@ module Primer
|
|
177
201
|
# <% end %>
|
178
202
|
# <% end %>
|
179
203
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
|
180
|
-
# <% c.with_show_button
|
204
|
+
# <% c.with_show_button do |button| %>
|
205
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
206
|
+
# Outside bottom
|
207
|
+
# <% end %>
|
181
208
|
# <% c.with_item do %>
|
182
209
|
# Item 1 that does something
|
183
210
|
# <% end %>
|
@@ -191,7 +218,10 @@ module Primer
|
|
191
218
|
# Align the menu to the end of the trigger button
|
192
219
|
# @code
|
193
220
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
|
194
|
-
# <% c.with_show_button
|
221
|
+
# <% c.with_show_button do |button| %>
|
222
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
223
|
+
# Outside top
|
224
|
+
# <% end %>
|
195
225
|
# <% c.with_item do %>
|
196
226
|
# Item 1 that does something
|
197
227
|
# <% end %>
|
@@ -200,7 +230,10 @@ module Primer
|
|
200
230
|
# <% end %>
|
201
231
|
# <% end %>
|
202
232
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
|
203
|
-
# <% c.with_show_button
|
233
|
+
# <% c.with_show_button do |button| %>
|
234
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
235
|
+
# Outside left
|
236
|
+
# <% end %>
|
204
237
|
# <% c.with_item do %>
|
205
238
|
# Item 1 that does something
|
206
239
|
# <% end %>
|
@@ -209,7 +242,10 @@ module Primer
|
|
209
242
|
# <% end %>
|
210
243
|
# <% end %>
|
211
244
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
|
212
|
-
# <% c.with_show_button
|
245
|
+
# <% c.with_show_button do |button| %>
|
246
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
247
|
+
# Outside right
|
248
|
+
# <% end %>
|
213
249
|
# <% c.with_item do %>
|
214
250
|
# Item 1 that does something
|
215
251
|
# <% end %>
|
@@ -218,7 +254,10 @@ module Primer
|
|
218
254
|
# <% end %>
|
219
255
|
# <% end %>
|
220
256
|
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
|
221
|
-
# <% c.with_show_button
|
257
|
+
# <% c.with_show_button do |button| %>
|
258
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
259
|
+
# Outside bottom
|
260
|
+
# <% end %>
|
222
261
|
# <% c.with_item do %>
|
223
262
|
# Item 1 that does something
|
224
263
|
# <% end %>
|
@@ -228,7 +267,7 @@ module Primer
|
|
228
267
|
# <% end %>
|
229
268
|
#
|
230
269
|
# @example With deferred menu content loaded with an `include-fragment`
|
231
|
-
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-
|
270
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
|
232
271
|
# <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
|
233
272
|
# <% end %>
|
234
273
|
#
|
@@ -280,9 +319,9 @@ module Primer
|
|
280
319
|
)
|
281
320
|
end
|
282
321
|
|
283
|
-
# Button to activate the menu.
|
322
|
+
# Button to activate the menu.
|
284
323
|
#
|
285
|
-
# @param
|
324
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
|
286
325
|
def with_show_button(**system_arguments, &block)
|
287
326
|
@overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
|
288
327
|
end
|
@@ -1 +1 @@
|
|
1
|
-
.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;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--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)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@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{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);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(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);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,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor .Overlay{width:auto}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor-whenNarrow .Overlay{width:auto}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{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
|
+
.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;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--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)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@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{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);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(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);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,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{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%)}}
|
@@ -52,7 +52,6 @@
|
|
52
52
|
".Overlay-closeButton.close-button",
|
53
53
|
".Overlay-backdrop--center",
|
54
54
|
".Overlay-backdrop--anchor",
|
55
|
-
".Overlay-backdrop--anchor .Overlay",
|
56
55
|
".Overlay-backdrop--side",
|
57
56
|
".Overlay-backdrop--side.Overlay-backdrop--placement-left",
|
58
57
|
".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",
|
@@ -66,7 +65,6 @@
|
|
66
65
|
".Overlay-backdrop--full .Overlay",
|
67
66
|
".Overlay-backdrop--center-whenNarrow",
|
68
67
|
".Overlay-backdrop--anchor-whenNarrow",
|
69
|
-
".Overlay-backdrop--anchor-whenNarrow .Overlay",
|
70
68
|
".Overlay-backdrop--side-whenNarrow",
|
71
69
|
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",
|
72
70
|
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",
|