\n \n \n {hoverCard}\n \n \n )\n}"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "open",
"type": "boolean",
"required": true,
"defaultValue": "false",
"description": "Determines whether the overlay portion of the component should be shown or not."
},
{
"name": "onOpen",
"type": "(gesture: 'anchor-click' | 'anchor-key-press', event?: KeyboardEvent | undefined) => unknown",
"defaultValue": "",
"description": "A callback that is called whenever the overlay is currently closed and an \"open gesture\" is detected."
},
{
"name": "onClose",
"type": "(gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown",
"defaultValue": "",
"description": "A callback that is called whenever the overlay is currently open and a \"close gesture\" is detected."
},
{
"name": "renderAnchor",
"type": ">(props: T) => JSX.Element",
"defaultValue": "",
"description": "A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is required."
},
{
"name": "anchorRef",
"type": "React.RefObject",
"defaultValue": "",
"description": "An override to the internal `renderAnchor` ref that will be used to position the overlay. When `renderAnchor` is `null`, this can be used to make an anchor that is detached from ` AnchoredOverlay `."
},
{
"name": "anchorId",
"type": "string",
"defaultValue": "",
"description": "An override to the internal id that will be passed to the anchor."
},
{
"name": "side",
"type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'",
"defaultValue": "'outside-bottom'",
"description": ""
},
{
"name": "align",
"type": "'start' | 'center' | 'end'",
"defaultValue": "'start'",
"description": ""
},
{
"name": "alignmentOffset",
"type": "number",
"defaultValue": "4",
"description": "An additional offset, in pixels, to move the floating element from the aligning edge. Positive values move the floating element in the direction of center-alignment. Negative values move the floating element away from center-alignment. When align is `'center`, positive offsets move the floating element right (top or bottom anchor side) or down (left or right anchor side). If using outside positioning, or if `align` is set to `'center'`, this defaults to `0` instead of `4`."
},
{
"name": "anchorOffset",
"type": "number",
"defaultValue": "4",
"description": "The number of pixels between the anchor edge and the floating element. Positive values move the floating element farther from the anchor element (for outside positioning) or further inside the anchor element (for inside positioning). Negative values have the opposite effect. If `side` is set to `'inside-center'`, this defaults to `0` instead of `4`."
},
{
"name": "overlayProps",
"type": "Partial",
"defaultValue": "",
"description": "Props to be spread on the internal `Overlay` component."
},
{
"name": "focusTrapSettings",
"type": "Partial",
"defaultValue": "",
"description": "Settings to apply to the focus trap on the internal `Overlay` component."
},
{
"name": "focusZoneSettings",
"type": "Partial",
"defaultValue": "",
"description": "Settings to apply to the focus zone on the internal `Overlay` component."
},
{
"name": "className",
"type": "string",
"defaultValue": "",
"description": "Class name for custom styling."
},
{
"name": "preventOverflow",
"type": "boolean",
"defaultValue": "true",
"description": "Determines if the Overlay width should be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport."
},
{
"name": "height",
"type": "'small' | 'initial' | 'large' | 'medium' | 'auto' | 'fit-content' | 'xsmall' | 'xlarge'",
"required": false,
"description": "",
"defaultValue": ""
},
{
"name": "width",
"type": "'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'xxlarge'",
"required": false,
"description": "",
"defaultValue": ""
},
{
"name": "pinPosition",
"type": "boolean",
"required": false,
"description": "If true, the overlay will attempt to prevent position shifting when sitting at the top of the anchor.",
"defaultValue": "false"
}
]
},
"autocomplete": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Autocomplete",
"id": "autocomplete",
"name": "Autocomplete",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-autocomplete--default",
"code": "() => {\n return (\n event.preventDefault()}\n >\n \n \n Label\n \n \n \n \n \n \n \n \n \n )\n}"
},
{
"id": "components-autocomplete-features--with-token-input",
"code": "() => {\n const [tokens, setTokens] = useState([])\n const selectedTokenIds = tokens.map((token) => token.id)\n const [selectedItemIds, setSelectedItemIds] =\n useState>(selectedTokenIds)\n const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n setTokens(tokens.filter((token) => token.id !== tokenId))\n setSelectedItemIds(selectedItemIds.filter((id) => id !== tokenId))\n }\n const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n if (!Array.isArray(newlySelectedItems)) {\n return\n }\n setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n if (newlySelectedItems.length < selectedItemIds.length) {\n const newlySelectedItemIds = newlySelectedItems.map(({ id }) => id)\n const removedItemIds = selectedTokenIds.filter(\n (id) => !newlySelectedItemIds.includes(id),\n )\n for (const removedItemId of removedItemIds) {\n onTokenRemove(removedItemId)\n }\n return\n }\n setTokens(\n newlySelectedItems.map(({ id, text }) => ({\n id,\n text,\n })),\n )\n }\n return (\n \n \n \n Default label\n \n \n \n \n \n \n \n \n \n )\n}"
},
{
"id": "components-autocomplete-features--add-new-item",
"code": "() => {\n const [inputValue, setInputValue] = React.useState('')\n return (\n \n \n \n Label\n \n \n {\n setInputValue(e.currentTarget.value)\n }}\n />\n \n item.text).includes(inputValue)\n ? {\n text: inputValue,\n id: inputValue,\n // `handleAddItem` callback isn't needed for this specific example,\n // but it's included here to show that it exists\n handleAddItem: (selectedItem) => {\n // eslint-disable-next-line no-console\n console.log('added item:', selectedItem)\n return\n },\n }\n : undefined\n }\n items={items}\n />\n \n \n \n \n )\n}"
},
{
"id": "components-autocomplete-features--custom-search-filter-fn",
"code": "() => {\n const [filterVal, setFilterVal] = useState('')\n const handleChange: ChangeEventHandler = (e) => {\n setFilterVal(e.currentTarget.value)\n }\n const customFilterFn = (item: Datum) => item.text.includes(filterVal)\n return (\n \n \n \n Default label\n \n \n \n \n \n \n \n \n Items in dropdown are filtered if their text has no part that matches\n the input value\n \n \n \n )\n}"
},
{
"id": "components-autocomplete-features--custom-sort-after-menu-close",
"code": "() => {\n const [selectedItemIds, setSelectedItemIds] = useState>([])\n const isItemSelected = (itemId: string) => selectedItemIds.includes(itemId)\n const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n if (!Array.isArray(newlySelectedItems)) {\n return\n }\n setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n }\n const customSortFn = (itemIdA: string, itemIdB: string) =>\n isItemSelected(itemIdA) === isItemSelected(itemIdB)\n ? 0\n : isItemSelected(itemIdA)\n ? 1\n : -1\n return (\n \n \n \n Default label\n \n \n \n \n \n \n \n \n When the dropdown closes, selected items are sorted to the end\n \n \n \n )\n}"
},
{
"id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes",
"code": "() => {\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const onOpenChange = (isOpen: boolean) => {\n setIsMenuOpen(isOpen)\n }\n return (\n \n \n \n Default label\n \n \n \n \n \n \n \n \n
\n The menu is {isMenuOpen ? 'opened' : 'closed'}\n
\n The Autocomplete.Overlay is portalled to a div inside the Dialog to\n ensure it appears above the dialog in the stacking context.\n
\n \n )\n}"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "id",
"type": "string",
"description": "May be used to customize how the ID is set on the text input to be used by ARIA attributes on related elements.",
"defaultValue": ""
}
],
"subcomponents": [
{
"name": "Autocomplete.Input",
"props": [
{
"name": "as",
"type": "React.ElementType",
"defaultValue": "TextInput"
},
{
"name": "openOnFocus",
"type": "boolean",
"defaultValue": "false",
"description": "Whether the associated autocomplete menu should open on an input focus event",
"deprecated": true
}
],
"passthrough": {
"element": "TextInput",
"url": "/react/TextInput"
}
},
{
"name": "Autocomplete.Overlay",
"props": [
{
"name": "menuAnchorRef",
"type": "React.RefObject"
},
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "overlayProps",
"deprecated": true,
"type": "Partial",
"description": "Props to be spread on the internal `Overlay` component."
}
],
"passthrough": {
"element": "Overlay",
"url": "/react/Overlay"
}
},
{
"name": "Autocomplete.Menu",
"props": [
{
"name": "items",
"required": true,
"type": "T[]",
"description": "The options for field values that are displayed in the dropdown menu. One or more may be selected depending on the value of the `selectionVariant` prop."
},
{
"name": "selectedItemIds",
"required": true,
"type": "string[]",
"description": "The IDs of the selected items"
},
{
"name": "aria-labelledby",
"required": true,
"type": "string"
},
{
"name": "addNewItem",
"type": "Omit & { handleAddItem: (item: Omit) => void; }",
"description": "A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop. This menu item gets appended to the end of the list of options."
},
{
"name": "emptyStateText",
"type": "React.ReactNode | false",
"description": "The text that appears in the menu when there are no options in the array passed to the `items` prop."
},
{
"name": "filterFn",
"type": "(item: T, i: number) => boolean",
"description": "A custom function used to filter the options in the array passed to the `items` prop. By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive."
},
{
"name": "loading",
"type": "boolean",
"description": "Whether the data is loading for the menu items"
},
{
"name": "sortOnCloseFn",
"type": "(itemIdA: string | number, itemIdB: string | number) => number",
"description": "The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu. By default, selected items are sorted to the top after the user closes the menu."
},
{
"name": "selectionVariant",
"type": "'single' | 'multiple'",
"description": "Whether there can be one item selected from the menu or multiple items selected from the menu"
},
{
"name": "onOpenChange",
"type": "(open: boolean) => void",
"description": "Function that gets called when the menu is opened or closed"
},
{
"name": "onSelectedChange",
"type": "(item: T | T[]) => void",
"description": "The function that is called when an item in the list is selected or deselected"
},
{
"name": "customScrollContainerRef",
"type": "React.MutableRefObject",
"description": "If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component, pass the ref of that element to `customScrollContainerRef` to ensure the container automatically scrolls when the user highlights an item in the menu that is outside the scroll container"
}
]
}
]
},
"avatar": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Avatar",
"id": "avatar",
"name": "Avatar",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-avatar--default",
"code": "() => "
},
{
"id": "components-avatar-features--square",
"code": "() => (\n \n)"
},
{
"id": "components-avatar-features--square-sx-prop",
"code": "() => (\n \n)"
},
{
"id": "components-avatar-features--size",
"code": "() => (\n
\n In these examples, a live region has been implemented to communicate the\n change.\n
\n \n )\n}"
},
{
"id": "components-button-features--trailing-action",
"code": "() => "
},
{
"id": "components-button-features--block",
"code": "() => "
},
{
"id": "components-button-features--disabled",
"code": "() => (\n \n \n \n \n \n \n)"
},
{
"id": "components-button-features--inactive",
"code": "() => (\n \n \n \n \n \n \n)"
},
{
"id": "components-button-features--small",
"code": "() => "
},
{
"id": "components-button-features--medium",
"code": "() => "
},
{
"id": "components-button-features--large",
"code": "() => "
},
{
"id": "components-button-features--loading",
"code": "() => "
},
{
"id": "components-button-features--loading-custom-announcement",
"code": "() => (\n \n)"
},
{
"id": "components-button-features--loading-with-leading-visual",
"code": "() => (\n \n)"
},
{
"id": "components-button-features--loading-with-trailing-visual",
"code": "() => (\n \n)"
},
{
"id": "components-button-features--loading-with-trailing-action",
"code": "() => (\n \n)"
},
{
"id": "components-button-features--loading-trigger",
"code": "() => {\n const [isLoading, setIsLoading] = useState(false)\n const handleClick = () => {\n setIsLoading(true)\n }\n return (\n \n Export\n \n )\n}"
},
{
"id": "components-button-features--label-wrap",
"code": "() => {\n return (\n \n \n \n \n \n \n )\n}"
},
{
"id": "components-button-features--inactive-button-with-tooltip",
"code": "() => (\n \n \n \n)"
},
{
"id": "components-button-features--expanded-button",
"code": "() => (\n \n \n \n \n \n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "alignContent",
"type": "'start' | 'center'",
"description": "Content alignment for when visuals are present."
},
{
"name": "as",
"type": "React.ElementType",
"defaultValue": "'button'"
},
{
"name": "block",
"type": "boolean",
"description": "Allow button width to fill its container."
},
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "The content of the button."
},
{
"name": "count",
"type": "number",
"description": "For counter buttons, the number to display."
},
{
"name": "inactive",
"type": "boolean",
"description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.\n This is intended to be used when a system error such as an outage prevents the button from performing its usual action.\n Inactive styles are slightly different from disabled styles because inactive buttons need to have an accessible color contrast ratio. This is because inactive buttons can have tooltips or perform an action such as opening a dialog explaining why it's inactive.\n If both `disabled` and `inactive` are true, `disabled` takes precedence."
},
{
"name": "leadingIcon",
"type": "React.ComponentType",
"description": "An icon to display before the button text.",
"deprecated": true
},
{
"name": "leadingVisual",
"type": "React.ElementType",
"description": "A visual to display before the button text."
},
{
"name": "loading",
"type": "boolean",
"description": "When true, the button is in a loading state."
},
{
"name": "loadingAnnouncement",
"type": "string",
"description": "The content to announce to screen readers when loading. This requires `loading` prop to be true"
},
{
"name": "ref",
"type": "React.RefObject"
},
{
"name": "size",
"type": "'small'\n| 'medium'\n| 'large'",
"defaultValue": "'medium'"
},
{
"name": "sx",
"type": "SystemStyleObject"
},
{
"name": "trailingIcon",
"type": "React.ComponentType",
"description": "An icon to display after the button text.",
"deprecated": true
},
{
"name": "trailingVisual",
"type": "React.ElementType",
"description": "A visual to display after the button text."
},
{
"name": "trailingAction",
"type": "React.ElementType",
"description": "Trailing action appears to the right of the trailing visual and is always locked to the end"
},
{
"name": "variant",
"type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'\n| 'link'",
"defaultValue": "'default'",
"description": "Change the visual style of the button."
},
{
"name": "labelWrap",
"type": "boolean",
"defaultValue": "false",
"description": "Whether the button label should wrap to multiple lines of it is longer than the button width."
},
{
"name": "disabled",
"type": "boolean",
"description": "Avoid disabling buttons because it will make them inaccessible to users who rely on keyboard navigation. Buttons that are disabled can not be clicked, selected, or navigated through.",
"defaultValue": ""
}
],
"passthrough": {
"element": "button",
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
}
},
"icon_button": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Button",
"id": "icon_button",
"name": "IconButton",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-iconbutton--default",
"code": "() => "
},
{
"id": "components-iconbutton-features--primary",
"code": "() => "
},
{
"id": "components-iconbutton-features--danger",
"code": "() => "
},
{
"id": "components-iconbutton-features--invisible",
"code": "() => "
},
{
"id": "components-iconbutton-features--disabled",
"code": "() => "
},
{
"id": "components-iconbutton-features--small",
"code": "() => "
},
{
"id": "components-iconbutton-features--medium",
"code": "() => "
},
{
"id": "components-iconbutton-features--large",
"code": "() => "
},
{
"id": "components-iconbutton-features--with-description",
"code": "() => (\n \n)"
},
{
"id": "components-iconbutton-features--external-tooltip",
"code": "() => (\n \n \n \n)"
},
{
"id": "components-iconbutton-features--external-tooltip-version-1",
"code": "() => (\n \n \n \n)"
},
{
"id": "components-iconbutton-features--as-a-menu-anchor",
"code": "() => (\n \n \n \n \n\n \n \n alert('Copy link clicked')}>\n Copy link\n ⌘C\n \n alert('Quote reply clicked')}>\n Quote reply\n ⌘Q\n \n alert('Edit comment clicked')}>\n Edit comment\n ⌘E\n \n \n alert('Delete file clicked')}\n >\n Delete file\n ⌘D\n \n \n \n \n)"
},
{
"id": "components-iconbutton-features--loading",
"code": "() => (\n \n)"
},
{
"id": "components-iconbutton-features--loading-trigger",
"code": "() => {\n const [isLoading, setIsLoading] = useState(false)\n const handleClick = () => {\n setIsLoading(true)\n setTimeout(() => {\n setIsLoading(false)\n }, 3000)\n }\n return (\n \n )\n}"
},
{
"id": "components-iconbutton-features--keybinding-hint-on-description",
"code": "() => (\n \n)"
},
{
"id": "components-iconbutton-features--keybinding-hint",
"code": "() => "
}
],
"importPath": "@primer/react",
"props": [
{
"name": "children",
"type": "React.ReactNode",
"defaultValue": "",
"required": true,
"description": "This will be the Button description."
},
{
"name": "variant",
"type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible' | 'link'",
"defaultValue": "",
"description": "Changes the look and feel of the button which is different for each variant"
},
{
"name": "size",
"type": "'small' | 'medium' | 'large'",
"defaultValue": "",
"description": "Changes the size of the icon button component"
},
{
"name": "inactive",
"type": "boolean",
"description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
},
{
"name": "icon",
"type": "Component",
"defaultValue": "",
"description": "provide an octicon. It will be placed in the center of the button"
},
{
"name": "aria-label",
"type": "string",
"defaultValue": "",
"description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
},
{
"name": "keyshortcuts",
"type": "string",
"defaultValue": "",
"deprecated": true,
"description": "Use `keybindingHint` instead."
},
{
"name": "keybindingHint",
"type": "string",
"description": "Optional keybinding hint to show in the tooltip for this button. See the `KeybindingHint` component documentation for the correct format for this string. Has no effect if tooltip is overridden or disabled. Does **not** bind any keybindings for this button - this is only for visual hints."
},
{
"name": "tooltipDirection",
"type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
"defaultValue": "'s'",
"description": "The direction of the tooltip. ",
"required": false
},
{
"name": "description",
"type": "string",
"required": false,
"description": "If `description` is provided, we will use a Tooltip to describe the button. Then `aria-label` is used to label the button.",
"defaultValue": ""
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": []
},
"button_group": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/ButtonGroup",
"id": "button_group",
"name": "ButtonGroup",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-buttongroup--default",
"code": "() => (\n \n \n \n \n \n)"
},
{
"id": "components-buttongroup-features--icon-buttons",
"code": "() => (\n \n {/* We can remove these unsafe props after we resolve https://github.com/primer/react/issues/4129 */}\n \n \n \n)"
},
{
"id": "components-buttongroup-features--loading-buttons",
"code": "() => {\n const handleClick = () => {}\n return (\n \n \n \n \n \n \n \n )\n}"
},
{
"id": "components-buttongroup-features--dropdown-split",
"code": "() => {\n const actions = ['Action one', 'Action two', 'Action three']\n const [selectedActionIndex, setSelectedActionIndex] =\n React.useState(0)\n const selectedAction = actions[selectedActionIndex]\n return (\n \n {\n alert(`Activated ${selectedAction}`)\n }}\n >\n {selectedAction}\n \n \n \n \n \n {actions.map((action, index) => {\n return (\n {\n setSelectedActionIndex(index)\n }}\n >\n {action}\n \n )\n })}\n \n \n \n \n )\n}"
},
{
"id": "components-buttongroup-features--as-toolbar",
"code": "() => (\n \n \n \n \n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "sx",
"type": "SystemStyleObject"
},
{
"name": "ref",
"type": "React.RefObject"
}
],
"subcomponents": []
},
"checkbox": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Checkbox",
"id": "checkbox",
"name": "Checkbox",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-checkbox--default",
"code": "() => (\n \n \n \n Default label\n \n \n)"
},
{
"id": "components-checkbox-features--with-leading-visual",
"code": "() => {\n return (\n \n \n \n \n \n \n Default label\n \n \n )\n}"
},
{
"id": "components-checkbox-features--disabled",
"code": "() => {\n return (\n \n \n \n Default label\n \n \n )\n}"
},
{
"id": "components-checkbox-features--with-caption",
"code": "() => {\n return (\n \n \n \n Default label\n This is a caption\n \n \n )\n}"
},
{
"id": "components-checkbox-features--indeterminate",
"code": "() => (\n \n \n \n Default label\n \n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "checked",
"type": "boolean",
"defaultValue": "",
"description": "Modifies true/false value of the native checkbox"
},
{
"name": "defaultChecked",
"type": "boolean",
"defaultValue": "",
"description": "Checks the input by default in uncontrolled mode"
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "",
"description": "Modifies the native disabled state of the native checkbox"
},
{
"name": "indeterminate",
"type": "boolean",
"defaultValue": "false",
"description": "Applies an [ indeterminate state ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) to the checkbox"
},
{
"name": "onChange",
"type": "(event: React.ChangeEvent) => void",
"defaultValue": "",
"description": "A callback function that is triggered when the checked state has been changed"
},
{
"name": "validationStatus",
"type": "'error' | 'success'",
"defaultValue": "",
"description": "Only used to inform ARIA attributes. Individual checkboxes do not have validation styles."
},
{
"name": "value",
"type": "string",
"defaultValue": "",
"description": "A unique value that is never shown to the user. Used during form submission and to identify which checkbox inputs are selected."
},
{
"name": "ref",
"type": "React.RefObject"
},
{
"name": "as",
"type": "React.ElementType",
"defaultValue": "\"input\""
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": []
},
"checkbox_group": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/CheckboxGroup",
"id": "checkbox_group",
"name": "CheckboxGroup",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-checkboxgroup--default",
"code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n)"
},
{
"id": "components-checkboxgroup-features--visually-hidden-label",
"code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n)"
},
{
"id": "components-checkboxgroup-features--with-external-label",
"code": "() => (\n <>\n \n External label\n \n \n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n \n)"
},
{
"id": "components-checkboxgroup-features--error",
"code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n Something went wrong\n \n \n)"
},
{
"id": "components-checkboxgroup-features--success",
"code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n Great job!\n \n \n)"
},
{
"id": "components-checkboxgroup-features--caption",
"code": "() => (\n \n Choices\n Caption\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "aria-labelledby",
"type": "string",
"defaultValue": "",
"description": "Used when associating the input group with a label other than CheckboxGroup.Label"
},
{
"name": "children",
"type": "CheckboxGroup.Label | CheckboxGroup.Caption | CheckboxGroup.Validation | FormControl",
"defaultValue": "",
"required": true,
"description": ""
},
{
"name": "disabled",
"type": "boolean",
"defaultValue": "false",
"description": "Whether the input group allows user input"
},
{
"name": "id",
"type": "string",
"defaultValue": "a generated string",
"description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text. You may want a custom ID to make it easier to select elements in integration tests. "
},
{
"name": "onChange",
"type": "(selected: string[], e?: ChangeEvent) => void",
"defaultValue": "",
"description": "An onChange handler that gets called when the selection changes"
},
{
"name": "required",
"type": "boolean",
"defaultValue": "false",
"description": "If true, the user must make a selection before the owning form can be submitted"
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "CheckboxGroup.Label",
"props": [
{
"name": "visuallyHidden",
"type": "boolean",
"defaultValue": "false",
"description": "If true, the fieldset legend will be visually hidden"
},
{
"name": "sx",
"type": "SystemStyleObject"
}
]
},
{
"name": "CheckboxGroup.Caption",
"props": [
{
"name": "children",
"type": "React.ReactNode",
"defaultValue": "",
"description": "The caption content"
},
{
"name": "sx",
"type": "SystemStyleObject"
}
]
},
{
"name": "CheckboxGroup.Validation",
"props": [
{
"name": "children",
"type": "React.ReactNode",
"defaultValue": "",
"description": "The validation message"
},
{
"name": "variant",
"type": "'error' | 'success'",
"defaultValue": "",
"required": true,
"description": "Changes the visual style to match the validation status"
},
{
"name": "sx",
"type": "SystemStyleObject"
}
]
}
]
},
"circle_badge": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/CircleBadge",
"id": "circle_badge",
"name": "CircleBadge",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-circlebadge--default",
"code": "() => (\n \n \n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "variant",
"type": "'small' | 'medium' | 'large'",
"defaultValue": "'medium'",
"description": "Creates a smaller or larger badge. Has no effect if the `size` prop is set"
},
{
"name": "size",
"type": "number",
"defaultValue": "",
"description": "Sets the size of the badge in pixels. Overrides the `variant` prop when set"
},
{
"name": "inline",
"type": "boolean",
"defaultValue": "false",
"description": "Styles the badge to `display: inline`"
},
{
"name": "ref",
"type": "React.RefObject"
},
{
"name": "as",
"type": "React.ElementType",
"defaultValue": "\"div\""
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "CircleBadge.Icon",
"props": [
{
"name": "as",
"type": "React.ElementType",
"defaultValue": "Octicon"
}
],
"passthrough": {
"element": "Octicon",
"url": "/Octicon"
}
}
]
},
"circle_octicon": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
"id": "circle_octicon",
"name": "CircleOcticon",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-circleocticon--default",
"code": "() => (\n \n)"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "icon",
"type": "Octicon"
},
{
"name": "size",
"defaultValue": "32",
"type": "number",
"description": "Set the width and height of the icon in pixels."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": []
},
"counter_label": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/CounterLabel",
"id": "counter_label",
"name": "CounterLabel",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-counterlabel--default",
"code": "() => 12"
},
{
"id": "components-counterlabel-features--primary-theme",
"code": "() => 12"
},
{
"id": "components-counterlabel-features--secondary-theme",
"code": "() => 12"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "scheme",
"type": "'primary' | 'secondary'",
"defaultValue": "",
"description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme"
},
{
"name": "className",
"type": "string",
"description": "Class name(s) for custom styling.",
"defaultValue": ""
},
{
"name": "sx",
"type": "BetterSystemStyleObject"
}
],
"subcomponents": []
},
"data_table": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/DataTable",
"id": "data_table",
"name": "DataTable",
"status": "alpha",
"a11yReviewed": true,
"stories": [
{
"id": "experimental-components-datatable--default",
"code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-title",
"code": "() => (\n \n \n Repositories\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-title-and-subtitle",
"code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-sorting",
"code": "() => {\n const rows = Array.from(data).sort((a, b) => {\n return b.updatedAt - a.updatedAt\n })\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n sortBy: 'datetime',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n initialSortColumn=\"updatedAt\"\n initialSortDirection=\"DESC\"\n />\n \n )\n}"
},
{
"id": "experimental-components-datatable-features--with-actions",
"code": "() => (\n \n \n Repositories\n \n \n \n \n \n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-action",
"code": "() => (\n \n \n Repositories\n \n \n \n \n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-row-action",
"code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n {\n action('Download')(row)\n }}\n />\n )\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-row-actions",
"code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n <>\n {\n action('Edit')(row)\n }}\n />\n {\n action('Delete')(row)\n }}\n />\n \n )\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-row-action-menu",
"code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n \n \n \n \n \n \n {\n action('Copy')(row)\n }}\n >\n Copy row\n \n Edit row\n Export row as CSV\n \n \n Delete row\n \n \n \n \n )\n },\n },\n ]}\n />\n \n)"
},
{
"id": "experimental-components-datatable-features--with-custom-heading",
"code": "() => (\n <>\n \n Security coverage\n \n
\n Organization members can only see data for the most recently-updated\n repositories. To see all repositories, talk to your organization\n administrator about becoming a security manager.\n
\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n \n)"
},
{
"id": "experimental-components-datatable-features--with-no-content",
"code": "() => {\n const exampleEmptyData: Array = []\n return exampleEmptyData.length === 0 ? (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n Primary action\n \n \n Secondary action link\n \n \n ) : (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n )\n}"
},
{
"id": "experimental-components-datatable-features--with-loading",
"code": "() => {\n const [loading] = React.useState(true)\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {loading ? (\n \n ) : (\n \n )}\n \n )\n}"
},
{
"id": "experimental-components-datatable-features--with-pagination",
"code": "() => {\n const pageSize = 10\n const [pageIndex, setPageIndex] = React.useState(0)\n const start = pageIndex * pageSize\n const end = start + pageSize\n const rows = repos.slice(start, end)\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n {\n setPageIndex(pageIndex)\n }}\n />\n \n )\n}"
}
],
"importPath": "@primer/react/experimental",
"props": [
{
"name": "aria-describedby",
"type": "string",
"description": "Provide an id to an element which uniquely describes this table"
},
{
"name": "aria-labelledby",
"type": "string",
"description": "Provide an id to an element which uniquely labels this table"
},
{
"name": "data",
"type": "Array",
"description": "Provide a collection of the rows which will be rendered inside of the table"
},
{
"name": "columns",
"type": "Array>",
"description": "Provide the columns for the table and the fields in `data` to which they correspond"
},
{
"name": "cellPadding",
"type": "'condensed' | 'normal' | 'spacious'",
"description": "Specify the amount of space that should be available around the contents of a cell"
},
{
"name": "aria-describedby",
"type": "string",
"required": false,
"description": "Provide an id to an element which uniquely describes this table",
"defaultValue": ""
},
{
"name": "aria-labelledby",
"type": "string",
"required": false,
"description": "Provide an id to an element which uniquely labels this table",
"defaultValue": ""
},
{
"name": "initialSortColumn",
"type": "string | number",
"required": false,
"description": "Provide the id or field of the column by which the table is sorted. When\nusing this `prop`, the input data must be sorted by this column in\nascending order",
"defaultValue": ""
},
{
"name": "initialSortDirection",
"type": "'ASC' | 'DESC'",
"required": false,
"description": "Provide the sort direction that the table should be sorted by on the\ncurrently sorted column",
"defaultValue": ""
}
],
"subcomponents": [
{
"name": "Table",
"props": [
{
"name": "aria-describedby",
"type": "string",
"description": "Provide an id to an element which uniquely describes this table"
},
{
"name": "aria-labelledby",
"type": "string",
"description": "Provide an id to an element which uniquely labels this table"
},
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "cellPadding",
"type": "'condensed' | 'normal' | 'spacious'",
"description": "Specify the amount of space that should be available around the contents of a cell"
}
]
},
{
"name": "Table.Head",
"props": [
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Actions",
"props": [
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Body",
"props": [
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Row",
"props": [
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Header",
"props": [
{
"name": "align",
"type": "'end' | 'start'",
"required": false,
"description": "The horizontal alignment of the cell's content",
"defaultValue": ""
},
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Cell",
"props": [
{
"name": "align",
"type": "'end' | 'start'",
"required": false,
"description": "The horizontal alignment of the cell's content",
"defaultValue": ""
},
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "scope",
"type": "'row'",
"description": "Provide the scope for a table cell, useful for defining a row header using `scope=\"row\"`"
}
]
},
{
"name": "Table.CellPlaceholder",
"props": []
},
{
"name": "Table.Container",
"props": [
{
"name": "children",
"type": "React.ReactNode"
}
]
},
{
"name": "Table.Divider",
"props": []
},
{
"name": "Table.Title",
"props": [
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "id",
"type": "string",
"required": true,
"description": "Provide a unique id for the table subtitle. This should be used along with\n`aria-labelledby` on `DataTable`"
}
]
},
{
"name": "Table.Subtitle",
"props": [
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "id",
"type": "string",
"required": true,
"description": "Provide a unique id for the table subtitle. This should be used along with\n`aria-describedby` on `DataTable`"
}
]
},
{
"name": "Table.Skeleton",
"props": [
{
"name": "cellPadding",
"type": "'condensed' | 'normal' | 'spacious'",
"description": "Specify the amount of space that should be available around the contents of a cell",
"defaultValue": "normal"
},
{
"name": "columns",
"required": true,
"type": "Array>"
},
{
"name": "rows",
"type": "number",
"description": "Optionally specify the number of rows which should be included in the skeleton state of the component",
"defaultValue": "10"
}
]
},
{
"name": "Table.Pagination",
"props": [
{
"name": "aria-label",
"type": "string",
"required": true,
"description": "Defines a string value that labels the current element.\nProvide a label for the navigation landmark rendered by this component\n@see aria-labelledby."
},
{
"name": "defaultPageIndex",
"type": "string",
"description": "Provide an optional index to specify the default selected page"
},
{
"name": "id",
"type": "string",
"description": "Optionally provide an `id` that is placed on the navigation landmark\nrendered by this component"
},
{
"name": "onChange",
"type": "({ pageIndex }: { pageIndex: number }) => void",
"description": "Optionally provide a handler that is called whenever the pagination state\nis updated"
},
{
"name": "pageSize",
"type": "number",
"description": "Optionally specify the number of items within a page",
"defaultValue": "25"
},
{
"name": "totalCount",
"type": "number",
"required": true,
"description": "Specify the total number of items within the collection"
},
{
"name": "showPages",
"type": "boolean | { narrow?: boolean; regular?: boolean; wide?: boolean; }",
"required": false,
"description": "Whether to show the page numbers",
"defaultValue": "{narrow: false}"
}
]
},
{
"name": "Table.ErrorDialog",
"props": [
{
"name": "children",
"required": true,
"type": "React.ReactNode",
"description": "The content of the dialog. This is usually a message explaining the error."
},
{
"name": "title",
"type": "string",
"defaultValue": "'Error'",
"description": "The title of the dialog. This is usually a short description of the error."
},
{
"name": "onRetry",
"type": "() => void",
"description": "Event handler called when the user clicks the retry button."
},
{
"name": "onDismiss",
"type": "() => void",
"description": "Event handler called when the dialog is dismissed."
}
]
},
{
"name": "Table.SortHeader",
"props": [
{
"name": "direction",
"type": "'ASC' | 'DESC' | 'NONE'",
"required": true,
"description": "Specify the sort direction for the TableHeader",
"defaultValue": ""
},
{
"name": "onToggleSort",
"type": "() => void",
"required": true,
"description": "Provide a handler that is called when the sortable TableHeader is\ninteracted with via a click or keyboard interaction",
"defaultValue": ""
},
{
"name": "align",
"type": "'end' | 'start'",
"description": "The horizontal alignment of the cell's content",
"defaultValue": ""
}
]
},
{
"name": "Column options",
"props": [
{
"name": "align",
"type": "'start' | 'end'",
"description": "The horizontal alignment of the column's content"
},
{
"name": "field",
"type": "ObjectPaths",
"description": "Optionally provide a field to render for this column. This may be the key of the object or a string that accesses nested objects through `.`. For example: `field: a.b.c` \n Alternatively, you may provide a `renderCell` for this column to render the field in a row"
},
{
"name": "header",
"type": "string | (() => React.ReactNode)",
"required": true,
"description": "Provide the name of the column. This will be rendered as a table header within the table itself"
},
{
"name": "maxWidth",
"type": "React.CSSProperties['maxWidth']",
"description": "The maximum width the column can grow to"
},
{
"name": "minWidth",
"type": "React.CSSProperties['minWidth']",
"description": "The minimum width the column can grow to"
},
{
"name": "renderCell",
"type": "(data: Data) => React.ReactNode",
"description": "Provide a custom component or render prop to render the data for this column in a row"
},
{
"name": "rowHeader",
"type": "boolean",
"description": "Specify if the value of this column for a row should be treated as a row header"
},
{
"name": "sortBy",
"type": "boolean | 'alphanumeric' | 'basic' | 'datetime' | (a: Data, b: Data) => number",
"description": "Specify if the table should sort by this column and, if applicable, a specific sort strategy or custom sort strategy"
},
{
"name": "width",
"defaultValue": "'grow'",
"type": "'grow' | 'growCollapse' | 'auto' | React.CSSProperties['width']",
"description": " Controls the width of the column.\n - 'grow': Stretch to fill available space, and min width is the width of the widest cell in the column\n - 'growCollapse': Stretch to fill available space or shrink to fit in the available space. Allows the column to shrink smaller than the cell content's width.\n - 'auto': The column is the width of it’s widest cell. Not intended for use with columns who’s content length varies a lot because a layout shift will occur when the content changes \n - explicit width: Will be exactly that width and will not grow or shrink to fill the parent"
}
]
}
]
},
"details": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Details",
"id": "details",
"name": "Details",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-details--default",
"code": "() => {\n const { getDetailsProps } = useDetails({\n closeOnOutsideClick: true,\n })\n return (\n \n See Details\n This is some content\n \n )\n}"
}
],
"importPath": "@primer/react",
"props": [
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "Details.Summary",
"props": [
{
"name": "as",
"type": "React.ElementType>",
"defaultValue": "summary",
"required": false,
"description": "HTML element to render summary as."
},
{
"name": "children",
"type": "React.ReactNode"
},
{
"name": "sx",
"type": "SystemStyleObject"
}
]
}
]
},
"dialog_v2": {
"source": "https://github.com/primer/react/tree/main/packages/react/src/Dialog",
"id": "dialog_v2",
"docsId": "dialog",
"name": "Dialog",
"status": "draft",
"a11yReviewed": false,
"stories": [
{
"id": "components-dialog--default",
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const [secondOpen, setSecondOpen] = useState(false)\n const buttonRef = useRef(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n return (\n <>\n \n {isOpen && (\n \n {lipsum}\n {secondOpen && (\n \n Hello world\n \n )}\n \n )}\n \n )\n}"
},
{
"id": "components-dialog-features--with-custom-renderers",
"code": "({ width, height, subtitle }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n \n {isOpen && (\n \n {lipsum}\n \n )}\n \n )\n}"
},
{
"id": "components-dialog-features--stress-test",
"code": "({ width, height, subtitle }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const [secondOpen, setSecondOpen] = useState(false)\n const buttonRef = useRef(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n const manyButtons = new Array(10).fill(undefined).map((_, i) => ({\n content: `Button ${i}`,\n }))\n return (\n <>\n \n {isOpen && (\n \n {lipsum}\n {secondOpen && (\n \n Hello world\n \n )}\n \n )}\n \n )\n}"
},
{
"id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
"code": "({ width, height }: DialogStoryProps) => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const [step, setStep] = React.useState(1)\n const [inputText, setInputText] = React.useState('')\n const dialogRef = useRef(null)\n const renderFooterConditionally = () => {\n if (step === 1) return null\n return (\n \n \n \n )\n }\n React.useEffect(() => {\n // focus the close button when the step changes\n const focusTarget = dialogRef.current?.querySelector(\n 'button[aria-label=\"Close\"]',\n ) as HTMLButtonElement\n if (step === 2) {\n focusTarget.focus()\n }\n }, [step])\n return (\n <>\n \n {isOpen && (\n \n {step === 1 ? (\n \n \n Bug Report \n \n \n Feature request{' '}\n \n \n \n ) : (\n