primer_view_components 0.0.96 → 0.0.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -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_list/action-list-selection.pcss +92 -0
- data/app/components/primer/alpha/action_list/action-list.pcss +620 -0
- data/app/components/primer/alpha/action_list/divider.rb +35 -0
- data/app/components/primer/alpha/action_list/heading.html.erb +8 -0
- data/app/components/primer/alpha/action_list/heading.rb +38 -0
- data/app/components/primer/alpha/action_list/item.html.erb +39 -0
- data/app/components/primer/alpha/action_list/item.rb +230 -0
- data/app/components/primer/alpha/action_list.html.erb +15 -0
- data/app/components/primer/alpha/action_list.rb +112 -0
- data/app/components/primer/alpha/dialog/header.rb +1 -1
- data/app/components/primer/alpha/nav_list/item.html.erb +13 -0
- data/app/components/primer/alpha/nav_list/item.rb +89 -0
- data/app/components/primer/alpha/nav_list/section.html.erb +3 -0
- data/app/components/primer/alpha/nav_list/section.rb +88 -0
- data/app/components/primer/alpha/nav_list.d.ts +25 -0
- data/app/components/primer/alpha/nav_list.html.erb +10 -0
- data/app/components/primer/alpha/nav_list.js +130 -0
- data/app/components/primer/alpha/nav_list.rb +112 -0
- data/app/components/primer/alpha/nav_list.ts +129 -0
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.pcss +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/lib/postcss_mixins/activeIndicatorLine.pcss +11 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +51 -22
- data/lib/yard/docs_helper.rb +3 -3
- data/static/arguments.json +267 -3
- data/static/audited_at.json +7 -0
- data/static/constants.json +76 -0
- data/static/statuses.json +7 -0
- metadata +21 -4
- data/app/components/primer/experimental/action_bar.d.ts +0 -14
- data/app/components/primer/experimental/action_bar.js +0 -141
data/static/arguments.json
CHANGED
@@ -1,4 +1,196 @@
|
|
1
1
|
[
|
2
|
+
{
|
3
|
+
"component": "ActionList",
|
4
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
|
5
|
+
"parameters": [
|
6
|
+
{
|
7
|
+
"name": "role",
|
8
|
+
"type": "Boolean",
|
9
|
+
"default": "`:list`",
|
10
|
+
"description": "ARIA role describing the function of the list. listbox and menu are a common values."
|
11
|
+
},
|
12
|
+
{
|
13
|
+
"name": "item_classes",
|
14
|
+
"type": "String",
|
15
|
+
"default": "`nil`",
|
16
|
+
"description": "Additional CSS classes to attach to items."
|
17
|
+
},
|
18
|
+
{
|
19
|
+
"name": "scheme",
|
20
|
+
"type": "Symbol",
|
21
|
+
"default": "`:full`",
|
22
|
+
"description": "One of `:full` or `:inset`.. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
|
23
|
+
},
|
24
|
+
{
|
25
|
+
"name": "show_dividers",
|
26
|
+
"type": "Boolean",
|
27
|
+
"default": "`false`",
|
28
|
+
"description": "Display a divider above each item in the list when it does not follow a header or divider."
|
29
|
+
},
|
30
|
+
{
|
31
|
+
"name": "system_arguments",
|
32
|
+
"type": "Hash",
|
33
|
+
"default": "N/A",
|
34
|
+
"description": "[System arguments](/system-arguments)"
|
35
|
+
}
|
36
|
+
]
|
37
|
+
},
|
38
|
+
{
|
39
|
+
"component": "ActionList::Divider",
|
40
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
|
41
|
+
"parameters": [
|
42
|
+
{
|
43
|
+
"name": "scheme",
|
44
|
+
"type": "Symbol",
|
45
|
+
"default": "`:subtle`",
|
46
|
+
"description": "Display a background color if scheme is `filled`."
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"name": "system_arguments",
|
50
|
+
"type": "Hash",
|
51
|
+
"default": "N/A",
|
52
|
+
"description": "[System arguments](/system-arguments)"
|
53
|
+
}
|
54
|
+
]
|
55
|
+
},
|
56
|
+
{
|
57
|
+
"component": "ActionList::Heading",
|
58
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
|
59
|
+
"parameters": [
|
60
|
+
{
|
61
|
+
"name": "list_id",
|
62
|
+
"type": "String",
|
63
|
+
"default": "N/A",
|
64
|
+
"description": "The unique identifier of the sub list the heading belongs to. Used internally."
|
65
|
+
},
|
66
|
+
{
|
67
|
+
"name": "title",
|
68
|
+
"type": "String",
|
69
|
+
"default": "N/A",
|
70
|
+
"description": "Sub list title."
|
71
|
+
},
|
72
|
+
{
|
73
|
+
"name": "subtitle",
|
74
|
+
"type": "String",
|
75
|
+
"default": "`nil`",
|
76
|
+
"description": "Optional sub list description."
|
77
|
+
},
|
78
|
+
{
|
79
|
+
"name": "scheme",
|
80
|
+
"type": "Symbol",
|
81
|
+
"default": "`:subtle`",
|
82
|
+
"description": "Display a background color if scheme is `filled`."
|
83
|
+
},
|
84
|
+
{
|
85
|
+
"name": "tag",
|
86
|
+
"type": "Symbol",
|
87
|
+
"default": "`:h3`",
|
88
|
+
"description": "Semantic tag for the heading."
|
89
|
+
},
|
90
|
+
{
|
91
|
+
"name": "system_arguments",
|
92
|
+
"type": "Hash",
|
93
|
+
"default": "N/A",
|
94
|
+
"description": "[System arguments](/system-arguments)"
|
95
|
+
}
|
96
|
+
]
|
97
|
+
},
|
98
|
+
{
|
99
|
+
"component": "ActionList::Item",
|
100
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
|
101
|
+
"parameters": [
|
102
|
+
{
|
103
|
+
"name": "list",
|
104
|
+
"type": "Primer::Alpha::ActionList",
|
105
|
+
"default": "N/A",
|
106
|
+
"description": "The list that contains this item. Used internally."
|
107
|
+
},
|
108
|
+
{
|
109
|
+
"name": "parent",
|
110
|
+
"type": "Primer::Alpha::ActionList::Item",
|
111
|
+
"default": "`nil`",
|
112
|
+
"description": "This item's parent item. `nil` if this item is at the root. Used internally."
|
113
|
+
},
|
114
|
+
{
|
115
|
+
"name": "label",
|
116
|
+
"type": "String",
|
117
|
+
"default": "N/A",
|
118
|
+
"description": "Item label."
|
119
|
+
},
|
120
|
+
{
|
121
|
+
"name": "label_classes",
|
122
|
+
"type": "String",
|
123
|
+
"default": "`nil`",
|
124
|
+
"description": "CSS classes that will be added to the label."
|
125
|
+
},
|
126
|
+
{
|
127
|
+
"name": "truncate_label",
|
128
|
+
"type": "Boolean",
|
129
|
+
"default": "`false`",
|
130
|
+
"description": "Truncate label with ellipsis."
|
131
|
+
},
|
132
|
+
{
|
133
|
+
"name": "href",
|
134
|
+
"type": "String",
|
135
|
+
"default": "`nil`",
|
136
|
+
"description": "Link URL."
|
137
|
+
},
|
138
|
+
{
|
139
|
+
"name": "role",
|
140
|
+
"type": "String",
|
141
|
+
"default": "`:listitem`",
|
142
|
+
"description": "ARIA role describing the function of the item."
|
143
|
+
},
|
144
|
+
{
|
145
|
+
"name": "size",
|
146
|
+
"type": "Symbol",
|
147
|
+
"default": "`:medium`",
|
148
|
+
"description": "Controls block sizing of the item."
|
149
|
+
},
|
150
|
+
{
|
151
|
+
"name": "scheme",
|
152
|
+
"type": "Symbol",
|
153
|
+
"default": "`:default`",
|
154
|
+
"description": "Controls color/style based on behavior."
|
155
|
+
},
|
156
|
+
{
|
157
|
+
"name": "disabled",
|
158
|
+
"type": "Boolean",
|
159
|
+
"default": "`false`",
|
160
|
+
"description": "Disabled items are not clickable and visually dim."
|
161
|
+
},
|
162
|
+
{
|
163
|
+
"name": "description_scheme",
|
164
|
+
"type": "Symbol",
|
165
|
+
"default": "`:block`",
|
166
|
+
"description": "Display description inline with label, or block on the next line."
|
167
|
+
},
|
168
|
+
{
|
169
|
+
"name": "active",
|
170
|
+
"type": "Boolean",
|
171
|
+
"default": "`false`",
|
172
|
+
"description": "Sets an active state on navigational items."
|
173
|
+
},
|
174
|
+
{
|
175
|
+
"name": "on_click",
|
176
|
+
"type": "String",
|
177
|
+
"default": "`nil`",
|
178
|
+
"description": "JavaScript to execute when the item is clicked."
|
179
|
+
},
|
180
|
+
{
|
181
|
+
"name": "id",
|
182
|
+
"type": "String",
|
183
|
+
"default": "`SecureRandom.hex`",
|
184
|
+
"description": "Used internally."
|
185
|
+
},
|
186
|
+
{
|
187
|
+
"name": "system_arguments",
|
188
|
+
"type": "Hash",
|
189
|
+
"default": "N/A",
|
190
|
+
"description": "[System arguments](/system-arguments)"
|
191
|
+
}
|
192
|
+
]
|
193
|
+
},
|
2
194
|
{
|
3
195
|
"component": "ButtonMarketing",
|
4
196
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb",
|
@@ -143,6 +335,78 @@
|
|
143
335
|
}
|
144
336
|
]
|
145
337
|
},
|
338
|
+
{
|
339
|
+
"component": "NavList",
|
340
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
|
341
|
+
"parameters": [
|
342
|
+
{
|
343
|
+
"name": "selected_item_id",
|
344
|
+
"type": "Symbol",
|
345
|
+
"default": "`nil`",
|
346
|
+
"description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
|
347
|
+
},
|
348
|
+
{
|
349
|
+
"name": "system_arguments",
|
350
|
+
"type": "Hash",
|
351
|
+
"default": "N/A",
|
352
|
+
"description": "[System arguments](/system-arguments)"
|
353
|
+
}
|
354
|
+
]
|
355
|
+
},
|
356
|
+
{
|
357
|
+
"component": "NavList::Item",
|
358
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
|
359
|
+
"parameters": [
|
360
|
+
{
|
361
|
+
"name": "selected_item_id",
|
362
|
+
"type": "Symbol",
|
363
|
+
"default": "`nil`",
|
364
|
+
"description": "The ID of the currently selected list item. Used internally."
|
365
|
+
},
|
366
|
+
{
|
367
|
+
"name": "selected_by_ids",
|
368
|
+
"type": "Array<Symbol>",
|
369
|
+
"default": "`[]`",
|
370
|
+
"description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
|
371
|
+
},
|
372
|
+
{
|
373
|
+
"name": "expanded",
|
374
|
+
"type": "Boolean",
|
375
|
+
"default": "`false`",
|
376
|
+
"description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
|
377
|
+
},
|
378
|
+
{
|
379
|
+
"name": "sub_item",
|
380
|
+
"type": "Boolean",
|
381
|
+
"default": "`false`",
|
382
|
+
"description": "Whether or not this item is nested under a parent item. Used internally."
|
383
|
+
},
|
384
|
+
{
|
385
|
+
"name": "system_arguments",
|
386
|
+
"type": "Hash",
|
387
|
+
"default": "N/A",
|
388
|
+
"description": "[System arguments](/system-arguments)"
|
389
|
+
}
|
390
|
+
]
|
391
|
+
},
|
392
|
+
{
|
393
|
+
"component": "NavList::Section",
|
394
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
|
395
|
+
"parameters": [
|
396
|
+
{
|
397
|
+
"name": "selected_item_id",
|
398
|
+
"type": "Symbol",
|
399
|
+
"default": "`nil`",
|
400
|
+
"description": "The ID of the currently selected item. Used internally."
|
401
|
+
},
|
402
|
+
{
|
403
|
+
"name": "system_arguments",
|
404
|
+
"type": "Hash",
|
405
|
+
"default": "N/A",
|
406
|
+
"description": "[System arguments](/system-arguments)"
|
407
|
+
}
|
408
|
+
]
|
409
|
+
},
|
146
410
|
{
|
147
411
|
"component": "TabNav",
|
148
412
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
|
@@ -594,7 +858,7 @@
|
|
594
858
|
]
|
595
859
|
},
|
596
860
|
{
|
597
|
-
"component": "
|
861
|
+
"component": "AutoComplete::Item",
|
598
862
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb",
|
599
863
|
"parameters": [
|
600
864
|
{
|
@@ -792,7 +1056,7 @@
|
|
792
1056
|
]
|
793
1057
|
},
|
794
1058
|
{
|
795
|
-
"component": "
|
1059
|
+
"component": "BorderBox::Header",
|
796
1060
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb",
|
797
1061
|
"parameters": [
|
798
1062
|
{
|
@@ -1698,7 +1962,7 @@
|
|
1698
1962
|
]
|
1699
1963
|
},
|
1700
1964
|
{
|
1701
|
-
"component": "
|
1965
|
+
"component": "Navigation::Tab",
|
1702
1966
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
|
1703
1967
|
"parameters": [
|
1704
1968
|
{
|
data/static/audited_at.json
CHANGED
@@ -1,4 +1,8 @@
|
|
1
1
|
{
|
2
|
+
"Primer::Alpha::ActionList": "",
|
3
|
+
"Primer::Alpha::ActionList::Divider": "",
|
4
|
+
"Primer::Alpha::ActionList::Heading": "",
|
5
|
+
"Primer::Alpha::ActionList::Item": "",
|
2
6
|
"Primer::Alpha::AutoComplete": "",
|
3
7
|
"Primer::Alpha::AutoComplete::Item": "",
|
4
8
|
"Primer::Alpha::ButtonMarketing": "",
|
@@ -10,6 +14,9 @@
|
|
10
14
|
"Primer::Alpha::Layout": "",
|
11
15
|
"Primer::Alpha::Layout::Main": "",
|
12
16
|
"Primer::Alpha::Layout::Sidebar": "",
|
17
|
+
"Primer::Alpha::NavList": "",
|
18
|
+
"Primer::Alpha::NavList::Item": "",
|
19
|
+
"Primer::Alpha::NavList::Section": "",
|
13
20
|
"Primer::Alpha::TabNav": "",
|
14
21
|
"Primer::Alpha::TabPanels": "",
|
15
22
|
"Primer::Alpha::TextField": "",
|
data/static/constants.json
CHANGED
@@ -1,4 +1,72 @@
|
|
1
1
|
{
|
2
|
+
"Primer::Alpha::ActionList": {
|
3
|
+
"DEFAULT_ROLE": "list",
|
4
|
+
"DEFAULT_SCHEME": "full",
|
5
|
+
"Divider": "Primer::Alpha::ActionList::Divider",
|
6
|
+
"Heading": "Primer::Alpha::ActionList::Heading",
|
7
|
+
"Item": "Primer::Alpha::ActionList::Item",
|
8
|
+
"SCHEME_MAPPINGS": {
|
9
|
+
"full": null,
|
10
|
+
"inset": "ActionListWrap--inset"
|
11
|
+
},
|
12
|
+
"SCHEME_OPTIONS": [
|
13
|
+
"full",
|
14
|
+
"inset"
|
15
|
+
]
|
16
|
+
},
|
17
|
+
"Primer::Alpha::ActionList::Divider": {
|
18
|
+
"DEFAULT_SCHEME": "subtle",
|
19
|
+
"SCHEME_MAPPINGS": {
|
20
|
+
"subtle": null,
|
21
|
+
"filled": "ActionList-sectionDivider--filled"
|
22
|
+
},
|
23
|
+
"SCHEME_OPTIONS": [
|
24
|
+
"subtle",
|
25
|
+
"filled"
|
26
|
+
]
|
27
|
+
},
|
28
|
+
"Primer::Alpha::ActionList::Heading": {
|
29
|
+
"DEFAULT_SCHEME": "subtle",
|
30
|
+
"SCHEME_MAPPINGS": {
|
31
|
+
"subtle": null,
|
32
|
+
"filled": "ActionList-sectionDivider--filled"
|
33
|
+
},
|
34
|
+
"SCHEME_OPTIONS": [
|
35
|
+
"subtle",
|
36
|
+
"filled"
|
37
|
+
]
|
38
|
+
},
|
39
|
+
"Primer::Alpha::ActionList::Item": {
|
40
|
+
"DEFAULT_DESCRIPTION_SCHEME": "block",
|
41
|
+
"DEFAULT_SCHEME": "default",
|
42
|
+
"DEFAULT_SIZE": "medium",
|
43
|
+
"DESCRIPTION_SCHEME_MAPPINGS": {
|
44
|
+
"inline": "ActionListItem-descriptionWrap--inline",
|
45
|
+
"block": "ActionListItem-descriptionWrap"
|
46
|
+
},
|
47
|
+
"DESCRIPTION_SCHEME_OPTIONS": [
|
48
|
+
"inline",
|
49
|
+
"block"
|
50
|
+
],
|
51
|
+
"SCHEME_MAPPINGS": {
|
52
|
+
"default": null,
|
53
|
+
"danger": "ActionListItem--danger"
|
54
|
+
},
|
55
|
+
"SCHEME_OPTIONS": [
|
56
|
+
"default",
|
57
|
+
"danger"
|
58
|
+
],
|
59
|
+
"SIZE_MAPPINGS": {
|
60
|
+
"medium": null,
|
61
|
+
"large": "ActionListContent--sizeLarge",
|
62
|
+
"xlarge": "ActionListContent--sizeXLarge"
|
63
|
+
},
|
64
|
+
"SIZE_OPTIONS": [
|
65
|
+
"medium",
|
66
|
+
"large",
|
67
|
+
"xlarge"
|
68
|
+
]
|
69
|
+
},
|
2
70
|
"Primer::Alpha::AutoComplete": {
|
3
71
|
"Item": "Primer::Alpha::AutoComplete::Item"
|
4
72
|
},
|
@@ -170,6 +238,14 @@
|
|
170
238
|
"section"
|
171
239
|
]
|
172
240
|
},
|
241
|
+
"Primer::Alpha::NavList": {
|
242
|
+
"Item": "Primer::Alpha::NavList::Item",
|
243
|
+
"Section": "Primer::Alpha::NavList::Section"
|
244
|
+
},
|
245
|
+
"Primer::Alpha::NavList::Item": {
|
246
|
+
},
|
247
|
+
"Primer::Alpha::NavList::Section": {
|
248
|
+
},
|
173
249
|
"Primer::Alpha::TabNav": {
|
174
250
|
"BODY_TAG_DEFAULT": "ul",
|
175
251
|
"TAG_DEFAULT": "nav",
|
data/static/statuses.json
CHANGED
@@ -1,4 +1,8 @@
|
|
1
1
|
{
|
2
|
+
"Primer::Alpha::ActionList": "alpha",
|
3
|
+
"Primer::Alpha::ActionList::Divider": "alpha",
|
4
|
+
"Primer::Alpha::ActionList::Heading": "alpha",
|
5
|
+
"Primer::Alpha::ActionList::Item": "alpha",
|
2
6
|
"Primer::Alpha::AutoComplete": "deprecated",
|
3
7
|
"Primer::Alpha::AutoComplete::Item": "deprecated",
|
4
8
|
"Primer::Alpha::ButtonMarketing": "alpha",
|
@@ -10,6 +14,9 @@
|
|
10
14
|
"Primer::Alpha::Layout": "alpha",
|
11
15
|
"Primer::Alpha::Layout::Main": "alpha",
|
12
16
|
"Primer::Alpha::Layout::Sidebar": "alpha",
|
17
|
+
"Primer::Alpha::NavList": "alpha",
|
18
|
+
"Primer::Alpha::NavList::Item": "alpha",
|
19
|
+
"Primer::Alpha::NavList::Section": "alpha",
|
13
20
|
"Primer::Alpha::TabNav": "alpha",
|
14
21
|
"Primer::Alpha::TabPanels": "alpha",
|
15
22
|
"Primer::Alpha::TextField": "alpha",
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.97
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-09-
|
11
|
+
date: 2022-09-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -408,6 +408,15 @@ files:
|
|
408
408
|
- app/assets/javascripts/primer_view_components.js.map
|
409
409
|
- app/assets/styles/primer_view_components.css
|
410
410
|
- app/assets/styles/primer_view_components.css.map
|
411
|
+
- app/components/primer/alpha/action_list.html.erb
|
412
|
+
- app/components/primer/alpha/action_list.rb
|
413
|
+
- app/components/primer/alpha/action_list/action-list-selection.pcss
|
414
|
+
- app/components/primer/alpha/action_list/action-list.pcss
|
415
|
+
- app/components/primer/alpha/action_list/divider.rb
|
416
|
+
- app/components/primer/alpha/action_list/heading.html.erb
|
417
|
+
- app/components/primer/alpha/action_list/heading.rb
|
418
|
+
- app/components/primer/alpha/action_list/item.html.erb
|
419
|
+
- app/components/primer/alpha/action_list/item.rb
|
411
420
|
- app/components/primer/alpha/auto_complete.rb
|
412
421
|
- app/components/primer/alpha/auto_complete/auto_complete.html.erb
|
413
422
|
- app/components/primer/alpha/auto_complete/item.rb
|
@@ -424,6 +433,15 @@ files:
|
|
424
433
|
- app/components/primer/alpha/modal_dialog.d.ts
|
425
434
|
- app/components/primer/alpha/modal_dialog.js
|
426
435
|
- app/components/primer/alpha/modal_dialog.ts
|
436
|
+
- app/components/primer/alpha/nav_list.d.ts
|
437
|
+
- app/components/primer/alpha/nav_list.html.erb
|
438
|
+
- app/components/primer/alpha/nav_list.js
|
439
|
+
- app/components/primer/alpha/nav_list.rb
|
440
|
+
- app/components/primer/alpha/nav_list.ts
|
441
|
+
- app/components/primer/alpha/nav_list/item.html.erb
|
442
|
+
- app/components/primer/alpha/nav_list/item.rb
|
443
|
+
- app/components/primer/alpha/nav_list/section.html.erb
|
444
|
+
- app/components/primer/alpha/nav_list/section.rb
|
427
445
|
- app/components/primer/alpha/tab_nav.html.erb
|
428
446
|
- app/components/primer/alpha/tab_nav.rb
|
429
447
|
- app/components/primer/alpha/tab_panels.html.erb
|
@@ -508,8 +526,6 @@ files:
|
|
508
526
|
- app/components/primer/dropdown/menu.ts
|
509
527
|
- app/components/primer/dropdown_menu_component.html.erb
|
510
528
|
- app/components/primer/dropdown_menu_component.rb
|
511
|
-
- app/components/primer/experimental/action_bar.d.ts
|
512
|
-
- app/components/primer/experimental/action_bar.js
|
513
529
|
- app/components/primer/flex_component.rb
|
514
530
|
- app/components/primer/flex_item_component.rb
|
515
531
|
- app/components/primer/heading_component.rb
|
@@ -577,6 +593,7 @@ files:
|
|
577
593
|
- app/lib/primer/test_selector_helper.rb
|
578
594
|
- app/lib/primer/underline_nav_helper.rb
|
579
595
|
- app/lib/primer/view_helper.rb
|
596
|
+
- lib/postcss_mixins/activeIndicatorLine.pcss
|
580
597
|
- lib/postcss_mixins/focusBoxShadowInset.pcss
|
581
598
|
- lib/postcss_mixins/focusOutline.pcss
|
582
599
|
- lib/postcss_mixins/focusOutlineOnEmphasis.pcss
|
@@ -1,14 +0,0 @@
|
|
1
|
-
export declare class ActionBarElement extends HTMLElement {
|
2
|
-
#private;
|
3
|
-
items: HTMLElement[];
|
4
|
-
menuItems: HTMLElement[];
|
5
|
-
itemContainer: HTMLElement;
|
6
|
-
moreMenu: HTMLElement;
|
7
|
-
connectedCallback(): void;
|
8
|
-
disconnectedCallback(): void;
|
9
|
-
}
|
10
|
-
declare global {
|
11
|
-
interface Window {
|
12
|
-
ActionBarElement: typeof ActionBarElement;
|
13
|
-
}
|
14
|
-
}
|
@@ -1,141 +0,0 @@
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
-
};
|
7
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
8
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
9
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
10
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
11
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
12
|
-
};
|
13
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
14
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
15
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
16
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
17
|
-
};
|
18
|
-
var _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_shrinking, _ActionBarElement_growing;
|
19
|
-
import { controller, targets, target } from '@github/catalyst';
|
20
|
-
import { focusZone, FocusKeys } from '@primer/behaviors';
|
21
|
-
let ActionBarElement = class ActionBarElement extends HTMLElement {
|
22
|
-
constructor() {
|
23
|
-
super(...arguments);
|
24
|
-
_ActionBarElement_instances.add(this);
|
25
|
-
_ActionBarElement_observer.set(this, void 0);
|
26
|
-
_ActionBarElement_initialBarWidth.set(this, void 0);
|
27
|
-
_ActionBarElement_previousBarWidth.set(this, void 0);
|
28
|
-
_ActionBarElement_itemGap.set(this, void 0);
|
29
|
-
_ActionBarElement_focusController.set(this, void 0);
|
30
|
-
_ActionBarElement_focusSettings.set(this, {
|
31
|
-
bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
|
32
|
-
});
|
33
|
-
}
|
34
|
-
connectedCallback() {
|
35
|
-
var _a, _b, _c;
|
36
|
-
__classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
|
37
|
-
__classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, this.offsetWidth, "f");
|
38
|
-
__classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
|
39
|
-
// Calculate the width of all the items before hiding anything
|
40
|
-
for (const item of this.items) {
|
41
|
-
const width = item.getBoundingClientRect().width;
|
42
|
-
const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
|
43
|
-
const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
|
44
|
-
item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
|
45
|
-
}
|
46
|
-
__classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
|
47
|
-
this.style.maxWidth = `${this.itemContainer.offsetWidth}px`;
|
48
|
-
// Calculate visible items on page load until there is enough space
|
49
|
-
// to show all items or the first item is hidden
|
50
|
-
while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5 && !this.items[0].hidden) {
|
51
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
|
52
|
-
}
|
53
|
-
this.style.overflow = 'visible';
|
54
|
-
__classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
|
55
|
-
for (const entry of entries) {
|
56
|
-
// Only recalculate if the bar width changed
|
57
|
-
if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
|
58
|
-
if (entry.contentRect.width < __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
|
59
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
|
60
|
-
}
|
61
|
-
else {
|
62
|
-
__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_growing).call(this);
|
63
|
-
}
|
64
|
-
__classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, entry.contentRect.width, "f");
|
65
|
-
}
|
66
|
-
}
|
67
|
-
}), "f");
|
68
|
-
__classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
|
69
|
-
}
|
70
|
-
disconnectedCallback() {
|
71
|
-
var _a;
|
72
|
-
(_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
73
|
-
__classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
|
74
|
-
}
|
75
|
-
};
|
76
|
-
_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
|
77
|
-
// Get the offset of the item container from the container edge
|
78
|
-
return this.offsetWidth - this.itemContainer.offsetWidth;
|
79
|
-
}, _ActionBarElement_shrinking = function _ActionBarElement_shrinking() {
|
80
|
-
var _a;
|
81
|
-
if (this.items[0].hidden) {
|
82
|
-
return;
|
83
|
-
}
|
84
|
-
const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
|
85
|
-
if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + gapSpace) {
|
86
|
-
const visibleItems = this.items.filter(item => !item.hidden);
|
87
|
-
const hiddenMenuItems = this.menuItems.filter(item => item.hidden);
|
88
|
-
visibleItems[visibleItems.length - 1].hidden = true;
|
89
|
-
hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
|
90
|
-
if (this.moreMenu.hidden) {
|
91
|
-
this.moreMenu.hidden = false;
|
92
|
-
}
|
93
|
-
// Reset focus controller
|
94
|
-
(_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
95
|
-
__classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
|
96
|
-
}
|
97
|
-
}, _ActionBarElement_growing = function _ActionBarElement_growing() {
|
98
|
-
var _a;
|
99
|
-
if (this.moreMenu.hidden) {
|
100
|
-
return;
|
101
|
-
}
|
102
|
-
const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
|
103
|
-
const hiddenItems = this.items.filter(item => item.hidden);
|
104
|
-
if (hiddenItems.length === 0) {
|
105
|
-
return;
|
106
|
-
}
|
107
|
-
const hiddenItemWidth = Number(hiddenItems[0].getAttribute('data-offset-width'));
|
108
|
-
if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= this.moreMenu.offsetWidth + hiddenItemWidth + gapSpace) {
|
109
|
-
const visibleMenuItems = this.menuItems.filter(item => !item.hidden);
|
110
|
-
hiddenItems[0].hidden = false;
|
111
|
-
visibleMenuItems[0].hidden = true;
|
112
|
-
if (hiddenItems.length === 2) {
|
113
|
-
hiddenItems[1].hidden = false;
|
114
|
-
visibleMenuItems[1].hidden = true;
|
115
|
-
}
|
116
|
-
// If there was only one item left, hide the more menu
|
117
|
-
if (hiddenItems.length <= 2) {
|
118
|
-
this.moreMenu.hidden = true;
|
119
|
-
}
|
120
|
-
// Reset focus controller
|
121
|
-
(_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
122
|
-
__classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
|
123
|
-
}
|
124
|
-
};
|
125
|
-
__decorate([
|
126
|
-
targets
|
127
|
-
], ActionBarElement.prototype, "items", void 0);
|
128
|
-
__decorate([
|
129
|
-
targets
|
130
|
-
], ActionBarElement.prototype, "menuItems", void 0);
|
131
|
-
__decorate([
|
132
|
-
target
|
133
|
-
], ActionBarElement.prototype, "itemContainer", void 0);
|
134
|
-
__decorate([
|
135
|
-
target
|
136
|
-
], ActionBarElement.prototype, "moreMenu", void 0);
|
137
|
-
ActionBarElement = __decorate([
|
138
|
-
controller
|
139
|
-
], ActionBarElement);
|
140
|
-
export { ActionBarElement };
|
141
|
-
window.ActionBarElement = ActionBarElement;
|