` tag."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger`, `:default`, or `:invisible`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:large`, `:medium`, or `:small`."
},
{
"name": "disabled",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
},
{
"name": "type",
"type": "Symbol",
"default": "N/A",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "aria-label",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
"name": "aria-description",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
},
{
"name": "show_tooltip",
"type": "Boolean",
"default": "`true`",
"description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
},
{
"name": "tooltip_direction",
"type": "Symbol",
"default": "`:s`",
"description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/icon_button/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/icon_button/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/icon_button/invisible",
"name": "invisible",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/icon_button/danger",
"name": "danger",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Label",
"description": "Use `Label` to add contextual metadata to a design.",
"accessibility_docs": "Use `aria-label` if the `Label` or the context around it don't explain the label.",
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Label",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Label",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/label.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/label/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": "One of `:a`, `:div`, `:span`, or `:summary`."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:large` or `:medium`."
},
{
"name": "inline",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to render this label inline."
},
{
"name": "variant",
"type": "Symbol",
"default": "`:none`",
"description": "One of `:inline`, `:large`, or `:none`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/label/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_default",
"name": "color_scheme_default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_primary",
"name": "color_scheme_primary",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_secondary",
"name": "color_scheme_secondary",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_accent",
"name": "color_scheme_accent",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_success",
"name": "color_scheme_success",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_attention",
"name": "color_scheme_attention",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_danger",
"name": "color_scheme_danger",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_severe",
"name": "color_scheme_severe",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_done",
"name": "color_scheme_done",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/color_scheme_sponsors",
"name": "color_scheme_sponsors",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/size_default",
"name": "size_default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/size_large",
"name": "size_large",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/inline_default",
"name": "inline_default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/label/inline_inline",
"name": "inline_inline",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Link",
"description": "Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": true,
"component": "Link",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Link",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
"parameters": [
{
"name": "href",
"type": "String",
"default": "`nil`",
"description": "URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default`, `:primary`, or `:secondary`."
},
{
"name": "muted",
"type": "Boolean",
"default": "`false`",
"description": "Uses light gray for Link color, and blue on hover."
},
{
"name": "underline",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to underline the link."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "tooltip",
"description": "`Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nThe tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested\nunder a positioning wrapper.\nConsult 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": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/link/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/tooltip",
"name": "tooltip",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/color_scheme_default",
"name": "color_scheme_default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/color_scheme_primary",
"name": "color_scheme_primary",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/color_scheme_primary_muted",
"name": "color_scheme_primary_muted",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/color_scheme_secondary",
"name": "color_scheme_secondary",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/link/color_scheme_secondary_muted",
"name": "color_scheme_secondary_muted",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Markdown",
"description": "Use `Markdown` to wrap markdown content.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Markdown",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Markdown",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/markdown.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/markdown/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:div`",
"description": "One of `:article`, `:div`, or `:td`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::NavList",
"description": "`NavList` provides a simple way to render side navigation, i.e. navigation\nthat appears to the left or right side of some main content. Each group in a\nnav list is a list of links.\n\nNav list groups can contain sub items. Rather than navigating to a URL, groups\nwith sub items expand and collapse on click. To indicate this functionality, the\ngroup will automatically render with a trailing chevron icon that changes direction\nwhen the group expands and collapses.\n\nNav list items appear visually active when selected. Each nav item must have one\nor more ID values that determine which item will appear selected. Use the\n`selected_item_id` argument to select the appropriate item.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": true,
"component": "NavList",
"status": "beta",
"a11y_reviewed": true,
"short_name": "NavList",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "heading",
"description": "The heading for the list at large. Accepts the arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Heading{{/link_to_component}}.",
"parameters": [
]
},
{
"name": "items",
"description": "Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.",
"parameters": [
]
}
],
"methods": [
{
"name": "with_item",
"description": "Adds an item to the list.",
"parameters": [
{
"name": "component_klass",
"type": "Class",
"default": "`Primer::Beta::NavList::Item`",
"description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
}
]
},
{
"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": "`Primer::Beta::NavList::Item`",
"description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::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::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
}
]
},
{
"name": "with_group",
"description": "Adds a group to the list. A group is a list of links and a (required) heading.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
}
]
},
{
"name": "with_divider",
"description": "Adds a divider to the list. Dividers visually separate items and groups.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
}
]
},
{
"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": "`Primer::Beta::NavList::Item`",
"description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::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": "`Primer::Beta::NavList::Item`",
"description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::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::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
}
]
},
{
"name": "render_outer_list?",
"description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a
",
"parameters": [
]
}
],
"previews": [
{
"preview_path": "primer/beta/nav_list/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/nav_list/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/nav_list/top_level_items",
"name": "top_level_items",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/nav_list/show_more_item",
"name": "show_more_item",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/nav_list/trailing_action",
"name": "trailing_action",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
{
"fully_qualified_name": "Primer::Beta::NavList::Heading",
"description": "The heading placed above a `NavList`'s items.\n\nSee {{#link_to_component}}Primer::Beta::NavList{{/link_to_component}} for usage examples.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "NavList::Heading",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListHeading",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/heading.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/heading/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "N/A",
"description": "The text content of the heading."
},
{
"name": "id",
"type": "String",
"default": "`self.class.generate_id`",
"description": "The value of the ID HTML attribute. Auto-generated by default."
},
{
"name": "heading_level",
"type": "Integer",
"default": "`2`",
"description": "The heading level, i.e. 2 for an ``, 3 for an ``, etc."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
{
"name": "title",
"description": "Returns the value of attribute title.",
"parameters": [
]
},
{
"name": "id",
"description": "Returns the value of attribute id.",
"parameters": [
]
},
{
"name": "heading_level",
"description": "Returns the value of attribute heading_level.",
"parameters": [
]
},
{
"name": "system_arguments",
"description": "Returns the value of attribute system_arguments.",
"parameters": [
]
}
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::NavList::Item",
"description": "Items are rendered as styled links. They can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the\n`selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also\nthemselves contain sub items. Sub items are rendered collapsed by default.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": true,
"component": "NavList::Item",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListItem",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/item.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/item/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected list item. Used internally."
},
{
"name": "selected_by_ids",
"type": "Array",
"default": "`[]`",
"description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
},
{
"name": "expanded",
"type": "Boolean",
"default": "`false`",
"description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
},
{
"name": "sub_item",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not this item is nested under a parent item. Used internally."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "items",
"description": null,
"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": "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": "selected_by_ids",
"description": "Returns the value of attribute selected_by_ids.",
"parameters": [
]
},
{
"name": "sub_item",
"description": "Returns the value of attribute sub_item.",
"parameters": [
]
},
{
"name": "sub_item?",
"description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
"parameters": [
]
},
{
"name": "expand!",
"description": "Cause this item to show its list of sub items when rendered.",
"parameters": [
]
},
{
"name": "item_active?",
"description": "Normally it would be easier to simply ask each item for its active status, eg.\nitems.any?(&:active?), but unfortunately the view context is not set on each\nitem until _after_ the parent's before_render, etc methods have been called.\nThis means helper methods like current_page? will blow up with an error, since\n`helpers` is simply an alias for the view context (i.e. an instance of\nActionView::Base). Since we know the view context for the parent object must\nbe set before `before_render` is invoked, we can call helper methods here in\nthe parent and bypass the problem entirely. Maybe not the most OO approach,\nbut it works.",
"parameters": [
]
}
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::NavList::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": "NavList::Divider",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListDivider",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/divider.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_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::Beta::NavList::Group",
"description": "A logical grouping of navigation links with an optional heading.\n\nSee {{#link_to_component}}Primer::Beta::NavList{{/link_to_component}} for usage examples.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": true,
"component": "NavList::Group",
"status": "alpha",
"a11y_reviewed": true,
"short_name": "NavListGroup",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/group.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/group/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected item. Used internally."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "show_more_item",
"description": "A special \"show more\" list item that appears at the bottom of the group. Clicking\nthe item will fetch the next page of results from the URL passed in the `src` argument\nand append the resulting chunk of HTML to the group.",
"parameters": [
{
"name": "src",
"type": "String",
"default": "N/A",
"description": "The URL to query for additional pages of list items."
},
{
"name": "pages",
"type": "Integer",
"default": "N/A",
"description": "The total number of pages in the result set."
},
{
"name": "component_klass",
"type": "Class",
"default": "N/A",
"description": "A component class to use instead of the default `Primer::Beta::NavList::Item` class."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
}
]
},
{
"name": "items",
"description": "Items.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
}
]
},
{
"name": "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::ActionList::Heading{{/link_to_component}}."
}
]
}
],
"methods": [
{
"name": "expand!",
"description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
"parameters": [
]
}
],
"previews": [
],
"subcomponents": [
]
}
]
},
{
"fully_qualified_name": "Primer::Beta::Octicon",
"description": "`Octicon` renders an {{link_to_octicons}} with {{link_to_system_arguments_docs}}.\n`Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Octicon",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Octicon",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/octicon.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/octicon/default/",
"parameters": [
{
"name": "icon_name",
"type": "Symbol, String",
"default": "`nil`",
"description": "Name of {{link_to_octicons}} to use."
},
{
"name": "icon",
"type": "Symbol, String",
"default": "`nil`",
"description": "Name of {{link_to_octicons}} to use."
},
{
"name": "size",
"type": "Symbol",
"default": "`:small`",
"description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
},
{
"name": "use_symbol",
"type": "Boolean",
"default": "`false`",
"description": "EXPERIMENTAL (May change or be removed) - Set to true when using with {{#link_to_component}}Primer::Alpha::OcticonSymbols{{/link_to_component}}."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/octicon/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/octicon/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Popover",
"description": "Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\nBy default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Popover",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Popover",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "heading",
"description": "The heading",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:h4`",
"description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "body",
"description": "The body",
"parameters": [
{
"name": "caret",
"type": "Symbol",
"default": "N/A",
"description": "One of `:bottom`, `:bottom_left`, `:bottom_right`, `:left`, `:left_bottom`, `:left_top`, `:right`, `:right_bottom`, `:right_top`, `:top`, `:top_left`, or `:top_right`."
},
{
"name": "large",
"type": "Boolean",
"default": "N/A",
"description": "Whether to use the large version of the component."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/popover/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/large",
"name": "large",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/bottom_right",
"name": "bottom_right",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/top_right",
"name": "top_right",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/bottom_left",
"name": "bottom_left",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/popover/top_left",
"name": "top_left",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::ProgressBar",
"description": "Use `ProgressBar` to visualize task completion.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "ProgressBar",
"status": "beta",
"a11y_reviewed": false,
"short_name": "ProgressBar",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/progress_bar.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/progress_bar/default/",
"parameters": [
{
"name": "size",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default`, `:large`, or `:small`. Increases height."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "items",
"description": "Use the Item slot to add an item to the progress bar",
"parameters": [
{
"name": "percentage",
"type": "Integer",
"default": "N/A",
"description": "The percent complete"
},
{
"name": "bg",
"type": "Symbol",
"default": "N/A",
"description": "The background color"
},
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{link_to_system_arguments_docs}}."
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/progress_bar/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/progress_bar/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/progress_bar/size_small",
"name": "size_small",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/progress_bar/size_default",
"name": "size_default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/progress_bar/size_large",
"name": "size_large",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::RelativeTime",
"description": "Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "RelativeTime",
"status": "beta",
"a11y_reviewed": false,
"short_name": "RelativeTime",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/relative_time.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/relative_time/default/",
"parameters": [
{
"name": "datetime",
"type": "Time",
"default": "N/A",
"description": "The time to be formatted."
},
{
"name": "tense",
"type": "Symbol",
"default": "`:auto`",
"description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
},
{
"name": "prefix",
"type": "sring",
"default": "`nil`",
"description": "What to prefix the relative ime display with."
},
{
"name": "second",
"type": "Symbol",
"default": "`SECOND_DEFAULT`",
"description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "minute",
"type": "Symbol",
"default": "`MINUTE_DEFAULT`",
"description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "hour",
"type": "Symbol",
"default": "`HOUR_DEFAULT`",
"description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "weekday",
"type": "Symbol",
"default": "`WEEKDAY_DEFAULT`",
"description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
"name": "day",
"type": "Symbol",
"default": "`DAY_DEFAULT`",
"description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "month",
"type": "Symbol",
"default": "`MONTH_DEFAULT`",
"description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
},
{
"name": "year",
"type": "Symbol",
"default": "`YEAR_DEFAULT`",
"description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "time_zone_name",
"type": "Symbol",
"default": "`TIMEZONENAME_DEFAULT`",
"description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
},
{
"name": "threshold",
"type": "string",
"default": "`nil`",
"description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
},
{
"name": "precision",
"type": "Symbol",
"default": "`PRECISION_DEFAULT`",
"description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
},
{
"name": "format",
"type": "Symbol",
"default": "`nil`",
"description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
},
{
"name": "format_style",
"type": "Symbol",
"default": "`nil`",
"description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
"name": "lang",
"type": "string",
"default": "`nil`",
"description": "The language to use."
},
{
"name": "title",
"type": "string",
"default": "`nil`",
"description": "Provide a custom title to the element."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/relative_time/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/relative_time/default",
"name": "default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/relative_time/micro_format",
"name": "micro_format",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/relative_time/recent_time",
"name": "recent_time",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/relative_time/count_down_timer",
"name": "count_down_timer",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Spinner",
"description": "Use `Spinner` to let users know that content is being loaded.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Spinner",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Spinner",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
"parameters": [
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
},
{
"name": "style",
"type": "String",
"default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
"description": "Custom element styles."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/spinner/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/spinner/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::State",
"description": "Use `State` for rendering the status of an item.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "State",
"status": "beta",
"a11y_reviewed": false,
"short_name": "State",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "N/A",
"description": "`title` HTML attribute."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": "HTML tag for element. One of `:div` or `:span`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default` or `:small`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/state/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/states_default",
"name": "states_default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/states_open",
"name": "states_open",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/states_closed",
"name": "states_closed",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/states_merged",
"name": "states_merged",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/sizes_default",
"name": "sizes_default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/state/sizes_small",
"name": "sizes_small",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Subhead",
"description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
"accessibility_docs": "The `:heading` slot defaults to rendering a ``. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n<%= link_to_heading_practices %>",
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Subhead",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Subhead",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
"parameters": [
{
"name": "spacious",
"type": "Boolean",
"default": "`false`",
"description": "Whether to add spacing to the Subhead."
},
{
"name": "hide_border",
"type": "Boolean",
"default": "`false`",
"description": "Whether to hide the border under the heading."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "heading",
"description": "The heading",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "N/A",
"description": "One of `:div`, `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
},
{
"name": "danger",
"type": "Boolean",
"default": "N/A",
"description": "Whether to style the heading as dangerous."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "actions",
"description": "Actions",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "description",
"description": "The description",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/subhead/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/danger",
"name": "danger",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/actions",
"name": "actions",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/spacing_default",
"name": "spacing_default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/spacing_spacious",
"name": "spacing_spacious",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/subhead/spacing_dangerous",
"name": "spacing_dangerous",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::Text",
"description": "`Text` is a wrapper component that will apply typography styles to the text inside.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Text",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Text",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": ""
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/text/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/text/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Beta::TimelineItem",
"description": "Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "TimelineItem",
"status": "beta",
"a11y_reviewed": false,
"short_name": "TimelineItem",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
"parameters": [
{
"name": "condensed",
"type": "Boolean",
"default": "`false`",
"description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "avatar",
"description": "Avatar to be rendered to the left of the Badge.",
"parameters": [
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
}
]
},
{
"name": "badge",
"description": "Badge that will be connected to other TimelineItems.",
"parameters": [
{
"name": "icon",
"type": "String",
"default": "N/A",
"description": "Name of {{link_to_octicons}} to use."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "body",
"description": "Body to be rendered to the left of the Badge.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/timeline_item/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/timeline_item/default",
"name": "default",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
{
"fully_qualified_name": "Primer::Beta::TimelineItem::Badge",
"description": "This component is part of `Primer::Beta::TimelineItem` and should not be\nused as a standalone component.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "TimelineItem::Badge",
"status": "beta",
"a11y_reviewed": false,
"short_name": "TimelineItemBadge",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item/badge.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/badge/default/",
"parameters": [
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
}
]
},
{
"fully_qualified_name": "Primer::Beta::Truncate",
"description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Truncate",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Truncate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "items",
"description": "Text slot used for the truncated text.",
"parameters": [
{
"name": "priority",
"type": "Boolean",
"default": "N/A",
"description": "if true, the text will be given priority"
},
{
"name": "expandable",
"type": "Boolean",
"default": "N/A",
"description": "if true, the text will expand on hover or focus"
},
{
"name": "max_width",
"type": "Integer",
"default": "N/A",
"description": "if provided, the text will be truncated at a maximum width"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
}
],
"methods": [
],
"previews": [
{
"preview_path": "primer/beta/truncate/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/truncate/default",
"name": "default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/truncate/multiple_items",
"name": "multiple_items",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/truncate/advanced_multiple_items",
"name": "advanced_multiple_items",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/beta/truncate/max_widths",
"name": "max_widths",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
{
"fully_qualified_name": "Primer::Beta::Truncate::TruncateText",
"description": "This component is part of `Primer::Beta::Truncate` and should not be\nused as a standalone component.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Truncate::TruncateText",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "TruncateTruncateText",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate/truncate_text.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/truncate_text/default/",
"parameters": [
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
}
]
},
{
"fully_qualified_name": "Primer::BlankslateComponent",
"description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
"accessibility_docs": "`Blankslate` renders an `
` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n<%= link_to_heading_practices %>",
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Blankslate",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Blankslate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/blankslate/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "`\"\"`",
"description": "Text that appears in a larger bold font."
},
{
"name": "title_tag",
"type": "Symbol",
"default": "`:h3`",
"description": "HTML tag to use for title."
},
{
"name": "icon",
"type": "Symbol",
"default": "`\"\"`",
"description": "Octicon icon to use at top of component."
},
{
"name": "icon_size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
},
{
"name": "image_src",
"type": "String",
"default": "`\"\"`",
"description": "Image to display."
},
{
"name": "image_alt",
"type": "String",
"default": "`\" \"`",
"description": "Alt text for image."
},
{
"name": "description",
"type": "String",
"default": "`\"\"`",
"description": "Text that appears below the title. Typically a whole sentence."
},
{
"name": "button_text",
"type": "String",
"default": "`\"\"`",
"description": "The text of the button."
},
{
"name": "button_url",
"type": "String",
"default": "`\"\"`",
"description": "The URL where the user will be taken after clicking the button."
},
{
"name": "button_classes",
"type": "String",
"default": "`\"btn-primary my-3\"`",
"description": "Classes to apply to action button"
},
{
"name": "link_text",
"type": "String",
"default": "`\"\"`",
"description": "The text of the link."
},
{
"name": "link_url",
"type": "String",
"default": "`\"\"`",
"description": "The URL where the user will be taken after clicking the link."
},
{
"name": "narrow",
"type": "Boolean",
"default": "`false`",
"description": "Adds a maximum width."
},
{
"name": "large",
"type": "Boolean",
"default": "`false`",
"description": "Increases the font size."
},
{
"name": "spacious",
"type": "Boolean",
"default": "`false`",
"description": "Adds extra padding."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "spinner",
"description": "Optional Spinner.",
"parameters": [
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{#link_to_component}}Primer::Beta::Spinner{{/link_to_component}}."
}
]
}
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Box",
"description": "`Box` is a basic wrapper component for most layout related needs.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Box",
"status": "stable",
"a11y_reviewed": false,
"short_name": "Box",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
{
"preview_path": "primer/box/playground",
"name": "playground",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/box/default",
"name": "default",
"snapshot": "false",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/box/border",
"name": "border",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
},
{
"preview_path": "primer/box/border_bottom",
"name": "border_bottom",
"snapshot": "true",
"skip_rules": {
"wont_fix": [
"region"
],
"will_fix": [
"color-contrast"
]
}
}
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::ButtonComponent",
"description": "Use `Button` 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": true,
"component": "Button",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Button",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
"parameters": [
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
},
{
"name": "variant",
"type": "Symbol",
"default": "`nil`",
"description": "DEPRECATED. One of `:medium` or `:small`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:medium` or `:small`."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:button`",
"description": "One of `:a`, `:button`, or `:summary`."
},
{
"name": "type",
"type": "Symbol",
"default": "`:button`",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "group_item",
"type": "Boolean",
"default": "`false`",
"description": "Whether button is part of a ButtonGroup."
},
{
"name": "block",
"type": "Boolean",
"default": "`false`",
"description": "Whether button is full-width with `display: block`."
},
{
"name": "dropdown",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to render a dropdown caret."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "leading_visual",
"description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
}
]
},
{
"name": "trailing_visual",
"description": "Trailing visuals appear to the right of the button text.\n\nUse:\n\n- `trailing_visual_counter` for a {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "Same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
}
]
},
{
"name": "tooltip",
"description": "`Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nConsult 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": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
}
]
}
],
"methods": [
{
"name": "icon",
"description": "remove alias when all buttons are migrated to new slot names",
"parameters": [
]
},
{
"name": "counter",
"description": "remove alias when all buttons are migrated to new slot names",
"parameters": [
]
}
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::ConditionalWrapper",
"description": "Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition\nis true, a `Primer::BaseComponent` will render around the content. If the condition is false, only\nthe content is rendered.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "ConditionalWrapper",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "ConditionalWrapper",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/conditional_wrapper.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/conditional_wrapper/default/",
"parameters": [
{
"name": "condition",
"type": "Boolean",
"default": "N/A",
"description": "Whether or not to wrap the content in a `Primer::BaseComponent`."
},
{
"name": "base_component_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments to pass to `Primer::BaseComponent`."
}
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Content",
"description": "Use `Content` as a helper to render content passed to a slot without adding any tags.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Content",
"status": "stable",
"a11y_reviewed": false,
"short_name": "Content",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/content.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/content/default/",
"parameters": [
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::IconButton",
"description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
"accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)",
"is_form_component": false,
"is_published": true,
"requires_js": true,
"component": "IconButton",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "IconButton",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
"parameters": [
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger` or `:default`."
},
{
"name": "icon",
"type": "String",
"default": "N/A",
"description": "Name of {{link_to_octicons}} to use."
},
{
"name": "tag",
"type": "Symbol",
"default": "N/A",
"description": "One of `:a`, `:button`, or `:summary`."
},
{
"name": "type",
"type": "Symbol",
"default": "N/A",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "aria-label",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
"name": "aria-description",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
},
{
"name": "tooltip_direction",
"type": "Symbol",
"default": "`:s`",
"description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "box",
"type": "Boolean",
"default": "`false`",
"description": "Whether the button is in a {{#link_to_component}}Primer::Beta::BorderBox{{/link_to_component}}. If `true`, the button will have the `Box-btn-octicon` class."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::LayoutComponent",
"description": "Use `Layout` to build a main/sidebar layout.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Layout",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Layout",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
"parameters": [
{
"name": "responsive",
"type": "Boolean",
"default": "`false`",
"description": "Whether to collapse layout to a single column at smaller widths."
},
{
"name": "side",
"type": "Symbol",
"default": "`:right`",
"description": "Which side to display the sidebar on. One of `:left` or `:right`."
},
{
"name": "sidebar_col",
"type": "Integer",
"default": "`3`",
"description": "Sidebar column width."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "main",
"description": "The main content",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "sidebar",
"description": "The sidebar content",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
}
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Navigation::TabComponent",
"description": "nodoc",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Navigation::Tab",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "NavigationTab",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
"parameters": [
{
"name": "list",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab is an item in a `` list."
},
{
"name": "selected",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab is selected or not."
},
{
"name": "with_panel",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab has an associated panel."
},
{
"name": "panel_id",
"type": "String",
"default": "`\"\"`",
"description": "Only applies if `with_panel` is `true`. Unique id of panel."
},
{
"name": "icon_classes",
"type": "Boolean",
"default": "`\"\"`",
"description": "Classes that must always be applied to icons."
},
{
"name": "wrapper_arguments",
"type": "Hash",
"default": "`{}`",
"description": "{{link_to_system_arguments_docs}} to be used in the `- ` wrapper when the tab is an item in a list."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
{
"name": "panel",
"description": "Panel controlled by the Tab. This will not render anything in the tab itself.\nIt will provide a accessor for the Tab's parent to call and render the panel\ncontent in the appropriate place.\nRefer to `UnderlineNav` and `TabNav` implementations for examples.",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
]
},
{
"name": "icon",
"description": "Icon to be rendered in the Tab left.",
"parameters": [
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
}
]
},
{
"name": "text",
"description": "The Tab's text.",
"parameters": [
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{#link_to_component}}Primer::Beta::Text{{/link_to_component}}."
}
]
},
{
"name": "counter",
"description": "Counter to be rendered in the Tab right.",
"parameters": [
{
"name": "kwargs",
"type": "Hash",
"default": "N/A",
"description": "The same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
}
]
}
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Tooltip",
"description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Tooltip",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Tooltip",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
"parameters": [
{
"name": "label",
"type": "String",
"default": "N/A",
"description": "the text to appear in the tooltip"
},
{
"name": "direction",
"type": "String",
"default": "`:n`",
"description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "align",
"type": "String",
"default": "`:default`",
"description": "Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`, `:right_1`, or `:right_2`."
},
{
"name": "multiline",
"type": "Boolean",
"default": "`false`",
"description": "Use this when you have long content"
},
{
"name": "no_delay",
"type": "Boolean",
"default": "`false`",
"description": "By default the tooltips have a slight delay before appearing. Set true to override this"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"fully_qualified_name": "Primer::Truncate",
"description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
"accessibility_docs": null,
"is_form_component": false,
"is_published": true,
"requires_js": false,
"component": "Truncate",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Truncate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:div`",
"description": "One of `:div`, `:p`, `:span`, or `:strong`."
},
{
"name": "inline",
"type": "Boolean",
"default": "`false`",
"description": "Whether the element is inline (or inline-block)."
},
{
"name": "expandable",
"type": "Boolean",
"default": "`false`",
"description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
},
{
"name": "max_width",
"type": "Integer",
"default": "`nil`",
"description": "Sets the max-width of the text."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "{{link_to_system_arguments_docs}}"
}
],
"slots": [
],
"methods": [
],
"previews": [
],
"subcomponents": [
]
},
{
"component": "BaseComponent",
"fully_qualified_name": "Primer::BaseComponent",
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n
Hello world
\n```",
"args_md": "## HTML attributes\n\nSystem arguments include most HTML attributes. For example:\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\n\n## Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n## Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n## Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n## Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n## Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n## Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n## Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n## Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n## Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n## Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
}
]