primer_view_components 0.1.8 → 0.1.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -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/item.rb +1 -3
- data/app/components/primer/alpha/action_menu.rb +1 -1
- data/app/components/primer/alpha/modal_dialog.js +6 -0
- data/app/components/primer/alpha/modal_dialog.ts +6 -0
- data/app/components/primer/alpha/overlay/header.html.erb +5 -3
- data/app/components/primer/alpha/overlay/header.rb +4 -1
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.json +1 -1
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +1 -1
- data/app/components/primer/alpha/overlay.rb +1 -0
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +11 -11
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.d.ts +1 -1
- data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
- data/app/components/primer/alpha/toggle_switch.js +44 -42
- data/app/components/primer/alpha/toggle_switch.pcss +4 -4
- data/app/components/primer/alpha/toggle_switch.rb +7 -0
- data/app/components/primer/alpha/toggle_switch.ts +50 -41
- data/app/components/primer/beta/auto_complete.rb +1 -1
- data/app/components/primer/focus_group.js +10 -6
- data/app/components/primer/focus_group.ts +10 -5
- data/lib/primer/forms/dsl/input.rb +4 -8
- data/lib/primer/forms/dsl/text_field_input.rb +0 -4
- data/lib/primer/forms/dsl/toggle_switch_input.rb +4 -0
- data/lib/primer/forms/form_control.html.erb +3 -5
- data/lib/primer/forms/primer_base_component_wrapper.html.erb +3 -0
- data/lib/primer/forms/primer_base_component_wrapper.rb +24 -0
- data/lib/primer/forms/toggle_switch.html.erb +3 -3
- data/lib/primer/forms/toggle_switch.rb +6 -2
- data/lib/primer/forms/toggle_switch_input.js +7 -2
- data/lib/primer/forms/toggle_switch_input.ts +9 -2
- data/lib/primer/static/generate_info_arch.rb +3 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/component_manifest.rb +1 -1
- data/lib/primer/yard/lookbook_pages_backend.rb +7 -1
- data/lib/primer/yard/registry.rb +4 -0
- data/previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb +19 -0
- data/previews/primer/alpha/overlay_preview.rb +31 -0
- data/static/arguments.json +7 -1
- data/static/info_arch.json +312 -1
- data/static/previews.json +5 -0
- metadata +5 -9
- data/lib/tasks/docs.rake +0 -185
- data/lib/tasks/helpers/ast_processor.rb +0 -44
- data/lib/tasks/helpers/ast_traverser.rb +0 -77
- data/lib/tasks/primer_view_components.rake +0 -47
- data/lib/tasks/static.rake +0 -29
- data/lib/tasks/test.rake +0 -83
- data/lib/tasks/utilities.rake +0 -109
data/static/info_arch.json
CHANGED
@@ -2,6 +2,9 @@
|
|
2
2
|
{
|
3
3
|
"fully_qualified_name": "Primer::Alpha::ActionList",
|
4
4
|
"description": "An ActionList is a styled list of links. It acts as the base component for many\nother menu-type components, including `ActionMenu` and `SelectPanel`, as well as\nthe navigational component `NavList`.\n\nEach item in an action list can be augmented by specifying corresponding leading\nand/or trailing visuals.",
|
5
|
+
"is_form_component": false,
|
6
|
+
"is_published": true,
|
7
|
+
"requires_js": true,
|
5
8
|
"component": "ActionList",
|
6
9
|
"status": "alpha",
|
7
10
|
"a11y_reviewed": false,
|
@@ -237,6 +240,9 @@
|
|
237
240
|
{
|
238
241
|
"fully_qualified_name": "Primer::Alpha::ActionList::Item",
|
239
242
|
"description": "An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.",
|
243
|
+
"is_form_component": false,
|
244
|
+
"is_published": true,
|
245
|
+
"requires_js": false,
|
240
246
|
"component": "ActionList::Item",
|
241
247
|
"status": "alpha",
|
242
248
|
"a11y_reviewed": false,
|
@@ -474,6 +480,9 @@
|
|
474
480
|
{
|
475
481
|
"fully_qualified_name": "Primer::Alpha::ActionList::Heading",
|
476
482
|
"description": "Heading used to describe each sub list within an action list.",
|
483
|
+
"is_form_component": false,
|
484
|
+
"is_published": true,
|
485
|
+
"requires_js": false,
|
477
486
|
"component": "ActionList::Heading",
|
478
487
|
"status": "alpha",
|
479
488
|
"a11y_reviewed": false,
|
@@ -541,6 +550,9 @@
|
|
541
550
|
{
|
542
551
|
"fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper",
|
543
552
|
"description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.",
|
553
|
+
"is_form_component": false,
|
554
|
+
"is_published": true,
|
555
|
+
"requires_js": false,
|
544
556
|
"component": "ActionList::FormWrapper",
|
545
557
|
"status": "alpha",
|
546
558
|
"a11y_reviewed": false,
|
@@ -566,6 +578,9 @@
|
|
566
578
|
{
|
567
579
|
"fully_qualified_name": "Primer::Alpha::ActionList::Divider",
|
568
580
|
"description": "Separator with optional text rendered above groups or between individual items.",
|
581
|
+
"is_form_component": false,
|
582
|
+
"is_published": true,
|
583
|
+
"requires_js": false,
|
569
584
|
"component": "ActionList::Divider",
|
570
585
|
"status": "alpha",
|
571
586
|
"a11y_reviewed": false,
|
@@ -604,6 +619,9 @@
|
|
604
619
|
{
|
605
620
|
"fully_qualified_name": "Primer::Alpha::ActionMenu",
|
606
621
|
"description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.",
|
622
|
+
"is_form_component": false,
|
623
|
+
"is_published": true,
|
624
|
+
"requires_js": true,
|
607
625
|
"component": "ActionMenu",
|
608
626
|
"status": "alpha",
|
609
627
|
"a11y_reviewed": false,
|
@@ -889,6 +907,9 @@
|
|
889
907
|
{
|
890
908
|
"fully_qualified_name": "Primer::Alpha::ActionMenu::List",
|
891
909
|
"description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
|
910
|
+
"is_form_component": false,
|
911
|
+
"is_published": true,
|
912
|
+
"requires_js": false,
|
892
913
|
"component": "ActionMenu::List",
|
893
914
|
"status": "alpha",
|
894
915
|
"a11y_reviewed": false,
|
@@ -967,6 +988,9 @@
|
|
967
988
|
{
|
968
989
|
"fully_qualified_name": "Primer::Alpha::AutoComplete",
|
969
990
|
"description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
|
991
|
+
"is_form_component": false,
|
992
|
+
"is_published": true,
|
993
|
+
"requires_js": false,
|
970
994
|
"component": "AutoComplete",
|
971
995
|
"status": "deprecated",
|
972
996
|
"a11y_reviewed": false,
|
@@ -1096,6 +1120,9 @@
|
|
1096
1120
|
{
|
1097
1121
|
"fully_qualified_name": "Primer::Alpha::AutoComplete::Item",
|
1098
1122
|
"description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
|
1123
|
+
"is_form_component": false,
|
1124
|
+
"is_published": true,
|
1125
|
+
"requires_js": false,
|
1099
1126
|
"component": "AutoComplete::Item",
|
1100
1127
|
"status": "deprecated",
|
1101
1128
|
"a11y_reviewed": false,
|
@@ -1146,6 +1173,9 @@
|
|
1146
1173
|
{
|
1147
1174
|
"fully_qualified_name": "Primer::Alpha::Banner",
|
1148
1175
|
"description": "Use `Banner` to highlight important information.",
|
1176
|
+
"is_form_component": false,
|
1177
|
+
"is_published": true,
|
1178
|
+
"requires_js": true,
|
1149
1179
|
"component": "Banner",
|
1150
1180
|
"status": "alpha",
|
1151
1181
|
"a11y_reviewed": false,
|
@@ -1258,6 +1288,9 @@
|
|
1258
1288
|
{
|
1259
1289
|
"fully_qualified_name": "Primer::Alpha::ButtonMarketing",
|
1260
1290
|
"description": "Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
|
1291
|
+
"is_form_component": false,
|
1292
|
+
"is_published": true,
|
1293
|
+
"requires_js": false,
|
1261
1294
|
"component": "ButtonMarketing",
|
1262
1295
|
"status": "alpha",
|
1263
1296
|
"a11y_reviewed": false,
|
@@ -1331,6 +1364,9 @@
|
|
1331
1364
|
{
|
1332
1365
|
"fully_qualified_name": "Primer::Alpha::CheckBox",
|
1333
1366
|
"description": "Check boxes are true/false inputs rendered as `<input type=\"checkbox\">` in HTML.\n\n## Schemes\n\nCheck boxes can submit values to the server using one of two schemes, either `:array`\nor `:boolean` (the default). Check boxes with a scheme of `:boolean` function like normal\nHTML check boxes. If they are checked, a value of \"1\" is sent to the server; if they are\nunchecked, a value of \"0\" is sent to the server. The checked and unchecked values can be\ncustomized via the `:value` and `:unchecked_value` arguments respectively.\n\nWhereas `:boolean` check boxes must have unique names, `:array` check boxes all have the\nsame name. On form submission, Rails will aggregate the values of the check boxes with the\nsame name and provide them to the controller as an array. If `:scheme:` is `:array`, the\n`:value` argument must also be provided. The `:unchecked_value` argument is ignored. If a\ncheck box is checked on submit, its corresponding value will appear in the array. If it is\nnot checked, its value will not appear in the array.\n\n## Caption templates\n\nCaption templates for `:array`-type check boxes work a little differently than they do for\nother input types. Because the name must be the same for all check boxes that make up an\narray, caption template file names are comprised of both the name _and_ the value of each\ncheck box. For example, a check box with the name `foo` and value `bar` must have a caption\ntemplate named `foo_bar_caption.html.erb`.\n\n## Nested Forms\n\nCheck boxes can have \"nested\" forms that are rendered below the caption. A common use-case\nis a form that is hidden until the check box is checked. Nested forms are indented slightly\nto align with the label and caption.\n\nDefine a nested form via the `#nested_form` method, which is expected to return an instance\nof a Primer form (see the usage section below).\n\nAny fields defined in the nested form are submitted along with the parent form's fields.\n\n**NOTE**: Check boxes do not automatically show or hide nested forms. If such behavior is\ndesired, it must be done by hand.",
|
1367
|
+
"is_form_component": true,
|
1368
|
+
"is_published": false,
|
1369
|
+
"requires_js": false,
|
1334
1370
|
"component": "CheckBox",
|
1335
1371
|
"status": "alpha",
|
1336
1372
|
"a11y_reviewed": false,
|
@@ -1501,6 +1537,9 @@
|
|
1501
1537
|
{
|
1502
1538
|
"fully_qualified_name": "Primer::Alpha::CheckBoxGroup",
|
1503
1539
|
"description": "Check box groups consist of one or more related check boxes.",
|
1540
|
+
"is_form_component": true,
|
1541
|
+
"is_published": false,
|
1542
|
+
"requires_js": false,
|
1504
1543
|
"component": "CheckBoxGroup",
|
1505
1544
|
"status": "alpha",
|
1506
1545
|
"a11y_reviewed": false,
|
@@ -1586,6 +1625,9 @@
|
|
1586
1625
|
{
|
1587
1626
|
"fully_qualified_name": "Primer::Alpha::Dialog",
|
1588
1627
|
"description": "A `Dialog` is used to remove the user from the main application flow,\nto confirm actions, ask for disambiguation or to present small forms.",
|
1628
|
+
"is_form_component": false,
|
1629
|
+
"is_published": true,
|
1630
|
+
"requires_js": false,
|
1589
1631
|
"component": "Dialog",
|
1590
1632
|
"status": "alpha",
|
1591
1633
|
"a11y_reviewed": true,
|
@@ -1770,6 +1812,9 @@
|
|
1770
1812
|
{
|
1771
1813
|
"fully_qualified_name": "Primer::Alpha::Dialog::Header",
|
1772
1814
|
"description": "A `Dialog::Header` is a compositional component, used to render the\nHeader of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
|
1815
|
+
"is_form_component": false,
|
1816
|
+
"is_published": true,
|
1817
|
+
"requires_js": false,
|
1773
1818
|
"component": "Dialog::Header",
|
1774
1819
|
"status": "alpha",
|
1775
1820
|
"a11y_reviewed": true,
|
@@ -1824,6 +1869,9 @@
|
|
1824
1869
|
{
|
1825
1870
|
"fully_qualified_name": "Primer::Alpha::Dialog::Footer",
|
1826
1871
|
"description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
|
1872
|
+
"is_form_component": false,
|
1873
|
+
"is_published": true,
|
1874
|
+
"requires_js": false,
|
1827
1875
|
"component": "Dialog::Footer",
|
1828
1876
|
"status": "alpha",
|
1829
1877
|
"a11y_reviewed": true,
|
@@ -1860,6 +1908,9 @@
|
|
1860
1908
|
{
|
1861
1909
|
"fully_qualified_name": "Primer::Alpha::Dialog::Body",
|
1862
1910
|
"description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
|
1911
|
+
"is_form_component": false,
|
1912
|
+
"is_published": true,
|
1913
|
+
"requires_js": false,
|
1863
1914
|
"component": "Dialog::Body",
|
1864
1915
|
"status": "alpha",
|
1865
1916
|
"a11y_reviewed": true,
|
@@ -1892,6 +1943,9 @@
|
|
1892
1943
|
{
|
1893
1944
|
"fully_qualified_name": "Primer::Alpha::Dropdown",
|
1894
1945
|
"description": "`Dropdown` is a lightweight context menu for housing navigation and actions.\nThey're great for instances where you don't need the full power (and code) of the SelectMenu.",
|
1946
|
+
"is_form_component": false,
|
1947
|
+
"is_published": true,
|
1948
|
+
"requires_js": true,
|
1895
1949
|
"component": "Dropdown",
|
1896
1950
|
"status": "alpha",
|
1897
1951
|
"a11y_reviewed": false,
|
@@ -1997,6 +2051,9 @@
|
|
1997
2051
|
{
|
1998
2052
|
"fully_qualified_name": "Primer::Alpha::Dropdown::Menu::Item",
|
1999
2053
|
"description": "Items to be rendered in the `Dropdown` menu.",
|
2054
|
+
"is_form_component": false,
|
2055
|
+
"is_published": true,
|
2056
|
+
"requires_js": false,
|
2000
2057
|
"component": "Dropdown::Menu::Item",
|
2001
2058
|
"status": "alpha",
|
2002
2059
|
"a11y_reviewed": false,
|
@@ -2022,6 +2079,9 @@
|
|
2022
2079
|
{
|
2023
2080
|
"fully_qualified_name": "Primer::Alpha::Dropdown::Menu",
|
2024
2081
|
"description": "This component is part of `Dropdown` and should not be\nused as a standalone component.",
|
2082
|
+
"is_form_component": false,
|
2083
|
+
"is_published": true,
|
2084
|
+
"requires_js": false,
|
2025
2085
|
"component": "Dropdown::Menu",
|
2026
2086
|
"status": "alpha",
|
2027
2087
|
"a11y_reviewed": false,
|
@@ -2095,6 +2155,9 @@
|
|
2095
2155
|
{
|
2096
2156
|
"fully_qualified_name": "Primer::Alpha::FormButton",
|
2097
2157
|
"description": "A button input rendered using the HTML `<button type=\"button\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
|
2158
|
+
"is_form_component": true,
|
2159
|
+
"is_published": false,
|
2160
|
+
"requires_js": false,
|
2098
2161
|
"component": "FormButton",
|
2099
2162
|
"status": "alpha",
|
2100
2163
|
"a11y_reviewed": false,
|
@@ -2167,6 +2230,9 @@
|
|
2167
2230
|
{
|
2168
2231
|
"fully_qualified_name": "Primer::Alpha::FormControl",
|
2169
2232
|
"description": "Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.\nNOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer\nforms framework.",
|
2233
|
+
"is_form_component": false,
|
2234
|
+
"is_published": true,
|
2235
|
+
"requires_js": false,
|
2170
2236
|
"component": "FormControl",
|
2171
2237
|
"status": "alpha",
|
2172
2238
|
"a11y_reviewed": false,
|
@@ -2260,6 +2326,9 @@
|
|
2260
2326
|
{
|
2261
2327
|
"fully_qualified_name": "Primer::Alpha::HellipButton",
|
2262
2328
|
"description": "Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.",
|
2329
|
+
"is_form_component": false,
|
2330
|
+
"is_published": true,
|
2331
|
+
"requires_js": false,
|
2263
2332
|
"component": "HellipButton",
|
2264
2333
|
"status": "alpha",
|
2265
2334
|
"a11y_reviewed": false,
|
@@ -2305,6 +2374,9 @@
|
|
2305
2374
|
{
|
2306
2375
|
"fully_qualified_name": "Primer::Alpha::HiddenTextExpander",
|
2307
2376
|
"description": "Use `HiddenTextExpander` to indicate and toggle hidden text.",
|
2377
|
+
"is_form_component": false,
|
2378
|
+
"is_published": true,
|
2379
|
+
"requires_js": false,
|
2308
2380
|
"component": "HiddenTextExpander",
|
2309
2381
|
"status": "alpha",
|
2310
2382
|
"a11y_reviewed": false,
|
@@ -2356,6 +2428,9 @@
|
|
2356
2428
|
{
|
2357
2429
|
"fully_qualified_name": "Primer::Alpha::Image",
|
2358
2430
|
"description": "Use `Image` to render images.",
|
2431
|
+
"is_form_component": false,
|
2432
|
+
"is_published": true,
|
2433
|
+
"requires_js": false,
|
2359
2434
|
"component": "Image",
|
2360
2435
|
"status": "alpha",
|
2361
2436
|
"a11y_reviewed": false,
|
@@ -2404,6 +2479,9 @@
|
|
2404
2479
|
{
|
2405
2480
|
"fully_qualified_name": "Primer::Alpha::ImageCrop",
|
2406
2481
|
"description": "A client-side mechanism to crop images.",
|
2482
|
+
"is_form_component": false,
|
2483
|
+
"is_published": true,
|
2484
|
+
"requires_js": true,
|
2407
2485
|
"component": "ImageCrop",
|
2408
2486
|
"status": "alpha",
|
2409
2487
|
"a11y_reviewed": false,
|
@@ -2471,6 +2549,9 @@
|
|
2471
2549
|
{
|
2472
2550
|
"fully_qualified_name": "Primer::Alpha::Layout",
|
2473
2551
|
"description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
|
2552
|
+
"is_form_component": false,
|
2553
|
+
"is_published": true,
|
2554
|
+
"requires_js": false,
|
2474
2555
|
"component": "Layout",
|
2475
2556
|
"status": "alpha",
|
2476
2557
|
"a11y_reviewed": false,
|
@@ -2602,6 +2683,9 @@
|
|
2602
2683
|
{
|
2603
2684
|
"fully_qualified_name": "Primer::Alpha::Layout::Sidebar",
|
2604
2685
|
"description": "The layout's sidebar content.",
|
2686
|
+
"is_form_component": false,
|
2687
|
+
"is_published": true,
|
2688
|
+
"requires_js": false,
|
2605
2689
|
"component": "Layout::Sidebar",
|
2606
2690
|
"status": "alpha",
|
2607
2691
|
"a11y_reviewed": false,
|
@@ -2627,6 +2711,9 @@
|
|
2627
2711
|
{
|
2628
2712
|
"fully_qualified_name": "Primer::Alpha::Layout::Main",
|
2629
2713
|
"description": "The layout's main content.",
|
2714
|
+
"is_form_component": false,
|
2715
|
+
"is_published": true,
|
2716
|
+
"requires_js": false,
|
2630
2717
|
"component": "Layout::Main",
|
2631
2718
|
"status": "alpha",
|
2632
2719
|
"a11y_reviewed": false,
|
@@ -2665,6 +2752,9 @@
|
|
2665
2752
|
{
|
2666
2753
|
"fully_qualified_name": "Primer::Alpha::Menu",
|
2667
2754
|
"description": "Use `Menu` to create vertical lists of navigational links.",
|
2755
|
+
"is_form_component": false,
|
2756
|
+
"is_published": true,
|
2757
|
+
"requires_js": false,
|
2668
2758
|
"component": "Menu",
|
2669
2759
|
"status": "alpha",
|
2670
2760
|
"a11y_reviewed": false,
|
@@ -2745,6 +2835,9 @@
|
|
2745
2835
|
{
|
2746
2836
|
"fully_qualified_name": "Primer::Alpha::MultiInput",
|
2747
2837
|
"description": "Multi inputs are comprised of multiple constituent fields, only one of which is visible\nat a given time. They are designed for situations where constituent inputs are shown or\nhidden based on the value of another field. For example, consider an address form. If\nthe user chooses the USA as the country, the region input should show a list of states\nand US territories; if the user instead chooses Canada, the region input should show a\nlist of Canadian provinces, etc.\n\nUnlike everywhere else in Primer forms, constituent inputs are not directly passed a\n`name` attribute. Instead, developers pass a `name` attribute to the multi input itself.\nThe multi input then automatically assigns each constituent input the same name. This is\ndone so that the multi input looks like a single field from the server's point of view.\nUsing the address form example from earlier, this means only one value - either a US state\nor a Canadian provice - will be submitted to the server under the `region` key.\n\nActually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to\nthe input as the `data-name` attribute as a way to identify constituent inputs, and will not\nbe sent to the server.",
|
2838
|
+
"is_form_component": true,
|
2839
|
+
"is_published": false,
|
2840
|
+
"requires_js": true,
|
2748
2841
|
"component": "MultiInput",
|
2749
2842
|
"status": "alpha",
|
2750
2843
|
"a11y_reviewed": false,
|
@@ -2901,6 +2994,9 @@
|
|
2901
2994
|
{
|
2902
2995
|
"fully_qualified_name": "Primer::Alpha::NavList",
|
2903
2996
|
"description": "`NavList` provides a simple way to render side navigation, i.e. navigation\nthat appears to the left or right side of some main content. Each group in a\nnav list is a list of links.\n\nNav list groups can contain sub items. Rather than navigating to a URL, groups\nwith sub items expand and collapse on click. To indicate this functionality, the\ngroup will automatically render with a trailing chevron icon that changes direction\nwhen the group expands and collapses.\n\nNav list items appear visually active when selected. Each nav item must have one\nor more ID values that determine which item will appear selected. Use the\n`selected_item_id` argument to select the appropriate item.",
|
2997
|
+
"is_form_component": false,
|
2998
|
+
"is_published": true,
|
2999
|
+
"requires_js": true,
|
2904
3000
|
"component": "NavList",
|
2905
3001
|
"status": "alpha",
|
2906
3002
|
"a11y_reviewed": false,
|
@@ -3006,6 +3102,9 @@
|
|
3006
3102
|
{
|
3007
3103
|
"fully_qualified_name": "Primer::Alpha::NavList::Item",
|
3008
3104
|
"description": "Items are rendered as styled links. They can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the\n`selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also\nthemselves contain sub items. Sub items are rendered collapsed by default.",
|
3105
|
+
"is_form_component": false,
|
3106
|
+
"is_published": true,
|
3107
|
+
"requires_js": true,
|
3009
3108
|
"component": "NavList::Item",
|
3010
3109
|
"status": "alpha",
|
3011
3110
|
"a11y_reviewed": false,
|
@@ -3156,6 +3255,9 @@
|
|
3156
3255
|
{
|
3157
3256
|
"fully_qualified_name": "Primer::Alpha::NavList::Divider",
|
3158
3257
|
"description": "Separator with optional text rendered above groups or between individual items.",
|
3258
|
+
"is_form_component": false,
|
3259
|
+
"is_published": true,
|
3260
|
+
"requires_js": false,
|
3159
3261
|
"component": "NavList::Divider",
|
3160
3262
|
"status": "alpha",
|
3161
3263
|
"a11y_reviewed": false,
|
@@ -3192,6 +3294,9 @@
|
|
3192
3294
|
{
|
3193
3295
|
"fully_qualified_name": "Primer::Alpha::NavList::Group",
|
3194
3296
|
"description": "A logical grouping of navigation links with an optional heading.\n\nSee {{#link_to_component}}Primer::Alpha::NavList{{/link_to_component}} for usage examples.",
|
3297
|
+
"is_form_component": false,
|
3298
|
+
"is_published": true,
|
3299
|
+
"requires_js": true,
|
3195
3300
|
"component": "NavList::Group",
|
3196
3301
|
"status": "alpha",
|
3197
3302
|
"a11y_reviewed": false,
|
@@ -3289,6 +3394,9 @@
|
|
3289
3394
|
{
|
3290
3395
|
"fully_qualified_name": "Primer::Alpha::Navigation::Tab",
|
3291
3396
|
"description": "This component is part of navigation components such as `Primer::Alpha::TabNav`\nand `Primer::Alpha::UnderlineNav` and should not be used by itself.",
|
3397
|
+
"is_form_component": false,
|
3398
|
+
"is_published": true,
|
3399
|
+
"requires_js": false,
|
3292
3400
|
"component": "Navigation::Tab",
|
3293
3401
|
"status": "alpha",
|
3294
3402
|
"a11y_reviewed": false,
|
@@ -3408,6 +3516,9 @@
|
|
3408
3516
|
{
|
3409
3517
|
"fully_qualified_name": "Primer::Alpha::OcticonSymbols",
|
3410
3518
|
"description": "OcticonSymbols renders a symbol dictionary using a list of {{link_to_octicons}}.",
|
3519
|
+
"is_form_component": false,
|
3520
|
+
"is_published": true,
|
3521
|
+
"requires_js": false,
|
3411
3522
|
"component": "OcticonSymbols",
|
3412
3523
|
"status": "alpha",
|
3413
3524
|
"a11y_reviewed": false,
|
@@ -3438,6 +3549,9 @@
|
|
3438
3549
|
{
|
3439
3550
|
"fully_qualified_name": "Primer::Alpha::Overlay",
|
3440
3551
|
"description": "Overlay components codify design patterns related to floating surfaces such\nas dialogs and menus. They are private components intended to be used by\nspecialized components, and mostly contain presentational logic and\nbehavior.",
|
3552
|
+
"is_form_component": false,
|
3553
|
+
"is_published": true,
|
3554
|
+
"requires_js": true,
|
3441
3555
|
"component": "Overlay",
|
3442
3556
|
"status": "alpha",
|
3443
3557
|
"a11y_reviewed": false,
|
@@ -3645,12 +3759,20 @@
|
|
3645
3759
|
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
|
3646
3760
|
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
|
3647
3761
|
"name": "middle_of_page"
|
3762
|
+
},
|
3763
|
+
{
|
3764
|
+
"inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page_with_relative_container",
|
3765
|
+
"preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page_with_relative_container",
|
3766
|
+
"name": "middle_of_page_with_relative_container"
|
3648
3767
|
}
|
3649
3768
|
],
|
3650
3769
|
"subcomponents": [
|
3651
3770
|
{
|
3652
3771
|
"fully_qualified_name": "Primer::Alpha::Overlay::Header",
|
3653
3772
|
"description": "A `Overlay::Header` is a compositional component, used to render the\nHeader of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
|
3773
|
+
"is_form_component": false,
|
3774
|
+
"is_published": true,
|
3775
|
+
"requires_js": false,
|
3654
3776
|
"component": "Overlay::Header",
|
3655
3777
|
"status": "alpha",
|
3656
3778
|
"a11y_reviewed": false,
|
@@ -3668,7 +3790,13 @@
|
|
3668
3790
|
"name": "subtitle",
|
3669
3791
|
"type": "String",
|
3670
3792
|
"default": "`nil`",
|
3671
|
-
"description": "Provides
|
3793
|
+
"description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
|
3794
|
+
},
|
3795
|
+
{
|
3796
|
+
"name": "overlay_id",
|
3797
|
+
"type": "String",
|
3798
|
+
"default": "`nil`",
|
3799
|
+
"description": "Provides the id of the overlay element so the close button can close it"
|
3672
3800
|
},
|
3673
3801
|
{
|
3674
3802
|
"name": "size",
|
@@ -3711,6 +3839,9 @@
|
|
3711
3839
|
{
|
3712
3840
|
"fully_qualified_name": "Primer::Alpha::Overlay::Footer",
|
3713
3841
|
"description": "A `Overlay::Footer` is a compositional component, used to render the\nFooter of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
|
3842
|
+
"is_form_component": false,
|
3843
|
+
"is_published": true,
|
3844
|
+
"requires_js": false,
|
3714
3845
|
"component": "Overlay::Footer",
|
3715
3846
|
"status": "alpha",
|
3716
3847
|
"a11y_reviewed": false,
|
@@ -3753,6 +3884,9 @@
|
|
3753
3884
|
{
|
3754
3885
|
"fully_qualified_name": "Primer::Alpha::Overlay::Body",
|
3755
3886
|
"description": "A `Overlay::Body` is a compositional component, used to render the\nBody of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
|
3887
|
+
"is_form_component": false,
|
3888
|
+
"is_published": true,
|
3889
|
+
"requires_js": false,
|
3756
3890
|
"component": "Overlay::Body",
|
3757
3891
|
"status": "alpha",
|
3758
3892
|
"a11y_reviewed": false,
|
@@ -3785,6 +3919,9 @@
|
|
3785
3919
|
{
|
3786
3920
|
"fully_qualified_name": "Primer::Alpha::RadioButton",
|
3787
3921
|
"description": "Radio buttons represent one of a set of options and are rendered as `<input type=\"radio\">` in HTML.\n**NOTE**: You probably want to use the {{#link_to_component}}Primer::Alpha::RadioButtonGroup{{/link_to_component}}\ncomponent instead, as it allows rendering a group of options.",
|
3922
|
+
"is_form_component": true,
|
3923
|
+
"is_published": false,
|
3924
|
+
"requires_js": false,
|
3788
3925
|
"component": "RadioButton",
|
3789
3926
|
"status": "alpha",
|
3790
3927
|
"a11y_reviewed": false,
|
@@ -3931,6 +4068,9 @@
|
|
3931
4068
|
{
|
3932
4069
|
"fully_qualified_name": "Primer::Alpha::RadioButtonGroup",
|
3933
4070
|
"description": "A group of mutually exclusive radio buttons.",
|
4071
|
+
"is_form_component": true,
|
4072
|
+
"is_published": false,
|
4073
|
+
"requires_js": false,
|
3934
4074
|
"component": "RadioButtonGroup",
|
3935
4075
|
"status": "alpha",
|
3936
4076
|
"a11y_reviewed": false,
|
@@ -4016,6 +4156,9 @@
|
|
4016
4156
|
{
|
4017
4157
|
"fully_qualified_name": "Primer::Alpha::SegmentedControl",
|
4018
4158
|
"description": "Use a segmented control to let users select an option from a short list and immediately apply the selection",
|
4159
|
+
"is_form_component": false,
|
4160
|
+
"is_published": true,
|
4161
|
+
"requires_js": false,
|
4019
4162
|
"component": "SegmentedControl",
|
4020
4163
|
"status": "alpha",
|
4021
4164
|
"a11y_reviewed": true,
|
@@ -4106,6 +4249,9 @@
|
|
4106
4249
|
{
|
4107
4250
|
"fully_qualified_name": "Primer::Alpha::SegmentedControl::Item",
|
4108
4251
|
"description": "SegmentedControl::Item is a private component that is only used by SegmentedControl\nIt wraps the Button and IconButton components to provide the correct styles",
|
4252
|
+
"is_form_component": false,
|
4253
|
+
"is_published": true,
|
4254
|
+
"requires_js": false,
|
4109
4255
|
"component": "SegmentedControl::Item",
|
4110
4256
|
"status": "alpha",
|
4111
4257
|
"a11y_reviewed": true,
|
@@ -4156,6 +4302,9 @@
|
|
4156
4302
|
{
|
4157
4303
|
"fully_qualified_name": "Primer::Alpha::Select",
|
4158
4304
|
"description": "Select lists are single-line text inputs rendered as `<select>` tags in HTML.",
|
4305
|
+
"is_form_component": true,
|
4306
|
+
"is_published": false,
|
4307
|
+
"requires_js": false,
|
4159
4308
|
"component": "Select",
|
4160
4309
|
"status": "alpha",
|
4161
4310
|
"a11y_reviewed": false,
|
@@ -4343,6 +4492,9 @@
|
|
4343
4492
|
{
|
4344
4493
|
"fully_qualified_name": "Primer::Alpha::SubmitButton",
|
4345
4494
|
"description": "A submit button input rendered using the HTML `<button type=\"submit\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
|
4495
|
+
"is_form_component": true,
|
4496
|
+
"is_published": false,
|
4497
|
+
"requires_js": false,
|
4346
4498
|
"component": "SubmitButton",
|
4347
4499
|
"status": "alpha",
|
4348
4500
|
"a11y_reviewed": false,
|
@@ -4415,6 +4567,9 @@
|
|
4415
4567
|
{
|
4416
4568
|
"fully_qualified_name": "Primer::Alpha::TabContainer",
|
4417
4569
|
"description": "Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.\nIt only provides the tab functionality. If you want styled Tabs you can look at {{#link_to_component}}Primer::Alpha::TabNav{{/link_to_component}}.\n\nThis component requires javascript.",
|
4570
|
+
"is_form_component": false,
|
4571
|
+
"is_published": true,
|
4572
|
+
"requires_js": true,
|
4418
4573
|
"component": "TabContainer",
|
4419
4574
|
"status": "alpha",
|
4420
4575
|
"a11y_reviewed": false,
|
@@ -4445,6 +4600,9 @@
|
|
4445
4600
|
{
|
4446
4601
|
"fully_qualified_name": "Primer::Alpha::TabNav",
|
4447
4602
|
"description": "Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::TabPanels{{/link_to_component}} instead.",
|
4603
|
+
"is_form_component": false,
|
4604
|
+
"is_published": true,
|
4605
|
+
"requires_js": false,
|
4448
4606
|
"component": "TabNav",
|
4449
4607
|
"status": "alpha",
|
4450
4608
|
"a11y_reviewed": false,
|
@@ -4541,6 +4699,9 @@
|
|
4541
4699
|
{
|
4542
4700
|
"fully_qualified_name": "Primer::Alpha::TabPanels",
|
4543
4701
|
"description": "Use `TabPanels` for tabs with panel navigation.",
|
4702
|
+
"is_form_component": false,
|
4703
|
+
"is_published": true,
|
4704
|
+
"requires_js": true,
|
4544
4705
|
"component": "TabPanels",
|
4545
4706
|
"status": "alpha",
|
4546
4707
|
"a11y_reviewed": false,
|
@@ -4644,6 +4805,9 @@
|
|
4644
4805
|
{
|
4645
4806
|
"fully_qualified_name": "Primer::Alpha::TextArea",
|
4646
4807
|
"description": "Text areas are multi-line text inputs rendered using the `<textarea>` tag in HTML.",
|
4808
|
+
"is_form_component": true,
|
4809
|
+
"is_published": false,
|
4810
|
+
"requires_js": false,
|
4647
4811
|
"component": "TextArea",
|
4648
4812
|
"status": "alpha",
|
4649
4813
|
"a11y_reviewed": false,
|
@@ -4796,6 +4960,9 @@
|
|
4796
4960
|
{
|
4797
4961
|
"fully_qualified_name": "Primer::Alpha::TextField",
|
4798
4962
|
"description": "Text fields are single-line text inputs rendered as `<input type=\"text\">` in HTML.",
|
4963
|
+
"is_form_component": true,
|
4964
|
+
"is_published": true,
|
4965
|
+
"requires_js": false,
|
4799
4966
|
"component": "TextField",
|
4800
4967
|
"status": "alpha",
|
4801
4968
|
"a11y_reviewed": false,
|
@@ -5011,6 +5178,9 @@
|
|
5011
5178
|
{
|
5012
5179
|
"fully_qualified_name": "Primer::Alpha::ToggleSwitch",
|
5013
5180
|
"description": "The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for\nsettings that should cause an immediate update. If configured with a \"src\" attribute, the component will\nmake a POST request containing data of the form \"value: 0 | 1\".",
|
5181
|
+
"is_form_component": false,
|
5182
|
+
"is_published": true,
|
5183
|
+
"requires_js": true,
|
5014
5184
|
"component": "ToggleSwitch",
|
5015
5185
|
"status": "alpha",
|
5016
5186
|
"a11y_reviewed": false,
|
@@ -5131,6 +5301,9 @@
|
|
5131
5301
|
{
|
5132
5302
|
"fully_qualified_name": "Primer::Alpha::Tooltip",
|
5133
5303
|
"description": "`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).",
|
5304
|
+
"is_form_component": false,
|
5305
|
+
"is_published": true,
|
5306
|
+
"requires_js": true,
|
5134
5307
|
"component": "Tooltip",
|
5135
5308
|
"status": "alpha",
|
5136
5309
|
"a11y_reviewed": false,
|
@@ -5219,6 +5392,9 @@
|
|
5219
5392
|
{
|
5220
5393
|
"fully_qualified_name": "Primer::Alpha::UnderlineNav",
|
5221
5394
|
"description": "Use `UnderlineNav` to style navigation links with a minimal\nunderlined selected state, typically placed at the top\nof the page.\n\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::UnderlinePanels{{/link_to_component}} instead.",
|
5395
|
+
"is_form_component": false,
|
5396
|
+
"is_published": true,
|
5397
|
+
"requires_js": false,
|
5222
5398
|
"component": "UnderlineNav",
|
5223
5399
|
"status": "alpha",
|
5224
5400
|
"a11y_reviewed": false,
|
@@ -5322,6 +5498,9 @@
|
|
5322
5498
|
{
|
5323
5499
|
"fully_qualified_name": "Primer::Alpha::UnderlinePanels",
|
5324
5500
|
"description": "Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.",
|
5501
|
+
"is_form_component": false,
|
5502
|
+
"is_published": true,
|
5503
|
+
"requires_js": true,
|
5325
5504
|
"component": "UnderlinePanels",
|
5326
5505
|
"status": "alpha",
|
5327
5506
|
"a11y_reviewed": false,
|
@@ -5426,6 +5605,9 @@
|
|
5426
5605
|
{
|
5427
5606
|
"fully_qualified_name": "Primer::Beta::AutoComplete",
|
5428
5607
|
"description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
|
5608
|
+
"is_form_component": false,
|
5609
|
+
"is_published": true,
|
5610
|
+
"requires_js": true,
|
5429
5611
|
"component": "AutoComplete",
|
5430
5612
|
"status": "beta",
|
5431
5613
|
"a11y_reviewed": false,
|
@@ -5657,6 +5839,9 @@
|
|
5657
5839
|
{
|
5658
5840
|
"fully_qualified_name": "Primer::Beta::AutoComplete::Item",
|
5659
5841
|
"description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
|
5842
|
+
"is_form_component": false,
|
5843
|
+
"is_published": true,
|
5844
|
+
"requires_js": false,
|
5660
5845
|
"component": "AutoComplete::Item",
|
5661
5846
|
"status": "beta",
|
5662
5847
|
"a11y_reviewed": false,
|
@@ -5768,6 +5953,9 @@
|
|
5768
5953
|
{
|
5769
5954
|
"fully_qualified_name": "Primer::Beta::Avatar",
|
5770
5955
|
"description": "`Avatar` can be used to represent users and organizations on GitHub.\n\n- Use the default circle avatar for users, and the square shape\nfor organizations or any other non-human avatars.\n- By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.\n- Set `size` to update the height and width of the `Avatar` in pixels.\n- To stack multiple avatars together, use {{#link_to_component}}Primer::Beta::AvatarStack{{/link_to_component}}.",
|
5956
|
+
"is_form_component": false,
|
5957
|
+
"is_published": true,
|
5958
|
+
"requires_js": false,
|
5771
5959
|
"component": "Avatar",
|
5772
5960
|
"status": "beta",
|
5773
5961
|
"a11y_reviewed": false,
|
@@ -5852,6 +6040,9 @@
|
|
5852
6040
|
{
|
5853
6041
|
"fully_qualified_name": "Primer::Beta::AvatarStack",
|
5854
6042
|
"description": "Use `AvatarStack` to stack multiple avatars together.",
|
6043
|
+
"is_form_component": false,
|
6044
|
+
"is_published": true,
|
6045
|
+
"requires_js": false,
|
5855
6046
|
"component": "AvatarStack",
|
5856
6047
|
"status": "beta",
|
5857
6048
|
"a11y_reviewed": false,
|
@@ -5936,6 +6127,9 @@
|
|
5936
6127
|
{
|
5937
6128
|
"fully_qualified_name": "Primer::Beta::BaseButton",
|
5938
6129
|
"description": "Use `BaseButton` to render an unstyled `<button>` tag that can be customized.",
|
6130
|
+
"is_form_component": false,
|
6131
|
+
"is_published": true,
|
6132
|
+
"requires_js": false,
|
5939
6133
|
"component": "BaseButton",
|
5940
6134
|
"status": "beta",
|
5941
6135
|
"a11y_reviewed": false,
|
@@ -5993,6 +6187,9 @@
|
|
5993
6187
|
{
|
5994
6188
|
"fully_qualified_name": "Primer::Beta::Blankslate",
|
5995
6189
|
"description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
|
6190
|
+
"is_form_component": false,
|
6191
|
+
"is_published": true,
|
6192
|
+
"requires_js": false,
|
5996
6193
|
"component": "Blankslate",
|
5997
6194
|
"status": "beta",
|
5998
6195
|
"a11y_reviewed": false,
|
@@ -6167,6 +6364,9 @@
|
|
6167
6364
|
{
|
6168
6365
|
"fully_qualified_name": "Primer::Beta::BorderBox",
|
6169
6366
|
"description": "`BorderBox` is a Box component with a border.",
|
6367
|
+
"is_form_component": false,
|
6368
|
+
"is_published": true,
|
6369
|
+
"requires_js": false,
|
6170
6370
|
"component": "BorderBox",
|
6171
6371
|
"status": "beta",
|
6172
6372
|
"a11y_reviewed": false,
|
@@ -6277,6 +6477,9 @@
|
|
6277
6477
|
{
|
6278
6478
|
"fully_qualified_name": "Primer::Beta::BorderBox::Header",
|
6279
6479
|
"description": "`BorderBox::Header` is used inside `BorderBox` to render its header slot.",
|
6480
|
+
"is_form_component": false,
|
6481
|
+
"is_published": true,
|
6482
|
+
"requires_js": false,
|
6280
6483
|
"component": "BorderBox::Header",
|
6281
6484
|
"status": "beta",
|
6282
6485
|
"a11y_reviewed": false,
|
@@ -6326,6 +6529,9 @@
|
|
6326
6529
|
{
|
6327
6530
|
"fully_qualified_name": "Primer::Beta::Breadcrumbs",
|
6328
6531
|
"description": "Use `Breadcrumbs` to display page hierarchy.\n\n#### Known issues\n\n##### Responsiveness\n\n`Breadcrumbs` is not optimized for responsive designs.",
|
6532
|
+
"is_form_component": false,
|
6533
|
+
"is_published": true,
|
6534
|
+
"requires_js": false,
|
6329
6535
|
"component": "Breadcrumbs",
|
6330
6536
|
"status": "beta",
|
6331
6537
|
"a11y_reviewed": false,
|
@@ -6379,6 +6585,9 @@
|
|
6379
6585
|
{
|
6380
6586
|
"fully_qualified_name": "Primer::Beta::Breadcrumbs::Item",
|
6381
6587
|
"description": "This component is part of `Primer::Beta::Breadcrumbs` and should not be\nused as a standalone component.",
|
6588
|
+
"is_form_component": false,
|
6589
|
+
"is_published": true,
|
6590
|
+
"requires_js": false,
|
6382
6591
|
"component": "Breadcrumbs::Item",
|
6383
6592
|
"status": "alpha",
|
6384
6593
|
"a11y_reviewed": false,
|
@@ -6443,6 +6652,9 @@
|
|
6443
6652
|
{
|
6444
6653
|
"fully_qualified_name": "Primer::Beta::Button",
|
6445
6654
|
"description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
|
6655
|
+
"is_form_component": false,
|
6656
|
+
"is_published": true,
|
6657
|
+
"requires_js": false,
|
6446
6658
|
"component": "Button",
|
6447
6659
|
"status": "beta",
|
6448
6660
|
"a11y_reviewed": false,
|
@@ -6636,6 +6848,9 @@
|
|
6636
6848
|
{
|
6637
6849
|
"fully_qualified_name": "Primer::Beta::ButtonGroup",
|
6638
6850
|
"description": "Use `ButtonGroup` to render a series of buttons.",
|
6851
|
+
"is_form_component": false,
|
6852
|
+
"is_published": true,
|
6853
|
+
"requires_js": false,
|
6639
6854
|
"component": "ButtonGroup",
|
6640
6855
|
"status": "beta",
|
6641
6856
|
"a11y_reviewed": false,
|
@@ -6698,6 +6913,9 @@
|
|
6698
6913
|
{
|
6699
6914
|
"fully_qualified_name": "Primer::Beta::ClipboardCopy",
|
6700
6915
|
"description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.",
|
6916
|
+
"is_form_component": false,
|
6917
|
+
"is_published": true,
|
6918
|
+
"requires_js": true,
|
6701
6919
|
"component": "ClipboardCopy",
|
6702
6920
|
"status": "beta",
|
6703
6921
|
"a11y_reviewed": false,
|
@@ -6765,6 +6983,9 @@
|
|
6765
6983
|
{
|
6766
6984
|
"fully_qualified_name": "Primer::Beta::CloseButton",
|
6767
6985
|
"description": "Use `CloseButton` to render an `×` without default button styles.\n\n[0]: https://primer.style/view-components/system-arguments#html-attributes",
|
6986
|
+
"is_form_component": false,
|
6987
|
+
"is_published": true,
|
6988
|
+
"requires_js": false,
|
6768
6989
|
"component": "CloseButton",
|
6769
6990
|
"status": "beta",
|
6770
6991
|
"a11y_reviewed": false,
|
@@ -6810,6 +7031,9 @@
|
|
6810
7031
|
{
|
6811
7032
|
"fully_qualified_name": "Primer::Beta::Counter",
|
6812
7033
|
"description": "Use `Counter` to add a count to navigational elements and buttons.",
|
7034
|
+
"is_form_component": false,
|
7035
|
+
"is_published": true,
|
7036
|
+
"requires_js": false,
|
6813
7037
|
"component": "Counter",
|
6814
7038
|
"status": "beta",
|
6815
7039
|
"a11y_reviewed": false,
|
@@ -6900,6 +7124,9 @@
|
|
6900
7124
|
{
|
6901
7125
|
"fully_qualified_name": "Primer::Beta::Details",
|
6902
7126
|
"description": "Use `DetailsComponent` to reveal content after clicking a button.",
|
7127
|
+
"is_form_component": false,
|
7128
|
+
"is_published": true,
|
7129
|
+
"requires_js": false,
|
6903
7130
|
"component": "Details",
|
6904
7131
|
"status": "beta",
|
6905
7132
|
"a11y_reviewed": false,
|
@@ -6996,6 +7223,9 @@
|
|
6996
7223
|
{
|
6997
7224
|
"fully_qualified_name": "Primer::Beta::Flash",
|
6998
7225
|
"description": "Use `Flash` to inform users of successful or pending actions.",
|
7226
|
+
"is_form_component": false,
|
7227
|
+
"is_published": true,
|
7228
|
+
"requires_js": false,
|
6999
7229
|
"component": "Flash",
|
7000
7230
|
"status": "beta",
|
7001
7231
|
"a11y_reviewed": false,
|
@@ -7086,6 +7316,9 @@
|
|
7086
7316
|
{
|
7087
7317
|
"fully_qualified_name": "Primer::Beta::Heading",
|
7088
7318
|
"description": "`Heading` should be used to communicate page organization and hierarchy.\n\n- Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.\n- Use `Heading` as the title of a section or sub section.\n- Do not use `Heading` for styling alone. For simply styling text, consider using {{#link_to_component}}Primer::Beta::Text{{/link_to_component}} with relevant {{link_to_typography_docs}}\n such as `font_size` and `font_weight`.\n- Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.",
|
7319
|
+
"is_form_component": false,
|
7320
|
+
"is_published": true,
|
7321
|
+
"requires_js": false,
|
7089
7322
|
"component": "Heading",
|
7090
7323
|
"status": "beta",
|
7091
7324
|
"a11y_reviewed": false,
|
@@ -7131,6 +7364,9 @@
|
|
7131
7364
|
{
|
7132
7365
|
"fully_qualified_name": "Primer::Beta::IconButton",
|
7133
7366
|
"description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
|
7367
|
+
"is_form_component": false,
|
7368
|
+
"is_published": true,
|
7369
|
+
"requires_js": false,
|
7134
7370
|
"component": "IconButton",
|
7135
7371
|
"status": "beta",
|
7136
7372
|
"a11y_reviewed": false,
|
@@ -7240,6 +7476,9 @@
|
|
7240
7476
|
{
|
7241
7477
|
"fully_qualified_name": "Primer::Beta::Label",
|
7242
7478
|
"description": "Use `Label` to add contextual metadata to a design.",
|
7479
|
+
"is_form_component": false,
|
7480
|
+
"is_published": true,
|
7481
|
+
"requires_js": false,
|
7243
7482
|
"component": "Label",
|
7244
7483
|
"status": "beta",
|
7245
7484
|
"a11y_reviewed": false,
|
@@ -7324,6 +7563,9 @@
|
|
7324
7563
|
{
|
7325
7564
|
"fully_qualified_name": "Primer::Beta::Link",
|
7326
7565
|
"description": "Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.",
|
7566
|
+
"is_form_component": false,
|
7567
|
+
"is_published": true,
|
7568
|
+
"requires_js": true,
|
7327
7569
|
"component": "Link",
|
7328
7570
|
"status": "beta",
|
7329
7571
|
"a11y_reviewed": false,
|
@@ -7420,6 +7662,9 @@
|
|
7420
7662
|
{
|
7421
7663
|
"fully_qualified_name": "Primer::Beta::Markdown",
|
7422
7664
|
"description": "Use `Markdown` to wrap markdown content.",
|
7665
|
+
"is_form_component": false,
|
7666
|
+
"is_published": true,
|
7667
|
+
"requires_js": false,
|
7423
7668
|
"component": "Markdown",
|
7424
7669
|
"status": "beta",
|
7425
7670
|
"a11y_reviewed": false,
|
@@ -7465,6 +7710,9 @@
|
|
7465
7710
|
{
|
7466
7711
|
"fully_qualified_name": "Primer::Beta::Octicon",
|
7467
7712
|
"description": "`Octicon` renders an {{link_to_octicons}} with {{link_to_system_arguments_docs}}.\n`Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.",
|
7713
|
+
"is_form_component": false,
|
7714
|
+
"is_published": true,
|
7715
|
+
"requires_js": false,
|
7468
7716
|
"component": "Octicon",
|
7469
7717
|
"status": "beta",
|
7470
7718
|
"a11y_reviewed": false,
|
@@ -7528,6 +7776,9 @@
|
|
7528
7776
|
{
|
7529
7777
|
"fully_qualified_name": "Primer::Beta::Popover",
|
7530
7778
|
"description": "Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\nBy default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.",
|
7779
|
+
"is_form_component": false,
|
7780
|
+
"is_published": true,
|
7781
|
+
"requires_js": false,
|
7531
7782
|
"component": "Popover",
|
7532
7783
|
"status": "beta",
|
7533
7784
|
"a11y_reviewed": false,
|
@@ -7618,6 +7869,9 @@
|
|
7618
7869
|
{
|
7619
7870
|
"fully_qualified_name": "Primer::Beta::ProgressBar",
|
7620
7871
|
"description": "Use `ProgressBar` to visualize task completion.",
|
7872
|
+
"is_form_component": false,
|
7873
|
+
"is_published": true,
|
7874
|
+
"requires_js": false,
|
7621
7875
|
"component": "ProgressBar",
|
7622
7876
|
"status": "beta",
|
7623
7877
|
"a11y_reviewed": false,
|
@@ -7691,6 +7945,9 @@
|
|
7691
7945
|
{
|
7692
7946
|
"fully_qualified_name": "Primer::Beta::RelativeTime",
|
7693
7947
|
"description": "Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.",
|
7948
|
+
"is_form_component": false,
|
7949
|
+
"is_published": true,
|
7950
|
+
"requires_js": false,
|
7694
7951
|
"component": "RelativeTime",
|
7695
7952
|
"status": "beta",
|
7696
7953
|
"a11y_reviewed": false,
|
@@ -7847,6 +8104,9 @@
|
|
7847
8104
|
{
|
7848
8105
|
"fully_qualified_name": "Primer::Beta::Spinner",
|
7849
8106
|
"description": "Use `Spinner` to let users know that content is being loaded.",
|
8107
|
+
"is_form_component": false,
|
8108
|
+
"is_published": true,
|
8109
|
+
"requires_js": false,
|
7850
8110
|
"component": "Spinner",
|
7851
8111
|
"status": "beta",
|
7852
8112
|
"a11y_reviewed": false,
|
@@ -7898,6 +8158,9 @@
|
|
7898
8158
|
{
|
7899
8159
|
"fully_qualified_name": "Primer::Beta::State",
|
7900
8160
|
"description": "Use `State` for rendering the status of an item.",
|
8161
|
+
"is_form_component": false,
|
8162
|
+
"is_published": true,
|
8163
|
+
"requires_js": false,
|
7901
8164
|
"component": "State",
|
7902
8165
|
"status": "beta",
|
7903
8166
|
"a11y_reviewed": false,
|
@@ -7971,6 +8234,9 @@
|
|
7971
8234
|
{
|
7972
8235
|
"fully_qualified_name": "Primer::Beta::Subhead",
|
7973
8236
|
"description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
|
8237
|
+
"is_form_component": false,
|
8238
|
+
"is_published": true,
|
8239
|
+
"requires_js": false,
|
7974
8240
|
"component": "Subhead",
|
7975
8241
|
"status": "beta",
|
7976
8242
|
"a11y_reviewed": false,
|
@@ -8084,6 +8350,9 @@
|
|
8084
8350
|
{
|
8085
8351
|
"fully_qualified_name": "Primer::Beta::Text",
|
8086
8352
|
"description": "`Text` is a wrapper component that will apply typography styles to the text inside.",
|
8353
|
+
"is_form_component": false,
|
8354
|
+
"is_published": true,
|
8355
|
+
"requires_js": false,
|
8087
8356
|
"component": "Text",
|
8088
8357
|
"status": "beta",
|
8089
8358
|
"a11y_reviewed": false,
|
@@ -8129,6 +8398,9 @@
|
|
8129
8398
|
{
|
8130
8399
|
"fully_qualified_name": "Primer::Beta::TimelineItem",
|
8131
8400
|
"description": "Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.",
|
8401
|
+
"is_form_component": false,
|
8402
|
+
"is_published": true,
|
8403
|
+
"requires_js": false,
|
8132
8404
|
"component": "TimelineItem",
|
8133
8405
|
"status": "beta",
|
8134
8406
|
"a11y_reviewed": false,
|
@@ -8212,6 +8484,9 @@
|
|
8212
8484
|
{
|
8213
8485
|
"fully_qualified_name": "Primer::Beta::TimelineItem::Badge",
|
8214
8486
|
"description": "This component is part of `Primer::Beta::TimelineItem` and should not be\nused as a standalone component.",
|
8487
|
+
"is_form_component": false,
|
8488
|
+
"is_published": true,
|
8489
|
+
"requires_js": false,
|
8215
8490
|
"component": "TimelineItem::Badge",
|
8216
8491
|
"status": "beta",
|
8217
8492
|
"a11y_reviewed": false,
|
@@ -8239,6 +8514,9 @@
|
|
8239
8514
|
{
|
8240
8515
|
"fully_qualified_name": "Primer::Beta::Truncate",
|
8241
8516
|
"description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
|
8517
|
+
"is_form_component": false,
|
8518
|
+
"is_published": true,
|
8519
|
+
"requires_js": false,
|
8242
8520
|
"component": "Truncate",
|
8243
8521
|
"status": "beta",
|
8244
8522
|
"a11y_reviewed": false,
|
@@ -8319,6 +8597,9 @@
|
|
8319
8597
|
{
|
8320
8598
|
"fully_qualified_name": "Primer::Beta::Truncate::TruncateText",
|
8321
8599
|
"description": "This component is part of `Primer::Beta::Truncate` and should not be\nused as a standalone component.",
|
8600
|
+
"is_form_component": false,
|
8601
|
+
"is_published": true,
|
8602
|
+
"requires_js": false,
|
8322
8603
|
"component": "Truncate::TruncateText",
|
8323
8604
|
"status": "alpha",
|
8324
8605
|
"a11y_reviewed": false,
|
@@ -8346,6 +8627,9 @@
|
|
8346
8627
|
{
|
8347
8628
|
"fully_qualified_name": "Primer::BlankslateComponent",
|
8348
8629
|
"description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
|
8630
|
+
"is_form_component": false,
|
8631
|
+
"is_published": true,
|
8632
|
+
"requires_js": false,
|
8349
8633
|
"component": "Blankslate",
|
8350
8634
|
"status": "deprecated",
|
8351
8635
|
"a11y_reviewed": false,
|
@@ -8477,6 +8761,9 @@
|
|
8477
8761
|
{
|
8478
8762
|
"fully_qualified_name": "Primer::Box",
|
8479
8763
|
"description": "`Box` is a basic wrapper component for most layout related needs.",
|
8764
|
+
"is_form_component": false,
|
8765
|
+
"is_published": true,
|
8766
|
+
"requires_js": false,
|
8480
8767
|
"component": "Box",
|
8481
8768
|
"status": "stable",
|
8482
8769
|
"a11y_reviewed": false,
|
@@ -8526,6 +8813,9 @@
|
|
8526
8813
|
{
|
8527
8814
|
"fully_qualified_name": "Primer::ButtonComponent",
|
8528
8815
|
"description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
|
8816
|
+
"is_form_component": false,
|
8817
|
+
"is_published": true,
|
8818
|
+
"requires_js": true,
|
8529
8819
|
"component": "Button",
|
8530
8820
|
"status": "deprecated",
|
8531
8821
|
"a11y_reviewed": false,
|
@@ -8658,6 +8948,9 @@
|
|
8658
8948
|
{
|
8659
8949
|
"fully_qualified_name": "Primer::ConditionalWrapper",
|
8660
8950
|
"description": "Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition\nis true, a `Primer::BaseComponent` will render around the content. If the condition is false, only\nthe content is rendered.",
|
8951
|
+
"is_form_component": false,
|
8952
|
+
"is_published": true,
|
8953
|
+
"requires_js": false,
|
8661
8954
|
"component": "ConditionalWrapper",
|
8662
8955
|
"status": "alpha",
|
8663
8956
|
"a11y_reviewed": false,
|
@@ -8683,6 +8976,9 @@
|
|
8683
8976
|
{
|
8684
8977
|
"fully_qualified_name": "Primer::Content",
|
8685
8978
|
"description": "Use `Content` as a helper to render content passed to a slot without adding any tags.",
|
8979
|
+
"is_form_component": false,
|
8980
|
+
"is_published": true,
|
8981
|
+
"requires_js": false,
|
8686
8982
|
"component": "Content",
|
8687
8983
|
"status": "stable",
|
8688
8984
|
"a11y_reviewed": false,
|
@@ -8708,6 +9004,9 @@
|
|
8708
9004
|
{
|
8709
9005
|
"fully_qualified_name": "Primer::IconButton",
|
8710
9006
|
"description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
|
9007
|
+
"is_form_component": false,
|
9008
|
+
"is_published": true,
|
9009
|
+
"requires_js": true,
|
8711
9010
|
"component": "IconButton",
|
8712
9011
|
"status": "deprecated",
|
8713
9012
|
"a11y_reviewed": false,
|
@@ -8786,6 +9085,9 @@
|
|
8786
9085
|
{
|
8787
9086
|
"fully_qualified_name": "Primer::LayoutComponent",
|
8788
9087
|
"description": "Use `Layout` to build a main/sidebar layout.",
|
9088
|
+
"is_form_component": false,
|
9089
|
+
"is_published": true,
|
9090
|
+
"requires_js": false,
|
8789
9091
|
"component": "Layout",
|
8790
9092
|
"status": "deprecated",
|
8791
9093
|
"a11y_reviewed": false,
|
@@ -8857,6 +9159,9 @@
|
|
8857
9159
|
{
|
8858
9160
|
"fully_qualified_name": "Primer::Navigation::TabComponent",
|
8859
9161
|
"description": "nodoc",
|
9162
|
+
"is_form_component": false,
|
9163
|
+
"is_published": true,
|
9164
|
+
"requires_js": false,
|
8860
9165
|
"component": "Navigation::Tab",
|
8861
9166
|
"status": "deprecated",
|
8862
9167
|
"a11y_reviewed": false,
|
@@ -8970,6 +9275,9 @@
|
|
8970
9275
|
{
|
8971
9276
|
"fully_qualified_name": "Primer::Tooltip",
|
8972
9277
|
"description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",
|
9278
|
+
"is_form_component": false,
|
9279
|
+
"is_published": true,
|
9280
|
+
"requires_js": false,
|
8973
9281
|
"component": "Tooltip",
|
8974
9282
|
"status": "deprecated",
|
8975
9283
|
"a11y_reviewed": false,
|
@@ -9030,6 +9338,9 @@
|
|
9030
9338
|
{
|
9031
9339
|
"fully_qualified_name": "Primer::Truncate",
|
9032
9340
|
"description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
|
9341
|
+
"is_form_component": false,
|
9342
|
+
"is_published": true,
|
9343
|
+
"requires_js": false,
|
9033
9344
|
"component": "Truncate",
|
9034
9345
|
"status": "deprecated",
|
9035
9346
|
"a11y_reviewed": false,
|