{
    "componentChunkName": "component---src-layouts-rails-component-layout-tsx",
    "path": "/components/action-list/rails",
    "result": {"data":{"primerRailsVersion":{"version":"0.1.5"},"sitePage":{"path":"/components/action-list","context":{"frontmatter":{"title":"Action list","description":"Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent. single-column format, with room for icons, descriptions, side information, and other rich visuals.","reactId":"action_list","railsId":"Primer::Alpha::ActionList","figmaUrl":"https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=1927%3A0"}}},"railsComponent":{"name":"ActionList","railsId":"Primer::Alpha::ActionList","description":"An ActionList is a styled list of links. It acts as the base component for many\nother menu-type components, including `ActionMenu` and `SelectPanel`, as well as\nthe navigational component `NavList`.\n\nEach item in an action list can be augmented by specifying corresponding leading\nand/or trailing visuals.","status":"alpha","a11y_reviewed":false,"short_name":"ActionList","props":[{"name":"id","type":"String","description":"HTML ID value.","default":"`self.class.generate_id`"},{"name":"role","type":"Boolean","description":"ARIA role describing the function of the list. listbox and menu are a common values.","default":"`nil`"},{"name":"item_classes","type":"String","description":"Additional CSS classes to attach to items.","default":"`nil`"},{"name":"scheme","type":"Symbol","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.","default":"`:full`"},{"name":"show_dividers","type":"Boolean","description":"Display a divider above each item in the list when it does not follow a header or divider.","default":"`false`"},{"name":"select_variant","type":"Symbol","description":"How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`.","default":"`:none`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[{"description":"Heading text rendered above the list of items.","name":"heading","parameters":[{"default":"N/A","description":"The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}.","name":"system_arguments","type":"Hash"}]},{"description":"Items.","name":"items","parameters":[{"default":"N/A","description":"The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}.","name":"system_arguments","type":"Hash"}]}],"methods":[{"name":"with_divider","description":"Adds a divider to the list of items.","parameters":[{"default":"N/A","description":"The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}.","name":"system_arguments","type":"Hash"}]},{"name":"select_variant","description":"Returns the value of attribute select_variant.","parameters":[]},{"name":"role","description":"Returns the value of attribute role.","parameters":[]}],"previews":[{"name":"playground","preview_path":"/lookbook/preview/primer/alpha/action_list/playground","inspect_path":"/lookbook/inspect/primer/alpha/action_list/playground"},{"name":"default","preview_path":"/lookbook/preview/primer/alpha/action_list/default","inspect_path":"/lookbook/inspect/primer/alpha/action_list/default"},{"name":"leading_visuals","preview_path":"/lookbook/preview/primer/alpha/action_list/leading_visuals","inspect_path":"/lookbook/inspect/primer/alpha/action_list/leading_visuals"},{"name":"with_manual_dividers","preview_path":"/lookbook/preview/primer/alpha/action_list/with_manual_dividers","inspect_path":"/lookbook/inspect/primer/alpha/action_list/with_manual_dividers"},{"name":"divider","preview_path":"/lookbook/preview/primer/alpha/action_list/divider","inspect_path":"/lookbook/inspect/primer/alpha/action_list/divider"},{"name":"heading","preview_path":"/lookbook/preview/primer/alpha/action_list/heading","inspect_path":"/lookbook/inspect/primer/alpha/action_list/heading"},{"name":"item","preview_path":"/lookbook/preview/primer/alpha/action_list/item","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item"},{"name":"item_default","preview_path":"/lookbook/preview/primer/alpha/action_list/item_default","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_default"},{"name":"item_size_large","preview_path":"/lookbook/preview/primer/alpha/action_list/item_size_large","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_size_large"},{"name":"item_size_xlarge","preview_path":"/lookbook/preview/primer/alpha/action_list/item_size_xlarge","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_size_xlarge"},{"name":"item_leading_visual","preview_path":"/lookbook/preview/primer/alpha/action_list/item_leading_visual","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_leading_visual"},{"name":"item_trailing_visual","preview_path":"/lookbook/preview/primer/alpha/action_list/item_trailing_visual","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_trailing_visual"},{"name":"item_leading_trailing_visual","preview_path":"/lookbook/preview/primer/alpha/action_list/item_leading_trailing_visual","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_leading_trailing_visual"},{"name":"item_with_description","preview_path":"/lookbook/preview/primer/alpha/action_list/item_with_description","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_with_description"},{"name":"item_with_description_inline","preview_path":"/lookbook/preview/primer/alpha/action_list/item_with_description_inline","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_with_description_inline"},{"name":"item_trailing_action","preview_path":"/lookbook/preview/primer/alpha/action_list/item_trailing_action","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_trailing_action"},{"name":"item_danger","preview_path":"/lookbook/preview/primer/alpha/action_list/item_danger","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_danger"},{"name":"item_disabled","preview_path":"/lookbook/preview/primer/alpha/action_list/item_disabled","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_disabled"},{"name":"item_wrap_label","preview_path":"/lookbook/preview/primer/alpha/action_list/item_wrap_label","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_wrap_label"},{"name":"item_truncate_label","preview_path":"/lookbook/preview/primer/alpha/action_list/item_truncate_label","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_truncate_label"},{"name":"item_active","preview_path":"/lookbook/preview/primer/alpha/action_list/item_active","inspect_path":"/lookbook/inspect/primer/alpha/action_list/item_active"}],"subcomponents":[{"name":"ActionList::Item","railsId":"Primer::Alpha::ActionList::Item","description":"An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.","status":"alpha","a11y_reviewed":false,"short_name":"ActionListItem","props":[{"name":"list","type":"Primer::Alpha::ActionList","description":"The list that contains this item. Used internally.","default":"N/A"},{"name":"parent","type":"Primer::Alpha::ActionList::Item","description":"This item's parent item. `nil` if this item is at the root. Used internally.","default":"`nil`"},{"name":"label","type":"String","description":"Item label. If no label is provided, content is used.","default":"`nil`"},{"name":"label_classes","type":"String","description":"CSS classes that will be added to the label.","default":"`nil`"},{"name":"label_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}} used to construct the label.","default":"`{}`"},{"name":"content_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}} used to construct the item's anchor or button tag.","default":"`{}`"},{"name":"truncate_label","type":"Boolean","description":"Truncate label with ellipsis.","default":"`false`"},{"name":"href","type":"String","description":"Link URL.","default":"`nil`"},{"name":"role","type":"String","description":"ARIA role describing the function of the item.","default":"`nil`"},{"name":"size","type":"Symbol","description":"Controls block sizing of the item.","default":"`:medium`"},{"name":"scheme","type":"Symbol","description":"Controls color/style based on behavior.","default":"`:default`"},{"name":"disabled","type":"Boolean","description":"Disabled items are not clickable and visually dim.","default":"`false`"},{"name":"description_scheme","type":"Symbol","description":"Display description inline with label, or block on the next line.","default":"`:block`"},{"name":"active","type":"Boolean","description":"If the parent list's `select_variant` is set to `:single` or `:multiple`, causes this item to render checked.","default":"`false`"},{"name":"on_click","type":"String","description":"JavaScript to execute when the item is clicked.","default":"`nil`"},{"name":"id","type":"String","description":"Used internally.","default":"`self.class.generate_id`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[{"description":"Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.","name":"description","parameters":[]},{"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 avatar, call the `with_leading_visual_avatar` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/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.","name":"leading_visual","parameters":[]},{"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```","name":"trailing_visual","parameters":[]},{"description":"A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.","name":"trailing_action","parameters":[{"default":"N/A","description":"The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}.","name":"system_arguments","type":"Hash"}]},{"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.","name":"tooltip","parameters":[{"default":"`:description`","description":"One of `:description` or `:label`.","name":"type","type":"Symbol"},{"default":"N/A","description":"The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}.","name":"system_arguments","type":"Hash"}]}],"methods":[{"name":"id","description":"Returns the value of attribute id.","parameters":[]},{"name":"list","description":"Returns the value of attribute list.","parameters":[]},{"name":"href","description":"Returns the value of attribute href.","parameters":[]},{"name":"active","description":"Returns the value of attribute active.","parameters":[]},{"name":"disabled","description":"Returns the value of attribute disabled.","parameters":[]},{"name":"parent","description":"Returns the value of attribute parent.","parameters":[]},{"name":"active?","description":"Returns the value of attribute active.\nWhether or not this item is active.","parameters":[]},{"name":"disabled?","description":"Returns the value of attribute disabled.\nWhether or not this item is disabled.","parameters":[]}],"previews":[]},{"name":"ActionList::Heading","railsId":"Primer::Alpha::ActionList::Heading","description":"Heading used to describe each sub list within an action list.","status":"alpha","a11y_reviewed":false,"short_name":"ActionListHeading","props":[{"name":"id","type":"String","description":"The group's identifier (ID attribute in HTML).","default":"`self.class.generate_id`"},{"name":"title","type":"String","description":"Sub list title.","default":"N/A"},{"name":"heading_level","type":"Integer","description":"Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc.","default":"`3`"},{"name":"subtitle","type":"String","description":"Optional sub list description.","default":"`nil`"},{"name":"scheme","type":"Symbol","description":"Display a background color if scheme is `filled`.","default":"`:subtle`"},{"name":"tag","type":"Integer","description":"Semantic tag for the heading.","default":"N/A"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[{"name":"id","description":"Returns the value of attribute id.","parameters":[]}],"previews":[]},{"name":"ActionList::Divider","railsId":"Primer::Alpha::ActionList::Divider","description":"Group heading rendered above the group contents.","status":"alpha","a11y_reviewed":false,"short_name":"ActionListDivider","props":[{"name":"scheme","type":"Symbol","description":"Display a background color if scheme is `filled`.","default":"`:subtle`"},{"name":"system_arguments","type":"Hash","description":"{{link_to_system_arguments_docs}}","default":"N/A"}],"slots":[],"methods":[],"previews":[]}]}},"pageContext":{"componentId":"Primer::Alpha::ActionList","parentPath":"/components/action-list"}},
    "staticQueryHashes": ["2468112454","2580293464","2745756513","2790671566","3907230164"]}