[ { "fully_qualified_name": "Primer::Alpha::ActionBar", "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionBar", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionBar", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/default/", "parameters": [ { "name": "size", "type": "Symbol", "default": "`:medium`", "description": "One of `:large`, `:medium`, or `:small`." }, { "name": "overflow_menu", "type": "Boolean", "default": "`true`", "description": "Whether to render the overflow menu." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "items", "description": null, "parameters": [ ] } ], "methods": [ ], "previews": [ { "preview_path": "primer/alpha/action_bar/default", "name": "default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_bar/inline", "name": "inline", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_bar/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_bar/small", "name": "small", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_bar/medium", "name": "medium", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_bar/large", "name": "large", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ { "fully_qualified_name": "Primer::Alpha::ActionBar::Item", "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionBar::Item", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionBarItem", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/", "parameters": [ { "name": "item_content", "type": "String", "default": "N/A", "description": "The content to render inside the item." }, { "name": "item_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionBar::Divider", "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionBar::Divider", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionBarDivider", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/divider.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/divider/default/", "parameters": [ ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] } ] }, { "fully_qualified_name": "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.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": true, "component": "ActionList", "status": "alpha", "a11y_reviewed": true, "short_name": "ActionList", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/", "parameters": [ { "name": "id", "type": "String", "default": "`self.class.generate_id`", "description": "HTML ID value." }, { "name": "role", "type": "Boolean", "default": "`nil`", "description": "ARIA role describing the function of the list. listbox and menu are a common values." }, { "name": "item_classes", "type": "String", "default": "`nil`", "description": "Additional CSS classes to attach to items." }, { "name": "scheme", "type": "Symbol", "default": "`:full`", "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." }, { "name": "show_dividers", "type": "Boolean", "default": "`false`", "description": "Display a divider above each item in the list when it does not follow a header or divider." }, { "name": "select_variant", "type": "Symbol", "default": "`:none`", "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`." }, { "name": "form_arguments", "type": "Hash", "default": "`{}`", "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." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "heading", "description": "Heading text rendered above the list of items.", "parameters": [ { "name": "component_klass", "type": "Class", "default": "N/A", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by `component_klass`." } ] }, { "name": "items", "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.", "parameters": [ ] } ], "methods": [ { "name": "with_item", "description": "Adds an item to the list.", "parameters": [ { "name": "component_klass", "type": "Class", "default": "N/A", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}" }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument." } ] }, { "name": "with_divider", "description": "Adds a divider to the list. Dividers visually separate items.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}." } ] }, { "name": "with_avatar_item", "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.", "parameters": [ { "name": "src", "type": "String", "default": "N/A", "description": "The source url of the avatar image." }, { "name": "username", "type": "String", "default": "N/A", "description": "The username associated with the avatar." }, { "name": "full_name", "type": "String", "default": "`nil`", "description": "Optional. The user's full name." }, { "name": "full_name_scheme", "type": "Symbol", "default": "`:block`", "description": "Optional. How to display the user's full name. One of `:block` or `:inline`." }, { "name": "component_klass", "type": "Class", "default": "`ActionList::Item`", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}" }, { "name": "avatar_arguments", "type": "Hash", "default": "`{}`", "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}" }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument." } ] }, { "name": "id", "description": "Returns the value of attribute id.", "parameters": [ ] }, { "name": "select_variant", "description": "Returns the value of attribute select_variant.", "parameters": [ ] }, { "name": "role", "description": "Returns the value of attribute role.", "parameters": [ ] }, { "name": "build_item", "description": "Builds a new item but does not add it to the list. Use this method\ninstead of the `#with_item` slot if you need to render an item outside\nthe context of a list, eg. if rendering additional items to append to\nan existing list, perhaps via a separate HTTP request.", "parameters": [ { "name": "component_klass", "type": "Class", "default": "`ActionList::Item`", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}" }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument." } ] }, { "name": "build_avatar_item", "description": "Builds a new avatar item but does not add it to the list. Avatar items\nare a convenient way to accessibly add an item with a leading avatar\nimage. Use this method instead of the `#with_avatar_item` slot if you\nneed to render an avatar item outside the context of a list, eg. if\nrendering additional items to append to an existing list, perhaps via\na separate HTTP request.", "parameters": [ { "name": "src", "type": "String", "default": "N/A", "description": "The source url of the avatar image." }, { "name": "username", "type": "String", "default": "N/A", "description": "The username associated with the avatar." }, { "name": "full_name", "type": "String", "default": "`nil`", "description": "Optional. The user's full name." }, { "name": "full_name_scheme", "type": "Symbol", "default": "`:block`", "description": "Optional. How to display the user's full name. One of `:block` or `:inline`." }, { "name": "component_klass", "type": "Class", "default": "`ActionList::Item`", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}" }, { "name": "avatar_arguments", "type": "Hash", "default": "`{}`", "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}" }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument." } ] }, { "name": "post_list_content_block", "description": "Returns the value of attribute post_list_content_block.", "parameters": [ ] } ], "previews": [ { "preview_path": "primer/alpha/action_list/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/default", "name": "default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/leading_visuals", "name": "leading_visuals", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/with_manual_dividers", "name": "with_manual_dividers", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/divider", "name": "divider", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/heading", "name": "heading", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item", "name": "item", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/avatar_item", "name": "avatar_item", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_default", "name": "item_default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_size_large", "name": "item_size_large", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_size_xlarge", "name": "item_size_xlarge", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_leading_visual", "name": "item_leading_visual", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_trailing_visual", "name": "item_trailing_visual", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_leading_trailing_visual", "name": "item_leading_trailing_visual", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_with_description", "name": "item_with_description", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_with_description_inline", "name": "item_with_description_inline", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_trailing_action", "name": "item_trailing_action", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_danger", "name": "item_danger", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_disabled", "name": "item_disabled", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_wrap_label", "name": "item_wrap_label", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_truncate_label", "name": "item_truncate_label", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/item_active", "name": "item_active", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/long_label_with_tooltip", "name": "long_label_with_tooltip", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/long_label_wrap", "name": "long_label_wrap", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip", "name": "long_label_truncate_no_tooltip", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label", "name": "long_label_show_tooltip_with_truncate_label", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ { "fully_qualified_name": "Primer::Alpha::ActionList::Item", "description": "An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionList::Item", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionListItem", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/", "parameters": [ { "name": "list", "type": "Primer::Alpha::ActionList", "default": "N/A", "description": "The list that contains this item. Used internally." }, { "name": "parent", "type": "Primer::Alpha::ActionList::Item", "default": "`nil`", "description": "This item's parent item. `nil` if this item is at the root. Used internally." }, { "name": "label", "type": "String", "default": "`nil`", "description": "Item label. If no label is provided, content is used." }, { "name": "item_id", "type": "String", "default": "`nil`", "description": "An ID that will be attached to the item's `
  • ` element as `data-item-id` for distinguishing between items, perhaps in JavaScript." }, { "name": "label_classes", "type": "String", "default": "`nil`", "description": "CSS classes that will be added to the label." }, { "name": "label_arguments", "type": "Hash", "default": "`{}`", "description": "{{link_to_system_arguments_docs}} used to construct the label." }, { "name": "content_arguments", "type": "Hash", "default": "`{}`", "description": "{{link_to_system_arguments_docs}} used to construct the item's anchor or button tag." }, { "name": "form_arguments", "type": "Hash", "default": "`{}`", "description": "Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, One of `:delete`, `:get`, `:head`, `:patch`, `:post`, or `:put`. The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent." }, { "name": "truncate_label", "type": "Boolean | Symbol", "default": "`:none`", "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered." }, { "name": "href", "type": "String", "default": "`nil`", "description": "Link URL." }, { "name": "role", "type": "String", "default": "`nil`", "description": "ARIA role describing the function of the item." }, { "name": "size", "type": "Symbol", "default": "`:medium`", "description": "Controls block sizing of the item." }, { "name": "scheme", "type": "Symbol", "default": "`:default`", "description": "Controls color/style based on behavior." }, { "name": "disabled", "type": "Boolean", "default": "`false`", "description": "Disabled items are not clickable and visually dim." }, { "name": "description_scheme", "type": "Symbol", "default": "`:block`", "description": "Display description inline with label, or block on the next line. One of `:block` or `:inline`." }, { "name": "active", "type": "Boolean", "default": "`false`", "description": "If the parent list's `select_variant` is set to `:single` or `:multiple`, causes this item to render checked." }, { "name": "on_click", "type": "String", "default": "`nil`", "description": "JavaScript to execute when the item is clicked." }, { "name": "id", "type": "String", "default": "`self.class.generate_id`", "description": "Used internally." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "description", "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.", "parameters": [ ] }, { "name": "leading_visual", "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.", "parameters": [ ] }, { "name": "trailing_visual", "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```", "parameters": [ ] }, { "name": "trailing_action", "description": "A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}." } ] }, { "name": "tooltip", "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.", "parameters": [ { "name": "type", "type": "Symbol", "default": "`:description`", "description": "One of `:description` or `:label`." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}." } ] } ], "methods": [ { "name": "id", "description": "Returns the value of attribute id.", "parameters": [ ] }, { "name": "item_id", "description": "Returns the value of attribute item_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": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionList::Heading", "description": "Heading used to describe each sub list within an action list.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionList::Heading", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionListHeading", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/", "parameters": [ { "name": "title", "type": "String", "default": "N/A", "description": "Sub list title." }, { "name": "heading_level", "type": "Integer", "default": "`3`", "description": "Heading level. Level 2 results in an `

    ` tag, level 3 an `

    ` tag, etc." }, { "name": "subtitle", "type": "String", "default": "`nil`", "description": "Optional sub list description." }, { "name": "scheme", "type": "Symbol", "default": "`:subtle`", "description": "Display a background color if scheme is `filled`." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ ], "methods": [ { "name": "title_id", "description": "Returns the value of attribute title_id.", "parameters": [ ] }, { "name": "subtitle_id", "description": "Returns the value of attribute subtitle_id.", "parameters": [ ] } ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper", "description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionList::FormWrapper", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionListFormWrapper", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/", "parameters": [ ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionList::Divider", "description": "Separator with optional text rendered above groups or between individual items.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionList::Divider", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionListDivider", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/", "parameters": [ { "name": "scheme", "type": "Symbol", "default": "`:subtle`", "description": "Display a background color if scheme is `filled`." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] } ] }, { "fully_qualified_name": "Primer::Alpha::ActionMenu", "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `` element.|\n|`inputs` |`Array` |`[]` |An array of hashes representing HTML `` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `` elements.\n\n### JavaScript API\n\n`ActionList`s render an `` custom element that exposes behavior to the client. For all these methods,\n`itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML\nattribute.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `
  • ` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\nThe `` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"action-menu\").addEventListener(\"itemActivated\", (event: ItemActivatedEvent) => {\n event.item // Element: the
  • item that was activated\n event.checked // boolean: whether or not the result of the activation checked the item\n})\n```", "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything\nnested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).", "is_form_component": false, "is_published": true, "requires_js": true, "component": "ActionMenu", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionMenu", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/default/", "parameters": [ { "name": "menu_id", "type": "String", "default": "`self.class.generate_id`", "description": "Id of the menu." }, { "name": "anchor_align", "type": "Symbol", "default": "`:start`", "description": "One of `:center`, `:end`, or `:start`.." }, { "name": "anchor_side", "type": "Symbol", "default": "`:outside_bottom`", "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.." }, { "name": "size", "type": "Symbol", "default": "`:auto`", "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.." }, { "name": "src", "type": "String", "default": "`nil`", "description": "Used with an `include-fragment` element to load menu content from the given source URL." }, { "name": "preload", "type": "Boolean", "default": "`false`", "description": "When true, and src is present, loads the `include-fragment` on trigger hover." }, { "name": "dynamic_label", "type": "Boolean", "default": "`false`", "description": "Whether or not to display the text of the currently selected item in the show button." }, { "name": "dynamic_label_prefix", "type": "String", "default": "`nil`", "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button." }, { "name": "select_variant", "type": "Symbol", "default": "`:none`", "description": "One of `:multiple`, `:none`, or `:single`." }, { "name": "form_arguments", "type": "Hash", "default": "`{}`", "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." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}." } ], "slots": [ { "name": "show_button", "description": "Button to activate the menu.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot." } ] }, { "name": "items", "description": "Adds a new item to the list.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}." } ] } ], "methods": [ { "name": "list", "description": "Returns the value of attribute list.", "parameters": [ ] }, { "name": "preload", "description": "Returns the value of attribute preload.", "parameters": [ ] }, { "name": "preload?", "description": "Returns the value of attribute preload.", "parameters": [ ] }, { "name": "with_show_button", "description": "Button to activate the menu.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot." } ] }, { "name": "with_item", "description": "Adds a new item to the list.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}." } ] }, { "name": "with_divider", "description": "Adds a divider to the list.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `divider` slot." } ] }, { "name": "with_avatar_item", "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.", "parameters": [ { "name": "src", "type": "String", "default": "N/A", "description": "The source url of the avatar image." }, { "name": "username", "type": "String", "default": "N/A", "description": "The username associated with the avatar." }, { "name": "full_name", "type": "String", "default": "N/A", "description": "Optional. The user's full name." }, { "name": "full_name_scheme", "type": "Symbol", "default": "N/A", "description": "Optional. How to display the user's full name." }, { "name": "avatar_arguments", "type": "Hash", "default": "N/A", "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}." } ] } ], "previews": [ { "preview_path": "primer/alpha/action_menu/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/content_labels", "name": "content_labels", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/default", "name": "default", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_groups", "name": "with_groups", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_items_and_groups", "name": "with_items_and_groups", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/wide", "name": "wide", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_icon_button", "name": "with_icon_button", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/single_select", "name": "single_select", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/multiple_select", "name": "multiple_select", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/links", "name": "links", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/single_selected_item", "name": "single_selected_item", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/single_select_with_internal_label", "name": "single_select_with_internal_label", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/multiple_selected_items", "name": "multiple_selected_items", "snapshot": "interactive", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_deferred_content", "name": "with_deferred_content", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_deferred_preloaded_content", "name": "with_deferred_preloaded_content", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_actions", "name": "with_actions", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/single_select_form", "name": "single_select_form", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/single_select_form_items", "name": "single_select_form_items", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/multiple_select_form", "name": "multiple_select_form", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/with_disabled_items", "name": "with_disabled_items", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/opens_dialog", "name": "opens_dialog", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/in_scroll_container", "name": "in_scroll_container", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/align_end", "name": "align_end", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/block_description", "name": "block_description", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/submitting_forms", "name": "submitting_forms", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/inline_description", "name": "inline_description", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/leading_visual", "name": "leading_visual", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/leading_visual_single_select", "name": "leading_visual_single_select", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/action_menu/two_menus", "name": "two_menus", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ { "fully_qualified_name": "Primer::Alpha::ActionMenu::List", "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionMenu::List", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionMenuList", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}" } ], "slots": [ ], "methods": [ { "name": "items", "description": "Returns the value of attribute items.", "parameters": [ ] } ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionMenu::Heading", "description": "Heading used to describe groups within an action menu.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionMenu::Heading", "status": "alpha", "a11y_reviewed": false, "short_name": "ActionMenuHeading", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/", "parameters": [ ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionMenu::ListWrapper", "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionMenu::ListWrapper", "status": "alpha", "a11y_reviewed": true, "short_name": "ActionMenuListWrapper", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/", "parameters": [ { "name": "menu_id", "type": "String", "default": "N/A", "description": "ID of the parent menu." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}" } ], "slots": [ { "name": "heading", "description": "Heading text rendered above the list of items.", "parameters": [ { "name": "component_klass", "type": "Class", "default": "N/A", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by `component_klass`." } ] }, { "name": "items", "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.", "parameters": [ ] } ], "methods": [ ], "previews": [ ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ActionMenu::Group", "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ActionMenu::Group", "status": "alpha", "a11y_reviewed": true, "short_name": "ActionMenuGroup", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/", "parameters": [ { "name": "id", "type": "String", "default": "`self.class.generate_id`", "description": "HTML ID value." }, { "name": "role", "type": "Boolean", "default": "`nil`", "description": "ARIA role describing the function of the list. listbox and menu are a common values." }, { "name": "item_classes", "type": "String", "default": "`nil`", "description": "Additional CSS classes to attach to items." }, { "name": "scheme", "type": "Symbol", "default": "`:full`", "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." }, { "name": "show_dividers", "type": "Boolean", "default": "`false`", "description": "Display a divider above each item in the list when it does not follow a header or divider." }, { "name": "select_variant", "type": "Symbol", "default": "`:none`", "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`." }, { "name": "form_arguments", "type": "Hash", "default": "`{}`", "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." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "heading", "description": "Heading text rendered above the list of items.", "parameters": [ { "name": "component_klass", "type": "Class", "default": "N/A", "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by `component_klass`." } ] }, { "name": "items", "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.", "parameters": [ ] } ], "methods": [ { "name": "with_heading", "description": "Heading text rendered above the list of items.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}." } ] } ], "previews": [ ], "subcomponents": [ ] } ] }, { "fully_qualified_name": "Primer::Alpha::AutoComplete", "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.", "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.", "is_form_component": false, "is_published": true, "requires_js": false, "component": "AutoComplete", "status": "deprecated", "a11y_reviewed": false, "short_name": "AutoComplete", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/default/", "parameters": [ { "name": "label_text", "type": "String", "default": "N/A", "description": "The label of the input." }, { "name": "src", "type": "String", "default": "N/A", "description": "The route to query." }, { "name": "input_id", "type": "String", "default": "N/A", "description": "Id of the input element." }, { "name": "input_name", "type": "String", "default": "`nil`", "description": "Optional name of the input element, defaults to `input_id` when not set." }, { "name": "list_id", "type": "String", "default": "N/A", "description": "Id of the list element." }, { "name": "with_icon", "type": "Boolean", "default": "`false`", "description": "Controls if a search icon is visible, defaults to `false`." }, { "name": "is_label_visible", "type": "Boolean", "default": "`true`", "description": "Controls if the label is visible. If `false`, screen reader only text will be added." }, { "name": "is_clearable", "type": "Boolean", "default": "`false`", "description": "Adds optional clear button." }, { "name": "is_label_inline", "type": "Boolean", "default": "`false`", "description": "Controls if the label is inline. On smaller screens, label will always become stacked." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "results", "description": "Customizable results list.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ] }, { "name": "input", "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.", "parameters": [ { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ] } ], "methods": [ { "name": "label_classes", "description": "Private: determines the label classes based on component configration.\n\nIf the label is not visible, return an empty string.", "parameters": [ { "name": "args", "type": "Hash", "default": "N/A", "description": "The component configuration." } ] } ], "previews": [ { "preview_path": "primer/alpha/auto_complete/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/auto_complete/default", "name": "default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/auto_complete/with_non_visible_label", "name": "with_non_visible_label", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/auto_complete/with_inline_label", "name": "with_inline_label", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/auto_complete/with_icon", "name": "with_icon", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/auto_complete/with_clear_button", "name": "with_clear_button", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ { "fully_qualified_name": "Primer::Alpha::AutoComplete::Item", "description": "Use `AutoCompleteItem` to list results of an auto-completed search.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "AutoComplete::Item", "status": "deprecated", "a11y_reviewed": false, "short_name": "AutoCompleteItem", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete/item.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/item/default/", "parameters": [ { "name": "value", "type": "String", "default": "N/A", "description": "Value of the item." }, { "name": "selected", "type": "Boolean", "default": "`false`", "description": "Whether the item is selected." }, { "name": "disabled", "type": "Boolean", "default": "`false`", "description": "Whether the item is disabled." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ ], "methods": [ ], "previews": [ ], "subcomponents": [ ] } ] }, { "fully_qualified_name": "Primer::Alpha::Banner", "description": "Use `Banner` to highlight important information.", "accessibility_docs": "Given that Banner is made visually prominent to sighted users through the use of icons and color, consider providing a heading and designating the Banner as a region landmark to improve navigability and discoverability of the Banner of assistive technology users. At this time, the PVC Banner does not render a heading nor render as a region landmark by default. This may be introduced in the future [as a breaking API change](https://github.com/primer/view_components/issues/2619). For now, consider providing an appropriate heading inside of the Banner and rendering the Banner as a `
    ` tag with `aria-labelledby=\"switch-this-with-banner-heading-id\"` to implicitly designate the Banner as a region landmark.\n\nA Banner can be used in one of two ways – to highlight information on a page, or to communicate an urgent message/feedback for a user action. For the latter scenario, it may be necessary to use a live region or focus management technique to ensure that the Banner is discoverable and accessible for all users. Otherwise, the Banner can easily be missed, including by those using magnification software or screen reader users who may not realize that a Banner has appeared. The appropriate technique to use is highly context-dependent. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires either techniques.\n\n### Announcing a Banner\n When a Banner is used to communicate non-critical feedback, or is used in critical scenarios where moving focus is considered too disruptive, use a live region announcement to announce the content of the Banner to screen reader users.\n\n Live regions can be finicky and don't work well when injected dynamically. Setting a live region attribute on the Banner itself is discouraged as it will not announce as expected for most screen readers.\n\n To ensure a Banner is announced reliably, make sure that there's a live region container that is already on the page. When the Banner is shown, populate the live region container with the content of the Banner. This can be done in one of two ways. The first is to rely on a global live region container that is guaranteed to be on the page. When the Banner appears, populate this global live region container with the Banner content. The second technique is to hide or show the Banner within a live region wrapper that is guaranteed to always be on the page.\n\n For more information about either technique, visit [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). This guidance is subject to change.\n\n### Focusing a Banner\n Focusing a Banner when it appears helps to maximize discoverability of the message, especially in critical scenarios.\n\n To properly focus a banner, add a `tabindex=\"-1\"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).\n\n For more information about the focus management technique, visit the [Staff only: Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.", "is_form_component": false, "is_published": true, "requires_js": true, "component": "Banner", "status": "alpha", "a11y_reviewed": false, "short_name": "Banner", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/", "parameters": [ { "name": "tag", "type": "Symbol", "default": "`:div`", "description": "One of `:div` or `:section`." }, { "name": "full", "type": "Boolean", "default": "`false`", "description": "Whether the component should take up the full width of the screen." }, { "name": "full_when_narrow", "type": "Boolean", "default": "`false`", "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports." }, { "name": "dismiss_scheme", "type": "Symbol", "default": "`:none`", "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`." }, { "name": "dismiss_label", "type": "String", "default": "`Dismiss`", "description": "The aria-label text of the dismiss \"x\" button" }, { "name": "description", "type": "String", "default": "`nil`", "description": "Description text rendered underneath the message." }, { "name": "icon", "type": "Symbol", "default": "`nil`", "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." }, { "name": "scheme", "type": "Symbol", "default": "`:default`", "description": "One of `:danger`, `:default`, `:success`, or `:warning`." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ { "name": "action", "description": "A button or custom content that will render on the right-hand side of the component.\n\nTo render a button, call the `with_action_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_action_content` method and pass a block that returns HTML.", "parameters": [ ] } ], "methods": [ ], "previews": [ { "preview_path": "primer/alpha/banner/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/default", "name": "default", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/scheme_default", "name": "scheme_default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/scheme_danger", "name": "scheme_danger", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/scheme_success", "name": "scheme_success", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/scheme_warning", "name": "scheme_warning", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/dismissible", "name": "dismissible", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/full_width", "name": "full_width", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/full_width_in_narrow_viewport", "name": "full_width_in_narrow_viewport", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/with_action_button", "name": "with_action_button", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/banner/with_action_content", "name": "with_action_content", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::ButtonMarketing", "description": "Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.", "accessibility_docs": null, "is_form_component": false, "is_published": true, "requires_js": false, "component": "ButtonMarketing", "status": "alpha", "a11y_reviewed": false, "short_name": "ButtonMarketing", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/button_marketing/default/", "parameters": [ { "name": "scheme", "type": "Symbol", "default": "`:default`", "description": "One of `:default`, `:outline`, `:primary`, or `:transparent`." }, { "name": "variant", "type": "Symbol", "default": "`:default`", "description": "One of `:default` or `:large`." }, { "name": "tag", "type": "Symbol", "default": "`:button`", "description": "One of `:a` or `:button`." }, { "name": "type", "type": "Symbol", "default": "`:button`", "description": "One of `:button` or `:submit`." }, { "name": "disabled", "type": "Boolean", "default": "`false`", "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`." }, { "name": "system_arguments", "type": "Hash", "default": "N/A", "description": "{{link_to_system_arguments_docs}}" } ], "slots": [ ], "methods": [ ], "previews": [ { "preview_path": "primer/alpha/button_marketing/playground", "name": "playground", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/default", "name": "default", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/sizes_default", "name": "sizes_default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/sizes_large", "name": "sizes_large", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/scheme_default", "name": "scheme_default", "snapshot": "true", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/scheme_primary", "name": "scheme_primary", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/scheme_outline", "name": "scheme_outline", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } }, { "preview_path": "primer/alpha/button_marketing/scheme_transparent", "name": "scheme_transparent", "snapshot": "false", "skip_rules": { "wont_fix": [ "region" ], "will_fix": [ "color-contrast" ] } } ], "subcomponents": [ ] }, { "fully_qualified_name": "Primer::Alpha::CheckBox", "description": "Check boxes are true/false inputs rendered as `` in HTML.\n\n## Schemes\n\nCheck boxes can submit values to the server using one of two schemes, either `:array`\nor `:boolean` (the default). Check boxes with a scheme of `:boolean` function like normal\nHTML check boxes. If they are checked, a value of \"1\" is sent to the server; if they are\nunchecked, a value of \"0\" is sent to the server. The checked and unchecked values can be\ncustomized via the `:value` and `:unchecked_value` arguments respectively.\n\nWhereas `:boolean` check boxes must have unique names, `:array` check boxes all have the\nsame name. On form submission, Rails will aggregate the values of the check boxes with the\nsame name and provide them to the controller as an array. If `:scheme:` is `:array`, the\n`:value` argument must also be provided. The `:unchecked_value` argument is ignored. If a\ncheck box is checked on submit, its corresponding value will appear in the array. If it is\nnot checked, its value will not appear in the array.\n\n## Caption templates\n\nCaption templates for `:array`-type check boxes work a little differently than they do for\nother input types. Because the name must be the same for all check boxes that make up an\narray, caption template file names are comprised of both the name _and_ the value of each\ncheck box. For example, a check box with the name `foo` and value `bar` must have a caption\ntemplate named `foo_bar_caption.html.erb`.\n\n## Nested Forms\n\nCheck boxes can have \"nested\" forms that are rendered below the caption. A common use-case\nis a form that is hidden until the check box is checked. Nested forms are indented slightly\nto align with the label and caption.\n\nDefine a nested form via the `#nested_form` method, which is expected to return an instance\nof a Primer form (see the usage section below).\n\nAny fields defined in the nested form are submitted along with the parent form's fields.\n\n**NOTE**: Check boxes do not automatically show or hide nested forms. If such behavior is\ndesired, it must be done by hand.", "accessibility_docs": null, "is_form_component": true, "is_published": false, "requires_js": false, "component": "CheckBox", "status": "alpha", "a11y_reviewed": false, "short_name": "CheckBox", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/check_box.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/check_box/default/", "parameters": [ { "name": "name", "type": "String", "default": "N/A", "description": "Value for the HTML name attribute." }, { "name": "id", "type": "String", "default": "N/A", "description": "Value for the HTML id attribute." }, { "name": "class", "type": "String", "default": "N/A", "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders." }, { "name": "classes", "type": "Array", "default": "N/A", "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)." }, { "name": "caption", "type": "String", "default": "N/A", "description": "A string describing the field and what sorts of input it expects. Displayed below the input." }, { "name": "label", "type": "String", "default": "N/A", "description": "Label text displayed above the input." }, { "name": "visually_hide_label", "type": "Boolean", "default": "N/A", "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers." }, { "name": "disabled", "type": "Boolean", "default": "N/A", "description": "When set to `true`, the input will not accept keyboard or mouse input." }, { "name": "hidden", "type": "Boolean", "default": "N/A", "description": "When set to `true`, visually hides the field." }, { "name": "invalid", "type": "Boolean", "default": "N/A", "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect." }, { "name": "validation_message", "type": "String", "default": "N/A", "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object." }, { "name": "label_arguments", "type": "Hash", "default": "N/A", "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `