primer_view_components 0.13.2 → 0.15.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +63 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
- data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -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 +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar.css +1 -1
- data/app/components/primer/alpha/action_bar.css.json +1 -4
- data/app/components/primer/alpha/action_bar.css.map +1 -1
- data/app/components/primer/alpha/action_bar.pcss +1 -17
- data/app/components/primer/alpha/action_bar_element.js +21 -9
- data/app/components/primer/alpha/action_list/item.rb +13 -3
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +3 -1
- data/app/components/primer/alpha/action_list.rb +5 -5
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +126 -28
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
- data/app/components/primer/alpha/action_menu/group.rb +23 -0
- data/app/components/primer/alpha/action_menu/heading.rb +17 -0
- data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
- data/app/components/primer/alpha/action_menu/list.rb +62 -60
- data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
- data/app/components/primer/alpha/action_menu.html.erb +20 -18
- data/app/components/primer/alpha/action_menu.rb +38 -1
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/dialog/header.rb +1 -1
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/nav_list/divider.rb +1 -0
- data/app/components/primer/alpha/nav_list/group.rb +1 -0
- data/app/components/primer/alpha/nav_list/heading.rb +1 -0
- data/app/components/primer/alpha/nav_list/item.rb +1 -0
- data/app/components/primer/alpha/nav_list.rb +1 -0
- data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.json +2 -2
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +6 -2
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +0 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.js +2 -1
- data/app/components/primer/alpha/segmented_control.pcss +0 -4
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +11 -5
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +10 -1
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/tool_tip.js +8 -4
- data/app/components/primer/alpha/tool_tip.ts +9 -4
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/x_banner.js +2 -1
- data/app/components/primer/anchored_position.js +2 -1
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
- data/app/components/primer/beta/auto_complete/item.rb +2 -2
- data/app/components/primer/beta/auto_complete.rb +6 -1
- data/app/components/primer/beta/avatar.rb +1 -1
- data/app/components/primer/beta/base_button.rb +3 -4
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.json +1 -0
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.html.erb +16 -14
- data/app/components/primer/beta/blankslate.pcss +52 -2
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +9 -9
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.html.erb +18 -20
- data/app/components/primer/beta/button.pcss +15 -16
- data/app/components/primer/beta/button.rb +3 -0
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.css.json +2 -4
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/button_group.html.erb +3 -1
- data/app/components/primer/beta/button_group.pcss +2 -4
- data/app/components/primer/beta/button_group.rb +41 -12
- data/app/components/primer/beta/clipboard_copy.rb +4 -0
- data/app/components/primer/beta/clipboard_copy_button.rb +25 -0
- data/app/components/primer/beta/counter.rb +1 -1
- data/app/components/primer/beta/flash.html.erb +1 -1
- data/app/components/primer/beta/icon_button.html.erb +4 -6
- data/app/components/primer/beta/icon_button.rb +1 -3
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.css.map +1 -1
- data/app/components/primer/beta/nav_list/group.html.erb +7 -5
- data/app/components/primer/beta/nav_list/group.rb +2 -2
- data/app/components/primer/beta/nav_list.d.ts +0 -11
- data/app/components/primer/beta/nav_list.js +14 -90
- data/app/components/primer/beta/nav_list.ts +1 -85
- data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/app/components/primer/beta/nav_list_group_element.js +108 -0
- data/app/components/primer/beta/nav_list_group_element.ts +97 -0
- data/app/components/primer/beta/relative_time.rb +4 -4
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.json +2 -0
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +8 -1
- data/app/components/primer/beta/subhead.rb +9 -1
- data/app/components/primer/component.rb +3 -0
- data/app/components/primer/focus_group.js +2 -1
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/forms/action_menu_form.rb +20 -0
- data/app/forms/immediate_validation_form.rb +2 -2
- data/app/lib/primer/experimental_render_helpers.rb +32 -0
- data/app/lib/primer/experimental_slot_helpers.rb +30 -0
- data/app/lib/primer/fetch_or_fallback_helper.rb +0 -1
- data/app/lib/primer/octicon/cache.rb +1 -1
- data/lib/primer/classify.rb +0 -2
- data/lib/primer/forms/action_menu.html.erb +6 -0
- data/lib/primer/forms/action_menu.rb +25 -0
- data/lib/primer/forms/acts_as_component.rb +0 -3
- data/lib/primer/forms/base.rb +0 -1
- data/lib/primer/forms/base_component.rb +0 -2
- data/lib/primer/forms/dsl/action_menu_input.rb +36 -0
- data/lib/primer/forms/dsl/input.rb +8 -1
- data/lib/primer/forms/dsl/input_methods.rb +9 -0
- data/lib/primer/forms/dsl/text_field_input.rb +8 -0
- data/lib/primer/forms/primer_base_component_wrapper.rb +0 -2
- data/lib/primer/forms/primer_text_field.js +40 -5
- data/lib/primer/forms/primer_text_field.ts +39 -7
- data/lib/primer/forms/validation_message.html.erb +2 -1
- data/lib/primer/static/generate_info_arch.rb +1 -2
- data/lib/primer/static/generate_previews.rb +0 -2
- data/lib/primer/view_components/engine.rb +5 -1
- data/lib/primer/view_components/linters/base_linter.rb +3 -2
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +1 -1
- data/lib/primer/view_components/linters/disallow_action_list.rb +1 -0
- data/lib/primer/view_components/linters/severity_schema.rb +1 -0
- data/lib/primer/view_components/version.rb +2 -3
- data/lib/primer/yard/lookbook_pages_backend.rb +2 -4
- data/lib/rubocop/cop/primer/base_cop.rb +1 -1
- data/lib/rubocop/cop/primer/deprecated_arguments.rb +0 -2
- data/lib/rubocop/cop/primer/deprecated_components.rb +1 -1
- data/lib/rubocop/cop/primer/deprecated_label_schemes.rb +1 -1
- data/lib/rubocop/cop/primer/deprecated_label_variants.rb +1 -1
- data/previews/primer/alpha/action_menu_preview.rb +73 -7
- data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
- data/previews/primer/alpha/dialog_preview.rb +17 -0
- data/previews/primer/alpha/octicon_symbols_preview/default.html.erb +6 -0
- data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb +13 -0
- data/previews/primer/alpha/octicon_symbols_preview.rb +21 -0
- data/previews/primer/alpha/text_field_preview.rb +5 -0
- data/previews/primer/beta/avatar_preview.rb +6 -0
- data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
- data/previews/primer/beta/blankslate_preview.rb +3 -0
- data/previews/primer/beta/button_group_preview.rb +11 -0
- data/previews/primer/beta/clipboard_copy_button_preview.rb +29 -0
- data/previews/primer/beta/nav_list_preview.rb +10 -1
- data/previews/primer/beta/subhead_preview.rb +32 -4
- data/previews/primer/forms_preview/action_menu_form.html.erb +3 -0
- data/previews/primer/forms_preview.rb +4 -0
- data/static/arguments.json +167 -14
- data/static/audited_at.json +6 -1
- data/static/classes.json +12 -3
- data/static/constants.json +25 -1
- data/static/info_arch.json +585 -78
- data/static/previews.json +198 -0
- data/static/statuses.json +5 -0
- metadata +24 -2
@@ -1 +1 @@
|
|
1
|
-
.ActionBar{display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size,2rem)*3);overflow:hidden;position:relative}.ActionBar,.ActionBar-item-container{align-items:center;box-sizing:initial}.ActionBar-item-container{display:flex;flex-grow:0;flex-shrink:0}.ActionBar-item{flex-shrink:0;position:relative}.ActionBar-more-menu{flex-shrink:0}.ActionBar--small{min-width:calc(var(--control-small-size,1.75rem)*3)}.ActionBar--large{min-width:calc(var(--control-large-size,2.5rem)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}
|
1
|
+
.ActionBar{display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size,2rem)*3);overflow:hidden;position:relative}.ActionBar,.ActionBar-item-container{align-items:center;box-sizing:initial}.ActionBar-item-container{display:flex;flex-grow:0;flex-shrink:0}.ActionBar-item{flex-shrink:0;position:relative}.ActionBar-more-menu{flex-shrink:0}.ActionBar--small{min-width:calc(var(--control-small-size,1.75rem)*3)}.ActionBar--large{min-width:calc(var(--control-large-size,2.5rem)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}
|
@@ -9,9 +9,6 @@
|
|
9
9
|
".ActionBar--large",
|
10
10
|
".ActionBar-divider",
|
11
11
|
".ActionBar--small .ActionBar-divider",
|
12
|
-
".ActionBar--large .ActionBar-divider"
|
13
|
-
".ActionBar .ActionBar-item-container",
|
14
|
-
".ActionBar--small .ActionBar-item-container",
|
15
|
-
".ActionBar--large .ActionBar-item-container"
|
12
|
+
".ActionBar--large .ActionBar-divider"
|
16
13
|
]
|
17
14
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAEE,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,qCARE,kBAAmB,CAGnB,kBAWF,CANA,0BACE,YAAa,CAIb,WAAY,CADZ,aAEF,CAEA,gBAEE,aAAc,CADd,iBAEF,CAEA,qBACE,aACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAFnE,8CAA4C,CAC5C,uDAEF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF
|
1
|
+
{"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAEE,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,qCARE,kBAAmB,CAGnB,kBAWF,CANA,0BACE,YAAa,CAIb,WAAY,CADZ,aAEF,CAEA,gBAEE,aAAc,CADd,iBAEF,CAEA,qBACE,aACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAFnE,8CAA4C,CAC5C,uDAEF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar */\n.ActionBar {\n position: relative;\n display: flex !important;\n min-width: calc(var(--control-medium-size) * 3);\n align-items: center;\n flex-grow: 1;\n flex-shrink: 1;\n box-sizing: content-box;\n overflow: hidden;\n justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n display: flex;\n box-sizing: content-box;\n align-items: center;\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n.ActionBar-item {\n position: relative;\n flex-shrink: 0;\n}\n\n.ActionBar-more-menu {\n flex-shrink: 0;\n}\n\n.ActionBar--small {\n min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n height: calc(var(--control-medium-size) / 2);\n margin: 0 var(--controlStack-medium-gap-condensed);\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n}\n\n.ActionBar--small .ActionBar-divider {\n margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
|
@@ -2,7 +2,7 @@
|
|
2
2
|
.ActionBar {
|
3
3
|
position: relative;
|
4
4
|
display: flex !important;
|
5
|
-
min-width: calc(var(--control-medium-size) * 3);
|
5
|
+
min-width: calc(var(--control-medium-size) * 3);
|
6
6
|
align-items: center;
|
7
7
|
flex-grow: 1;
|
8
8
|
flex-shrink: 1;
|
@@ -51,19 +51,3 @@
|
|
51
51
|
.ActionBar--large .ActionBar-divider {
|
52
52
|
margin: 0 var(--controlStack-large-gap-condensed);
|
53
53
|
}
|
54
|
-
|
55
|
-
/* Increase spacing so touch targets don't overlap */
|
56
|
-
|
57
|
-
@media (pointer: coarse) {
|
58
|
-
.ActionBar .ActionBar-item-container {
|
59
|
-
gap: calc(var(--control-minTarget-coarse) - var(--control-medium-size)); /* 12px */
|
60
|
-
}
|
61
|
-
|
62
|
-
.ActionBar--small .ActionBar-item-container {
|
63
|
-
gap: calc(var(--control-minTarget-coarse) - var(--control-small-size)); /* 16px */
|
64
|
-
}
|
65
|
-
|
66
|
-
.ActionBar--large .ActionBar-item-container {
|
67
|
-
gap: calc(var(--control-minTarget-coarse) - var(--control-large-size)); /* 4px */
|
68
|
-
}
|
69
|
-
}
|
@@ -99,25 +99,33 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
|
|
99
99
|
}), "f");
|
100
100
|
}
|
101
101
|
};
|
102
|
-
_ActionBarElement_initialBarWidth = new WeakMap()
|
102
|
+
_ActionBarElement_initialBarWidth = new WeakMap();
|
103
|
+
_ActionBarElement_previousBarWidth = new WeakMap();
|
104
|
+
_ActionBarElement_focusZoneAbortController = new WeakMap();
|
105
|
+
_ActionBarElement_instances = new WeakSet();
|
106
|
+
_ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
|
103
107
|
// Safari doesn't support `checkVisibility` yet.
|
104
108
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
105
109
|
// @ts-ignore
|
106
110
|
if (typeof element.checkVisibility === 'function')
|
107
111
|
return element.checkVisibility();
|
108
112
|
return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);
|
109
|
-
}
|
113
|
+
};
|
114
|
+
_ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
|
110
115
|
var _a;
|
111
116
|
return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
|
112
|
-
}
|
117
|
+
};
|
118
|
+
_ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
|
113
119
|
// Get the offset of the item container from the container edge
|
114
120
|
return this.offsetWidth - this.itemContainer.offsetWidth;
|
115
|
-
}
|
121
|
+
};
|
122
|
+
_ActionBarElement_menuSpace = function _ActionBarElement_menuSpace() {
|
116
123
|
if (this.moreMenu.hidden) {
|
117
124
|
return 0;
|
118
125
|
}
|
119
126
|
return this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_itemGap).call(this);
|
120
|
-
}
|
127
|
+
};
|
128
|
+
_ActionBarElement_shrink = function _ActionBarElement_shrink() {
|
121
129
|
if (this.items[0].hidden) {
|
122
130
|
return;
|
123
131
|
}
|
@@ -131,7 +139,8 @@ _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBar
|
|
131
139
|
}
|
132
140
|
index--;
|
133
141
|
}
|
134
|
-
}
|
142
|
+
};
|
143
|
+
_ActionBarElement_grow = function _ActionBarElement_grow() {
|
135
144
|
// If last item is visible, there is no need to grow
|
136
145
|
if (!this.items[this.items.length - 1].hidden) {
|
137
146
|
return;
|
@@ -152,16 +161,19 @@ _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBar
|
|
152
161
|
if (!this.items[this.items.length - 1].hidden) {
|
153
162
|
this.moreMenu.hidden = true;
|
154
163
|
}
|
155
|
-
}
|
164
|
+
};
|
165
|
+
_ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
|
156
166
|
this.items[index].hidden = false;
|
157
167
|
__classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
|
158
|
-
}
|
168
|
+
};
|
169
|
+
_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
|
159
170
|
this.items[index].hidden = true;
|
160
171
|
__classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
|
161
172
|
if (this.moreMenu.hidden) {
|
162
173
|
this.moreMenu.hidden = false;
|
163
174
|
}
|
164
|
-
}
|
175
|
+
};
|
176
|
+
_ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
|
165
177
|
return this.moreMenu.querySelectorAll('[role="menu"] > li');
|
166
178
|
};
|
167
179
|
__decorate([
|
@@ -128,7 +128,7 @@ module Primer
|
|
128
128
|
# @private
|
129
129
|
renders_one :private_content
|
130
130
|
|
131
|
-
attr_reader :id, :list, :href, :active, :disabled, :parent
|
131
|
+
attr_reader :id, :item_id, :list, :href, :active, :disabled, :parent
|
132
132
|
|
133
133
|
# Whether or not this item is active.
|
134
134
|
#
|
@@ -143,6 +143,7 @@ module Primer
|
|
143
143
|
# @param list [Primer::Alpha::ActionList] The list that contains this item. Used internally.
|
144
144
|
# @param parent [Primer::Alpha::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
|
145
145
|
# @param label [String] Item label. If no label is provided, content is used.
|
146
|
+
# @param item_id [String] An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript.
|
146
147
|
# @param label_classes [String] CSS classes that will be added to the label.
|
147
148
|
# @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
|
148
149
|
# @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
|
@@ -161,6 +162,7 @@ module Primer
|
|
161
162
|
def initialize(
|
162
163
|
list:,
|
163
164
|
label: nil,
|
165
|
+
item_id: nil,
|
164
166
|
label_classes: nil,
|
165
167
|
label_arguments: {},
|
166
168
|
content_arguments: {},
|
@@ -181,6 +183,7 @@ module Primer
|
|
181
183
|
@list = list
|
182
184
|
@parent = parent
|
183
185
|
@label = label
|
186
|
+
@item_id = item_id
|
184
187
|
@href = href || content_arguments[:href]
|
185
188
|
@truncate_label = truncate_label
|
186
189
|
@disabled = disabled
|
@@ -206,6 +209,15 @@ module Primer
|
|
206
209
|
@system_arguments[:data] ||= {}
|
207
210
|
@system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
|
208
211
|
|
212
|
+
@system_arguments[:data] = merge_data(
|
213
|
+
@system_arguments, {
|
214
|
+
data: {
|
215
|
+
targets: "#{list_class.custom_element_name}.items",
|
216
|
+
**(@item_id ? { item_id: @item_id } : {})
|
217
|
+
}
|
218
|
+
}
|
219
|
+
)
|
220
|
+
|
209
221
|
@label_arguments = {
|
210
222
|
**label_arguments,
|
211
223
|
classes: class_names(
|
@@ -234,7 +246,6 @@ module Primer
|
|
234
246
|
end
|
235
247
|
end
|
236
248
|
|
237
|
-
# rubocop:disable Style/IfUnlessModifier
|
238
249
|
if @content_arguments[:tag] != :button && @form_wrapper.form_required?
|
239
250
|
raise ArgumentError, "items that submit forms must use a \"button\" tag instead of \"#{@content_arguments[:tag]}\""
|
240
251
|
end
|
@@ -242,7 +253,6 @@ module Primer
|
|
242
253
|
if @content_arguments[:tag] != :button && @list.acts_as_form_input?
|
243
254
|
raise ArgumentError, "items within lists/menus that act as form inputs must use \"button\" tags instead of \"#{@content_arguments[:tag]}\""
|
244
255
|
end
|
245
|
-
# rubocop:enable Style/IfUnlessModifier
|
246
256
|
|
247
257
|
if @disabled
|
248
258
|
@content_arguments[:aria] ||= merge_aria(
|
@@ -1 +1 @@
|
|
1
|
-
:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
1
|
+
:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
".ActionListHeader",
|
6
6
|
".ActionListWrap",
|
7
7
|
".ActionListWrap--inset",
|
8
|
+
".ActionListWrap--inset[popover]",
|
8
9
|
".ActionListWrap--divided .ActionListItem-label:before",
|
9
10
|
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",
|
10
11
|
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--control-checked-bgColor-rest);\n stroke: var(--control-checked-bgColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--fgColor-onEmphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n stroke: var(--control-borderColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--control-medium-lineBoxHeight);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|
1
|
+
{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset, .ActionListWrap--inset[popover] {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--control-checked-bgColor-rest);\n stroke: var(--control-checked-bgColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--fgColor-onEmphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n stroke: var(--control-borderColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--control-medium-lineBoxHeight);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|
@@ -14,7 +14,7 @@
|
|
14
14
|
list-style: none;
|
15
15
|
}
|
16
16
|
|
17
|
-
.ActionListWrap--inset {
|
17
|
+
.ActionListWrap--inset, .ActionListWrap--inset[popover] {
|
18
18
|
padding: var(--base-size-8);
|
19
19
|
}
|
20
20
|
|
@@ -438,6 +438,7 @@
|
|
438
438
|
|
439
439
|
@media screen and (prefers-reduced-motion: no-preference) {
|
440
440
|
animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
441
|
+
|
441
442
|
@keyframes checkmarkIn {
|
442
443
|
from {
|
443
444
|
clip-path: inset(16px 0 0 0);
|
@@ -481,6 +482,7 @@
|
|
481
482
|
|
482
483
|
@media screen and (prefers-reduced-motion: no-preference) {
|
483
484
|
animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
485
|
+
|
484
486
|
@keyframes checkmarkOut {
|
485
487
|
from {
|
486
488
|
clip-path: inset(0 0 0 0);
|
@@ -52,9 +52,10 @@ module Primer
|
|
52
52
|
|
53
53
|
# Heading text rendered above the list of items.
|
54
54
|
#
|
55
|
-
# @param
|
56
|
-
|
57
|
-
|
55
|
+
# @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
|
56
|
+
# @param system_arguments [Hash] The arguments accepted by `component_klass`.
|
57
|
+
renders_one :heading, lambda { |component_klass: Primer::Alpha::ActionList::Heading, **system_arguments|
|
58
|
+
component_klass.new(**system_arguments)
|
58
59
|
}
|
59
60
|
|
60
61
|
# @!parse
|
@@ -178,7 +179,6 @@ module Primer
|
|
178
179
|
# @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Item) %>
|
179
180
|
# @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
|
180
181
|
def build_item(component_klass: ActionList::Item, **system_arguments)
|
181
|
-
# rubocop:disable Style/IfUnlessModifier
|
182
182
|
if single_select? && system_arguments[:active] && items.count(&:active?).positive?
|
183
183
|
raise ArgumentError, "only a single item may be active when select_variant is set to :single"
|
184
184
|
end
|
@@ -230,7 +230,7 @@ module Primer
|
|
230
230
|
end
|
231
231
|
|
232
232
|
def acts_as_menu?
|
233
|
-
@system_arguments[:role] == :menu
|
233
|
+
@system_arguments[:role] == :menu || @system_arguments[:role] == :group
|
234
234
|
end
|
235
235
|
|
236
236
|
def required_form_arguments_given?
|
@@ -6,6 +6,15 @@ type SelectedItem = {
|
|
6
6
|
value: string | null | undefined;
|
7
7
|
element: Element;
|
8
8
|
};
|
9
|
+
export type ItemActivatedEvent = {
|
10
|
+
item: Element;
|
11
|
+
checked: boolean;
|
12
|
+
};
|
13
|
+
declare global {
|
14
|
+
interface HTMLElementEventMap {
|
15
|
+
itemActivated: CustomEvent<ItemActivatedEvent>;
|
16
|
+
}
|
17
|
+
}
|
9
18
|
export declare class ActionMenuElement extends HTMLElement {
|
10
19
|
#private;
|
11
20
|
includeFragment: IncludeFragmentElement;
|
@@ -22,6 +31,17 @@ export declare class ActionMenuElement extends HTMLElement {
|
|
22
31
|
connectedCallback(): void;
|
23
32
|
disconnectedCallback(): void;
|
24
33
|
handleEvent(event: Event): void;
|
34
|
+
get items(): HTMLElement[];
|
35
|
+
getItemById(itemId: string): HTMLElement | null;
|
36
|
+
isItemDisabled(item: Element | null): boolean;
|
37
|
+
disableItem(item: Element | null): void;
|
38
|
+
enableItem(item: Element | null): void;
|
39
|
+
isItemHidden(item: Element | null): boolean;
|
40
|
+
hideItem(item: Element | null): void;
|
41
|
+
showItem(item: Element | null): void;
|
42
|
+
isItemChecked(item: Element | null): boolean;
|
43
|
+
checkItem(item: Element | null): void;
|
44
|
+
uncheckItem(item: Element | null): void;
|
25
45
|
}
|
26
46
|
declare global {
|
27
47
|
interface Window {
|