static/arguments.json in primer_view_components-0.0.121 vs static/arguments.json in primer_view_components-0.0.122
- old
+ new
@@ -1,485 +1,271 @@
[
{
- "component": "ActionList",
- "status": "alpha",
- "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/",
+ "component": "RelativeTime",
+ "status": "beta",
+ "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": "role",
- "type": "Boolean",
- "default": "`:list`",
- "description": "ARIA role describing the function of the list. listbox and menu are a common values."
+ "name": "datetime",
+ "type": "Time",
+ "default": "N/A",
+ "description": "The time to be formatted."
},
{
- "name": "item_classes",
- "type": "String",
- "default": "`nil`",
- "description": "Additional CSS classes to attach to items."
- },
- {
- "name": "scheme",
+ "name": "tense",
"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."
+ "default": "`:auto`",
+ "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
},
{
- "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": "prefix",
+ "type": "sring",
+ "default": "`nil`",
+ "description": "What to prefix the relative ime display with."
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "ActionList::Divider",
- "status": "alpha",
- "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",
+ "name": "second",
"type": "Symbol",
- "default": "`:subtle`",
- "description": "Display a background color if scheme is `filled`."
+ "default": "`SECOND_DEFAULT`",
+ "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "ActionList::Heading",
- "status": "alpha",
- "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": "list_id",
- "type": "String",
- "default": "N/A",
- "description": "The unique identifier of the sub list the heading belongs to. Used internally."
+ "name": "minute",
+ "type": "Symbol",
+ "default": "`MINUTE_DEFAULT`",
+ "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
- "name": "title",
- "type": "String",
- "default": "N/A",
- "description": "Sub list title."
+ "name": "hour",
+ "type": "Symbol",
+ "default": "`HOUR_DEFAULT`",
+ "description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
- "name": "subtitle",
- "type": "String",
- "default": "`nil`",
- "description": "Optional sub list description."
+ "name": "weekday",
+ "type": "Symbol",
+ "default": "`WEEKDAY_DEFAULT`",
+ "description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
- "name": "scheme",
+ "name": "day",
"type": "Symbol",
- "default": "`:subtle`",
- "description": "Display a background color if scheme is `filled`."
+ "default": "`DAY_DEFAULT`",
+ "description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
- "name": "tag",
+ "name": "month",
"type": "Symbol",
- "default": "`:h3`",
- "description": "Semantic tag for the heading."
+ "default": "`MONTH_DEFAULT`",
+ "description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "ActionList::Item",
- "status": "alpha",
- "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": "year",
+ "type": "Symbol",
+ "default": "`YEAR_DEFAULT`",
+ "description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
- "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": "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": "label",
- "type": "String",
- "default": "N/A",
- "description": "Item label."
- },
- {
- "name": "label_classes",
- "type": "String",
+ "name": "threshold",
+ "type": "string",
"default": "`nil`",
- "description": "CSS classes that will be added to the label."
+ "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
},
{
- "name": "content_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
- },
- {
- "name": "truncate_label",
- "type": "Boolean",
- "default": "`false`",
- "description": "Truncate label with ellipsis."
- },
- {
- "name": "href",
- "type": "String",
- "default": "`nil`",
- "description": "Link URL."
- },
- {
- "name": "role",
- "type": "String",
- "default": "`:listitem`",
- "description": "ARIA role describing the function of the item."
- },
- {
- "name": "size",
+ "name": "precision",
"type": "Symbol",
- "default": "`:medium`",
- "description": "Controls block sizing of the item."
+ "default": "`PRECISION_DEFAULT`",
+ "description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
},
{
- "name": "scheme",
+ "name": "format",
"type": "Symbol",
- "default": "`:default`",
- "description": "Controls color/style based on behavior."
+ "default": "`nil`",
+ "description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
},
{
- "name": "disabled",
- "type": "Boolean",
- "default": "`false`",
- "description": "Disabled items are not clickable and visually dim."
- },
- {
- "name": "description_scheme",
+ "name": "format_style",
"type": "Symbol",
- "default": "`:block`",
- "description": "Display description inline with label, or block on the next line."
+ "default": "`nil`",
+ "description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
- "name": "active",
- "type": "Boolean",
- "default": "`false`",
- "description": "Sets an active state on navigational items."
+ "name": "lang",
+ "type": "string",
+ "default": "`nil`",
+ "description": "The language to use."
},
{
- "name": "on_click",
- "type": "String",
+ "name": "title",
+ "type": "string",
"default": "`nil`",
- "description": "JavaScript to execute when the item is clicked."
+ "description": "Provide a custom title to the element."
},
{
- "name": "id",
- "type": "String",
- "default": "`self.class.generate_id`",
- "description": "Used internally."
- },
- {
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Banner",
- "status": "alpha",
- "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/",
+ "component": "IconButton",
+ "status": "beta",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/",
"parameters": [
{
- "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": "dismissible",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether the component can be dismissed with an \"x\" button."
- },
- {
- "name": "description",
+ "name": "icon",
"type": "String",
- "default": "`nil`",
- "description": "Description text rendered underneath the message."
+ "default": "N/A",
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
},
{
- "name": "icon",
- "type": "Symbol",
- "default": "`nil`",
- "description": "The name of an [Octicon](https://primer.style/octicons/) icon to use. If no icon is provided, a default one will be chosen based on the scheme."
+ "name": "wrapper_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
- "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
+ "description": "One of `:danger`, `:default`, or `:invisible`."
},
{
- "name": "reappear",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "ButtonMarketing",
- "status": "alpha",
- "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",
+ "name": "size",
"type": "Symbol",
- "default": "`:default`",
- "description": "One of `:default`, `:outline`, `:primary`, or `:transparent`."
+ "default": "`:medium`",
+ "description": "One of `:large`, `:medium`, or `:small`."
},
{
- "name": "variant",
- "type": "Symbol",
- "default": "`:default`",
- "description": "One of `:default` or `:large`."
- },
- {
"name": "tag",
"type": "Symbol",
- "default": "`:button`",
- "description": "One of `:a` or `:button`."
+ "default": "N/A",
+ "description": "One of `:a`, `:button`, or `:summary`."
},
{
"name": "type",
"type": "Symbol",
- "default": "`:button`",
- "description": "One of `:button` or `:submit`."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
"default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "Dialog",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/",
- "parameters": [
- {
- "name": "id",
- "type": "String",
- "default": "`self.class.generate_id`",
- "description": "The id of the dialog."
+ "description": "One of `:button`, `:reset`, or `:submit`."
},
{
- "name": "title",
+ "name": "aria-label",
"type": "String",
"default": "N/A",
- "description": "Describes the content of the dialog."
+ "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
- "name": "subtitle",
+ "name": "aria-description",
"type": "String",
- "default": "`nil`",
- "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
+ "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": "size",
- "type": "Symbol",
- "default": "`:medium`",
- "description": "The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+ "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": "position",
+ "name": "tooltip_direction",
"type": "Symbol",
- "default": "`:center`",
- "description": "The position of the dialog. One of `:center`, `:left`, or `:right`."
+ "default": "`:s`",
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
- "name": "position_narrow",
- "type": "Symbol",
- "default": "`:inherit`",
- "description": "The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
- },
- {
- "name": "visually_hide_title",
- "type": "Boolean",
- "default": "`false`",
- "description": "If true will hide the heading title, while still making it available to Screen Readers."
- },
- {
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Dropdown",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
+ "component": "Button",
+ "status": "beta",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
"parameters": [
{
- "name": "overlay",
+ "name": "scheme",
"type": "Symbol",
"default": "`:default`",
- "description": "One of `:dark`, `:default`, or `:none`."
+ "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`."
},
{
- "name": "with_caret",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether or not a caret should be rendered in the button."
+ "name": "size",
+ "type": "Symbol",
+ "default": "`:medium`",
+ "description": "One of `:large`, `:medium`, or `:small`."
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "HellipButton",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button/default/",
- "parameters": [
- {
- "name": "inline",
+ "name": "block",
"type": "Boolean",
"default": "`false`",
- "description": "Whether or not the button is inline."
+ "description": "Whether button is full-width with `display: block`."
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "HiddenTextExpander",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/",
- "parameters": [
+ "name": "align_content",
+ "type": "Symbol",
+ "default": "`:center`",
+ "description": "One of `:center` or `:start`."
+ },
{
- "name": "inline",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether or not the expander is inline."
+ "name": "tag",
+ "type": "Symbol",
+ "default": "`:button`",
+ "description": "One of `:a`, `:button`, or `:summary`."
},
{
- "name": "button_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the button element."
+ "name": "type",
+ "type": "Symbol",
+ "default": "`:button`",
+ "description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Image",
+ "component": "SegmentedControl",
"status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image/default/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
"parameters": [
{
- "name": "src",
- "type": "String",
- "default": "N/A",
- "description": "The source url of the image."
+ "name": "hide_labels",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether to hide the labels and only show the icons"
},
{
- "name": "alt",
- "type": "String",
- "default": "N/A",
- "description": "Specifies an alternate text for the image."
- },
- {
- "name": "lazy",
+ "name": "full_width",
"type": "Boolean",
"default": "`false`",
- "description": "Whether or not to lazily load the image."
+ "description": "If the component should be full width"
},
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "ImageCrop",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
- "parameters": [
- {
- "name": "src",
- "type": "String",
- "default": "N/A",
- "description": "The path of the image to crop."
+ "name": "size",
+ "type": "Symbol",
+ "default": "`:medium`",
+ "description": "One of `:large`, `:medium`, or `:small`."
},
{
- "name": "rounded",
- "type": "Boolean",
- "default": "`true`",
- "description": "If the crop mask should be a circle. Defaults to true."
- },
- {
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
@@ -516,102 +302,62 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Menu",
+ "component": "HellipButton",
"status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/menu.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/menu/default/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button/default/",
"parameters": [
{
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "NavList",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/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": "inline",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether or not the button is inline."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "NavList::Item",
+ "component": "Image",
"status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image/default/",
"parameters": [
{
- "name": "selected_item_id",
- "type": "Symbol",
- "default": "`nil`",
- "description": "The ID of the currently selected list item. Used internally."
+ "name": "src",
+ "type": "String",
+ "default": "N/A",
+ "description": "The source url of the image."
},
{
- "name": "selected_by_ids",
- "type": "Array<Symbol>",
- "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": "alt",
+ "type": "String",
+ "default": "N/A",
+ "description": "Specifies an alternate text for the image."
},
{
- "name": "expanded",
+ "name": "lazy",
"type": "Boolean",
"default": "`false`",
- "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
+ "description": "Whether or not to lazily load the image."
},
{
- "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": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "NavList::Section",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/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": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
"component": "OcticonSymbols",
"status": "alpha",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/octicon_symbols.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/octicon_symbols/default/",
"parameters": [
@@ -622,430 +368,98 @@
"description": "List of icons to render, in the format { symbol: :icon_name, size: :small }"
}
]
},
{
- "component": "SegmentedControl",
+ "component": "ImageCrop",
"status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
"parameters": [
{
- "name": "hide_labels",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether to hide the labels and only show the icons"
+ "name": "src",
+ "type": "String",
+ "default": "N/A",
+ "description": "The path of the image to crop."
},
{
- "name": "full_width",
+ "name": "rounded",
"type": "Boolean",
- "default": "`false`",
- "description": "If the component should be full width"
+ "default": "`true`",
+ "description": "If the crop mask should be a circle. Defaults to true."
},
{
- "name": "size",
- "type": "Symbol",
- "default": "`:medium`",
- "description": "One of `:large`, `:medium`, or `:small`."
- },
- {
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "TabContainer",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container/default/",
+ "component": "IconButton",
+ "status": "deprecated",
+ "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": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "TabNav",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/",
- "parameters": [
- {
- "name": "tag",
+ "name": "scheme",
"type": "Symbol",
- "default": "`:nav`",
- "description": "One of `:div` or `:nav`."
+ "default": "`:default`",
+ "description": "One of `:danger` or `:default`."
},
{
- "name": "label",
+ "name": "icon",
"type": "String",
"default": "N/A",
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
},
{
- "name": "body_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the body wrapper."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "TabPanels",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/",
- "parameters": [
- {
- "name": "label",
- "type": "String",
- "default": "N/A",
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
- },
- {
- "name": "align",
+ "name": "tag",
"type": "Symbol",
"default": "N/A",
- "description": "One of `:left` or `:right`. - Defaults to left"
+ "description": "One of `:a`, `:button`, or `:summary`."
},
{
- "name": "body_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the body wrapper."
- },
- {
- "name": "wrapper_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "TextField",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/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": "A list of CSS classes to add to the input. Exists for compatibility with Rails form builders."
- },
- {
- "name": "classes",
- "type": "String",
- "default": "N/A",
- "description": "A list of CSS classes to add to the input. Combined with the `:class` argument."
- },
- {
- "name": "caption",
- "type": "String",
- "default": "N/A",
- "description": "Caption text to render 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": "Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers."
- },
- {
- "name": "size",
+ "name": "type",
"type": "Symbol",
"default": "N/A",
- "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
+ "description": "One of `:button`, `:reset`, or `:submit`."
},
{
- "name": "show_clear_button",
- "type": "Boolean",
- "default": "N/A",
- "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
- },
- {
- "name": "clear_button_id",
+ "name": "aria-label",
"type": "String",
"default": "N/A",
- "description": "The HTML id attribute of the clear button."
+ "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
- "name": "full_width",
- "type": "Boolean",
- "default": "N/A",
- "description": "Controls whether or not the input takes the full width of its container."
- },
- {
- "name": "disabled",
- "type": "Boolean",
- "default": "N/A",
- "description": "Whether or not the input should accept keyboard and mouse input."
- },
- {
- "name": "invalid",
- "type": "Boolean",
- "default": "N/A",
- "description": "If `true`, renders the input in a visually invalid state."
- },
- {
- "name": "placeholder",
+ "name": "aria-description",
"type": "String",
"default": "N/A",
- "description": "Placeholder text."
+ "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": "inset",
- "type": "Boolean",
- "default": "N/A",
- "description": "If `true`, renders the input in a visually inset state."
- },
- {
- "name": "monospace",
- "type": "Boolean",
- "default": "N/A",
- "description": "If `true`, uses a monospace font for the input field."
- },
- {
- "name": "leading_visual",
- "type": "Hash",
- "default": "N/A",
- "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon)."
- },
- {
- "name": "validation_message",
- "type": "String",
- "default": "N/A",
- "description": "A validation message to display beneath the input. Implicitly sets `invalid` to `true`."
- },
- {
- "name": "label_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag."
- },
- {
- "name": "auto_check_src",
- "type": "String",
- "default": "N/A",
- "description": "When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- },
- {
- "name": "block",
- "type": "Proc",
- "default": "N/A",
- "description": "Unused."
- }
- ]
- },
- {
- "component": "ToggleSwitch",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/",
- "parameters": [
- {
- "name": "src",
- "type": "String",
- "default": "`nil`",
- "description": "The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests."
- },
- {
- "name": "csrf_token",
- "type": "String",
- "default": "`nil`",
- "description": "A CSRF token that will be sent to the server as \"authenticity_token\" when the toggle switch is toggled. Unused if `src` is `nil`."
- },
- {
- "name": "checked",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether the toggle switch is on or off."
- },
- {
- "name": "enabled",
- "type": "Boolean",
- "default": "`true`",
- "description": "Whether or not the toggle switch responds to user input."
- },
- {
- "name": "size",
+ "name": "tooltip_direction",
"type": "Symbol",
- "default": "`:medium`",
- "description": "What size toggle switch to render. One of `:end` or `:start`."
- },
- {
- "name": "status_label_position",
- "type": "Symbol",
- "default": "`:start`",
- "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "Tooltip",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
- "parameters": [
- {
- "name": "for_id",
- "type": "String",
- "default": "N/A",
- "description": "The ID of the element that the tooltip should be attached to."
- },
- {
- "name": "type",
- "type": "Symbol",
- "default": "N/A",
- "description": "One of `:description` or `:label`."
- },
- {
- "name": "direction",
- "type": "Symbol",
"default": "`:s`",
"description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
- "name": "text",
- "type": "String",
- "default": "N/A",
- "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
+ "name": "box",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether the button is in a [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "UnderlineNav",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/",
- "parameters": [
- {
- "name": "tag",
- "type": "Symbol",
- "default": "`:nav`",
- "description": "One of `:div` or `:nav`."
- },
- {
- "name": "label",
- "type": "String",
- "default": "N/A",
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
- },
- {
- "name": "align",
- "type": "Symbol",
- "default": "`:left`",
- "description": "One of `:left` or `:right`. - Defaults to left"
- },
- {
- "name": "body_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the body wrapper."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
- "component": "UnderlinePanels",
- "status": "alpha",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/",
- "parameters": [
- {
- "name": "label",
- "type": "String",
- "default": "N/A",
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
- },
- {
- "name": "align",
- "type": "Symbol",
- "default": "`:left`",
- "description": "One of `:left` or `:right`. - Defaults to left"
- },
- {
- "name": "body_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the body wrapper."
- },
- {
- "name": "wrapper_arguments",
- "type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
- },
- {
- "name": "system_arguments",
- "type": "Hash",
- "default": "N/A",
- "description": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
"component": "AutoComplete",
"status": "beta",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/default/",
"parameters": [
@@ -1298,10 +712,66 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Banner",
+ "status": "alpha",
+ "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": "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": "dismissible",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether the component can be dismissed with an \"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 [Octicon](https://primer.style/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": "reappear",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Blankslate",
"status": "beta",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/default/",
"parameters": [
@@ -1364,10 +834,24 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Box",
+ "status": "stable",
+ "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": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Breadcrumbs",
"status": "beta",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/default/",
"parameters": [
@@ -1379,37 +863,31 @@
}
]
},
{
"component": "Button",
- "status": "beta",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
+ "status": "deprecated",
+ "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`, `:primary`, or `:secondary`."
+ "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
},
{
- "name": "size",
+ "name": "variant",
"type": "Symbol",
- "default": "`:medium`",
- "description": "One of `:large`, `:medium`, or `:small`."
+ "default": "`nil`",
+ "description": "DEPRECATED. One of `:medium` or `:small`."
},
{
- "name": "block",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether button is full-width with `display: block`."
- },
- {
- "name": "align_content",
+ "name": "size",
"type": "Symbol",
- "default": "`:center`",
- "description": "One of `:center` or `:start`."
+ "default": "`:medium`",
+ "description": "One of `:medium` or `:small`."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:button`",
@@ -1420,10 +898,28 @@
"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": "[System arguments](/system-arguments)"
}
@@ -1454,10 +950,48 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "ButtonMarketing",
+ "status": "alpha",
+ "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": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "ClipboardCopy",
"status": "beta",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy/default/",
"parameters": [
@@ -1582,10 +1116,92 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Dialog",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/",
+ "parameters": [
+ {
+ "name": "id",
+ "type": "String",
+ "default": "`self.class.generate_id`",
+ "description": "The id of the dialog."
+ },
+ {
+ "name": "title",
+ "type": "String",
+ "default": "N/A",
+ "description": "Describes the content of the dialog."
+ },
+ {
+ "name": "subtitle",
+ "type": "String",
+ "default": "`nil`",
+ "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
+ },
+ {
+ "name": "size",
+ "type": "Symbol",
+ "default": "`:medium`",
+ "description": "The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+ },
+ {
+ "name": "position",
+ "type": "Symbol",
+ "default": "`:center`",
+ "description": "The position of the dialog. One of `:center`, `:left`, or `:right`."
+ },
+ {
+ "name": "position_narrow",
+ "type": "Symbol",
+ "default": "`:inherit`",
+ "description": "The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+ },
+ {
+ "name": "visually_hide_title",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "If true will hide the heading title, while still making it available to Screen Readers."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "Dropdown",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
+ "parameters": [
+ {
+ "name": "overlay",
+ "type": "Symbol",
+ "default": "`:default`",
+ "description": "One of `:dark`, `:default`, or `:none`."
+ },
+ {
+ "name": "with_caret",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether or not a caret should be rendered in the button."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Flash",
"status": "beta",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/flash/default/",
"parameters": [
@@ -1646,76 +1262,28 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "IconButton",
- "status": "beta",
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb",
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/",
+ "component": "HiddenTextExpander",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/",
"parameters": [
{
- "name": "icon",
- "type": "String",
- "default": "N/A",
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
+ "name": "inline",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Whether or not the expander is inline."
},
{
- "name": "wrapper_arguments",
+ "name": "button_arguments",
"type": "Hash",
"default": "`{}`",
- "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
+ "description": "[System arguments](/system-arguments) for the button element."
},
{
- "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": "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": "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": "[System arguments](/system-arguments)"
}
@@ -1764,10 +1332,42 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Layout",
+ "status": "alpha",
+ "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": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Link",
"status": "beta",
"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": [
@@ -1828,10 +1428,74 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Menu",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/menu.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/menu/default/",
+ "parameters": [
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "Navigation::Tab",
+ "status": "alpha",
+ "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 `<ul>` 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": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Octicon",
"status": "beta",
"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": [
@@ -1900,118 +1564,40 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "RelativeTime",
+ "component": "State",
"status": "beta",
- "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/",
+ "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": "datetime",
- "type": "Time",
+ "name": "title",
+ "type": "String",
"default": "N/A",
- "description": "The time to be formatted."
+ "description": "`title` HTML attribute."
},
{
- "name": "tense",
+ "name": "scheme",
"type": "Symbol",
- "default": "`:auto`",
- "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
+ "default": "`:default`",
+ "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
},
{
- "name": "prefix",
- "type": "sring",
- "default": "`nil`",
- "description": "What to prefix the relative ime display with."
- },
- {
- "name": "second",
+ "name": "tag",
"type": "Symbol",
- "default": "`SECOND_DEFAULT`",
- "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
+ "default": "`:span`",
+ "description": "HTML tag for element. One of `:div` or `:span`."
},
{
- "name": "minute",
+ "name": "size",
"type": "Symbol",
- "default": "`MINUTE_DEFAULT`",
- "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
+ "default": "`:default`",
+ "description": "One of `:default` or `:small`."
},
{
- "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": "[System arguments](/system-arguments)"
}
@@ -2042,48 +1628,10 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "State",
- "status": "beta",
- "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": "[System arguments](/system-arguments)"
- }
- ]
- },
- {
"component": "Subhead",
"status": "beta",
"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": [
@@ -2106,10 +1654,24 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "TabContainer",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container/default/",
+ "parameters": [
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Text",
"status": "beta",
"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": [
@@ -2146,321 +1708,789 @@
"description": "[System arguments](/system-arguments)"
}
]
},
{
+ "component": "Tooltip",
+ "status": "deprecated",
+ "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": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
"component": "Truncate",
"status": "beta",
- "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/",
+ "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": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Box",
- "status": "stable",
- "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/",
+ "component": "Truncate",
+ "status": "beta",
+ "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": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Button",
- "status": "deprecated",
- "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/",
+ "component": "UnderlineNav",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/",
"parameters": [
{
- "name": "scheme",
+ "name": "tag",
"type": "Symbol",
- "default": "`:default`",
- "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
+ "default": "`:nav`",
+ "description": "One of `:div` or `:nav`."
},
{
- "name": "variant",
- "type": "Symbol",
- "default": "`nil`",
- "description": "DEPRECATED. One of `:medium` or `:small`."
+ "name": "label",
+ "type": "String",
+ "default": "N/A",
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
},
{
- "name": "size",
+ "name": "align",
"type": "Symbol",
- "default": "`:medium`",
- "description": "One of `:medium` or `:small`."
+ "default": "`:left`",
+ "description": "One of `:left` or `:right`. - Defaults to left"
},
{
- "name": "tag",
- "type": "Symbol",
- "default": "`:button`",
- "description": "One of `:a`, `:button`, or `:summary`."
+ "name": "body_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the body wrapper."
},
{
- "name": "type",
- "type": "Symbol",
- "default": "`:button`",
- "description": "One of `:button`, `:reset`, or `:submit`."
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "UnderlinePanels",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/",
+ "parameters": [
+ {
+ "name": "label",
+ "type": "String",
+ "default": "N/A",
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
},
{
- "name": "group_item",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether button is part of a ButtonGroup."
+ "name": "align",
+ "type": "Symbol",
+ "default": "`:left`",
+ "description": "One of `:left` or `:right`. - Defaults to left"
},
{
- "name": "block",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether button is full-width with `display: block`."
+ "name": "body_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the body wrapper."
},
{
- "name": "dropdown",
- "type": "Boolean",
- "default": "`false`",
- "description": "Whether or not to render a dropdown caret."
+ "name": "wrapper_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "IconButton",
- "status": "deprecated",
- "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/",
+ "component": "TabNav",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/",
"parameters": [
{
- "name": "scheme",
+ "name": "tag",
"type": "Symbol",
- "default": "`:default`",
- "description": "One of `:danger` or `:default`."
+ "default": "`:nav`",
+ "description": "One of `:div` or `:nav`."
},
{
- "name": "icon",
+ "name": "label",
"type": "String",
"default": "N/A",
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
},
{
- "name": "tag",
- "type": "Symbol",
+ "name": "body_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the body wrapper."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
"default": "N/A",
- "description": "One of `:a`, `:button`, or `:summary`."
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "TabPanels",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/",
+ "parameters": [
+ {
+ "name": "label",
+ "type": "String",
+ "default": "N/A",
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
},
{
- "name": "type",
+ "name": "align",
"type": "Symbol",
"default": "N/A",
- "description": "One of `:button`, `:reset`, or `:submit`."
+ "description": "One of `:left` or `:right`. - Defaults to left"
},
{
- "name": "aria-label",
+ "name": "body_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the body wrapper."
+ },
+ {
+ "name": "wrapper_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "Tooltip",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
+ "parameters": [
+ {
+ "name": "for_id",
"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."
+ "description": "The ID of the element that the tooltip should be attached to."
},
{
- "name": "aria-description",
- "type": "String",
+ "name": "type",
+ "type": "Symbol",
"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."
+ "description": "One of `:description` or `:label`."
},
{
- "name": "tooltip_direction",
+ "name": "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 [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
+ "name": "text",
+ "type": "String",
+ "default": "N/A",
+ "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Layout",
+ "component": "ToggleSwitch",
"status": "alpha",
- "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/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/",
"parameters": [
{
- "name": "responsive",
+ "name": "src",
+ "type": "String",
+ "default": "`nil`",
+ "description": "The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests."
+ },
+ {
+ "name": "csrf_token",
+ "type": "String",
+ "default": "`nil`",
+ "description": "A CSRF token that will be sent to the server as \"authenticity_token\" when the toggle switch is toggled. Unused if `src` is `nil`."
+ },
+ {
+ "name": "checked",
"type": "Boolean",
"default": "`false`",
- "description": "Whether to collapse layout to a single column at smaller widths."
+ "description": "Whether the toggle switch is on or off."
},
{
- "name": "side",
+ "name": "enabled",
+ "type": "Boolean",
+ "default": "`true`",
+ "description": "Whether or not the toggle switch responds to user input."
+ },
+ {
+ "name": "size",
"type": "Symbol",
- "default": "`:right`",
- "description": "Which side to display the sidebar on. One of `:left` or `:right`."
+ "default": "`:medium`",
+ "description": "What size toggle switch to render. One of `:end` or `:start`."
},
{
- "name": "sidebar_col",
- "type": "Integer",
- "default": "`3`",
- "description": "Sidebar column width."
+ "name": "status_label_position",
+ "type": "Symbol",
+ "default": "`:start`",
+ "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Navigation::Tab",
+ "component": "NavList",
"status": "alpha",
- "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/",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/",
"parameters": [
{
- "name": "list",
+ "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": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "NavList::Item",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/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<Symbol>",
+ "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 the Tab is an item in a `<ul>` list."
+ "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
},
{
- "name": "selected",
+ "name": "sub_item",
"type": "Boolean",
"default": "`false`",
- "description": "Whether the Tab is selected or not."
+ "description": "Whether or not this item is nested under a parent item. Used internally."
},
{
- "name": "with_panel",
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "NavList::Section",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/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": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "ActionList",
+ "status": "alpha",
+ "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": "role",
"type": "Boolean",
- "default": "`false`",
- "description": "Whether the Tab has an associated panel."
+ "default": "`:list`",
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
},
{
- "name": "panel_id",
+ "name": "item_classes",
"type": "String",
- "default": "`\"\"`",
- "description": "Only applies if `with_panel` is `true`. Unique id of panel."
+ "default": "`nil`",
+ "description": "Additional CSS classes to attach to items."
},
{
- "name": "icon_classes",
+ "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": "`\"\"`",
- "description": "Classes that must always be applied to icons."
+ "default": "`false`",
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
},
{
- "name": "wrapper_arguments",
+ "name": "system_arguments",
"type": "Hash",
- "default": "`{}`",
- "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "ActionList::Divider",
+ "status": "alpha",
+ "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": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Tooltip",
- "status": "deprecated",
- "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/",
+ "component": "ActionList::Heading",
+ "status": "alpha",
+ "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": "list_id",
+ "type": "String",
+ "default": "N/A",
+ "description": "The unique identifier of the sub list the heading belongs to. Used internally."
+ },
+ {
+ "name": "title",
+ "type": "String",
+ "default": "N/A",
+ "description": "Sub list title."
+ },
+ {
+ "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": "tag",
+ "type": "Symbol",
+ "default": "`:h3`",
+ "description": "Semantic tag for the heading."
+ },
+ {
+ "name": "system_arguments",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "[System arguments](/system-arguments)"
+ }
+ ]
+ },
+ {
+ "component": "ActionList::Item",
+ "status": "alpha",
+ "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": "N/A",
- "description": "the text to appear in the tooltip"
+ "description": "Item label."
},
{
- "name": "direction",
+ "name": "label_classes",
"type": "String",
- "default": "`:n`",
- "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
+ "default": "`nil`",
+ "description": "CSS classes that will be added to the label."
},
{
- "name": "align",
+ "name": "content_arguments",
+ "type": "Hash",
+ "default": "`{}`",
+ "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
+ },
+ {
+ "name": "truncate_label",
+ "type": "Boolean",
+ "default": "`false`",
+ "description": "Truncate label with ellipsis."
+ },
+ {
+ "name": "href",
"type": "String",
+ "default": "`nil`",
+ "description": "Link URL."
+ },
+ {
+ "name": "role",
+ "type": "String",
+ "default": "`:listitem`",
+ "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": "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`."
+ "description": "Controls color/style based on behavior."
},
{
- "name": "multiline",
+ "name": "disabled",
"type": "Boolean",
"default": "`false`",
- "description": "Use this when you have long content"
+ "description": "Disabled items are not clickable and visually dim."
},
{
- "name": "no_delay",
+ "name": "description_scheme",
+ "type": "Symbol",
+ "default": "`:block`",
+ "description": "Display description inline with label, or block on the next line."
+ },
+ {
+ "name": "active",
"type": "Boolean",
"default": "`false`",
- "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
+ "description": "Sets an active state on navigational items."
},
{
+ "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": "[System arguments](/system-arguments)"
}
]
},
{
- "component": "Truncate",
- "status": "beta",
- "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/",
+ "component": "TextField",
+ "status": "alpha",
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/",
"parameters": [
{
- "name": "tag",
+ "name": "size",
"type": "Symbol",
- "default": "`:div`",
- "description": "One of `:div`, `:p`, `:span`, or `:strong`."
+ "default": "N/A",
+ "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
},
{
- "name": "inline",
+ "name": "full_width",
"type": "Boolean",
- "default": "`false`",
- "description": "Whether the element is inline (or inline-block)."
+ "default": "N/A",
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
},
{
- "name": "expandable",
+ "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": "`false`",
- "description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
+ "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": "max_width",
- "type": "Integer",
- "default": "`nil`",
- "description": "Sets the max-width of the text."
+ "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 `<label>` tag."
+ },
+ {
+ "name": "scope_name_to_model",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
+ },
+ {
+ "name": "scope_id_to_model",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
+ },
+ {
+ "name": "required",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
+ },
+ {
+ "name": "aria",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
+ },
+ {
+ "name": "data",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
+ },
+ {
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
- "description": "[System arguments](/system-arguments)"
+ "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
+ },
+ {
+ "name": "placeholder",
+ "type": "String",
+ "default": "N/A",
+ "description": "Placeholder text."
+ },
+ {
+ "name": "inset",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "If `true`, renders the input in a visually inset state."
+ },
+ {
+ "name": "monospace",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "If `true`, uses a monospace font for the input field."
+ },
+ {
+ "name": "auto_check_src",
+ "type": "String",
+ "default": "N/A",
+ "description": "When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message."
+ },
+ {
+ "name": "leading_visual",
+ "type": "Hash",
+ "default": "N/A",
+ "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon](/components/beta/octicon) component."
+ },
+ {
+ "name": "show_clear_button",
+ "type": "Boolean",
+ "default": "N/A",
+ "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
+ },
+ {
+ "name": "clear_button_id",
+ "type": "String",
+ "default": "N/A",
+ "description": "The HTML id attribute of the clear button."
}
]
}
]