@primer/view-components 0.44.0-rc.af8944c0 → 0.44.0-rc.b69ecd26

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.
@@ -1185,205 +1185,74 @@
1185
1185
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu.rb",
1186
1186
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/default/",
1187
1187
  "parameters": [
1188
- {
1189
- "name": "menu_id",
1190
- "type": "String",
1191
- "default": "`self.class.generate_id`",
1192
- "description": "Id of the menu."
1193
- },
1194
- {
1195
- "name": "anchor_align",
1196
- "type": "Symbol",
1197
- "default": "`:start`",
1198
- "description": "One of `:center`, `:end`, or `:start`.."
1199
- },
1200
- {
1201
- "name": "anchor_side",
1202
- "type": "Symbol",
1203
- "default": "`:outside_bottom`",
1204
- "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
1205
- },
1206
- {
1207
- "name": "size",
1208
- "type": "Symbol",
1209
- "default": "`:auto`",
1210
- "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.."
1211
- },
1212
- {
1213
- "name": "src",
1214
- "type": "String",
1215
- "default": "`nil`",
1216
- "description": "Used with an `include-fragment` element to load menu content from the given source URL."
1217
- },
1218
- {
1219
- "name": "preload",
1220
- "type": "Boolean",
1221
- "default": "`false`",
1222
- "description": "When true, and src is present, loads the `include-fragment` on trigger hover."
1223
- },
1224
- {
1225
- "name": "dynamic_label",
1226
- "type": "Boolean",
1227
- "default": "`false`",
1228
- "description": "Whether or not to display the text of the currently selected item in the show button."
1229
- },
1230
- {
1231
- "name": "dynamic_label_prefix",
1232
- "type": "String",
1233
- "default": "`nil`",
1234
- "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
1235
- },
1236
- {
1237
- "name": "select_variant",
1238
- "type": "Symbol",
1239
- "default": "`:none`",
1240
- "description": "One of `:multiple`, `:none`, or `:single`."
1241
- },
1242
- {
1243
- "name": "form_arguments",
1244
- "type": "Hash",
1245
- "default": "`{}`",
1246
- "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
1247
- },
1248
- {
1249
- "name": "overlay_arguments",
1250
- "type": "Hash",
1251
- "default": "`{}`",
1252
- "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
1253
- },
1254
1188
  {
1255
1189
  "name": "system_arguments",
1256
1190
  "type": "Hash",
1257
1191
  "default": "N/A",
1258
- "description": "{{link_to_system_arguments_docs}}."
1259
- }
1260
- ],
1261
- "slots": [
1262
- {
1263
- "name": "show_button",
1264
- "description": "Button to activate the menu.",
1265
- "parameters": [
1266
- {
1267
- "name": "system_arguments",
1268
- "type": "Hash",
1269
- "default": "N/A",
1270
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
1271
- }
1272
- ]
1273
- },
1274
- {
1275
- "name": "items",
1276
- "description": "Adds a new item to the list.",
1277
- "parameters": [
1278
- {
1279
- "name": "system_arguments",
1280
- "type": "Hash",
1281
- "default": "N/A",
1282
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
1283
- }
1284
- ]
1192
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::PrimaryMenu{{/link_to_component}}."
1285
1193
  }
1286
1194
  ],
1195
+ "slots": [],
1287
1196
  "methods": [
1288
1197
  {
1289
- "name": "list",
1290
- "description": "Returns the value of attribute list.",
1291
- "parameters": [],
1292
- "return_types": []
1293
- },
1294
- {
1295
- "name": "preload",
1296
- "description": "Returns the value of attribute preload.",
1297
- "parameters": [],
1298
- "return_types": []
1299
- },
1300
- {
1301
- "name": "preload?",
1302
- "description": "Returns the value of attribute preload.",
1303
- "parameters": [],
1304
- "return_types": []
1305
- },
1306
- {
1307
- "name": "with_show_button",
1308
- "description": "Button to activate the menu.",
1198
+ "name": "with_item",
1199
+ "description": "Adds an item to the menu.",
1309
1200
  "parameters": [
1310
1201
  {
1311
1202
  "name": "system_arguments",
1312
1203
  "type": "Hash",
1313
1204
  "default": "N/A",
1314
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
1205
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1315
1206
  }
1316
1207
  ],
1317
1208
  "return_types": []
1318
1209
  },
1319
1210
  {
1320
- "name": "with_item",
1321
- "description": "Adds a new item to the list.",
1211
+ "name": "with_avatar_item",
1212
+ "description": "Adds an avatar item to the menu.",
1322
1213
  "parameters": [
1323
1214
  {
1324
1215
  "name": "system_arguments",
1325
1216
  "type": "Hash",
1326
1217
  "default": "N/A",
1327
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
1218
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1328
1219
  }
1329
1220
  ],
1330
1221
  "return_types": []
1331
1222
  },
1332
1223
  {
1333
1224
  "name": "with_divider",
1334
- "description": "Adds a divider to the list.",
1225
+ "description": "Adds a divider to the list. Dividers visually separate items.",
1335
1226
  "parameters": [
1336
1227
  {
1337
1228
  "name": "system_arguments",
1338
1229
  "type": "Hash",
1339
1230
  "default": "N/A",
1340
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `divider` slot."
1231
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
1341
1232
  }
1342
1233
  ],
1343
1234
  "return_types": []
1344
1235
  },
1345
1236
  {
1346
- "name": "with_avatar_item",
1347
- "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.",
1237
+ "name": "with_group",
1238
+ "description": "Adds a group to the menu. Groups are a logical set of items with a header.",
1348
1239
  "parameters": [
1349
- {
1350
- "name": "src",
1351
- "type": "String",
1352
- "default": "N/A",
1353
- "description": "The source url of the avatar image."
1354
- },
1355
- {
1356
- "name": "username",
1357
- "type": "String",
1358
- "default": "N/A",
1359
- "description": "The username associated with the avatar."
1360
- },
1361
- {
1362
- "name": "full_name",
1363
- "type": "String",
1364
- "default": "N/A",
1365
- "description": "Optional. The user's full name."
1366
- },
1367
- {
1368
- "name": "full_name_scheme",
1369
- "type": "Symbol",
1370
- "default": "N/A",
1371
- "description": "Optional. How to display the user's full name."
1372
- },
1373
- {
1374
- "name": "avatar_arguments",
1375
- "type": "Hash",
1376
- "default": "N/A",
1377
- "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
1378
- },
1379
1240
  {
1380
1241
  "name": "system_arguments",
1381
1242
  "type": "Hash",
1382
1243
  "default": "N/A",
1383
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
1244
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Group{{/link_to_component}}."
1384
1245
  }
1385
1246
  ],
1386
1247
  "return_types": []
1248
+ },
1249
+ {
1250
+ "name": "items",
1251
+ "description": "Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.",
1252
+ "parameters": [],
1253
+ "return_types": [
1254
+ "Array<ViewComponent::Slot>"
1255
+ ]
1387
1256
  }
1388
1257
  ],
1389
1258
  "previews": [
@@ -1763,221 +1632,385 @@
1763
1632
  "color-contrast"
1764
1633
  ]
1765
1634
  }
1635
+ },
1636
+ {
1637
+ "preview_path": "primer/alpha/action_menu/sub_menus",
1638
+ "name": "sub_menus",
1639
+ "snapshot": "false",
1640
+ "skip_rules": {
1641
+ "wont_fix": [
1642
+ "region"
1643
+ ],
1644
+ "will_fix": [
1645
+ "color-contrast"
1646
+ ]
1647
+ }
1766
1648
  }
1767
1649
  ],
1768
1650
  "subcomponents": [
1769
1651
  {
1770
- "fully_qualified_name": "Primer::Alpha::ActionMenu::List",
1652
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::Menu",
1771
1653
  "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1772
1654
  "accessibility_docs": null,
1773
1655
  "is_form_component": false,
1774
1656
  "is_published": true,
1775
1657
  "requires_js": false,
1776
- "component": "ActionMenu::List",
1658
+ "component": "ActionMenu::Menu",
1777
1659
  "status": "alpha",
1778
1660
  "a11y_reviewed": false,
1779
- "short_name": "ActionMenuList",
1780
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
1781
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
1661
+ "short_name": "ActionMenuMenu",
1662
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/menu.rb",
1663
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/menu/default/",
1782
1664
  "parameters": [
1783
1665
  {
1784
- "name": "system_arguments",
1785
- "type": "Hash",
1666
+ "name": "anchor_align",
1667
+ "type": "Symbol",
1786
1668
  "default": "N/A",
1787
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
1788
- }
1789
- ],
1790
- "slots": [],
1791
- "methods": [
1669
+ "description": "One of `:center`, `:end`, or `:start`."
1670
+ },
1792
1671
  {
1793
- "name": "items",
1794
- "description": "Returns the value of attribute items.",
1795
- "parameters": [],
1796
- "return_types": []
1797
- }
1798
- ],
1799
- "previews": [],
1800
- "subcomponents": []
1801
- },
1802
- {
1803
- "fully_qualified_name": "Primer::Alpha::ActionMenu::Heading",
1804
- "description": "Heading used to describe groups within an action menu.",
1805
- "accessibility_docs": null,
1806
- "is_form_component": false,
1807
- "is_published": true,
1808
- "requires_js": false,
1809
- "component": "ActionMenu::Heading",
1810
- "status": "alpha",
1811
- "a11y_reviewed": false,
1812
- "short_name": "ActionMenuHeading",
1813
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
1814
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
1815
- "parameters": [],
1816
- "slots": [],
1817
- "methods": [],
1818
- "previews": [],
1819
- "subcomponents": []
1820
- },
1821
- {
1822
- "fully_qualified_name": "Primer::Alpha::ActionMenu::ListWrapper",
1823
- "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1824
- "accessibility_docs": null,
1825
- "is_form_component": false,
1826
- "is_published": true,
1827
- "requires_js": false,
1828
- "component": "ActionMenu::ListWrapper",
1829
- "status": "alpha",
1830
- "a11y_reviewed": true,
1831
- "short_name": "ActionMenuListWrapper",
1832
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
1833
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
1834
- "parameters": [
1672
+ "name": "anchor_side",
1673
+ "type": "Symbol",
1674
+ "default": "N/A",
1675
+ "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
1676
+ },
1835
1677
  {
1836
1678
  "name": "menu_id",
1837
1679
  "type": "String",
1838
- "default": "N/A",
1839
- "description": "ID of the parent menu."
1680
+ "default": "`self.class.generate_id`",
1681
+ "description": "Id of the menu."
1682
+ },
1683
+ {
1684
+ "name": "size",
1685
+ "type": "Symbol",
1686
+ "default": "`:auto`",
1687
+ "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
1688
+ },
1689
+ {
1690
+ "name": "src",
1691
+ "type": "String",
1692
+ "default": "`nil`",
1693
+ "description": "Used with an `include-fragment` element to load menu content from the given source URL."
1694
+ },
1695
+ {
1696
+ "name": "preload",
1697
+ "type": "Boolean",
1698
+ "default": "`false`",
1699
+ "description": "When true, and src is present, loads the `include-fragment` on trigger hover."
1700
+ },
1701
+ {
1702
+ "name": "select_variant",
1703
+ "type": "Symbol",
1704
+ "default": "`:none`",
1705
+ "description": "One of `:multiple`, `:none`, or `:single`."
1706
+ },
1707
+ {
1708
+ "name": "form_arguments",
1709
+ "type": "Hash",
1710
+ "default": "`{}`",
1711
+ "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
1712
+ },
1713
+ {
1714
+ "name": "overlay_arguments",
1715
+ "type": "Hash",
1716
+ "default": "`{}`",
1717
+ "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
1718
+ },
1719
+ {
1720
+ "name": "list_arguments",
1721
+ "type": "Hash",
1722
+ "default": "`{}`",
1723
+ "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::ActionMenu::List{{/link_to_component}}"
1840
1724
  },
1841
1725
  {
1842
1726
  "name": "system_arguments",
1843
1727
  "type": "Hash",
1844
1728
  "default": "N/A",
1845
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
1729
+ "description": "{{link_to_system_arguments_docs}}."
1846
1730
  }
1847
1731
  ],
1848
- "slots": [
1732
+ "slots": [],
1733
+ "methods": [
1849
1734
  {
1850
- "name": "heading",
1851
- "description": "Heading text rendered above the list of items.",
1852
- "parameters": [
1853
- {
1854
- "name": "component_klass",
1855
- "type": "Class",
1856
- "default": "N/A",
1857
- "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
1858
- },
1735
+ "name": "menu_id",
1736
+ "description": "Returns the value of attribute menu_id.",
1737
+ "parameters": [],
1738
+ "return_types": []
1739
+ },
1740
+ {
1741
+ "name": "anchor_side",
1742
+ "description": "Returns the value of attribute anchor_side.",
1743
+ "parameters": [],
1744
+ "return_types": []
1745
+ },
1746
+ {
1747
+ "name": "anchor_align",
1748
+ "description": "Returns the value of attribute anchor_align.",
1749
+ "parameters": [],
1750
+ "return_types": []
1751
+ },
1752
+ {
1753
+ "name": "list",
1754
+ "description": "Returns the value of attribute list.",
1755
+ "parameters": [],
1756
+ "return_types": []
1757
+ },
1758
+ {
1759
+ "name": "preload",
1760
+ "description": "Returns the value of attribute preload.",
1761
+ "parameters": [],
1762
+ "return_types": []
1763
+ },
1764
+ {
1765
+ "name": "src",
1766
+ "description": "Returns the value of attribute src.",
1767
+ "parameters": [],
1768
+ "return_types": []
1769
+ },
1770
+ {
1771
+ "name": "select_variant",
1772
+ "description": "Returns the value of attribute select_variant.",
1773
+ "parameters": [],
1774
+ "return_types": []
1775
+ },
1776
+ {
1777
+ "name": "form_arguments",
1778
+ "description": "Returns the value of attribute form_arguments.",
1779
+ "parameters": [],
1780
+ "return_types": []
1781
+ },
1782
+ {
1783
+ "name": "preload?",
1784
+ "description": "Returns the value of attribute preload.",
1785
+ "parameters": [],
1786
+ "return_types": []
1787
+ },
1788
+ {
1789
+ "name": "with_item",
1790
+ "description": "Adds an item to the menu.",
1791
+ "parameters": [
1859
1792
  {
1860
1793
  "name": "system_arguments",
1861
1794
  "type": "Hash",
1862
1795
  "default": "N/A",
1863
- "description": "The arguments accepted by `component_klass`."
1796
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1864
1797
  }
1865
- ]
1798
+ ],
1799
+ "return_types": []
1800
+ },
1801
+ {
1802
+ "name": "with_avatar_item",
1803
+ "description": "Adds an avatar item to the menu.",
1804
+ "parameters": [
1805
+ {
1806
+ "name": "system_arguments",
1807
+ "type": "Hash",
1808
+ "default": "N/A",
1809
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1810
+ }
1811
+ ],
1812
+ "return_types": []
1813
+ },
1814
+ {
1815
+ "name": "with_divider",
1816
+ "description": "Adds a divider to the list. Dividers visually separate items.",
1817
+ "parameters": [
1818
+ {
1819
+ "name": "system_arguments",
1820
+ "type": "Hash",
1821
+ "default": "N/A",
1822
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
1823
+ }
1824
+ ],
1825
+ "return_types": []
1826
+ },
1827
+ {
1828
+ "name": "with_group",
1829
+ "description": "Adds a group to the menu. Groups are a logical set of items with a header.",
1830
+ "parameters": [
1831
+ {
1832
+ "name": "system_arguments",
1833
+ "type": "Hash",
1834
+ "default": "N/A",
1835
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Group{{/link_to_component}}."
1836
+ }
1837
+ ],
1838
+ "return_types": []
1866
1839
  },
1867
1840
  {
1868
1841
  "name": "items",
1869
- "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
1870
- "parameters": []
1842
+ "description": "Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.",
1843
+ "parameters": [],
1844
+ "return_types": [
1845
+ "Array<ViewComponent::Slot>"
1846
+ ]
1847
+ },
1848
+ {
1849
+ "name": "with_sub_menu_item",
1850
+ "description": "Adds a sub-menu to the menu.",
1851
+ "parameters": [
1852
+ {
1853
+ "name": "system_arguments",
1854
+ "type": "Hash",
1855
+ "default": "N/A",
1856
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::SubMenuItem{{/link_to_component}}."
1857
+ }
1858
+ ],
1859
+ "return_types": []
1871
1860
  }
1872
1861
  ],
1873
- "methods": [],
1874
1862
  "previews": [],
1875
1863
  "subcomponents": []
1876
1864
  },
1877
1865
  {
1878
- "fully_qualified_name": "Primer::Alpha::ActionMenu::Group",
1866
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::List",
1879
1867
  "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1880
1868
  "accessibility_docs": null,
1881
1869
  "is_form_component": false,
1882
1870
  "is_published": true,
1883
1871
  "requires_js": false,
1884
- "component": "ActionMenu::Group",
1872
+ "component": "ActionMenu::List",
1885
1873
  "status": "alpha",
1886
- "a11y_reviewed": true,
1887
- "short_name": "ActionMenuGroup",
1888
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
1889
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
1874
+ "a11y_reviewed": false,
1875
+ "short_name": "ActionMenuList",
1876
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
1877
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
1890
1878
  "parameters": [
1891
1879
  {
1892
- "name": "id",
1893
- "type": "String",
1894
- "default": "`self.class.generate_id`",
1895
- "description": "HTML ID value."
1896
- },
1880
+ "name": "system_arguments",
1881
+ "type": "Hash",
1882
+ "default": "N/A",
1883
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::ListWrapper{{/link_to_component}}"
1884
+ }
1885
+ ],
1886
+ "slots": [],
1887
+ "methods": [
1897
1888
  {
1898
- "name": "role",
1899
- "type": "Boolean",
1900
- "default": "`nil`",
1901
- "description": "ARIA role describing the function of the list. listbox and menu are a common values."
1902
- },
1889
+ "name": "items",
1890
+ "description": "Returns the value of attribute items.",
1891
+ "parameters": [],
1892
+ "return_types": []
1893
+ }
1894
+ ],
1895
+ "previews": [],
1896
+ "subcomponents": []
1897
+ },
1898
+ {
1899
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::SubMenu",
1900
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1901
+ "accessibility_docs": null,
1902
+ "is_form_component": false,
1903
+ "is_published": true,
1904
+ "requires_js": false,
1905
+ "component": "ActionMenu::SubMenu",
1906
+ "status": "alpha",
1907
+ "a11y_reviewed": false,
1908
+ "short_name": "ActionMenuSubMenu",
1909
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/sub_menu.rb",
1910
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/sub_menu/default/",
1911
+ "parameters": [
1903
1912
  {
1904
- "name": "item_classes",
1913
+ "name": "menu_id",
1905
1914
  "type": "String",
1906
- "default": "`nil`",
1907
- "description": "Additional CSS classes to attach to items."
1908
- },
1909
- {
1910
- "name": "scheme",
1911
- "type": "Symbol",
1912
- "default": "`:full`",
1913
- "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."
1914
- },
1915
- {
1916
- "name": "show_dividers",
1917
- "type": "Boolean",
1918
- "default": "`false`",
1919
- "description": "Display a divider above each item in the list when it does not follow a header or divider."
1915
+ "default": "`self.class.generate_id`",
1916
+ "description": "Id of the menu."
1920
1917
  },
1921
1918
  {
1922
- "name": "select_variant",
1919
+ "name": "anchor_align",
1923
1920
  "type": "Symbol",
1924
- "default": "`:none`",
1925
- "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
1921
+ "default": "`:start`",
1922
+ "description": "One of `:center`, `:end`, or `:start`."
1926
1923
  },
1927
1924
  {
1928
- "name": "aria_selection_variant",
1925
+ "name": "anchor_side",
1929
1926
  "type": "Symbol",
1930
- "default": "`:checked`",
1931
- "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
1927
+ "default": "`:outside_right`",
1928
+ "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
1932
1929
  },
1933
1930
  {
1934
- "name": "form_arguments",
1931
+ "name": "overlay_arguments",
1935
1932
  "type": "Hash",
1936
1933
  "default": "`{}`",
1937
- "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} instead of using this feature directly."
1934
+ "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
1938
1935
  },
1939
1936
  {
1940
1937
  "name": "system_arguments",
1941
1938
  "type": "Hash",
1942
1939
  "default": "N/A",
1943
- "description": "{{link_to_system_arguments_docs}}"
1940
+ "description": "{{link_to_system_arguments_docs}}."
1944
1941
  }
1945
1942
  ],
1946
- "slots": [
1943
+ "slots": [],
1944
+ "methods": [
1947
1945
  {
1948
- "name": "heading",
1949
- "description": "Heading text rendered above the list of items.",
1946
+ "name": "with_item",
1947
+ "description": "Adds an item to the menu.",
1950
1948
  "parameters": [
1951
1949
  {
1952
- "name": "component_klass",
1953
- "type": "Class",
1950
+ "name": "system_arguments",
1951
+ "type": "Hash",
1954
1952
  "default": "N/A",
1955
- "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
1956
- },
1953
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1954
+ }
1955
+ ],
1956
+ "return_types": []
1957
+ },
1958
+ {
1959
+ "name": "with_avatar_item",
1960
+ "description": "Adds an avatar item to the menu.",
1961
+ "parameters": [
1957
1962
  {
1958
1963
  "name": "system_arguments",
1959
1964
  "type": "Hash",
1960
1965
  "default": "N/A",
1961
- "description": "The arguments accepted by `component_klass`."
1966
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
1962
1967
  }
1963
- ]
1968
+ ],
1969
+ "return_types": []
1970
+ },
1971
+ {
1972
+ "name": "with_divider",
1973
+ "description": "Adds a divider to the list. Dividers visually separate items.",
1974
+ "parameters": [
1975
+ {
1976
+ "name": "system_arguments",
1977
+ "type": "Hash",
1978
+ "default": "N/A",
1979
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
1980
+ }
1981
+ ],
1982
+ "return_types": []
1983
+ },
1984
+ {
1985
+ "name": "with_group",
1986
+ "description": "Adds a group to the menu. Groups are a logical set of items with a header.",
1987
+ "parameters": [
1988
+ {
1989
+ "name": "system_arguments",
1990
+ "type": "Hash",
1991
+ "default": "N/A",
1992
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Group{{/link_to_component}}."
1993
+ }
1994
+ ],
1995
+ "return_types": []
1964
1996
  },
1965
1997
  {
1966
1998
  "name": "items",
1967
- "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
1968
- "parameters": []
1969
- }
1970
- ],
1971
- "methods": [
1999
+ "description": "Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.",
2000
+ "parameters": [],
2001
+ "return_types": [
2002
+ "Array<ViewComponent::Slot>"
2003
+ ]
2004
+ },
1972
2005
  {
1973
- "name": "with_heading",
1974
- "description": "Heading text rendered above the list of items.",
2006
+ "name": "with_sub_menu_item",
2007
+ "description": "Adds a sub-menu to the menu.",
1975
2008
  "parameters": [
1976
2009
  {
1977
2010
  "name": "system_arguments",
1978
2011
  "type": "Hash",
1979
2012
  "default": "N/A",
1980
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
2013
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::SubMenuItem{{/link_to_component}}."
1981
2014
  }
1982
2015
  ],
1983
2016
  "return_types": []
@@ -1985,314 +2018,771 @@
1985
2018
  ],
1986
2019
  "previews": [],
1987
2020
  "subcomponents": []
1988
- }
1989
- ]
1990
- },
1991
- {
1992
- "fully_qualified_name": "Primer::Alpha::AutoComplete",
1993
- "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.",
1994
- "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must use a non-visible label, set `is_label_visible` to `false`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
1995
- "is_form_component": false,
1996
- "is_published": true,
1997
- "requires_js": false,
1998
- "component": "AutoComplete",
1999
- "status": "deprecated",
2000
- "a11y_reviewed": false,
2001
- "short_name": "AutoComplete",
2002
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete.rb",
2003
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/default/",
2004
- "parameters": [
2005
- {
2006
- "name": "label_text",
2007
- "type": "String",
2008
- "default": "N/A",
2009
- "description": "The label of the input."
2010
- },
2011
- {
2012
- "name": "src",
2013
- "type": "String",
2014
- "default": "N/A",
2015
- "description": "The route to query."
2016
- },
2017
- {
2018
- "name": "input_id",
2019
- "type": "String",
2020
- "default": "N/A",
2021
- "description": "Id of the input element."
2022
2021
  },
2023
2022
  {
2024
- "name": "input_name",
2025
- "type": "String",
2026
- "default": "`nil`",
2027
- "description": "Optional name of the input element, defaults to `input_id` when not set."
2028
- },
2029
- {
2030
- "name": "list_id",
2031
- "type": "String",
2032
- "default": "N/A",
2033
- "description": "Id of the list element."
2034
- },
2035
- {
2036
- "name": "with_icon",
2037
- "type": "Boolean",
2038
- "default": "`false`",
2039
- "description": "Controls if a search icon is visible, defaults to `false`."
2040
- },
2041
- {
2042
- "name": "is_label_visible",
2043
- "type": "Boolean",
2044
- "default": "`true`",
2045
- "description": "Controls if the label is visible. If `false`, screen reader only text will be added."
2046
- },
2047
- {
2048
- "name": "is_clearable",
2049
- "type": "Boolean",
2050
- "default": "`false`",
2051
- "description": "Adds optional clear button."
2052
- },
2053
- {
2054
- "name": "is_label_inline",
2055
- "type": "Boolean",
2056
- "default": "`false`",
2057
- "description": "Controls if the label is inline. On smaller screens, label will always become stacked."
2058
- },
2059
- {
2060
- "name": "system_arguments",
2061
- "type": "Hash",
2062
- "default": "N/A",
2063
- "description": "{{link_to_system_arguments_docs}}"
2064
- }
2065
- ],
2066
- "slots": [
2067
- {
2068
- "name": "results",
2069
- "description": "Customizable results list.",
2070
- "parameters": [
2071
- {
2072
- "name": "system_arguments",
2073
- "type": "Hash",
2074
- "default": "N/A",
2075
- "description": "{{link_to_system_arguments_docs}}"
2076
- }
2077
- ]
2078
- },
2079
- {
2080
- "name": "input",
2081
- "description": "Customizable input used to search for results.\nIt is preferred to use this slot sparingly - it will be created by default if not explicity added.",
2082
- "parameters": [
2083
- {
2084
- "name": "system_arguments",
2085
- "type": "Hash",
2086
- "default": "N/A",
2087
- "description": "{{link_to_system_arguments_docs}}"
2088
- }
2089
- ]
2090
- }
2091
- ],
2092
- "methods": [
2093
- {
2094
- "name": "label_classes",
2095
- "description": "Private: determines the label classes based on component configration.\n\nIf the label is not visible, return an empty string.",
2096
- "parameters": [
2097
- {
2098
- "name": "args",
2099
- "type": "Hash",
2100
- "default": "N/A",
2101
- "description": "The component configuration."
2102
- }
2103
- ],
2104
- "return_types": [
2105
- "String"
2106
- ]
2107
- }
2108
- ],
2109
- "previews": [
2110
- {
2111
- "preview_path": "primer/alpha/auto_complete/playground",
2112
- "name": "playground",
2113
- "snapshot": "false",
2114
- "skip_rules": {
2115
- "wont_fix": [
2116
- "region"
2117
- ],
2118
- "will_fix": [
2119
- "color-contrast"
2120
- ]
2121
- }
2122
- },
2123
- {
2124
- "preview_path": "primer/alpha/auto_complete/default",
2125
- "name": "default",
2126
- "snapshot": "true",
2127
- "skip_rules": {
2128
- "wont_fix": [
2129
- "region"
2130
- ],
2131
- "will_fix": [
2132
- "color-contrast"
2133
- ]
2134
- }
2135
- },
2136
- {
2137
- "preview_path": "primer/alpha/auto_complete/with_non_visible_label",
2138
- "name": "with_non_visible_label",
2139
- "snapshot": "false",
2140
- "skip_rules": {
2141
- "wont_fix": [
2142
- "region"
2143
- ],
2144
- "will_fix": [
2145
- "color-contrast"
2146
- ]
2147
- }
2148
- },
2149
- {
2150
- "preview_path": "primer/alpha/auto_complete/with_inline_label",
2151
- "name": "with_inline_label",
2152
- "snapshot": "false",
2153
- "skip_rules": {
2154
- "wont_fix": [
2155
- "region"
2156
- ],
2157
- "will_fix": [
2158
- "color-contrast"
2159
- ]
2160
- }
2161
- },
2162
- {
2163
- "preview_path": "primer/alpha/auto_complete/with_icon",
2164
- "name": "with_icon",
2165
- "snapshot": "false",
2166
- "skip_rules": {
2167
- "wont_fix": [
2168
- "region"
2169
- ],
2170
- "will_fix": [
2171
- "color-contrast"
2172
- ]
2173
- }
2174
- },
2175
- {
2176
- "preview_path": "primer/alpha/auto_complete/with_clear_button",
2177
- "name": "with_clear_button",
2178
- "snapshot": "false",
2179
- "skip_rules": {
2180
- "wont_fix": [
2181
- "region"
2182
- ],
2183
- "will_fix": [
2184
- "color-contrast"
2185
- ]
2186
- }
2187
- }
2188
- ],
2189
- "subcomponents": [
2190
- {
2191
- "fully_qualified_name": "Primer::Alpha::AutoComplete::Item",
2192
- "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
2023
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::PrimaryMenu",
2024
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
2193
2025
  "accessibility_docs": null,
2194
2026
  "is_form_component": false,
2195
2027
  "is_published": true,
2196
2028
  "requires_js": false,
2197
- "component": "AutoComplete::Item",
2198
- "status": "deprecated",
2029
+ "component": "ActionMenu::PrimaryMenu",
2030
+ "status": "alpha",
2199
2031
  "a11y_reviewed": false,
2200
- "short_name": "AutoCompleteItem",
2201
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete/item.rb",
2202
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/item/default/",
2032
+ "short_name": "ActionMenuPrimaryMenu",
2033
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/primary_menu.rb",
2034
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/primary_menu/default/",
2203
2035
  "parameters": [
2204
2036
  {
2205
- "name": "value",
2206
- "type": "String",
2207
- "default": "N/A",
2208
- "description": "Value of the item."
2037
+ "name": "anchor_align",
2038
+ "type": "Symbol",
2039
+ "default": "`:start`",
2040
+ "description": "One of `:center`, `:end`, or `:start`."
2209
2041
  },
2210
2042
  {
2211
- "name": "selected",
2212
- "type": "Boolean",
2213
- "default": "`false`",
2214
- "description": "Whether the item is selected."
2043
+ "name": "anchor_side",
2044
+ "type": "Symbol",
2045
+ "default": "`:outside_bottom`",
2046
+ "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
2215
2047
  },
2216
2048
  {
2217
- "name": "disabled",
2049
+ "name": "dynamic_label",
2218
2050
  "type": "Boolean",
2219
2051
  "default": "`false`",
2220
- "description": "Whether the item is disabled."
2052
+ "description": "Whether or not to display the text of the currently selected item in the show button."
2053
+ },
2054
+ {
2055
+ "name": "dynamic_label_prefix",
2056
+ "type": "String",
2057
+ "default": "`nil`",
2058
+ "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
2221
2059
  },
2222
2060
  {
2223
2061
  "name": "system_arguments",
2224
2062
  "type": "Hash",
2225
2063
  "default": "N/A",
2226
- "description": "{{link_to_system_arguments_docs}}"
2064
+ "description": "{{link_to_system_arguments_docs}}."
2227
2065
  }
2228
2066
  ],
2229
2067
  "slots": [],
2230
- "methods": [],
2231
- "previews": [],
2232
- "subcomponents": []
2233
- }
2234
- ]
2235
- },
2236
- {
2237
- "fully_qualified_name": "Primer::Alpha::Banner",
2238
- "description": "Use `Banner` to highlight important information.\n\n### Events\n\n|Name |Type |Bubbles |Cancelable |\n|:---------|:-------------------|:-------|:----------|\n|`dismiss` |`CustomEvent<void>` |No |No |",
2239
- "accessibility_docs": "### Improve discoverability with a heading and landmark\nBanners are made visually prominent with icons and colors to immediately draw attention.\n\nTo ensure the Banner is also easily discoverable for assistive technology users, consider:\n1. Providing a heading inside of the Banner that describes the purpose of the Banner.\n2. Designating the Banner as a `region` landmark. This can be achieved by rendering the Banner as a `section` with an `aria-labelledby` pointing to the heading.\n\n### Communicating feedback\nWhen a Banner is used to communicate feedback, a live region or focus management technique should be in place to ensure that assistive technology users are aware of the feedback, especially when the Banner is shown client-side. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility), or defer to the accessibility team.\n\n#### Approach 1: Announcing a Banner\nA live region announcement can be used to communicate non-critical feedback, such as a success message.\n\nTo successfully trigger a live region announcement for a Banner that is un-`hidden` or dynamically injected onto the page, **do not** set the live region attribute/role on the Banner itself. Instead, it's important to rely on a live region that is already guaranteed to be on the page. Learn more about specific techniques at: [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region).\n\n#### Approach 2: Focusing a Banner\nFocusing the Banner can be appropriate for critical feedback scenarios, such as a [form validation error summary](https://primer.style/ui-patterns/forms/overview#interactive-summary-of-errors) where the Banner contains actions to help unblock the user.\n\nTo properly focus a Banner, add a `tabindex=\"-1\"` place focus with JavaScript (using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).",
2240
- "is_form_component": false,
2241
- "is_published": true,
2242
- "requires_js": true,
2243
- "component": "Banner",
2244
- "status": "alpha",
2245
- "a11y_reviewed": false,
2246
- "short_name": "Banner",
2247
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
2248
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
2249
- "parameters": [
2250
- {
2251
- "name": "tag",
2252
- "type": "Symbol",
2253
- "default": "`:div`",
2254
- "description": "One of `:div` or `:section`."
2255
- },
2256
- {
2257
- "name": "full",
2258
- "type": "Boolean",
2259
- "default": "`false`",
2260
- "description": "Whether the component should take up the full width of the screen."
2261
- },
2262
- {
2263
- "name": "full_when_narrow",
2264
- "type": "Boolean",
2265
- "default": "`false`",
2266
- "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
2267
- },
2268
- {
2269
- "name": "dismiss_scheme",
2270
- "type": "Symbol",
2271
- "default": "`:none`",
2272
- "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
2273
- },
2274
- {
2275
- "name": "dismiss_label",
2276
- "type": "String",
2277
- "default": "`Dismiss`",
2278
- "description": "The aria-label text of the dismiss \"x\" button"
2279
- },
2280
- {
2281
- "name": "description",
2282
- "type": "String",
2283
- "default": "`nil`",
2284
- "description": "Description text rendered underneath the message."
2285
- },
2286
- {
2287
- "name": "icon",
2288
- "type": "Symbol",
2289
- "default": "`nil`",
2290
- "description": "The name of an {{link_to_octicons}} icon to use. If no icon is provided, a default one will be chosen based on the scheme."
2291
- },
2292
- {
2293
- "name": "scheme",
2294
- "type": "Symbol",
2295
- "default": "`:default`",
2068
+ "methods": [
2069
+ {
2070
+ "name": "dynamic_label",
2071
+ "description": "Returns the value of attribute dynamic_label.",
2072
+ "parameters": [],
2073
+ "return_types": []
2074
+ },
2075
+ {
2076
+ "name": "dynamic_label_prefix",
2077
+ "description": "Returns the value of attribute dynamic_label_prefix.",
2078
+ "parameters": [],
2079
+ "return_types": []
2080
+ },
2081
+ {
2082
+ "name": "with_item",
2083
+ "description": "Adds an item to the menu.",
2084
+ "parameters": [
2085
+ {
2086
+ "name": "system_arguments",
2087
+ "type": "Hash",
2088
+ "default": "N/A",
2089
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
2090
+ }
2091
+ ],
2092
+ "return_types": []
2093
+ },
2094
+ {
2095
+ "name": "with_avatar_item",
2096
+ "description": "Adds an avatar item to the menu.",
2097
+ "parameters": [
2098
+ {
2099
+ "name": "system_arguments",
2100
+ "type": "Hash",
2101
+ "default": "N/A",
2102
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
2103
+ }
2104
+ ],
2105
+ "return_types": []
2106
+ },
2107
+ {
2108
+ "name": "with_divider",
2109
+ "description": "Adds a divider to the list. Dividers visually separate items.",
2110
+ "parameters": [
2111
+ {
2112
+ "name": "system_arguments",
2113
+ "type": "Hash",
2114
+ "default": "N/A",
2115
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
2116
+ }
2117
+ ],
2118
+ "return_types": []
2119
+ },
2120
+ {
2121
+ "name": "with_group",
2122
+ "description": "Adds a group to the menu. Groups are a logical set of items with a header.",
2123
+ "parameters": [
2124
+ {
2125
+ "name": "system_arguments",
2126
+ "type": "Hash",
2127
+ "default": "N/A",
2128
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Group{{/link_to_component}}."
2129
+ }
2130
+ ],
2131
+ "return_types": []
2132
+ },
2133
+ {
2134
+ "name": "items",
2135
+ "description": "Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.",
2136
+ "parameters": [],
2137
+ "return_types": [
2138
+ "Array<ViewComponent::Slot>"
2139
+ ]
2140
+ },
2141
+ {
2142
+ "name": "with_show_button",
2143
+ "description": "Button to activate the menu.",
2144
+ "parameters": [
2145
+ {
2146
+ "name": "system_arguments",
2147
+ "type": "Hash",
2148
+ "default": "N/A",
2149
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
2150
+ }
2151
+ ],
2152
+ "return_types": []
2153
+ }
2154
+ ],
2155
+ "previews": [],
2156
+ "subcomponents": []
2157
+ },
2158
+ {
2159
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::SubMenuItem",
2160
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
2161
+ "accessibility_docs": null,
2162
+ "is_form_component": false,
2163
+ "is_published": true,
2164
+ "requires_js": false,
2165
+ "component": "ActionMenu::SubMenuItem",
2166
+ "status": "alpha",
2167
+ "a11y_reviewed": false,
2168
+ "short_name": "ActionMenuSubMenuItem",
2169
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/sub_menu_item.rb",
2170
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/sub_menu_item/default/",
2171
+ "parameters": [],
2172
+ "slots": [
2173
+ {
2174
+ "name": "description",
2175
+ "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
2176
+ "parameters": [
2177
+ {
2178
+ "name": "legacy_content",
2179
+ "type": "String",
2180
+ "default": "N/A",
2181
+ "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
2182
+ },
2183
+ {
2184
+ "name": "test_selector",
2185
+ "type": "String",
2186
+ "default": "N/A",
2187
+ "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
2188
+ }
2189
+ ]
2190
+ },
2191
+ {
2192
+ "name": "leading_visual",
2193
+ "description": "An icon, avatar, SVG, or custom content that will render to the left of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render an SVG, call the `with_leading_visual_svg` method.\n\nTo render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.",
2194
+ "parameters": []
2195
+ },
2196
+ {
2197
+ "name": "trailing_visual",
2198
+ "description": "An icon, label, counter, or text to render to the right of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}.\n\nTo render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.\n\nTo render text, call the `with_leading_visual_text` method and pass a block that returns a string. Eg:\n```ruby\nwith_leading_visual_text { \"Text here\" }\n```",
2199
+ "parameters": []
2200
+ },
2201
+ {
2202
+ "name": "trailing_action",
2203
+ "description": "A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.",
2204
+ "parameters": [
2205
+ {
2206
+ "name": "system_arguments",
2207
+ "type": "Hash",
2208
+ "default": "N/A",
2209
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
2210
+ }
2211
+ ]
2212
+ },
2213
+ {
2214
+ "name": "tooltip",
2215
+ "description": "`Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as\na last resort. **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be\nmore appropriate. Consult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
2216
+ "parameters": [
2217
+ {
2218
+ "name": "type",
2219
+ "type": "Symbol",
2220
+ "default": "`:description`",
2221
+ "description": "One of `:description` or `:label`."
2222
+ },
2223
+ {
2224
+ "name": "system_arguments",
2225
+ "type": "Hash",
2226
+ "default": "N/A",
2227
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
2228
+ }
2229
+ ]
2230
+ }
2231
+ ],
2232
+ "methods": [],
2233
+ "previews": [],
2234
+ "subcomponents": []
2235
+ },
2236
+ {
2237
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::Heading",
2238
+ "description": "Heading used to describe groups within an action menu.",
2239
+ "accessibility_docs": null,
2240
+ "is_form_component": false,
2241
+ "is_published": true,
2242
+ "requires_js": false,
2243
+ "component": "ActionMenu::Heading",
2244
+ "status": "alpha",
2245
+ "a11y_reviewed": false,
2246
+ "short_name": "ActionMenuHeading",
2247
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
2248
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
2249
+ "parameters": [],
2250
+ "slots": [],
2251
+ "methods": [],
2252
+ "previews": [],
2253
+ "subcomponents": []
2254
+ },
2255
+ {
2256
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::ListWrapper",
2257
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
2258
+ "accessibility_docs": null,
2259
+ "is_form_component": false,
2260
+ "is_published": true,
2261
+ "requires_js": false,
2262
+ "component": "ActionMenu::ListWrapper",
2263
+ "status": "alpha",
2264
+ "a11y_reviewed": true,
2265
+ "short_name": "ActionMenuListWrapper",
2266
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
2267
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
2268
+ "parameters": [
2269
+ {
2270
+ "name": "menu_id",
2271
+ "type": "String",
2272
+ "default": "N/A",
2273
+ "description": "ID of the parent menu."
2274
+ },
2275
+ {
2276
+ "name": "system_arguments",
2277
+ "type": "Hash",
2278
+ "default": "N/A",
2279
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
2280
+ }
2281
+ ],
2282
+ "slots": [
2283
+ {
2284
+ "name": "heading",
2285
+ "description": "Heading text rendered above the list of items.",
2286
+ "parameters": [
2287
+ {
2288
+ "name": "component_klass",
2289
+ "type": "Class",
2290
+ "default": "N/A",
2291
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
2292
+ },
2293
+ {
2294
+ "name": "system_arguments",
2295
+ "type": "Hash",
2296
+ "default": "N/A",
2297
+ "description": "The arguments accepted by `component_klass`."
2298
+ }
2299
+ ]
2300
+ }
2301
+ ],
2302
+ "methods": [
2303
+ {
2304
+ "name": "with_item",
2305
+ "description": "Adds an item to the menu.",
2306
+ "parameters": [
2307
+ {
2308
+ "name": "system_arguments",
2309
+ "type": "Hash",
2310
+ "default": "N/A",
2311
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
2312
+ }
2313
+ ],
2314
+ "return_types": []
2315
+ },
2316
+ {
2317
+ "name": "with_avatar_item",
2318
+ "description": "Adds an avatar item to the menu.",
2319
+ "parameters": [
2320
+ {
2321
+ "name": "system_arguments",
2322
+ "type": "Hash",
2323
+ "default": "N/A",
2324
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
2325
+ }
2326
+ ],
2327
+ "return_types": []
2328
+ },
2329
+ {
2330
+ "name": "with_divider",
2331
+ "description": "Adds a divider to the list. Dividers visually separate items.",
2332
+ "parameters": [
2333
+ {
2334
+ "name": "system_arguments",
2335
+ "type": "Hash",
2336
+ "default": "N/A",
2337
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
2338
+ }
2339
+ ],
2340
+ "return_types": []
2341
+ },
2342
+ {
2343
+ "name": "with_group",
2344
+ "description": "Adds a group to the menu. Groups are a logical set of items with a header.",
2345
+ "parameters": [
2346
+ {
2347
+ "name": "system_arguments",
2348
+ "type": "Hash",
2349
+ "default": "N/A",
2350
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Group{{/link_to_component}}."
2351
+ }
2352
+ ],
2353
+ "return_types": []
2354
+ },
2355
+ {
2356
+ "name": "items",
2357
+ "description": "Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.",
2358
+ "parameters": [],
2359
+ "return_types": [
2360
+ "Array<ViewComponent::Slot>"
2361
+ ]
2362
+ }
2363
+ ],
2364
+ "previews": [],
2365
+ "subcomponents": []
2366
+ },
2367
+ {
2368
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::Group",
2369
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
2370
+ "accessibility_docs": null,
2371
+ "is_form_component": false,
2372
+ "is_published": true,
2373
+ "requires_js": false,
2374
+ "component": "ActionMenu::Group",
2375
+ "status": "alpha",
2376
+ "a11y_reviewed": true,
2377
+ "short_name": "ActionMenuGroup",
2378
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
2379
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
2380
+ "parameters": [
2381
+ {
2382
+ "name": "id",
2383
+ "type": "String",
2384
+ "default": "`self.class.generate_id`",
2385
+ "description": "HTML ID value."
2386
+ },
2387
+ {
2388
+ "name": "role",
2389
+ "type": "Boolean",
2390
+ "default": "`nil`",
2391
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
2392
+ },
2393
+ {
2394
+ "name": "item_classes",
2395
+ "type": "String",
2396
+ "default": "`nil`",
2397
+ "description": "Additional CSS classes to attach to items."
2398
+ },
2399
+ {
2400
+ "name": "scheme",
2401
+ "type": "Symbol",
2402
+ "default": "`:full`",
2403
+ "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."
2404
+ },
2405
+ {
2406
+ "name": "show_dividers",
2407
+ "type": "Boolean",
2408
+ "default": "`false`",
2409
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
2410
+ },
2411
+ {
2412
+ "name": "select_variant",
2413
+ "type": "Symbol",
2414
+ "default": "`:none`",
2415
+ "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
2416
+ },
2417
+ {
2418
+ "name": "aria_selection_variant",
2419
+ "type": "Symbol",
2420
+ "default": "`:checked`",
2421
+ "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
2422
+ },
2423
+ {
2424
+ "name": "form_arguments",
2425
+ "type": "Hash",
2426
+ "default": "`{}`",
2427
+ "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} instead of using this feature directly."
2428
+ },
2429
+ {
2430
+ "name": "system_arguments",
2431
+ "type": "Hash",
2432
+ "default": "N/A",
2433
+ "description": "{{link_to_system_arguments_docs}}"
2434
+ }
2435
+ ],
2436
+ "slots": [
2437
+ {
2438
+ "name": "heading",
2439
+ "description": "Heading text rendered above the list of items.",
2440
+ "parameters": [
2441
+ {
2442
+ "name": "component_klass",
2443
+ "type": "Class",
2444
+ "default": "N/A",
2445
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
2446
+ },
2447
+ {
2448
+ "name": "system_arguments",
2449
+ "type": "Hash",
2450
+ "default": "N/A",
2451
+ "description": "The arguments accepted by `component_klass`."
2452
+ }
2453
+ ]
2454
+ },
2455
+ {
2456
+ "name": "items",
2457
+ "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
2458
+ "parameters": []
2459
+ }
2460
+ ],
2461
+ "methods": [
2462
+ {
2463
+ "name": "with_heading",
2464
+ "description": "Heading text rendered above the list of items.",
2465
+ "parameters": [
2466
+ {
2467
+ "name": "system_arguments",
2468
+ "type": "Hash",
2469
+ "default": "N/A",
2470
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
2471
+ }
2472
+ ],
2473
+ "return_types": []
2474
+ }
2475
+ ],
2476
+ "previews": [],
2477
+ "subcomponents": []
2478
+ }
2479
+ ]
2480
+ },
2481
+ {
2482
+ "fully_qualified_name": "Primer::Alpha::AutoComplete",
2483
+ "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.",
2484
+ "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must use a non-visible label, set `is_label_visible` to `false`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
2485
+ "is_form_component": false,
2486
+ "is_published": true,
2487
+ "requires_js": false,
2488
+ "component": "AutoComplete",
2489
+ "status": "deprecated",
2490
+ "a11y_reviewed": false,
2491
+ "short_name": "AutoComplete",
2492
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete.rb",
2493
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/default/",
2494
+ "parameters": [
2495
+ {
2496
+ "name": "label_text",
2497
+ "type": "String",
2498
+ "default": "N/A",
2499
+ "description": "The label of the input."
2500
+ },
2501
+ {
2502
+ "name": "src",
2503
+ "type": "String",
2504
+ "default": "N/A",
2505
+ "description": "The route to query."
2506
+ },
2507
+ {
2508
+ "name": "input_id",
2509
+ "type": "String",
2510
+ "default": "N/A",
2511
+ "description": "Id of the input element."
2512
+ },
2513
+ {
2514
+ "name": "input_name",
2515
+ "type": "String",
2516
+ "default": "`nil`",
2517
+ "description": "Optional name of the input element, defaults to `input_id` when not set."
2518
+ },
2519
+ {
2520
+ "name": "list_id",
2521
+ "type": "String",
2522
+ "default": "N/A",
2523
+ "description": "Id of the list element."
2524
+ },
2525
+ {
2526
+ "name": "with_icon",
2527
+ "type": "Boolean",
2528
+ "default": "`false`",
2529
+ "description": "Controls if a search icon is visible, defaults to `false`."
2530
+ },
2531
+ {
2532
+ "name": "is_label_visible",
2533
+ "type": "Boolean",
2534
+ "default": "`true`",
2535
+ "description": "Controls if the label is visible. If `false`, screen reader only text will be added."
2536
+ },
2537
+ {
2538
+ "name": "is_clearable",
2539
+ "type": "Boolean",
2540
+ "default": "`false`",
2541
+ "description": "Adds optional clear button."
2542
+ },
2543
+ {
2544
+ "name": "is_label_inline",
2545
+ "type": "Boolean",
2546
+ "default": "`false`",
2547
+ "description": "Controls if the label is inline. On smaller screens, label will always become stacked."
2548
+ },
2549
+ {
2550
+ "name": "system_arguments",
2551
+ "type": "Hash",
2552
+ "default": "N/A",
2553
+ "description": "{{link_to_system_arguments_docs}}"
2554
+ }
2555
+ ],
2556
+ "slots": [
2557
+ {
2558
+ "name": "results",
2559
+ "description": "Customizable results list.",
2560
+ "parameters": [
2561
+ {
2562
+ "name": "system_arguments",
2563
+ "type": "Hash",
2564
+ "default": "N/A",
2565
+ "description": "{{link_to_system_arguments_docs}}"
2566
+ }
2567
+ ]
2568
+ },
2569
+ {
2570
+ "name": "input",
2571
+ "description": "Customizable input used to search for results.\nIt is preferred to use this slot sparingly - it will be created by default if not explicity added.",
2572
+ "parameters": [
2573
+ {
2574
+ "name": "system_arguments",
2575
+ "type": "Hash",
2576
+ "default": "N/A",
2577
+ "description": "{{link_to_system_arguments_docs}}"
2578
+ }
2579
+ ]
2580
+ }
2581
+ ],
2582
+ "methods": [
2583
+ {
2584
+ "name": "label_classes",
2585
+ "description": "Private: determines the label classes based on component configration.\n\nIf the label is not visible, return an empty string.",
2586
+ "parameters": [
2587
+ {
2588
+ "name": "args",
2589
+ "type": "Hash",
2590
+ "default": "N/A",
2591
+ "description": "The component configuration."
2592
+ }
2593
+ ],
2594
+ "return_types": [
2595
+ "String"
2596
+ ]
2597
+ }
2598
+ ],
2599
+ "previews": [
2600
+ {
2601
+ "preview_path": "primer/alpha/auto_complete/playground",
2602
+ "name": "playground",
2603
+ "snapshot": "false",
2604
+ "skip_rules": {
2605
+ "wont_fix": [
2606
+ "region"
2607
+ ],
2608
+ "will_fix": [
2609
+ "color-contrast"
2610
+ ]
2611
+ }
2612
+ },
2613
+ {
2614
+ "preview_path": "primer/alpha/auto_complete/default",
2615
+ "name": "default",
2616
+ "snapshot": "true",
2617
+ "skip_rules": {
2618
+ "wont_fix": [
2619
+ "region"
2620
+ ],
2621
+ "will_fix": [
2622
+ "color-contrast"
2623
+ ]
2624
+ }
2625
+ },
2626
+ {
2627
+ "preview_path": "primer/alpha/auto_complete/with_non_visible_label",
2628
+ "name": "with_non_visible_label",
2629
+ "snapshot": "false",
2630
+ "skip_rules": {
2631
+ "wont_fix": [
2632
+ "region"
2633
+ ],
2634
+ "will_fix": [
2635
+ "color-contrast"
2636
+ ]
2637
+ }
2638
+ },
2639
+ {
2640
+ "preview_path": "primer/alpha/auto_complete/with_inline_label",
2641
+ "name": "with_inline_label",
2642
+ "snapshot": "false",
2643
+ "skip_rules": {
2644
+ "wont_fix": [
2645
+ "region"
2646
+ ],
2647
+ "will_fix": [
2648
+ "color-contrast"
2649
+ ]
2650
+ }
2651
+ },
2652
+ {
2653
+ "preview_path": "primer/alpha/auto_complete/with_icon",
2654
+ "name": "with_icon",
2655
+ "snapshot": "false",
2656
+ "skip_rules": {
2657
+ "wont_fix": [
2658
+ "region"
2659
+ ],
2660
+ "will_fix": [
2661
+ "color-contrast"
2662
+ ]
2663
+ }
2664
+ },
2665
+ {
2666
+ "preview_path": "primer/alpha/auto_complete/with_clear_button",
2667
+ "name": "with_clear_button",
2668
+ "snapshot": "false",
2669
+ "skip_rules": {
2670
+ "wont_fix": [
2671
+ "region"
2672
+ ],
2673
+ "will_fix": [
2674
+ "color-contrast"
2675
+ ]
2676
+ }
2677
+ }
2678
+ ],
2679
+ "subcomponents": [
2680
+ {
2681
+ "fully_qualified_name": "Primer::Alpha::AutoComplete::Item",
2682
+ "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
2683
+ "accessibility_docs": null,
2684
+ "is_form_component": false,
2685
+ "is_published": true,
2686
+ "requires_js": false,
2687
+ "component": "AutoComplete::Item",
2688
+ "status": "deprecated",
2689
+ "a11y_reviewed": false,
2690
+ "short_name": "AutoCompleteItem",
2691
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete/item.rb",
2692
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/item/default/",
2693
+ "parameters": [
2694
+ {
2695
+ "name": "value",
2696
+ "type": "String",
2697
+ "default": "N/A",
2698
+ "description": "Value of the item."
2699
+ },
2700
+ {
2701
+ "name": "selected",
2702
+ "type": "Boolean",
2703
+ "default": "`false`",
2704
+ "description": "Whether the item is selected."
2705
+ },
2706
+ {
2707
+ "name": "disabled",
2708
+ "type": "Boolean",
2709
+ "default": "`false`",
2710
+ "description": "Whether the item is disabled."
2711
+ },
2712
+ {
2713
+ "name": "system_arguments",
2714
+ "type": "Hash",
2715
+ "default": "N/A",
2716
+ "description": "{{link_to_system_arguments_docs}}"
2717
+ }
2718
+ ],
2719
+ "slots": [],
2720
+ "methods": [],
2721
+ "previews": [],
2722
+ "subcomponents": []
2723
+ }
2724
+ ]
2725
+ },
2726
+ {
2727
+ "fully_qualified_name": "Primer::Alpha::Banner",
2728
+ "description": "Use `Banner` to highlight important information.\n\n### Events\n\n|Name |Type |Bubbles |Cancelable |\n|:---------|:-------------------|:-------|:----------|\n|`dismiss` |`CustomEvent<void>` |No |No |",
2729
+ "accessibility_docs": "### Improve discoverability with a heading and landmark\nBanners are made visually prominent with icons and colors to immediately draw attention.\n\nTo ensure the Banner is also easily discoverable for assistive technology users, consider:\n1. Providing a heading inside of the Banner that describes the purpose of the Banner.\n2. Designating the Banner as a `region` landmark. This can be achieved by rendering the Banner as a `section` with an `aria-labelledby` pointing to the heading.\n\n### Communicating feedback\nWhen a Banner is used to communicate feedback, a live region or focus management technique should be in place to ensure that assistive technology users are aware of the feedback, especially when the Banner is shown client-side. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility), or defer to the accessibility team.\n\n#### Approach 1: Announcing a Banner\nA live region announcement can be used to communicate non-critical feedback, such as a success message.\n\nTo successfully trigger a live region announcement for a Banner that is un-`hidden` or dynamically injected onto the page, **do not** set the live region attribute/role on the Banner itself. Instead, it's important to rely on a live region that is already guaranteed to be on the page. Learn more about specific techniques at: [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region).\n\n#### Approach 2: Focusing a Banner\nFocusing the Banner can be appropriate for critical feedback scenarios, such as a [form validation error summary](https://primer.style/ui-patterns/forms/overview#interactive-summary-of-errors) where the Banner contains actions to help unblock the user.\n\nTo properly focus a Banner, add a `tabindex=\"-1\"` place focus with JavaScript (using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).",
2730
+ "is_form_component": false,
2731
+ "is_published": true,
2732
+ "requires_js": true,
2733
+ "component": "Banner",
2734
+ "status": "alpha",
2735
+ "a11y_reviewed": false,
2736
+ "short_name": "Banner",
2737
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
2738
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
2739
+ "parameters": [
2740
+ {
2741
+ "name": "tag",
2742
+ "type": "Symbol",
2743
+ "default": "`:div`",
2744
+ "description": "One of `:div` or `:section`."
2745
+ },
2746
+ {
2747
+ "name": "full",
2748
+ "type": "Boolean",
2749
+ "default": "`false`",
2750
+ "description": "Whether the component should take up the full width of the screen."
2751
+ },
2752
+ {
2753
+ "name": "full_when_narrow",
2754
+ "type": "Boolean",
2755
+ "default": "`false`",
2756
+ "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
2757
+ },
2758
+ {
2759
+ "name": "dismiss_scheme",
2760
+ "type": "Symbol",
2761
+ "default": "`:none`",
2762
+ "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
2763
+ },
2764
+ {
2765
+ "name": "dismiss_label",
2766
+ "type": "String",
2767
+ "default": "`Dismiss`",
2768
+ "description": "The aria-label text of the dismiss \"x\" button"
2769
+ },
2770
+ {
2771
+ "name": "description",
2772
+ "type": "String",
2773
+ "default": "`nil`",
2774
+ "description": "Description text rendered underneath the message."
2775
+ },
2776
+ {
2777
+ "name": "icon",
2778
+ "type": "Symbol",
2779
+ "default": "`nil`",
2780
+ "description": "The name of an {{link_to_octicons}} icon to use. If no icon is provided, a default one will be chosen based on the scheme."
2781
+ },
2782
+ {
2783
+ "name": "scheme",
2784
+ "type": "Symbol",
2785
+ "default": "`:default`",
2296
2786
  "description": "One of `:danger`, `:default`, `:success`, `:upsell`, or `:warning`."
2297
2787
  },
2298
2788
  {
@@ -3988,6 +4478,148 @@
3988
4478
  }
3989
4479
  ]
3990
4480
  },
4481
+ {
4482
+ "fully_qualified_name": "Primer::Alpha::FileTreeView",
4483
+ "description": "",
4484
+ "accessibility_docs": null,
4485
+ "is_form_component": false,
4486
+ "is_published": true,
4487
+ "requires_js": false,
4488
+ "component": "FileTreeView",
4489
+ "status": "alpha",
4490
+ "a11y_reviewed": false,
4491
+ "short_name": "FileTreeView",
4492
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view.rb",
4493
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/default/",
4494
+ "parameters": [
4495
+ {
4496
+ "name": "node_variant",
4497
+ "type": "Symbol",
4498
+ "default": "`:div`",
4499
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
4500
+ },
4501
+ {
4502
+ "name": "form_arguments",
4503
+ "type": "Hash",
4504
+ "default": "`{}`",
4505
+ "description": "These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
4506
+ },
4507
+ {
4508
+ "name": "system_arguments",
4509
+ "type": "Hash",
4510
+ "default": "N/A",
4511
+ "description": "{{link_to_system_arguments_docs}}."
4512
+ }
4513
+ ],
4514
+ "slots": [
4515
+ {
4516
+ "name": "nodes",
4517
+ "description": null,
4518
+ "parameters": []
4519
+ }
4520
+ ],
4521
+ "methods": [],
4522
+ "previews": [
4523
+ {
4524
+ "preview_path": "primer/alpha/file_tree_view/default",
4525
+ "name": "default",
4526
+ "snapshot": "interactive",
4527
+ "skip_rules": {
4528
+ "wont_fix": [
4529
+ "region"
4530
+ ],
4531
+ "will_fix": [
4532
+ "color-contrast"
4533
+ ]
4534
+ }
4535
+ },
4536
+ {
4537
+ "preview_path": "primer/alpha/file_tree_view/playground",
4538
+ "name": "playground",
4539
+ "snapshot": "false",
4540
+ "skip_rules": {
4541
+ "wont_fix": [
4542
+ "region"
4543
+ ],
4544
+ "will_fix": [
4545
+ "color-contrast"
4546
+ ]
4547
+ }
4548
+ }
4549
+ ],
4550
+ "subcomponents": [
4551
+ {
4552
+ "fully_qualified_name": "Primer::Alpha::FileTreeView::FileNode",
4553
+ "description": "",
4554
+ "accessibility_docs": null,
4555
+ "is_form_component": false,
4556
+ "is_published": true,
4557
+ "requires_js": false,
4558
+ "component": "FileTreeView::FileNode",
4559
+ "status": "alpha",
4560
+ "a11y_reviewed": false,
4561
+ "short_name": "FileTreeViewFileNode",
4562
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view/file_node.rb",
4563
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/file_node/default/",
4564
+ "parameters": [],
4565
+ "slots": [
4566
+ {
4567
+ "name": "leading_visual",
4568
+ "description": null,
4569
+ "parameters": []
4570
+ },
4571
+ {
4572
+ "name": "leading_action",
4573
+ "description": null,
4574
+ "parameters": []
4575
+ },
4576
+ {
4577
+ "name": "trailing_visual",
4578
+ "description": null,
4579
+ "parameters": []
4580
+ }
4581
+ ],
4582
+ "methods": [],
4583
+ "previews": [],
4584
+ "subcomponents": []
4585
+ },
4586
+ {
4587
+ "fully_qualified_name": "Primer::Alpha::FileTreeView::DirectoryNode",
4588
+ "description": "",
4589
+ "accessibility_docs": null,
4590
+ "is_form_component": false,
4591
+ "is_published": true,
4592
+ "requires_js": false,
4593
+ "component": "FileTreeView::DirectoryNode",
4594
+ "status": "alpha",
4595
+ "a11y_reviewed": false,
4596
+ "short_name": "FileTreeViewDirectoryNode",
4597
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view/directory_node.rb",
4598
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/directory_node/default/",
4599
+ "parameters": [],
4600
+ "slots": [
4601
+ {
4602
+ "name": "leading_visual",
4603
+ "description": null,
4604
+ "parameters": []
4605
+ },
4606
+ {
4607
+ "name": "leading_action",
4608
+ "description": null,
4609
+ "parameters": []
4610
+ },
4611
+ {
4612
+ "name": "trailing_visual",
4613
+ "description": null,
4614
+ "parameters": []
4615
+ }
4616
+ ],
4617
+ "methods": [],
4618
+ "previews": [],
4619
+ "subcomponents": []
4620
+ }
4621
+ ]
4622
+ },
3991
4623
  {
3992
4624
  "fully_qualified_name": "Primer::Alpha::FormButton",
3993
4625
  "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.",
@@ -7833,7 +8465,72 @@
7833
8465
  "previews": [],
7834
8466
  "subcomponents": []
7835
8467
  }
7836
- ]
8468
+ ]
8469
+ },
8470
+ {
8471
+ "fully_qualified_name": "Primer::Alpha::SkeletonBox",
8472
+ "description": "A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)\nthat are still loading. You can adjust width and height to match the content's dimensions.",
8473
+ "accessibility_docs": null,
8474
+ "is_form_component": false,
8475
+ "is_published": true,
8476
+ "requires_js": false,
8477
+ "component": "SkeletonBox",
8478
+ "status": "alpha",
8479
+ "a11y_reviewed": false,
8480
+ "short_name": "SkeletonBox",
8481
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/skeleton_box.rb",
8482
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/skeleton_box/default/",
8483
+ "parameters": [
8484
+ {
8485
+ "name": "height",
8486
+ "type": "String",
8487
+ "default": "`nil`",
8488
+ "description": "Any valid CSS height."
8489
+ },
8490
+ {
8491
+ "name": "width",
8492
+ "type": "String",
8493
+ "default": "`nil`",
8494
+ "description": "Any valid CSS width."
8495
+ },
8496
+ {
8497
+ "name": "system_arguments",
8498
+ "type": "Hash",
8499
+ "default": "N/A",
8500
+ "description": "{{link_to_system_arguments_docs}}"
8501
+ }
8502
+ ],
8503
+ "slots": [],
8504
+ "methods": [],
8505
+ "previews": [
8506
+ {
8507
+ "preview_path": "primer/alpha/skeleton_box/default",
8508
+ "name": "default",
8509
+ "snapshot": "false",
8510
+ "skip_rules": {
8511
+ "wont_fix": [
8512
+ "region"
8513
+ ],
8514
+ "will_fix": [
8515
+ "color-contrast"
8516
+ ]
8517
+ }
8518
+ },
8519
+ {
8520
+ "preview_path": "primer/alpha/skeleton_box/playground",
8521
+ "name": "playground",
8522
+ "snapshot": "false",
8523
+ "skip_rules": {
8524
+ "wont_fix": [
8525
+ "region"
8526
+ ],
8527
+ "will_fix": [
8528
+ "color-contrast"
8529
+ ]
8530
+ }
8531
+ }
8532
+ ],
8533
+ "subcomponents": []
7837
8534
  },
7838
8535
  {
7839
8536
  "fully_qualified_name": "Primer::Alpha::Stack",
@@ -9231,17 +9928,256 @@
9231
9928
  "description": "{{link_to_system_arguments_docs}}"
9232
9929
  }
9233
9930
  ],
9234
- "slots": [],
9235
- "methods": [],
9931
+ "slots": [],
9932
+ "methods": [],
9933
+ "previews": [
9934
+ {
9935
+ "preview_path": "primer/alpha/toggle_switch/playground",
9936
+ "name": "playground",
9937
+ "snapshot": "false",
9938
+ "skip_rules": {
9939
+ "wont_fix": [
9940
+ "region",
9941
+ "button-name"
9942
+ ],
9943
+ "will_fix": [
9944
+ "color-contrast"
9945
+ ]
9946
+ }
9947
+ },
9948
+ {
9949
+ "preview_path": "primer/alpha/toggle_switch/default",
9950
+ "name": "default",
9951
+ "snapshot": "true",
9952
+ "skip_rules": {
9953
+ "wont_fix": [
9954
+ "region",
9955
+ "button-name"
9956
+ ],
9957
+ "will_fix": [
9958
+ "color-contrast"
9959
+ ]
9960
+ }
9961
+ },
9962
+ {
9963
+ "preview_path": "primer/alpha/toggle_switch/checked",
9964
+ "name": "checked",
9965
+ "snapshot": "true",
9966
+ "skip_rules": {
9967
+ "wont_fix": [
9968
+ "region",
9969
+ "button-name"
9970
+ ],
9971
+ "will_fix": [
9972
+ "color-contrast"
9973
+ ]
9974
+ }
9975
+ },
9976
+ {
9977
+ "preview_path": "primer/alpha/toggle_switch/disabled",
9978
+ "name": "disabled",
9979
+ "snapshot": "true",
9980
+ "skip_rules": {
9981
+ "wont_fix": [
9982
+ "region",
9983
+ "button-name"
9984
+ ],
9985
+ "will_fix": [
9986
+ "color-contrast"
9987
+ ]
9988
+ }
9989
+ },
9990
+ {
9991
+ "preview_path": "primer/alpha/toggle_switch/checked_disabled",
9992
+ "name": "checked_disabled",
9993
+ "snapshot": "true",
9994
+ "skip_rules": {
9995
+ "wont_fix": [
9996
+ "region",
9997
+ "button-name"
9998
+ ],
9999
+ "will_fix": [
10000
+ "color-contrast"
10001
+ ]
10002
+ }
10003
+ },
10004
+ {
10005
+ "preview_path": "primer/alpha/toggle_switch/small",
10006
+ "name": "small",
10007
+ "snapshot": "true",
10008
+ "skip_rules": {
10009
+ "wont_fix": [
10010
+ "region",
10011
+ "button-name"
10012
+ ],
10013
+ "will_fix": [
10014
+ "color-contrast"
10015
+ ]
10016
+ }
10017
+ },
10018
+ {
10019
+ "preview_path": "primer/alpha/toggle_switch/with_status_label_position_end",
10020
+ "name": "with_status_label_position_end",
10021
+ "snapshot": "true",
10022
+ "skip_rules": {
10023
+ "wont_fix": [
10024
+ "region",
10025
+ "button-name"
10026
+ ],
10027
+ "will_fix": [
10028
+ "color-contrast"
10029
+ ]
10030
+ }
10031
+ },
10032
+ {
10033
+ "preview_path": "primer/alpha/toggle_switch/with_a_bad_src",
10034
+ "name": "with_a_bad_src",
10035
+ "snapshot": "true",
10036
+ "skip_rules": {
10037
+ "wont_fix": [
10038
+ "region",
10039
+ "button-name"
10040
+ ],
10041
+ "will_fix": [
10042
+ "color-contrast"
10043
+ ]
10044
+ }
10045
+ },
10046
+ {
10047
+ "preview_path": "primer/alpha/toggle_switch/with_no_src",
10048
+ "name": "with_no_src",
10049
+ "snapshot": "false",
10050
+ "skip_rules": {
10051
+ "wont_fix": [
10052
+ "region",
10053
+ "button-name"
10054
+ ],
10055
+ "will_fix": [
10056
+ "color-contrast"
10057
+ ]
10058
+ }
10059
+ },
10060
+ {
10061
+ "preview_path": "primer/alpha/toggle_switch/with_csrf_token",
10062
+ "name": "with_csrf_token",
10063
+ "snapshot": "false",
10064
+ "skip_rules": {
10065
+ "wont_fix": [
10066
+ "region",
10067
+ "button-name"
10068
+ ],
10069
+ "will_fix": [
10070
+ "color-contrast"
10071
+ ]
10072
+ }
10073
+ },
10074
+ {
10075
+ "preview_path": "primer/alpha/toggle_switch/with_bad_csrf_token",
10076
+ "name": "with_bad_csrf_token",
10077
+ "snapshot": "false",
10078
+ "skip_rules": {
10079
+ "wont_fix": [
10080
+ "region",
10081
+ "button-name"
10082
+ ],
10083
+ "will_fix": [
10084
+ "color-contrast"
10085
+ ]
10086
+ }
10087
+ },
10088
+ {
10089
+ "preview_path": "primer/alpha/toggle_switch/with_turbo",
10090
+ "name": "with_turbo",
10091
+ "snapshot": "false",
10092
+ "skip_rules": {
10093
+ "wont_fix": [
10094
+ "region",
10095
+ "button-name"
10096
+ ],
10097
+ "will_fix": [
10098
+ "color-contrast"
10099
+ ]
10100
+ }
10101
+ },
10102
+ {
10103
+ "preview_path": "primer/alpha/toggle_switch/with_autofocus",
10104
+ "name": "with_autofocus",
10105
+ "snapshot": "false",
10106
+ "skip_rules": {
10107
+ "wont_fix": [
10108
+ "region",
10109
+ "button-name"
10110
+ ],
10111
+ "will_fix": [
10112
+ "color-contrast"
10113
+ ]
10114
+ }
10115
+ }
10116
+ ],
10117
+ "subcomponents": []
10118
+ },
10119
+ {
10120
+ "fully_qualified_name": "Primer::Alpha::Tooltip",
10121
+ "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).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n content.\n\nSemantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.",
10122
+ "accessibility_docs": null,
10123
+ "is_form_component": false,
10124
+ "is_published": true,
10125
+ "requires_js": true,
10126
+ "component": "Tooltip",
10127
+ "status": "alpha",
10128
+ "a11y_reviewed": false,
10129
+ "short_name": "Tooltip",
10130
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
10131
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
10132
+ "parameters": [
10133
+ {
10134
+ "name": "for_id",
10135
+ "type": "String",
10136
+ "default": "N/A",
10137
+ "description": "The ID of the element that the tooltip should be attached to."
10138
+ },
10139
+ {
10140
+ "name": "type",
10141
+ "type": "Symbol",
10142
+ "default": "N/A",
10143
+ "description": "One of `:description` or `:label`."
10144
+ },
10145
+ {
10146
+ "name": "direction",
10147
+ "type": "Symbol",
10148
+ "default": "`:s`",
10149
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
10150
+ },
10151
+ {
10152
+ "name": "text",
10153
+ "type": "String",
10154
+ "default": "N/A",
10155
+ "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
10156
+ },
10157
+ {
10158
+ "name": "system_arguments",
10159
+ "type": "Hash",
10160
+ "default": "N/A",
10161
+ "description": "{{link_to_system_arguments_docs}}"
10162
+ }
10163
+ ],
10164
+ "slots": [],
10165
+ "methods": [
10166
+ {
10167
+ "name": "id",
10168
+ "description": "Returns the value of attribute id.",
10169
+ "parameters": [],
10170
+ "return_types": []
10171
+ }
10172
+ ],
9236
10173
  "previews": [
9237
10174
  {
9238
- "preview_path": "primer/alpha/toggle_switch/playground",
10175
+ "preview_path": "primer/alpha/tooltip/playground",
9239
10176
  "name": "playground",
9240
10177
  "snapshot": "false",
9241
10178
  "skip_rules": {
9242
10179
  "wont_fix": [
9243
- "region",
9244
- "button-name"
10180
+ "region"
9245
10181
  ],
9246
10182
  "will_fix": [
9247
10183
  "color-contrast"
@@ -9249,13 +10185,12 @@
9249
10185
  }
9250
10186
  },
9251
10187
  {
9252
- "preview_path": "primer/alpha/toggle_switch/default",
10188
+ "preview_path": "primer/alpha/tooltip/default",
9253
10189
  "name": "default",
9254
- "snapshot": "true",
10190
+ "snapshot": "false",
9255
10191
  "skip_rules": {
9256
10192
  "wont_fix": [
9257
- "region",
9258
- "button-name"
10193
+ "region"
9259
10194
  ],
9260
10195
  "will_fix": [
9261
10196
  "color-contrast"
@@ -9263,13 +10198,12 @@
9263
10198
  }
9264
10199
  },
9265
10200
  {
9266
- "preview_path": "primer/alpha/toggle_switch/checked",
9267
- "name": "checked",
9268
- "snapshot": "true",
10201
+ "preview_path": "primer/alpha/tooltip/description_tooltip_on_button_with_existing_describedby",
10202
+ "name": "description_tooltip_on_button_with_existing_describedby",
10203
+ "snapshot": "false",
9269
10204
  "skip_rules": {
9270
10205
  "wont_fix": [
9271
- "region",
9272
- "button-name"
10206
+ "region"
9273
10207
  ],
9274
10208
  "will_fix": [
9275
10209
  "color-contrast"
@@ -9277,13 +10211,12 @@
9277
10211
  }
9278
10212
  },
9279
10213
  {
9280
- "preview_path": "primer/alpha/toggle_switch/disabled",
9281
- "name": "disabled",
9282
- "snapshot": "true",
10214
+ "preview_path": "primer/alpha/tooltip/with_right_most_position",
10215
+ "name": "with_right_most_position",
10216
+ "snapshot": "false",
9283
10217
  "skip_rules": {
9284
10218
  "wont_fix": [
9285
- "region",
9286
- "button-name"
10219
+ "region"
9287
10220
  ],
9288
10221
  "will_fix": [
9289
10222
  "color-contrast"
@@ -9291,13 +10224,12 @@
9291
10224
  }
9292
10225
  },
9293
10226
  {
9294
- "preview_path": "primer/alpha/toggle_switch/checked_disabled",
9295
- "name": "checked_disabled",
9296
- "snapshot": "true",
10227
+ "preview_path": "primer/alpha/tooltip/with_multiple_on_a_page",
10228
+ "name": "with_multiple_on_a_page",
10229
+ "snapshot": "false",
9297
10230
  "skip_rules": {
9298
10231
  "wont_fix": [
9299
- "region",
9300
- "button-name"
10232
+ "region"
9301
10233
  ],
9302
10234
  "will_fix": [
9303
10235
  "color-contrast"
@@ -9305,13 +10237,12 @@
9305
10237
  }
9306
10238
  },
9307
10239
  {
9308
- "preview_path": "primer/alpha/toggle_switch/small",
9309
- "name": "small",
9310
- "snapshot": "true",
10240
+ "preview_path": "primer/alpha/tooltip/tooltip_with_button",
10241
+ "name": "tooltip_with_button",
10242
+ "snapshot": "false",
9311
10243
  "skip_rules": {
9312
10244
  "wont_fix": [
9313
- "region",
9314
- "button-name"
10245
+ "region"
9315
10246
  ],
9316
10247
  "will_fix": [
9317
10248
  "color-contrast"
@@ -9319,13 +10250,12 @@
9319
10250
  }
9320
10251
  },
9321
10252
  {
9322
- "preview_path": "primer/alpha/toggle_switch/with_status_label_position_end",
9323
- "name": "with_status_label_position_end",
9324
- "snapshot": "true",
10253
+ "preview_path": "primer/alpha/tooltip/tooltip_with_link",
10254
+ "name": "tooltip_with_link",
10255
+ "snapshot": "false",
9325
10256
  "skip_rules": {
9326
10257
  "wont_fix": [
9327
- "region",
9328
- "button-name"
10258
+ "region"
9329
10259
  ],
9330
10260
  "will_fix": [
9331
10261
  "color-contrast"
@@ -9333,13 +10263,12 @@
9333
10263
  }
9334
10264
  },
9335
10265
  {
9336
- "preview_path": "primer/alpha/toggle_switch/with_a_bad_src",
9337
- "name": "with_a_bad_src",
9338
- "snapshot": "true",
10266
+ "preview_path": "primer/alpha/tooltip/tooltip_with_icon_button",
10267
+ "name": "tooltip_with_icon_button",
10268
+ "snapshot": "false",
9339
10269
  "skip_rules": {
9340
10270
  "wont_fix": [
9341
- "region",
9342
- "button-name"
10271
+ "region"
9343
10272
  ],
9344
10273
  "will_fix": [
9345
10274
  "color-contrast"
@@ -9347,13 +10276,12 @@
9347
10276
  }
9348
10277
  },
9349
10278
  {
9350
- "preview_path": "primer/alpha/toggle_switch/with_no_src",
9351
- "name": "with_no_src",
10279
+ "preview_path": "primer/alpha/tooltip/tooltip_inside_primer_overlay",
10280
+ "name": "tooltip_inside_primer_overlay",
9352
10281
  "snapshot": "false",
9353
10282
  "skip_rules": {
9354
10283
  "wont_fix": [
9355
- "region",
9356
- "button-name"
10284
+ "region"
9357
10285
  ],
9358
10286
  "will_fix": [
9359
10287
  "color-contrast"
@@ -9361,13 +10289,12 @@
9361
10289
  }
9362
10290
  },
9363
10291
  {
9364
- "preview_path": "primer/alpha/toggle_switch/with_csrf_token",
9365
- "name": "with_csrf_token",
10292
+ "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
10293
+ "name": "tooltip_with_dialog_moving_focus_to_input",
9366
10294
  "snapshot": "false",
9367
10295
  "skip_rules": {
9368
10296
  "wont_fix": [
9369
- "region",
9370
- "button-name"
10297
+ "region"
9371
10298
  ],
9372
10299
  "will_fix": [
9373
10300
  "color-contrast"
@@ -9375,13 +10302,12 @@
9375
10302
  }
9376
10303
  },
9377
10304
  {
9378
- "preview_path": "primer/alpha/toggle_switch/with_bad_csrf_token",
9379
- "name": "with_bad_csrf_token",
9380
- "snapshot": "false",
10305
+ "preview_path": "primer/alpha/tooltip/tooltip_n",
10306
+ "name": "tooltip_n",
10307
+ "snapshot": "interactive",
9381
10308
  "skip_rules": {
9382
10309
  "wont_fix": [
9383
- "region",
9384
- "button-name"
10310
+ "region"
9385
10311
  ],
9386
10312
  "will_fix": [
9387
10313
  "color-contrast"
@@ -9389,13 +10315,12 @@
9389
10315
  }
9390
10316
  },
9391
10317
  {
9392
- "preview_path": "primer/alpha/toggle_switch/with_turbo",
9393
- "name": "with_turbo",
9394
- "snapshot": "false",
10318
+ "preview_path": "primer/alpha/tooltip/tooltip_s",
10319
+ "name": "tooltip_s",
10320
+ "snapshot": "interactive",
9395
10321
  "skip_rules": {
9396
10322
  "wont_fix": [
9397
- "region",
9398
- "button-name"
10323
+ "region"
9399
10324
  ],
9400
10325
  "will_fix": [
9401
10326
  "color-contrast"
@@ -9403,13 +10328,77 @@
9403
10328
  }
9404
10329
  },
9405
10330
  {
9406
- "preview_path": "primer/alpha/toggle_switch/with_autofocus",
9407
- "name": "with_autofocus",
9408
- "snapshot": "false",
10331
+ "preview_path": "primer/alpha/tooltip/tooltip_e",
10332
+ "name": "tooltip_e",
10333
+ "snapshot": "interactive",
9409
10334
  "skip_rules": {
9410
10335
  "wont_fix": [
9411
- "region",
9412
- "button-name"
10336
+ "region"
10337
+ ],
10338
+ "will_fix": [
10339
+ "color-contrast"
10340
+ ]
10341
+ }
10342
+ },
10343
+ {
10344
+ "preview_path": "primer/alpha/tooltip/tooltip_w",
10345
+ "name": "tooltip_w",
10346
+ "snapshot": "interactive",
10347
+ "skip_rules": {
10348
+ "wont_fix": [
10349
+ "region"
10350
+ ],
10351
+ "will_fix": [
10352
+ "color-contrast"
10353
+ ]
10354
+ }
10355
+ },
10356
+ {
10357
+ "preview_path": "primer/alpha/tooltip/tooltip_se",
10358
+ "name": "tooltip_se",
10359
+ "snapshot": "interactive",
10360
+ "skip_rules": {
10361
+ "wont_fix": [
10362
+ "region"
10363
+ ],
10364
+ "will_fix": [
10365
+ "color-contrast"
10366
+ ]
10367
+ }
10368
+ },
10369
+ {
10370
+ "preview_path": "primer/alpha/tooltip/tooltip_sw",
10371
+ "name": "tooltip_sw",
10372
+ "snapshot": "interactive",
10373
+ "skip_rules": {
10374
+ "wont_fix": [
10375
+ "region"
10376
+ ],
10377
+ "will_fix": [
10378
+ "color-contrast"
10379
+ ]
10380
+ }
10381
+ },
10382
+ {
10383
+ "preview_path": "primer/alpha/tooltip/tooltip_ne",
10384
+ "name": "tooltip_ne",
10385
+ "snapshot": "interactive",
10386
+ "skip_rules": {
10387
+ "wont_fix": [
10388
+ "region"
10389
+ ],
10390
+ "will_fix": [
10391
+ "color-contrast"
10392
+ ]
10393
+ }
10394
+ },
10395
+ {
10396
+ "preview_path": "primer/alpha/tooltip/tooltip_nw",
10397
+ "name": "tooltip_nw",
10398
+ "snapshot": "interactive",
10399
+ "skip_rules": {
10400
+ "wont_fix": [
10401
+ "region"
9413
10402
  ],
9414
10403
  "will_fix": [
9415
10404
  "color-contrast"
@@ -9420,62 +10409,107 @@
9420
10409
  "subcomponents": []
9421
10410
  },
9422
10411
  {
9423
- "fully_qualified_name": "Primer::Alpha::Tooltip",
9424
- "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).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n content.\n\nSemantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.",
10412
+ "fully_qualified_name": "Primer::Alpha::TreeView",
10413
+ "description": "TreeView is a hierarchical list of items that may have a parent-child relationship where children\ncan be toggled into view by expanding or collapsing their parent item.\n\n## Terminology\n\nConsider the following tree structure:\n\nsrc\n├ button.rb\n└ action_list\n ├ item.rb\n └ header.rb\n\n1. **Node**. A node is an item in the tree. Nodes can either be \"leaf\" nodes (i.e. have no children), or \"sub-tree\"\nnodes, which do have children. In the example above, button.rb, item.rb, and header.rb are all leaf nodes, while\naction_list is a sub-tree node.\n2. **Path**. A node's path is like its ID. It's an array of strings containing the current node's label and all the\nlabels of its ancestors, in order. In the example above, header.rb's path is [\"src\", \"action_list\", \"header.rb\"].\n\n## Static nodes\n\nThe `TreeView` component allows items to be provided statically or loaded dynamically from the server.\nProviding items statically is done using the `leaf` and `sub_tree` slots:\n\n```erb\n<%= render(Primer::Alpha::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_leaf(label: \"File 1\")\n <% end %>\n <% tree.with_leaf(label: \"File 2\") %>\n<% end %>\n```\n\n## Dynamic nodes\n\nTree nodes can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of nodes. Unlike other Primer components, `TreeView` allows the programmer to specify\nloading behavior on a per-sub-tree basis, i.e. each sub-tree must specify how its nodes are loaded. To load nodes\ndynamically for a given sub-tree, configure it with either a loading spinner or a loading skeleton, and provide\nthe URL to fetch nodes from:\n\n```erb\n<%= render(Primer::Alpha::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path) %>\n <% end %>\n<% end %>\n```\n\nDefine a controller action to serve the list of nodes. The `TreeView` component automatically includes the\nsub-tree's path as a GET parameter, encoded as a JSON array.\n\n```ruby\nclass TreeViewItemsController < ApplicationController\n def show\n @path = JSON.parse(params[:path])\n @results = get_tree_items(starting_at: path)\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>\n <% tree.with_leaf(...) %>\n <% tree.with_sub_tree(...) do |sub_tree| %>\n ...\n <% end %>\n<% end %>\n```\n\n## Multi-select mode\n\nPassing `select_variant: :multiple` to both sub-tree and leaf nodes will add a check box to the left of the node's\nlabel. These check boxes behave according to the value of a second argument, `select_strategy:`.\n\nThe default select strategy, `:descendants`, will cause all child nodes to be checked when the node is checked.\nThis includes both sub-tree and leaf nodes. When the node is unchecked, all child nodes will also be unchecked.\nUnchecking a child node of a checked parent will cause the parent to enter a mixed or indeterminate state, which\nis represented by a horizontal line icon instead of a check mark. This icon indicates that some children are\nchecked, but not all.\n\nA secondary select strategy, `:self`, is provided to allow disabling the automatic checking of child nodes. When\n`select_strategy: :self` is specified, checking sub-tree nodes does not check child nodes, and sub-tree nodes\ncannot enter a mixed or indeterminate state.\n\nNodes can be checked via the keyboard by pressing the space key.\n\n## Node tags\n\n`TreeView`s support three different node variants, `:anchor`, `:button`, and `:div` (the default), which controls\nwhich HTML tag is used to construct the nodes. The `:anchor` and `:button` variants correspond to `<a>` and\n`<button>` tags respectively, which are browser-native elements. Anchors and buttons can be activated (i.e.\n\"clicked\") using the mouse or keyboard via the enter or space keys. The node variant must be the same for all\nnodes in the tree, and is therefore specified at the root level, eg. `TreeView.new(node_variant: :anchor)`.\n\nTrees with node variants other than `:div` cannot have check boxes, i.e. cannot be put into multi-select mode.\n\nTrees with node variants other than `:div` do not emit the `treeViewNodeActivated` or `treeViewBeforeNodeActivated`\nevents, since it is assumed any behavior associated with these variants is user- or browser-defined.\n\n## Interaction behavior matrix\n\n|Interaction |Select variant|Tag |Result |\n|:---------------|:-------------|:------------|:--------------------------|\n|Enter/space |none |div |Expands/collapses |\n|Enter/space |none |anchor/button|Activates anchor/button |\n|Enter/space |multiple |div |Checks or unchecks |\n|Enter/space |multiple |anchor/button|N/A (not allowed) |\n|Left/right arrow|none |div |Expands/collapses |\n|Left/right arrow|none |anchor/button|Expands/collapses |\n|Left/right arrow|multiple |div |Expands/collapses |\n|Left/right arrow|multiple |anchor/button|N/A (not allowed) |\n|Click |none |div |Expands/collapses |\n|Click |multiple |div |Checks or unchecks |\n|Click |multiple |anchor/button|N/A (not allowed) |\n\n## JavaScript API\n\n`TreeView`s render a `<tree-view>` custom element that exposes behavior to the client.\n\n|Name |Notes |\n|:-----------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n|`getNodePath(node: Element): string[]` |Returns the path to the given node. |\n|`getNodeType(node: Element): TreeViewNodeType | null` |Returns either `\"leaf\"` or `\"sub-tree\"`. |\n|`markCurrentAtPath(path: string[])` |Marks the node as the \"current\" node, which appears visually distinct from other nodes. |\n|`get currentNode(): HTMLLIElement | null` |Returns the current node. |\n|`expandAtPath(path: string[])` |Expands the sub-tree at `path`. |\n|`collapseAtPath(path: string[])` |Collapses the sub-tree at `path`. |\n|`toggleAtPath(path: string[])` |If the sub-tree at `path` is collapsed, this function expands it, and vice-versa. |\n|`checkAtPath(path: string[])` |If the node at `path` has a checkbox, this function checks it. |\n|`uncheckAtPath(path: string[])` |If the node at `path` has a checkbox, this function unchecks it. |\n|`toggleCheckedAtPath(path: string[])` |If the sub-tree at `path` is checked, this function unchecks it, and vice-versa. |\n|`checkedValueAtPath(path: string[]): TreeViewCheckedValue` |Returns `\"true\"` (all child nodes are checked), `\"false\"` (no child nodes are checked), or `\"mixed\"` (some child nodes are checked, some are not).|\n|`nodeAtPath(path: string[], selector?: string): Element | null` |Returns the node for the given `path`, either a leaf node or sub-tree node. |\n|`subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null`|Returns the sub-tree at the given `path`, if it exists. |\n|`leafAtPath(path: string[]): HTMLLIElement | null` |Returns the leaf node at the given `path`, if it exists. |\n|`getNodeCheckedValue(node: Element): TreeViewCheckedValue` |The same as `checkedValueAtPath`, but accepts a node instead of a path. |\n\n### Events\n\nThe events enumerated below include node information by way of the `TreeViewNodeInfo` object, which has the\nfollowing signature:\n\n```typescript\ntype TreeViewNodeType = 'leaf' | 'sub-tree'\ntype TreeViewCheckedValue = 'true' | 'false' | 'mixed'\n\ntype TreeViewNodeInfo = {\n node: Element\n type: TreeViewNodeType\n path: string[]\n checkedValue: TreeViewCheckedValue\n previousCheckedValue: TreeViewCheckedValue\n}\n```\n\n|Name |Type |Bubbles |Cancelable |\n|:----------------------------|:------------------------------------------|:-------|:----------|\n|`treeViewNodeActivated` |`CustomEvent<TreeViewNodeInfo>` |Yes |No |\n|`treeViewBeforeNodeActivated`|`CustomEvent<TreeViewNodeInfo>` |Yes |Yes |\n|`treeViewNodeExpanded` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeCollapsed` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |Yes |\n|`treeViewBeforeNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |No |\n\n_Item activation_\n\nThe `<tree-view>` element fires an `treeViewNodeActivated` event whenever a node is activated (eg. clicked)\nvia the mouse or keyboard.\n\nThe `treeViewBeforeNodeActivated` event fires before a node is activated. Canceling this event will prevent the\nnode from being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeActivated\",\n (event: CustomEvent<TreeViewNodeInfo>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\n_Item checking/unchecking_\n\nThe `tree-view` element fires a `treeViewNodeChecked` event whenever a node is checked or unchecked.\n\nThe `treeViewBeforeNodeChecked` event fires before a node is checked or unchecked. Canceling this event will\nprevent the check/uncheck operation.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeChecked\",\n (event: CustomEvent<TreeViewNodeInfo[]>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\nBecause checking or unchecking a sub-tree results in the checking or unchecking of all its children recursively,\nboth the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`\nobjects, which contain entries for every modified node in the tree.",
9425
10414
  "accessibility_docs": null,
9426
10415
  "is_form_component": false,
9427
10416
  "is_published": true,
9428
- "requires_js": true,
9429
- "component": "Tooltip",
10417
+ "requires_js": false,
10418
+ "component": "TreeView",
9430
10419
  "status": "alpha",
9431
10420
  "a11y_reviewed": false,
9432
- "short_name": "Tooltip",
9433
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
9434
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
10421
+ "short_name": "TreeView",
10422
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view.rb",
10423
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/default/",
9435
10424
  "parameters": [
9436
10425
  {
9437
- "name": "for_id",
9438
- "type": "String",
9439
- "default": "N/A",
9440
- "description": "The ID of the element that the tooltip should be attached to."
9441
- },
9442
- {
9443
- "name": "type",
9444
- "type": "Symbol",
9445
- "default": "N/A",
9446
- "description": "One of `:description` or `:label`."
9447
- },
9448
- {
9449
- "name": "direction",
10426
+ "name": "node_variant",
9450
10427
  "type": "Symbol",
9451
- "default": "`:s`",
9452
- "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
10428
+ "default": "`:div`",
10429
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
9453
10430
  },
9454
10431
  {
9455
- "name": "text",
9456
- "type": "String",
9457
- "default": "N/A",
9458
- "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
10432
+ "name": "form_arguments",
10433
+ "type": "Hash",
10434
+ "default": "`{}`",
10435
+ "description": "These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
9459
10436
  },
9460
10437
  {
9461
10438
  "name": "system_arguments",
9462
10439
  "type": "Hash",
9463
10440
  "default": "N/A",
9464
- "description": "{{link_to_system_arguments_docs}}"
10441
+ "description": "{{link_to_system_arguments_docs}}."
10442
+ }
10443
+ ],
10444
+ "slots": [
10445
+ {
10446
+ "name": "nodes",
10447
+ "description": null,
10448
+ "parameters": []
9465
10449
  }
9466
10450
  ],
9467
- "slots": [],
9468
10451
  "methods": [
9469
10452
  {
9470
- "name": "id",
9471
- "description": "Returns the value of attribute id.",
10453
+ "name": "with_leaf",
10454
+ "description": "Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.",
10455
+ "parameters": [
10456
+ {
10457
+ "name": "component_klass",
10458
+ "type": "Class",
10459
+ "default": "N/A",
10460
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}"
10461
+ },
10462
+ {
10463
+ "name": "system_arguments",
10464
+ "type": "Hash",
10465
+ "default": "N/A",
10466
+ "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
10467
+ }
10468
+ ],
10469
+ "return_types": []
10470
+ },
10471
+ {
10472
+ "name": "with_sub_tree",
10473
+ "description": "Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.",
10474
+ "parameters": [
10475
+ {
10476
+ "name": "component_klass",
10477
+ "type": "Class",
10478
+ "default": "N/A",
10479
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}"
10480
+ },
10481
+ {
10482
+ "name": "system_arguments",
10483
+ "type": "Hash",
10484
+ "default": "N/A",
10485
+ "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
10486
+ }
10487
+ ],
10488
+ "return_types": []
10489
+ },
10490
+ {
10491
+ "name": "node_variant",
10492
+ "description": "Returns the value of attribute node_variant.",
9472
10493
  "parameters": [],
9473
10494
  "return_types": []
9474
10495
  }
9475
10496
  ],
9476
10497
  "previews": [
9477
10498
  {
9478
- "preview_path": "primer/alpha/tooltip/playground",
10499
+ "preview_path": "primer/alpha/tree_view/default",
10500
+ "name": "default",
10501
+ "snapshot": "interactive",
10502
+ "skip_rules": {
10503
+ "wont_fix": [
10504
+ "region"
10505
+ ],
10506
+ "will_fix": [
10507
+ "color-contrast"
10508
+ ]
10509
+ }
10510
+ },
10511
+ {
10512
+ "preview_path": "primer/alpha/tree_view/playground",
9479
10513
  "name": "playground",
9480
10514
  "snapshot": "false",
9481
10515
  "skip_rules": {
@@ -9488,9 +10522,9 @@
9488
10522
  }
9489
10523
  },
9490
10524
  {
9491
- "preview_path": "primer/alpha/tooltip/default",
9492
- "name": "default",
9493
- "snapshot": "false",
10525
+ "preview_path": "primer/alpha/tree_view/empty",
10526
+ "name": "empty",
10527
+ "snapshot": "interactive",
9494
10528
  "skip_rules": {
9495
10529
  "wont_fix": [
9496
10530
  "region"
@@ -9501,9 +10535,9 @@
9501
10535
  }
9502
10536
  },
9503
10537
  {
9504
- "preview_path": "primer/alpha/tooltip/description_tooltip_on_button_with_existing_describedby",
9505
- "name": "description_tooltip_on_button_with_existing_describedby",
9506
- "snapshot": "false",
10538
+ "preview_path": "primer/alpha/tree_view/loading_failure",
10539
+ "name": "loading_failure",
10540
+ "snapshot": "interactive",
9507
10541
  "skip_rules": {
9508
10542
  "wont_fix": [
9509
10543
  "region"
@@ -9514,9 +10548,9 @@
9514
10548
  }
9515
10549
  },
9516
10550
  {
9517
- "preview_path": "primer/alpha/tooltip/with_right_most_position",
9518
- "name": "with_right_most_position",
9519
- "snapshot": "false",
10551
+ "preview_path": "primer/alpha/tree_view/loading_spinner",
10552
+ "name": "loading_spinner",
10553
+ "snapshot": "interactive",
9520
10554
  "skip_rules": {
9521
10555
  "wont_fix": [
9522
10556
  "region"
@@ -9527,9 +10561,9 @@
9527
10561
  }
9528
10562
  },
9529
10563
  {
9530
- "preview_path": "primer/alpha/tooltip/with_multiple_on_a_page",
9531
- "name": "with_multiple_on_a_page",
9532
- "snapshot": "false",
10564
+ "preview_path": "primer/alpha/tree_view/loading_skeleton",
10565
+ "name": "loading_skeleton",
10566
+ "snapshot": "interactive",
9533
10567
  "skip_rules": {
9534
10568
  "wont_fix": [
9535
10569
  "region"
@@ -9540,8 +10574,8 @@
9540
10574
  }
9541
10575
  },
9542
10576
  {
9543
- "preview_path": "primer/alpha/tooltip/tooltip_with_button",
9544
- "name": "tooltip_with_button",
10577
+ "preview_path": "primer/alpha/tree_view/async_alpha",
10578
+ "name": "async_alpha",
9545
10579
  "snapshot": "false",
9546
10580
  "skip_rules": {
9547
10581
  "wont_fix": [
@@ -9553,8 +10587,8 @@
9553
10587
  }
9554
10588
  },
9555
10589
  {
9556
- "preview_path": "primer/alpha/tooltip/tooltip_with_link",
9557
- "name": "tooltip_with_link",
10590
+ "preview_path": "primer/alpha/tree_view/leaf_node_playground",
10591
+ "name": "leaf_node_playground",
9558
10592
  "snapshot": "false",
9559
10593
  "skip_rules": {
9560
10594
  "wont_fix": [
@@ -9566,8 +10600,8 @@
9566
10600
  }
9567
10601
  },
9568
10602
  {
9569
- "preview_path": "primer/alpha/tooltip/tooltip_with_icon_button",
9570
- "name": "tooltip_with_icon_button",
10603
+ "preview_path": "primer/alpha/tree_view/links",
10604
+ "name": "links",
9571
10605
  "snapshot": "false",
9572
10606
  "skip_rules": {
9573
10607
  "wont_fix": [
@@ -9579,8 +10613,8 @@
9579
10613
  }
9580
10614
  },
9581
10615
  {
9582
- "preview_path": "primer/alpha/tooltip/tooltip_inside_primer_overlay",
9583
- "name": "tooltip_inside_primer_overlay",
10616
+ "preview_path": "primer/alpha/tree_view/buttons",
10617
+ "name": "buttons",
9584
10618
  "snapshot": "false",
9585
10619
  "skip_rules": {
9586
10620
  "wont_fix": [
@@ -9592,8 +10626,8 @@
9592
10626
  }
9593
10627
  },
9594
10628
  {
9595
- "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
9596
- "name": "tooltip_with_dialog_moving_focus_to_input",
10629
+ "preview_path": "primer/alpha/tree_view/auto_expansion",
10630
+ "name": "auto_expansion",
9597
10631
  "snapshot": "false",
9598
10632
  "skip_rules": {
9599
10633
  "wont_fix": [
@@ -9605,9 +10639,9 @@
9605
10639
  }
9606
10640
  },
9607
10641
  {
9608
- "preview_path": "primer/alpha/tooltip/tooltip_n",
9609
- "name": "tooltip_n",
9610
- "snapshot": "interactive",
10642
+ "preview_path": "primer/alpha/tree_view/form_input",
10643
+ "name": "form_input",
10644
+ "snapshot": "false",
9611
10645
  "skip_rules": {
9612
10646
  "wont_fix": [
9613
10647
  "region"
@@ -9616,100 +10650,904 @@
9616
10650
  "color-contrast"
9617
10651
  ]
9618
10652
  }
10653
+ }
10654
+ ],
10655
+ "subcomponents": [
10656
+ {
10657
+ "fully_qualified_name": "Primer::Alpha::TreeView::Visual",
10658
+ "description": "A `TreeView` visual, either leading or trailing.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10659
+ "accessibility_docs": null,
10660
+ "is_form_component": false,
10661
+ "is_published": true,
10662
+ "requires_js": false,
10663
+ "component": "TreeView::Visual",
10664
+ "status": "alpha",
10665
+ "a11y_reviewed": false,
10666
+ "short_name": "TreeViewVisual",
10667
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/visual.rb",
10668
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/visual/default/",
10669
+ "parameters": [
10670
+ {
10671
+ "name": "id",
10672
+ "type": "String",
10673
+ "default": "N/A",
10674
+ "description": "This visual's HTML ID."
10675
+ },
10676
+ {
10677
+ "name": "visual",
10678
+ "type": "ViewComponent::Base",
10679
+ "default": "N/A",
10680
+ "description": "A renderable component like an instance of {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}} to render as the visual."
10681
+ },
10682
+ {
10683
+ "name": "label",
10684
+ "type": "String",
10685
+ "default": "`nil`",
10686
+ "description": "Text describing this visual that will be visible only to screen readers."
10687
+ }
10688
+ ],
10689
+ "slots": [],
10690
+ "methods": [],
10691
+ "previews": [],
10692
+ "subcomponents": []
10693
+ },
10694
+ {
10695
+ "fully_qualified_name": "Primer::Alpha::TreeView::SubTreeContainer",
10696
+ "description": "This component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10697
+ "accessibility_docs": null,
10698
+ "is_form_component": false,
10699
+ "is_published": true,
10700
+ "requires_js": false,
10701
+ "component": "TreeView::SubTreeContainer",
10702
+ "status": "alpha",
10703
+ "a11y_reviewed": false,
10704
+ "short_name": "TreeViewSubTreeContainer",
10705
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree_container.rb",
10706
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree_container/default/",
10707
+ "parameters": [
10708
+ {
10709
+ "name": "path",
10710
+ "type": "Array<String>",
10711
+ "default": "N/A",
10712
+ "description": "The path to this node."
10713
+ },
10714
+ {
10715
+ "name": "expanded",
10716
+ "type": "Boolean",
10717
+ "default": "`false`",
10718
+ "description": "Whether or not this sub-tree node renders expanded."
10719
+ },
10720
+ {
10721
+ "name": "system_arguments",
10722
+ "type": "Hash",
10723
+ "default": "N/A",
10724
+ "description": "{{link_to_system_arguments_docs}}"
10725
+ }
10726
+ ],
10727
+ "slots": [],
10728
+ "methods": [
10729
+ {
10730
+ "name": "path",
10731
+ "description": "The path to this node",
10732
+ "parameters": [],
10733
+ "return_types": [
10734
+ "Array<String>"
10735
+ ]
10736
+ },
10737
+ {
10738
+ "name": "expanded",
10739
+ "description": "Whether or not this sub-tree node renders expanded.",
10740
+ "parameters": [],
10741
+ "return_types": [
10742
+ "Boolean"
10743
+ ]
10744
+ },
10745
+ {
10746
+ "name": "expanded?",
10747
+ "description": "Whether or not this sub-tree node renders expanded.",
10748
+ "parameters": [],
10749
+ "return_types": [
10750
+ "Boolean"
10751
+ ]
10752
+ }
10753
+ ],
10754
+ "previews": [],
10755
+ "subcomponents": []
10756
+ },
10757
+ {
10758
+ "fully_qualified_name": "Primer::Alpha::TreeView::SubTree",
10759
+ "description": "A `TreeView` sub-tree.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10760
+ "accessibility_docs": null,
10761
+ "is_form_component": false,
10762
+ "is_published": true,
10763
+ "requires_js": false,
10764
+ "component": "TreeView::SubTree",
10765
+ "status": "alpha",
10766
+ "a11y_reviewed": false,
10767
+ "short_name": "TreeViewSubTree",
10768
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree.rb",
10769
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree/default/",
10770
+ "parameters": [
10771
+ {
10772
+ "name": "node_variant",
10773
+ "type": "Symbol",
10774
+ "default": "N/A",
10775
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
10776
+ },
10777
+ {
10778
+ "name": "system_arguments",
10779
+ "type": "Hash",
10780
+ "default": "N/A",
10781
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
10782
+ }
10783
+ ],
10784
+ "slots": [
10785
+ {
10786
+ "name": "nodes",
10787
+ "description": null,
10788
+ "parameters": []
10789
+ },
10790
+ {
10791
+ "name": "loader",
10792
+ "description": null,
10793
+ "parameters": []
10794
+ },
10795
+ {
10796
+ "name": "no_items_message",
10797
+ "description": "The message to display if this sub-tree contains no children.",
10798
+ "parameters": []
10799
+ }
10800
+ ],
10801
+ "methods": [
10802
+ {
10803
+ "name": "with_leaf",
10804
+ "description": "Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.",
10805
+ "parameters": [
10806
+ {
10807
+ "name": "component_klass",
10808
+ "type": "Class",
10809
+ "default": "N/A",
10810
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}"
10811
+ },
10812
+ {
10813
+ "name": "system_arguments",
10814
+ "type": "Hash",
10815
+ "default": "N/A",
10816
+ "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
10817
+ }
10818
+ ],
10819
+ "return_types": []
10820
+ },
10821
+ {
10822
+ "name": "with_sub_tree",
10823
+ "description": "Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.",
10824
+ "parameters": [
10825
+ {
10826
+ "name": "component_klass",
10827
+ "type": "Class",
10828
+ "default": "N/A",
10829
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}"
10830
+ },
10831
+ {
10832
+ "name": "system_arguments",
10833
+ "type": "Hash",
10834
+ "default": "N/A",
10835
+ "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
10836
+ }
10837
+ ],
10838
+ "return_types": []
10839
+ },
10840
+ {
10841
+ "name": "with_loading_spinner",
10842
+ "description": "Adds a loader to this sub-tree that displays a skeleton animation while nodes are fetched from the server.",
10843
+ "parameters": [
10844
+ {
10845
+ "name": "system_arguments",
10846
+ "type": "Hash",
10847
+ "default": "N/A",
10848
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SkeletonLoader{{/link_to_component}}."
10849
+ }
10850
+ ],
10851
+ "return_types": []
10852
+ },
10853
+ {
10854
+ "name": "node_variant",
10855
+ "description": "Returns the value of attribute node_variant.",
10856
+ "parameters": [],
10857
+ "return_types": []
10858
+ }
10859
+ ],
10860
+ "previews": [],
10861
+ "subcomponents": []
10862
+ },
10863
+ {
10864
+ "fully_qualified_name": "Primer::Alpha::TreeView::SpinnerLoader",
10865
+ "description": "Renders a loading spinner for a `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10866
+ "accessibility_docs": null,
10867
+ "is_form_component": false,
10868
+ "is_published": true,
10869
+ "requires_js": false,
10870
+ "component": "TreeView::SpinnerLoader",
10871
+ "status": "alpha",
10872
+ "a11y_reviewed": false,
10873
+ "short_name": "TreeViewSpinnerLoader",
10874
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/spinner_loader.rb",
10875
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/spinner_loader/default/",
10876
+ "parameters": [
10877
+ {
10878
+ "name": "src",
10879
+ "type": "String",
10880
+ "default": "N/A",
10881
+ "description": "The URL to fetch nodes from."
10882
+ },
10883
+ {
10884
+ "name": "system_arguments",
10885
+ "type": "Hash",
10886
+ "default": "N/A",
10887
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
10888
+ }
10889
+ ],
10890
+ "slots": [
10891
+ {
10892
+ "name": "loading_failure_message",
10893
+ "description": "The failure message that appears if loading nodes from the server fails.",
10894
+ "parameters": [
10895
+ {
10896
+ "name": "system_arguments",
10897
+ "type": "Hash",
10898
+ "default": "N/A",
10899
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::LoadingFailureMessage{{/link_to_component}}."
10900
+ }
10901
+ ]
10902
+ }
10903
+ ],
10904
+ "methods": [],
10905
+ "previews": [],
10906
+ "subcomponents": []
10907
+ },
10908
+ {
10909
+ "fully_qualified_name": "Primer::Alpha::TreeView::SkeletonLoader",
10910
+ "description": "Renders a loading skeleton for a `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10911
+ "accessibility_docs": null,
10912
+ "is_form_component": false,
10913
+ "is_published": true,
10914
+ "requires_js": false,
10915
+ "component": "TreeView::SkeletonLoader",
10916
+ "status": "alpha",
10917
+ "a11y_reviewed": false,
10918
+ "short_name": "TreeViewSkeletonLoader",
10919
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/skeleton_loader.rb",
10920
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/skeleton_loader/default/",
10921
+ "parameters": [
10922
+ {
10923
+ "name": "src",
10924
+ "type": "String",
10925
+ "default": "N/A",
10926
+ "description": "The URL to fetch nodes from."
10927
+ },
10928
+ {
10929
+ "name": "count",
10930
+ "type": "Integer",
10931
+ "default": "`3`",
10932
+ "description": "The number of skeleton nodes to render."
10933
+ },
10934
+ {
10935
+ "name": "system_arguments",
10936
+ "type": "Hash",
10937
+ "default": "N/A",
10938
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
10939
+ }
10940
+ ],
10941
+ "slots": [
10942
+ {
10943
+ "name": "loading_failure_message",
10944
+ "description": "The failure message that appears if loading nodes from the server fails.",
10945
+ "parameters": [
10946
+ {
10947
+ "name": "system_arguments",
10948
+ "type": "Hash",
10949
+ "default": "N/A",
10950
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::LoadingFailureMessage{{/link_to_component}}."
10951
+ }
10952
+ ]
10953
+ }
10954
+ ],
10955
+ "methods": [],
10956
+ "previews": [],
10957
+ "subcomponents": []
9619
10958
  },
9620
10959
  {
9621
- "preview_path": "primer/alpha/tooltip/tooltip_s",
9622
- "name": "tooltip_s",
9623
- "snapshot": "interactive",
9624
- "skip_rules": {
9625
- "wont_fix": [
9626
- "region"
9627
- ],
9628
- "will_fix": [
9629
- "color-contrast"
9630
- ]
9631
- }
10960
+ "fully_qualified_name": "Primer::Alpha::TreeView::Node",
10961
+ "description": "A generic `TreeView` node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
10962
+ "accessibility_docs": null,
10963
+ "is_form_component": false,
10964
+ "is_published": true,
10965
+ "requires_js": false,
10966
+ "component": "TreeView::Node",
10967
+ "status": "alpha",
10968
+ "a11y_reviewed": false,
10969
+ "short_name": "TreeViewNode",
10970
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/node.rb",
10971
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/node/default/",
10972
+ "parameters": [
10973
+ {
10974
+ "name": "path",
10975
+ "type": "Array<String>",
10976
+ "default": "N/A",
10977
+ "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
10978
+ },
10979
+ {
10980
+ "name": "node_variant",
10981
+ "type": "Symbol",
10982
+ "default": "N/A",
10983
+ "description": "The node variant to use for the node's content, i.e. the `:button` or `:div`. One of `:anchor`, `:button`, or `:div`."
10984
+ },
10985
+ {
10986
+ "name": "href",
10987
+ "type": "String",
10988
+ "default": "`nil`",
10989
+ "description": "The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`."
10990
+ },
10991
+ {
10992
+ "name": "current",
10993
+ "type": "Boolean",
10994
+ "default": "`false`",
10995
+ "description": "Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component."
10996
+ },
10997
+ {
10998
+ "name": "select_variant",
10999
+ "type": "Symbol",
11000
+ "default": "`:none`",
11001
+ "description": "Controls the type of checkbox that appears. One of `:multiple` or `:none`."
11002
+ },
11003
+ {
11004
+ "name": "checked",
11005
+ "type": "Boolean | String",
11006
+ "default": "`false`",
11007
+ "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
11008
+ },
11009
+ {
11010
+ "name": "disabled",
11011
+ "type": "Boolean",
11012
+ "default": "`false`",
11013
+ "description": "Whether or not the node can be activated. Passing `false` here will cause the node to appear visually disabled but it is still keyboard-focusable."
11014
+ },
11015
+ {
11016
+ "name": "value",
11017
+ "type": "String",
11018
+ "default": "`nil`",
11019
+ "description": "If this node is checked, this value will be sent to the server on form submission."
11020
+ },
11021
+ {
11022
+ "name": "content_arguments",
11023
+ "type": "Hash",
11024
+ "default": "N/A",
11025
+ "description": "Arguments attached to the node's content, i.e the `<button>` or `<a>` element. {{link_to_system_arguments_docs}}"
11026
+ }
11027
+ ],
11028
+ "slots": [
11029
+ {
11030
+ "name": "leading_action",
11031
+ "description": "Generic leading action slot",
11032
+ "parameters": []
11033
+ },
11034
+ {
11035
+ "name": "leading_visual",
11036
+ "description": "Generic leading visual slot",
11037
+ "parameters": []
11038
+ },
11039
+ {
11040
+ "name": "trailing_visual",
11041
+ "description": "Generic trailing visual slot",
11042
+ "parameters": []
11043
+ },
11044
+ {
11045
+ "name": "toggle",
11046
+ "description": "Generic toggle button slot",
11047
+ "parameters": []
11048
+ },
11049
+ {
11050
+ "name": "text_content",
11051
+ "description": "Generic text content slot (for node's label)",
11052
+ "parameters": []
11053
+ }
11054
+ ],
11055
+ "methods": [
11056
+ {
11057
+ "name": "current",
11058
+ "description": "Wether or not this node is the current node.",
11059
+ "parameters": [],
11060
+ "return_types": [
11061
+ "Boolean"
11062
+ ]
11063
+ },
11064
+ {
11065
+ "name": "current?",
11066
+ "description": "Wether or not this node is the current node.",
11067
+ "parameters": [],
11068
+ "return_types": [
11069
+ "Boolean"
11070
+ ]
11071
+ },
11072
+ {
11073
+ "name": "checked",
11074
+ "description": "This node's checked state.",
11075
+ "parameters": [],
11076
+ "return_types": [
11077
+ "String"
11078
+ ]
11079
+ },
11080
+ {
11081
+ "name": "select_variant",
11082
+ "description": "This node's select variant (i.e. check box variant).",
11083
+ "parameters": [],
11084
+ "return_types": [
11085
+ "Symbol"
11086
+ ]
11087
+ },
11088
+ {
11089
+ "name": "node_variant",
11090
+ "description": "This node's variant, eg. `:button`, `:div`, etc.",
11091
+ "parameters": [],
11092
+ "return_types": [
11093
+ "Symbol"
11094
+ ]
11095
+ },
11096
+ {
11097
+ "name": "disabled",
11098
+ "description": "Whether or not this node is disabled, i.e. cannot be activated.",
11099
+ "parameters": [],
11100
+ "return_types": [
11101
+ "Boolean"
11102
+ ]
11103
+ },
11104
+ {
11105
+ "name": "disabled?",
11106
+ "description": "Whether or not this node is disabled, i.e. cannot be activated.",
11107
+ "parameters": [],
11108
+ "return_types": [
11109
+ "Boolean"
11110
+ ]
11111
+ },
11112
+ {
11113
+ "name": "level",
11114
+ "description": "The numeric depth of this node.",
11115
+ "parameters": [],
11116
+ "return_types": [
11117
+ "Integer"
11118
+ ]
11119
+ },
11120
+ {
11121
+ "name": "merge_system_arguments!",
11122
+ "description": "Merges the given arguments into the current hash of system arguments provided when the component was\ninitially constructed. This method can be used to add additional arguments just before rendering.",
11123
+ "parameters": [
11124
+ {
11125
+ "name": "other_arguments",
11126
+ "type": "Hash",
11127
+ "default": "N/A",
11128
+ "description": "The other hash of system arguments to merge into the current one."
11129
+ }
11130
+ ],
11131
+ "return_types": []
11132
+ }
11133
+ ],
11134
+ "previews": [],
11135
+ "subcomponents": []
9632
11136
  },
9633
11137
  {
9634
- "preview_path": "primer/alpha/tooltip/tooltip_e",
9635
- "name": "tooltip_e",
9636
- "snapshot": "interactive",
9637
- "skip_rules": {
9638
- "wont_fix": [
9639
- "region"
9640
- ],
9641
- "will_fix": [
9642
- "color-contrast"
9643
- ]
9644
- }
11138
+ "fully_qualified_name": "Primer::Alpha::TreeView::LoadingFailureMessage",
11139
+ "description": "A `TreeView` loading failure message.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11140
+ "accessibility_docs": null,
11141
+ "is_form_component": false,
11142
+ "is_published": true,
11143
+ "requires_js": false,
11144
+ "component": "TreeView::LoadingFailureMessage",
11145
+ "status": "alpha",
11146
+ "a11y_reviewed": false,
11147
+ "short_name": "TreeViewLoadingFailureMessage",
11148
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/loading_failure_message.rb",
11149
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/loading_failure_message/default/",
11150
+ "parameters": [
11151
+ {
11152
+ "name": "text",
11153
+ "type": "String",
11154
+ "default": "`Something went wrong`",
11155
+ "description": "The failure message to display."
11156
+ },
11157
+ {
11158
+ "name": "retry_button_label",
11159
+ "type": "String",
11160
+ "default": "`Retry`",
11161
+ "description": "The text shown on the retry button."
11162
+ },
11163
+ {
11164
+ "name": "system_arguments",
11165
+ "type": "Hash",
11166
+ "default": "N/A",
11167
+ "description": "{{link_to_system_arguments_docs}}"
11168
+ }
11169
+ ],
11170
+ "slots": [],
11171
+ "methods": [],
11172
+ "previews": [],
11173
+ "subcomponents": []
9645
11174
  },
9646
11175
  {
9647
- "preview_path": "primer/alpha/tooltip/tooltip_w",
9648
- "name": "tooltip_w",
9649
- "snapshot": "interactive",
9650
- "skip_rules": {
9651
- "wont_fix": [
9652
- "region"
9653
- ],
9654
- "will_fix": [
9655
- "color-contrast"
9656
- ]
9657
- }
11176
+ "fully_qualified_name": "Primer::Alpha::TreeView::LeadingAction",
11177
+ "description": "The leading action for `TreeView` nodes.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11178
+ "accessibility_docs": null,
11179
+ "is_form_component": false,
11180
+ "is_published": true,
11181
+ "requires_js": false,
11182
+ "component": "TreeView::LeadingAction",
11183
+ "status": "alpha",
11184
+ "a11y_reviewed": false,
11185
+ "short_name": "TreeViewLeadingAction",
11186
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/leading_action.rb",
11187
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/leading_action/default/",
11188
+ "parameters": [
11189
+ {
11190
+ "name": "action",
11191
+ "type": "ViewComponent::Base",
11192
+ "default": "N/A",
11193
+ "description": "A component or other renderable to use as the action button etc."
11194
+ }
11195
+ ],
11196
+ "slots": [],
11197
+ "methods": [],
11198
+ "previews": [],
11199
+ "subcomponents": []
9658
11200
  },
9659
11201
  {
9660
- "preview_path": "primer/alpha/tooltip/tooltip_se",
9661
- "name": "tooltip_se",
9662
- "snapshot": "interactive",
9663
- "skip_rules": {
9664
- "wont_fix": [
9665
- "region"
9666
- ],
9667
- "will_fix": [
9668
- "color-contrast"
9669
- ]
9670
- }
11202
+ "fully_qualified_name": "Primer::Alpha::TreeView::IconPair",
11203
+ "description": "A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is\nexpanded and collapsed.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11204
+ "accessibility_docs": null,
11205
+ "is_form_component": false,
11206
+ "is_published": true,
11207
+ "requires_js": false,
11208
+ "component": "TreeView::IconPair",
11209
+ "status": "alpha",
11210
+ "a11y_reviewed": false,
11211
+ "short_name": "TreeViewIconPair",
11212
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/icon_pair.rb",
11213
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/icon_pair/default/",
11214
+ "parameters": [
11215
+ {
11216
+ "name": "expanded",
11217
+ "type": "Boolean",
11218
+ "default": "`false`",
11219
+ "description": "If true, the expanded icon is shown and the collapsed icon is hidden, etc."
11220
+ },
11221
+ {
11222
+ "name": "system_arguments",
11223
+ "type": "Hash",
11224
+ "default": "N/A",
11225
+ "description": "{{link_to_system_arguments_docs}}"
11226
+ }
11227
+ ],
11228
+ "slots": [
11229
+ {
11230
+ "name": "expanded_icon",
11231
+ "description": "The expanded icon.",
11232
+ "parameters": [
11233
+ {
11234
+ "name": "system_arguments",
11235
+ "type": "Hash",
11236
+ "default": "N/A",
11237
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11238
+ }
11239
+ ]
11240
+ },
11241
+ {
11242
+ "name": "collapsed_icon",
11243
+ "description": "The collapsed icon.",
11244
+ "parameters": [
11245
+ {
11246
+ "name": "system_arguments",
11247
+ "type": "Hash",
11248
+ "default": "N/A",
11249
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11250
+ }
11251
+ ]
11252
+ }
11253
+ ],
11254
+ "methods": [
11255
+ {
11256
+ "name": "expanded",
11257
+ "description": "Whether or not this icon is expanded.",
11258
+ "parameters": [],
11259
+ "return_types": [
11260
+ "Boolean"
11261
+ ]
11262
+ },
11263
+ {
11264
+ "name": "expanded?",
11265
+ "description": "Whether or not this icon is expanded.",
11266
+ "parameters": [],
11267
+ "return_types": [
11268
+ "Boolean"
11269
+ ]
11270
+ }
11271
+ ],
11272
+ "previews": [],
11273
+ "subcomponents": []
9671
11274
  },
9672
11275
  {
9673
- "preview_path": "primer/alpha/tooltip/tooltip_sw",
9674
- "name": "tooltip_sw",
9675
- "snapshot": "interactive",
9676
- "skip_rules": {
9677
- "wont_fix": [
9678
- "region"
9679
- ],
9680
- "will_fix": [
9681
- "color-contrast"
9682
- ]
9683
- }
11276
+ "fully_qualified_name": "Primer::Alpha::TreeView::Icon",
11277
+ "description": "An icon for a `TreeView` node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11278
+ "accessibility_docs": null,
11279
+ "is_form_component": false,
11280
+ "is_published": true,
11281
+ "requires_js": false,
11282
+ "component": "TreeView::Icon",
11283
+ "status": "alpha",
11284
+ "a11y_reviewed": false,
11285
+ "short_name": "TreeViewIcon",
11286
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/icon.rb",
11287
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/icon/default/",
11288
+ "parameters": [
11289
+ {
11290
+ "name": "system_arguments",
11291
+ "type": "Hash",
11292
+ "default": "N/A",
11293
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
11294
+ }
11295
+ ],
11296
+ "slots": [],
11297
+ "methods": [],
11298
+ "previews": [],
11299
+ "subcomponents": []
9684
11300
  },
9685
11301
  {
9686
- "preview_path": "primer/alpha/tooltip/tooltip_ne",
9687
- "name": "tooltip_ne",
9688
- "snapshot": "interactive",
9689
- "skip_rules": {
9690
- "wont_fix": [
9691
- "region"
9692
- ],
9693
- "will_fix": [
9694
- "color-contrast"
9695
- ]
9696
- }
11302
+ "fully_qualified_name": "Primer::Alpha::TreeView::LeafNode",
11303
+ "description": "A `TreeView` leaf node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11304
+ "accessibility_docs": null,
11305
+ "is_form_component": false,
11306
+ "is_published": true,
11307
+ "requires_js": false,
11308
+ "component": "TreeView::LeafNode",
11309
+ "status": "alpha",
11310
+ "a11y_reviewed": false,
11311
+ "short_name": "TreeViewLeafNode",
11312
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/leaf_node.rb",
11313
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/leaf_node/default/",
11314
+ "parameters": [
11315
+ {
11316
+ "name": "label",
11317
+ "type": "String",
11318
+ "default": "N/A",
11319
+ "description": "The node's label, i.e. it's textual content."
11320
+ },
11321
+ {
11322
+ "name": "system_arguments",
11323
+ "type": "Hash",
11324
+ "default": "N/A",
11325
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Node{{/link_to_component}}."
11326
+ }
11327
+ ],
11328
+ "slots": [
11329
+ {
11330
+ "name": "leading_visual",
11331
+ "description": null,
11332
+ "parameters": []
11333
+ },
11334
+ {
11335
+ "name": "leading_action",
11336
+ "description": null,
11337
+ "parameters": []
11338
+ },
11339
+ {
11340
+ "name": "trailing_visual",
11341
+ "description": null,
11342
+ "parameters": []
11343
+ }
11344
+ ],
11345
+ "methods": [
11346
+ {
11347
+ "name": "with_leading_visual_icon",
11348
+ "description": "Adds a leading visual icon rendered to the left of the node's label.",
11349
+ "parameters": [
11350
+ {
11351
+ "name": "label",
11352
+ "type": "String",
11353
+ "default": "`nil`",
11354
+ "description": "A label describing the visual, displayed only to screen readers."
11355
+ },
11356
+ {
11357
+ "name": "system_arguments",
11358
+ "type": "Hash",
11359
+ "default": "N/A",
11360
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11361
+ }
11362
+ ],
11363
+ "return_types": []
11364
+ },
11365
+ {
11366
+ "name": "with_leading_action_button",
11367
+ "description": "Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.",
11368
+ "parameters": [
11369
+ {
11370
+ "name": "system_arguments",
11371
+ "type": "Hash",
11372
+ "default": "N/A",
11373
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
11374
+ }
11375
+ ],
11376
+ "return_types": []
11377
+ },
11378
+ {
11379
+ "name": "with_trailing_visual_icon",
11380
+ "description": "Adds a trailing visual icon rendered to the right of the node's label.",
11381
+ "parameters": [
11382
+ {
11383
+ "name": "label",
11384
+ "type": "String",
11385
+ "default": "`nil`",
11386
+ "description": "A label describing the visual, displayed only to screen readers."
11387
+ },
11388
+ {
11389
+ "name": "system_arguments",
11390
+ "type": "Hash",
11391
+ "default": "N/A",
11392
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11393
+ }
11394
+ ],
11395
+ "return_types": []
11396
+ }
11397
+ ],
11398
+ "previews": [],
11399
+ "subcomponents": []
9697
11400
  },
9698
11401
  {
9699
- "preview_path": "primer/alpha/tooltip/tooltip_nw",
9700
- "name": "tooltip_nw",
9701
- "snapshot": "interactive",
9702
- "skip_rules": {
9703
- "wont_fix": [
9704
- "region"
9705
- ],
9706
- "will_fix": [
9707
- "color-contrast"
9708
- ]
9709
- }
11402
+ "fully_qualified_name": "Primer::Alpha::TreeView::SubTreeNode",
11403
+ "description": "A `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
11404
+ "accessibility_docs": null,
11405
+ "is_form_component": false,
11406
+ "is_published": true,
11407
+ "requires_js": false,
11408
+ "component": "TreeView::SubTreeNode",
11409
+ "status": "alpha",
11410
+ "a11y_reviewed": false,
11411
+ "short_name": "TreeViewSubTreeNode",
11412
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree_node.rb",
11413
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree_node/default/",
11414
+ "parameters": [
11415
+ {
11416
+ "name": "label",
11417
+ "type": "String",
11418
+ "default": "N/A",
11419
+ "description": "The node's label, i.e. it's textual content."
11420
+ },
11421
+ {
11422
+ "name": "path",
11423
+ "type": "Array<String>",
11424
+ "default": "N/A",
11425
+ "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
11426
+ },
11427
+ {
11428
+ "name": "node_variant",
11429
+ "type": "Symbol",
11430
+ "default": "N/A",
11431
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
11432
+ },
11433
+ {
11434
+ "name": "sub_tree_component_klass",
11435
+ "type": "Class",
11436
+ "default": "`SubTree`",
11437
+ "description": "The class to use for the sub-tree instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTree{{/link_to_component}}"
11438
+ },
11439
+ {
11440
+ "name": "expanded",
11441
+ "type": "Boolean",
11442
+ "default": "`false`",
11443
+ "description": "Whether or not this sub-tree should be rendered expanded."
11444
+ },
11445
+ {
11446
+ "name": "select_strategy",
11447
+ "type": "Symbol",
11448
+ "default": "`:mixed_descendants`",
11449
+ "description": "What should happen when this sub-tree node is checked. One of `:descendants`, `:mixed_descendants`, or `:self`."
11450
+ },
11451
+ {
11452
+ "name": "system_arguments",
11453
+ "type": "Hash",
11454
+ "default": "N/A",
11455
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Node{{/link_to_component}}."
11456
+ }
11457
+ ],
11458
+ "slots": [
11459
+ {
11460
+ "name": "leading_visual",
11461
+ "description": null,
11462
+ "parameters": []
11463
+ },
11464
+ {
11465
+ "name": "leading_action",
11466
+ "description": null,
11467
+ "parameters": []
11468
+ },
11469
+ {
11470
+ "name": "trailing_visual",
11471
+ "description": null,
11472
+ "parameters": []
11473
+ }
11474
+ ],
11475
+ "methods": [
11476
+ {
11477
+ "name": "with_leading_visual_icon",
11478
+ "description": "Adds a leading visual icon rendered to the left of the node's label.",
11479
+ "parameters": [
11480
+ {
11481
+ "name": "label",
11482
+ "type": "String",
11483
+ "default": "`nil`",
11484
+ "description": "A label describing the visual, displayed only to screen readers."
11485
+ },
11486
+ {
11487
+ "name": "system_arguments",
11488
+ "type": "Hash",
11489
+ "default": "N/A",
11490
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11491
+ }
11492
+ ],
11493
+ "return_types": []
11494
+ },
11495
+ {
11496
+ "name": "with_leading_visual_icons",
11497
+ "description": "Adds a pair of leading visual icon rendered to the left of the node's label.",
11498
+ "parameters": [
11499
+ {
11500
+ "name": "label",
11501
+ "type": "String",
11502
+ "default": "`nil`",
11503
+ "description": "A label describing the visual, displayed only to screen readers."
11504
+ },
11505
+ {
11506
+ "name": "system_arguments",
11507
+ "type": "Hash",
11508
+ "default": "N/A",
11509
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::IconPair{{/link_to_component}}."
11510
+ }
11511
+ ],
11512
+ "return_types": []
11513
+ },
11514
+ {
11515
+ "name": "with_leading_action_button",
11516
+ "description": "Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.",
11517
+ "parameters": [
11518
+ {
11519
+ "name": "system_arguments",
11520
+ "type": "Hash",
11521
+ "default": "N/A",
11522
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
11523
+ }
11524
+ ],
11525
+ "return_types": []
11526
+ },
11527
+ {
11528
+ "name": "with_trailing_visual_icon",
11529
+ "description": "Adds a trailing visual icon rendered to the right of the node's label.",
11530
+ "parameters": [
11531
+ {
11532
+ "name": "label",
11533
+ "type": "String",
11534
+ "default": "`nil`",
11535
+ "description": "A label describing the visual, displayed only to screen readers."
11536
+ },
11537
+ {
11538
+ "name": "system_arguments",
11539
+ "type": "Hash",
11540
+ "default": "N/A",
11541
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
11542
+ }
11543
+ ],
11544
+ "return_types": []
11545
+ }
11546
+ ],
11547
+ "previews": [],
11548
+ "subcomponents": []
9710
11549
  }
9711
- ],
9712
- "subcomponents": []
11550
+ ]
9713
11551
  },
9714
11552
  {
9715
11553
  "fully_qualified_name": "Primer::Alpha::UnderlineNav",