{ "schemaVersion": 2, "components": { "dialog": { "id": "dialog", "docsId": "dialog", "name": "Dialog", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-dialog--default", "code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const returnFocusRef = useRef(null)\n return (\n
\n setIsOpen(true)}\n >\n Show Dialog\n \n setIsOpen(false)}\n aria-labelledby=\"header\"\n >\n
\n Title\n \n Some content\n \n
\n \n
\n )\n}" } ], "importPath": "@primer/react", "props": [ { "name": "isOpen", "type": "boolean", "description": "Whether or not the dialog is open" }, { "name": "onDismiss", "type": "() => void", "description": "Function that will be called when the dialog is closed" }, { "name": "returnFocusRef", "type": " React.RefObject", "description": "The element to restore focus back to after the `Dialog` is closed" }, { "name": "initialFocusRef", "type": " React.RefObject", "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." }, { "name": "aria-labelledby", "type": "string", "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." }, { "name": "aria-label", "type": "string", "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [ { "name": "Dialog.Header", "props": [ { "name": "sx", "type": "SystemStyleObject" } ] } ] }, "actionbar": { "id": "actionbar", "name": "ActionBar", "status": "alpha", "a11yReviewed": true, "stories": [ { "id": "components-actionbar--default", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "size", "type": "'small' | 'medium' | 'large'", "required": false, "description": "Size of the action bar" }, { "name": "aria-label", "type": "string", "description": "When provided, a label is added to the action bar" }, { "name": "children", "type": "React.ReactElement", "required": true } ], "subcomponents": [ { "name": "ActionBar.Icon", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "This will be the Button description." }, { "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": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionBar.Divider", "props": [] } ] }, "action_list": { "id": "action_list", "name": "ActionList", "status": "beta", "a11yReviewed": false, "stories": [ { "id": "components-actionlist--default", "code": "() => (\n \n Copy link\n Quote reply\n Edit comment\n \n)" }, { "id": "components-actionlist-features--simple-list", "code": "() => (\n \n Copy link\n Quote reply\n Edit comment\n \n Delete file\n \n)" }, { "id": "components-actionlist-features--with-visual-list-heading", "code": "() => (\n \n Filter by\n \n Repositories\n {}}>\n \n \n \n app/assets/modules\n \n {}}>\n \n \n \n src/react/components\n \n {}}>\n \n \n \n memex/shared-ui/components\n \n {}}>\n \n \n \n views/assets/modules\n \n \n\n \n Advanced\n {}}>\n \n \n \n Owner\n \n {}}>\n \n \n \n Symbol\n \n {}}>\n \n \n \n Exclude archived\n \n \n \n)" }, { "id": "components-actionlist-features--with-custom-heading", "code": "() => (\n <>\n \n Details\n \n \n \n \n \n \n Readme\n \n \n \n \n \n MIT License\n \n \n \n \n \n 1.5k stars\n \n \n \n \n \n 21 watching\n \n \n \n \n \n 225 forks\n \n \n \n)" }, { "id": "components-actionlist-features--with-icons", "code": "() => (\n \n \n \n \n \n github.com/primer\n \n \n \n \n \n MIT License\n \n \n \n \n \n 256 stars\n \n \n \n \n \n 3 forks\n \n \n \n \n \n 4 vulnerabilities\n \n \n)" }, { "id": "components-actionlist-features--with-avatars", "code": "() => (\n \n {users.map((user) => (\n \n \n \n \n {user.login}\n \n ))}\n \n)" }, { "id": "components-actionlist-features--item-dividers", "code": "() => (\n \n Copy link\n Quote reply\n Edit comment\n \n)" }, { "id": "components-actionlist-features--single-divider", "code": "() => (\n \n Copy link\n Quote reply\n Edit comment\n \n Delete file\n \n)" }, { "id": "components-actionlist-features--inline-description", "code": "() => (\n \n {users.map((user) => (\n \n \n \n \n {user.login}\n {user.name}\n \n ))}\n \n)" }, { "id": "components-actionlist-features--block-description", "code": "() => (\n \n {users.map((user) => (\n \n \n \n \n {user.login}\n \n {user.name}\n \n \n ))}\n \n)" }, { "id": "components-actionlist-features--single-select", "code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n return (\n \n {projects.map((project, index) => (\n setSelectedIndex(index)}\n >\n \n \n \n {project.name}\n \n {project.scope}\n \n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--inactive-single-select", "code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(1)\n return (\n \n \n Inactive item\n \n setSelectedIndex(1)}\n >\n Item 2\n \n \n )\n}" }, { "id": "components-actionlist-features--multi-select", "code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n \n {projects.map((project, index) => (\n handleSelect(index)}\n disabled={index === 3 ? true : undefined}\n >\n \n \n \n {project.name}\n \n {project.scope}\n \n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--list-box-multi-select", "code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n \n {projects.map((project, index) => (\n handleSelect(index)}\n disabled={index === 3 ? true : undefined}\n >\n \n \n \n {project.name}\n \n {project.scope}\n \n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--disabled-selected-multiselect", "code": "() => (\n \n \n Selected disabled item\n \n \n Item 2\n \n \n)" }, { "id": "components-actionlist-features--disabled-multiselect", "code": "() => (\n \n \n Disabled item\n \n \n Item 2\n \n \n)" }, { "id": "components-actionlist-features--inactive-multiselect", "code": "() => {\n const [selectedIndices, setSelectedIndices] = React.useState([0])\n const handleSelect = (index: number) => {\n if (selectedIndices.includes(index)) {\n setSelectedIndices(selectedIndices.filter((i) => i !== index))\n } else {\n setSelectedIndices([...selectedIndices, index])\n }\n }\n return (\n \n \n Inactive item\n \n handleSelect(1)}\n >\n Item 2\n \n \n )\n}" }, { "id": "components-actionlist-features--disabled-item", "code": "() => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n return (\n \n {projects.map((project, index) => (\n setSelectedIndex(index)}\n disabled={index === 1}\n >\n \n \n \n {project.name}\n \n {project.scope}\n \n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--inactive-item", "code": "() => {\n return (\n \n {projects.map((project, index) => (\n \n \n \n \n {project.name}\n \n {project.scope}\n \n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--links", "code": "() => (\n <>\n \n Details\n \n \n \n \n \n \n Readme\n \n \n \n \n \n MIT License\n \n \n \n \n \n 1.5k stars\n \n \n \n \n \n 21 watching\n \n \n \n \n \n 225 forks\n \n \n \n)" }, { "id": "components-actionlist-features--custom-item-children", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "id": "components-actionlist-features--text-wrap-and-truncation", "code": "() => (\n \n \n \n \n \n \n Block Description. Long text should wrap\n \n This description is long, but it is block so it wraps\n \n \n \n \n \n \n \n \n \n Inline Description\n \n This description gets truncated because it is inline\n \n \n \n \n \n \n \n \n \n Really long text without a description should wrap so it wraps\n \n \n \n \n \n \n \n \n SomethingSomething/SomethingElse.Some.Thing.Lalala.la\n \n \n \n \n \n \n)" }, { "id": "components-actionlist-features--conditional-children", "code": "() => {\n type reviewerType = {\n name: string\n id?: string\n type?: string\n login?: string\n slug?: string\n members?: number\n }\n const potentialReviewers: reviewerType[] = [...teams, ...users]\n return (\n \n {potentialReviewers.map((reviewer, index) => (\n \n \n {reviewer.type === 'team' ? (\n \n ) : (\n \n )}\n \n {reviewer.login || reviewer.slug}\n {reviewer.type === 'team' ? (\n \n {reviewer.name}\n \n ) : (\n {reviewer.name}\n )}\n {reviewer.type === 'team' && (\n \n \n {reviewer.members}\n \n )}\n \n ))}\n \n )\n}" }, { "id": "components-actionlist-features--child-with-side-effects", "code": "() => {\n const user = users[0]\n const [selected, setSelected] = React.useState(true)\n const SideEffectDescription = () => {\n const [seconds, setSeconds] = React.useState(0)\n React.useEffect(() => {\n const fn = () => setSeconds((s) => s + 1)\n const interval = window.setInterval(fn, 1000)\n return () => window.clearInterval(interval)\n }, [])\n return <>{seconds} seconds passed\n }\n return (\n \n setSelected(!selected)}\n role=\"option\"\n >\n \n \n \n {user.login}\n \n \n \n \n \n )\n}" }, { "id": "components-actionlist-features--inside-overlay", "code": "() => {\n const [open, setOpen] = React.useState(false)\n const toggle = () => setOpen(!open)\n return (\n }\n >\n \n \n Use your arrow keys\n ↓\n \n \n keep going\n ↓\n \n \n more more\n ↓\n \n \n \n now go up!\n ↑\n \n \n \n )\n}" }, { "id": "components-actionlist-features--group-with-subtle-title", "code": "() => {\n const [assignees, setAssignees] = React.useState(users.slice(0, 1))\n const toggleAssignee = (assignee: (typeof users)[number]) => {\n const assigneeIndex = assignees.findIndex((a) => a.login === assignee.login)\n if (assigneeIndex === -1) setAssignees([...assignees, assignee])\n else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))\n }\n return (\n \n \n Everyone\n {users.slice(2).map((user) => (\n assignee.login === user.login),\n )}\n aria-checked={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n onSelect={() => toggleAssignee(user)}\n >\n \n \n \n {user.login}\n {user.name}\n \n ))}\n \n \n )\n}" }, { "id": "components-actionlist-features--group-with-filled-title", "code": "() => {\n const [assignees, setAssignees] = React.useState(users.slice(0, 1))\n const toggleAssignee = (assignee: (typeof users)[number]) => {\n const assigneeIndex = assignees.findIndex((a) => a.login === assignee.login)\n if (assigneeIndex === -1) setAssignees([...assignees, assignee])\n else setAssignees(assignees.filter((_, index) => index !== assigneeIndex))\n }\n return (\n \n \n \n Everyone\n \n {users.slice(2).map((user) => (\n assignee.login === user.login),\n )}\n aria-checked={Boolean(\n assignees.find((assignee) => assignee.login === user.login),\n )}\n onSelect={() => toggleAssignee(user)}\n >\n \n \n \n {user.login}\n {user.name}\n \n ))}\n \n \n )\n}" } ], "importPath": "@primer/react", "props": [ { "name": "children", "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", "defaultValue": "", "required": true, "description": "" }, { "name": "variant", "type": "'inset' | 'full'", "defaultValue": "'inset'", "description": "`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges" }, { "name": "selectionVariant", "type": "'single' | 'multiple'", "defaultValue": "", "description": "Whether multiple items or a single item can be selected." }, { "name": "showDivider", "type": "boolean", "defaultValue": "false", "description": "Display a divider above each item in this list when it does not follow a header or divider." }, { "name": "role", "type": "AriaRole", "defaultValue": "", "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [ { "name": "ActionList.Item", "props": [ { "name": "children", "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", "defaultValue": "", "required": true, "description": "" }, { "name": "variant", "type": "'default' | 'danger'", "defaultValue": "'default'", "description": "`danger` indicates that the item is destructive." }, { "name": "onSelect", "type": "(event: React.MouseEvent | React.KeyboardEvent) => void", "defaultValue": "", "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an ``. This is not called for disabled or inactive items." }, { "name": "selected", "type": "boolean", "defaultValue": "false", "description": "Indicate whether the item is selected. Only applies to items that can be selected." }, { "name": "active", "type": "boolean", "defaultValue": "false", "description": "Indicate whether the item is active. There should never be more than one active item." }, { "name": "disabled", "type": "boolean", "defaultValue": "false", "description": "Items that are disabled can not be clicked, selected, or navigated to." }, { "name": "inactiveText", "type": "string", "defaultValue": "", "description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. \nIf there is a leading visual, the alert icon will replace the leading visual. \n If there is a trailing visual, it will replace the trailing visual.\n If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. \nText will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items." }, { "name": "role", "type": "AriaRole", "defaultValue": "", "description": "ARIA role describing the function of the item. `option` is a common value." }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.Heading", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "Use to give a heading to list" }, { "name": "as", "type": "h1 | h2 | h3 | h4 | h5 | h6", "defaultValue": "h3", "required": false, "description": "The level of the heading" }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.LinkItem", "props": [ { "name": "children", "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", "defaultValue": "", "required": true, "description": "" }, { "name": "active", "type": "boolean", "defaultValue": "false", "description": "Indicate whether the item is active. There should never be more than one active item." }, { "name": "ref", "type": "React.RefObject" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"a\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "passthrough": { "element": "a", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" } }, { "name": "ActionList.LeadingVisual", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "Icon (or similar) positioned before item text." }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.TrailingVisual", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "Visual positioned after item text." }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.Description", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "" }, { "name": "variant", "type": "'inline' | 'block'", "defaultValue": "'inline'", "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.GroupHeading", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "Use to give a heading to the groups" }, { "name": "variant", "type": "'filled' | 'subtle'", "defaultValue": "'subtle'", "description": "`filled` style has a background color and top and bottom borders. Subtle style has no background or borders." }, { "name": "as", "type": "h1 | h2 | h3 | h4 | h5 | h6", "defaultValue": "h3", "required": false, "description": "The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)" }, { "name": "sx", "type": "SystemStyleObject" } ] }, { "name": "ActionList.Group", "props": [ { "name": "children", "type": "ActionList.Item[] | ActionList.LinkItem[]", "defaultValue": "", "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", "description": "Please use `ActionList.GroupHeading` instead.", "deprecated": true }, { "name": "auxiliaryText", "type": "string", "defaultValue": "", "description": "Secondary text that provides additional information about the group." }, { "name": "variant", "type": "'filled' | 'subtle'", "defaultValue": "'subtle'", "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." }, { "name": "selectionVariant", "type": "'single' | 'multiple' | false", "defaultValue": "", "description": "Set `selectionVariant` at the group level." }, { "name": "role", "type": "AriaRole", "defaultValue": "", "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values." }, { "name": "sx", "type": "SystemStyleObject" } ] } ] }, "action_menu": { "id": "action_menu", "name": "ActionMenu", "status": "beta", "a11yReviewed": false, "stories": [ { "id": "components-actionmenu--default", "code": "() => (\n \n Open menu\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-actionmenu-features--links-and-actions", "code": "() => (\n \n Open menu\n \n \n alert('Workflows clicked')}>\n Workflows\n \n \n \n \n alert('Archived items clicked')}>\n Archived items\n \n \n \n \n \n Settings\n \n \n \n \n alert('Make a copy clicked')}>\n Make a copy\n \n \n \n \n \n \n GitHub projects\n \n What's new\n \n \n \n \n \n Give feedback\n \n \n \n \n \n GitHub Docs\n \n \n \n \n \n \n \n \n)" }, { "id": "components-actionmenu-features--single-select", "code": "() => {\n const options = [\n {\n name: 'Fast forward',\n },\n {\n name: 'Recursive',\n },\n {\n name: 'Ours',\n },\n {\n name: 'Octopus',\n },\n {\n name: 'Resolve',\n },\n {\n name: 'Subtree',\n },\n ]\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const selectedType = options[selectedIndex]\n return (\n \n \n \n Options:\n {' '}\n {selectedType.name}\n \n \n \n {options.map((options, index) => (\n setSelectedIndex(index)}\n >\n {options.name}\n \n ))}\n \n \n \n )\n}" }, { "id": "components-actionmenu-features--multi-select", "code": "() => {\n type Option = {\n name: string\n selected: boolean\n }\n const [options, setOptions] = React.useState([\n {\n name: 'Show code folding buttons',\n selected: true,\n },\n {\n name: 'Wrap lines',\n selected: false,\n },\n {\n name: 'Center content',\n selected: false,\n },\n ])\n const toggle = (name: string) => {\n setOptions(\n options.map((option) => {\n if (option.name === name) option.selected = !option.selected\n return option\n }),\n )\n }\n return (\n \n Display\n \n \n {options.map((options) => (\n toggle(options.name)}\n >\n {options.name}\n \n ))}\n \n \n \n )\n}" }, { "id": "components-actionmenu-features--inactive-items", "code": "() => (\n \n Open menu\n \n \n alert('Workflows clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Workflows\n \n \n \n \n alert('Archived items clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Archived items\n \n \n \n \n \n Settings\n \n \n \n \n alert('Make a copy clicked')}\n inactiveText=\"Unavailable due to an outage\"\n >\n Make a copy\n \n \n \n \n \n \n Github projects\n \n What's new\n \n \n \n \n \n Give feedback\n \n \n \n \n \n GitHub Docs\n \n \n \n \n \n \n \n \n)" }, { "id": "components-actionmenu-features--submenus", "code": "() => (\n \n Edit\n \n \n Cut\n Copy\n Paste\n \n \n \n \n \n \n Paste special\n \n \n \n \n Paste plain text\n Paste formulas\n Paste with formatting\n \n \n Paste from\n \n \n \n Current clipboard\n History\n Another device\n \n \n \n \n \n \n \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "children", "type": "React.ReactElement[]", "defaultValue": "", "required": true, "description": "Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`" }, { "name": "open", "type": "boolean", "defaultValue": "false", "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`." }, { "name": "onOpenChange", "type": "(open: boolean) => void", "defaultValue": "", "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`." }, { "name": "anchorRef", "type": "React.RefObject", "defaultValue": "", "description": "Useful for defining an external anchor" } ], "subcomponents": [ { "name": "ActionMenu.Button", "props": [ { "name": "children", "type": "React.ReactElement", "defaultValue": "", "required": true, "description": "" } ], "passthrough": { "element": "Button", "url": "/react/Button" } }, { "name": "ActionMenu.Anchor", "props": [ { "name": "children", "type": "React.ReactElement", "defaultValue": "", "required": true, "description": "Accepts a single child element" } ] }, { "name": "ActionMenu.Overlay", "props": [ { "name": "children", "type": "React.ReactNode", "defaultValue": "", "required": true, "description": "" }, { "name": "align", "type": "start | center | end", "defaultValue": "start", "description": "" }, { "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": "Controls which side of the anchor the menu will appear" } ], "passthrough": { "element": "Overlay", "url": "/react/Overlay" } } ] }, "anchored_overlay": { "id": "anchored_overlay", "name": "AnchoredOverlay", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-anchoredoverlay--default", "code": "() => {\n const [open, setOpen] = useState(false)\n return (\n setOpen(true)}\n onClose={() => setOpen(false)}\n renderAnchor={(props) => }\n >\n \n \"kitten\"\n \n \n )\n}" }, { "id": "components-anchoredoverlay-features--portal-inside-scrolling-element", "code": "(args: Args) => {\n const rows = 20\n const columns = 10\n return (\n \n \n \n {Array(rows)\n .fill(null)\n .map((_, i) => (\n \n {Array(columns)\n .fill(null)\n .map((_1, j) => (\n \n ))}\n \n ))}\n \n
\n \n \n \n
\n \n )\n}" } ], "importPath": "@primer/react", "props": [ { "name": "open", "type": "boolean", "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') => 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." } ] }, "autocomplete": { "id": "autocomplete", "name": "Autocomplete", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-autocomplete--default", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, inputArgs, overlayArgs, textInputArgs } =\n getArgsByChildComponent(args)\n const isMultiselect = menuArgs.selectionVariant === 'multiple'\n const [selectedItemIds, setSelectedItemIds] = useState>([])\n const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n if (!Array.isArray(newlySelectedItems)) {\n return\n }\n setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n }\n const autocompleteInput = {\n ...inputArgs,\n ...textInputArgs,\n }\n const formValidationId = 'validation-field'\n return (\n event.preventDefault()}\n >\n \n \n \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--with-token-input", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputWithTokensArgs } =\n getArgsByChildComponent(args)\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 \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--add-new-item", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputWithTokensArgs } =\n getArgsByChildComponent(args)\n const [localItemsState, setLocalItemsState] = useState(items)\n const [filterVal, setFilterVal] = useState('')\n const [tokens, setTokens] = useState(mockTokens)\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 const onItemSelect: (item: Datum) => void = (item) => {\n onSelectedChange([\n ...selectedItemIds.map(\n (id) => items.find((selectedItem) => selectedItem.id === id) as Datum,\n ),\n item,\n ])\n if (!localItemsState.some((localItem) => localItem.id === item.id)) {\n setLocalItemsState([...localItemsState, item])\n }\n }\n const handleChange: ChangeEventHandler = (e) => {\n setFilterVal(e.currentTarget.value)\n }\n return (\n \n \n \n \n \n \n localItem.text)\n .includes(filterVal)\n ? {\n id: filterVal,\n text: `Add '${filterVal}'`,\n handleAddItem: (item) => {\n onItemSelect({\n ...item,\n text: filterVal,\n selected: true,\n })\n setFilterVal('')\n },\n }\n : undefined\n }\n items={localItemsState}\n selectedItemIds={selectedItemIds}\n onSelectedChange={onSelectedChange}\n aria-labelledby=\"autocompleteLabel\"\n {...menuArgs}\n />\n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--custom-search-filter-fn", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\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 \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--custom-sort-after-menu-close", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\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 \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n const onOpenChange = (isOpen: boolean) => {\n setIsMenuOpen(isOpen)\n }\n return (\n \n \n \n \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n
\n The menu is {isMenuOpen ? 'opened' : 'closed'}\n
\n \n )\n}" }, { "id": "components-autocomplete-features--async-loading-of-items", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n const [loadedItems, setLoadedItems] = useState([])\n const onOpenChange = () => {\n setTimeout(() => {\n setLoadedItems(items)\n }, 1500)\n }\n return (\n \n \n \n \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, textInputArgs } = getArgsByChildComponent(args)\n return (\n \n \n \n \n \n \n \n {captionArgs.children && }\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--custom-overlay-menu-anchor", "code": "(args: FormControlArgs) => {\n const { parentArgs, labelArgs, captionArgs, validationArgs } =\n getFormControlArgsByChildComponent(args)\n const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n const menuAnchorRef = useRef(null)\n const anchorWrapperStyles = {\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: '25%',\n border: '1px solid black',\n padding: '1em',\n }\n return (\n \n \n \n }\n >\n \n \n \n \n \n \n \n {captionArgs.children && (\n \n )}\n {validationArgs.children && validationArgs.variant && (\n \n )}\n \n \n )\n}" }, { "id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref", "code": "(args: FormControlArgs) => {\n const { menuArgs, textInputArgs } = getArgsByChildComponent(args)\n const scrollContainerRef = useRef(null)\n const inputRef = useRef(null)\n const [isOpen, setIsOpen] = useState(false)\n const handleOpen = () => {\n setIsOpen(true)\n inputRef.current && inputRef.current.focus()\n }\n return (\n \n setIsOpen(false)}\n width=\"large\"\n height=\"xsmall\"\n focusTrapSettings={{\n initialFocusRef: inputRef,\n }}\n side=\"inside-top\"\n renderAnchor={(props) => }\n >\n \n \n \n \n \n }\n >\n \n \n \n \n \n \n )\n}" }, { "id": "components-autocomplete-features--in-a-dialog", "code": "(args: FormControlArgs) => {\n const { overlayArgs } = getArgsByChildComponent(args)\n const outerContainerRef = useRef(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n setMounted(true)\n }\n }, [isDialogOpen])\n return (\n <>\n \n setIsDialogOpen(false)}\n >\n
\n \n {mounted ? (\n \n \n \n \n \n \n \n \n \n ) : null}\n \n
\n \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" } ], "subcomponents": [ { "name": "Autocomplete.Input", "props": [ { "name": "as", "type": "React.ElementType", "defaultValue": "TextInput" }, { "name": "openOnFocus", "type": "boolean", "defaultValue": "true", "description": "Whether the associated autocomplete menu should open on an input focus event" } ], "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 | number)[]", "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": { "id": "avatar", "name": "Avatar", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-avatar--default", "code": "() => " }, { "id": "components-avatar-features--square", "code": "() => " }, { "id": "components-avatar-features--size", "code": "() => (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n)" }, { "id": "components-avatar-features--size-responsive", "code": "() => (\n
\n \n \n \n \n \n \n \n \n \n \n
\n)" } ], "importPath": "@primer/react", "props": [ { "name": "alt", "type": "string", "defaultValue": "''", "description": "Provide alt text when the avatar is used without a name next to it." }, { "name": "size", "type": "number | { narrow?: number; regular?: number; wide?: number; }", "defaultValue": "20", "description": "The size of the avatar in pixels." }, { "name": "square", "type": "boolean", "defaultValue": "false", "description": "If true, the avatar will be square instead of circular." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "avatar_pair": { "id": "avatar_pair", "name": "AvatarPair", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-avatarpair--default", "code": "() => (\n \n \n \n \n)" }, { "id": "components-avatarpair-features--parent-circle", "code": "() => (\n \n \n \n \n)" }, { "id": "components-avatarpair-features--parent-square", "code": "() => (\n \n \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "children", "type": "Avatar[]", "defaultValue": "", "description": "" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "avatar_stack": { "id": "avatar_stack", "name": "AvatarStack", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-avatarstack--default", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--align-left", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--align-right", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--disable-expand-on-hover", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--custom-size-on-parent", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--custom-size-on-parent-responsive", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--custom-size-on-children", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--custom-size-on-children-responsive", "code": "() => (\n \n \n \n \n \n \n)" }, { "id": "components-avatarstack-features--with-single-avatar", "code": "() => (\n \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "alignRight", "type": "boolean", "defaultValue": "false", "description": "Align the avatars to the right" }, { "name": "disableExpand", "type": "boolean", "defaultValue": "false", "description": "Do not spread the avatars on hover" }, { "name": "size", "type": "number | { narrow?: number; regular?: number; wide?: number; }", "defaultValue": "20", "description": "The size of the avatar children in pixels." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "banner": { "id": "banner", "name": "Banner", "status": "alpha", "a11yReviewed": false, "importPath": "@primer/react/experimental", "stories": [ { "id": "components-banner--default", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n primaryAction={Button}\n secondaryAction={Button}\n />\n )\n}" }, { "id": "components-banner-features--critical", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n variant=\"critical\"\n />\n )\n}" }, { "id": "components-banner-features--info", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n variant=\"info\"\n >\n )\n}" }, { "id": "components-banner-features--success", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n variant=\"success\"\n />\n )\n}" }, { "id": "components-banner-features--upsell", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n variant=\"upsell\"\n />\n )\n}" }, { "id": "components-banner-features--warning", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n variant=\"warning\"\n />\n )\n}" }, { "id": "components-banner-features--dismiss", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n />\n )\n}" }, { "id": "components-banner-features--dismiss-with-actions", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n onDismiss={action('onDismiss')}\n primaryAction={Button}\n secondaryAction={Button}\n />\n )\n}" }, { "id": "components-banner-features--with-hidden-title", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n variant=\"warning\"\n />\n )\n}" }, { "id": "components-banner-features--with-hidden-title-and-actions", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n variant=\"warning\"\n primaryAction={Button}\n secondaryAction={Button}\n />\n )\n}" }, { "id": "components-banner-features--with-actions", "code": "() => {\n return (\n \n GitHub users are{' '}\n \n now required\n {' '}\n to enable two-factor authentication as an additional security measure.\n \n }\n primaryAction={Button}\n secondaryAction={Button}\n variant=\"warning\"\n />\n )\n}" } ], "props": [ { "name": "aria-label", "type": "string", "description": "Provide an optional label to override the default name for the Banner landmark region" }, { "name": "description", "type": "React.ReactNode", "description": "Provide an optional description for the Banner. This should provide supplemental information about the Banner" }, { "name": "icon", "type": "React.ReactNode", "description": "Provide an icon for the banner" }, { "name": "onDismiss", "type": "() => void", "description": "Optionally provide a handler to be called when the banner is dismissed. Providing this prop will show a dismiss button" }, { "name": "primaryAction", "type": "React.ReactNode", "description": "" }, { "name": "secondaryAction", "type": "React.ReactNode", "description": "" }, { "name": "title", "type": "React.ReactNode", "description": "The title for the Banner. This will be used as the accessible name and is required unless `Banner.Title` is used as a child" }, { "name": "variant", "type": "'critical' | 'info' | 'success' | 'upsell' | 'warning'", "description": "" } ], "subcomponents": [ { "name": "Banner.Title", "props": [ { "name": "as", "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" } ] }, { "name": "Banner.Description", "props": [] }, { "name": "Banner.PrimaryAction", "props": [] }, { "name": "Banner.SecondaryAction", "props": [] } ] }, "blankslate": { "id": "blankslate", "name": "Blankslate", "status": "draft", "a11yReviewed": false, "stories": [ { "id": "drafts-components-blankslate--default", "code": "() => (\n \n \n \n \n Welcome to the mona wiki!\n \n Wikis provide a place in your repository to lay out the roadmap of your\n project, show the current status, and document software better, together.\n \n \n Create the first page\n \n \n Learn more about wikis\n \n \n)" }, { "id": "drafts-components-blankslate-features--with-visual", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n)" }, { "id": "drafts-components-blankslate-features--with-primary-action", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n Primary action\n \n)" }, { "id": "drafts-components-blankslate-features--with-secondary-action", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n Secondary action\n \n \n)" }, { "id": "drafts-components-blankslate-features--with-border", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n)" }, { "id": "drafts-components-blankslate-features--narrow", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n)" }, { "id": "drafts-components-blankslate-features--spacious", "code": "() => (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n)" } ], "importPath": "@primer/react/experimental", "props": [ { "name": "border", "type": "boolean", "description": "" }, { "name": "narrow", "type": "boolean", "description": "" }, { "name": "spacious", "type": "boolean", "description": "" } ], "subcomponents": [ { "name": "Blankslate.Visual", "props": [] }, { "name": "Blankslate.Heading", "props": [ { "name": "as", "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'" } ] }, { "name": "Blankslate.Description", "props": [] }, { "name": "Blankslate.PrimaryAction", "props": [ { "name": "href", "type": "string" } ] }, { "name": "Blankslate.SecondaryAction", "props": [ { "name": "href", "type": "string" } ] } ] }, "box": { "id": "box", "name": "Box", "status": "beta", "a11yReviewed": false, "stories": [ { "id": "components-box--default", "code": "() => Default Box" }, { "id": "components-box-features--border", "code": "() => (\n \n Box with border\n \n)" }, { "id": "components-box-features--border-bottom", "code": "() => (\n \n Box with bottom border\n \n)" }, { "id": "components-box-features--flexbox", "code": "() => (\n \n \n 1\n \n \n 2\n \n \n 3\n \n \n)" }, { "id": "components-box-features--grid", "code": "() => (\n \n \n 1\n \n \n 2\n \n \n 3\n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "ref", "type": "React.RefObject" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"div\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "branch_name": { "id": "branch_name", "name": "BranchName", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-branchname--default", "code": "() => (\n \n branch_name\n branch_name as span\n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "ref", "type": "React.RefObject" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"a\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "breadcrumbs": { "id": "breadcrumbs", "name": "Breadcrumbs", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-breadcrumbs--default", "code": "() => (\n \n Home\n About\n \n Team\n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "children", "type": "Breadcrumbs.Item[]", "defaultValue": "", "description": "" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [ { "name": "Breadcrumbs.Item", "props": [ { "name": "selected", "type": "boolean", "defaultValue": "false", "description": "" }, { "name": "ref", "type": "React.RefObject" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"a\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "passthrough": { "element": "a", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" } } ] }, "button": { "id": "button", "name": "Button", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-button--default", "code": "() => " }, { "id": "components-button-features--primary", "code": "() => " }, { "id": "components-button-features--danger", "code": "() => " }, { "id": "components-button-features--invisible", "code": "() => " }, { "id": "components-button-features--leading-visual", "code": "() => " }, { "id": "components-button-features--trailing-visual", "code": "() => " }, { "id": "components-button-features--trailing-counter", "code": "() => {\n const [count, setCount] = useState(0)\n const onClick = () => {\n setCount(count + 1)\n announce(`Watch ${count + 1}`)\n }\n return (\n <>\n \n \n

\n In this example, a live region has been implemented to communicate the\n change.\n

\n \n )\n}" }, { "id": "components-button-features--trailing-counter-all-variants", "code": "() => {\n const [count, setCount] = useState(0)\n const onClick = () => {\n setCount(count + 1)\n announce(`Watch ${count + 1}`)\n }\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \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": "() => " } ], "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 | string", "description": "For counter buttons, the number to display." }, { "name": "disabled", "type": "boolean", "description": "Items that are disabled can not be clicked, selected, or navigated through." }, { "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": "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": "variant", "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'", "defaultValue": "'default'", "description": "Change the visual style of the button." } ], "passthrough": { "element": "button", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" } }, "icon_button": { "id": "icon_button", "name": "IconButton", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-iconbutton--default", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--primary", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--danger", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--invisible", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--disabled", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--small", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--medium", "code": "() => (\n \n)" }, { "id": "components-iconbutton-features--large", "code": "() => (\n \n)" }, { "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-version1", "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)" } ], "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'", "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": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "button_group": { "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 \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "sx", "type": "SystemStyleObject" }, { "name": "ref", "type": "React.RefObject" } ], "subcomponents": [] }, "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}" } ], "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": { "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": { "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": { "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": { "id": "counter_label", "name": "CounterLabel", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-counterlabel--default", "code": "() => 12" }, { "id": "components-counterlabel-features--primary-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" } ], "subcomponents": [] }, "data_table": { "id": "data_table", "name": "DataTable", "status": "draft", "a11yReviewed": false, "stories": [ { "id": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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": "drafts-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" } ], "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.Body", "props": [ { "name": "children", "type": "React.ReactNode" } ] }, { "name": "Table.Row", "props": [ { "name": "children", "type": "React.ReactNode" } ] }, { "name": "Table.Header", "props": [ { "name": "children", "type": "React.ReactNode" } ] }, { "name": "Table.Cell", "props": [ { "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.Container", "props": [ { "name": "children", "type": "React.ReactNode" } ] }, { "name": "Table.Title", "props": [ { "name": "children", "type": "React.ReactNode" }, { "name": "id", "type": "string", "required": true } ] }, { "name": "Table.Subtitle", "props": [ { "name": "children", "type": "React.ReactNode" }, { "name": "id", "type": "string", "required": true } ] }, { "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" }, { "name": "columns", "type": "Array>" }, { "name": "rows", "type": "number", "description": "Optionally specify the number of rows which should be included in the skeleton state of the component" } ] }, { "name": "Table.Pagination", "props": [ { "name": "aria-label", "type": "string", "required": true }, { "name": "defaultPageIndex", "type": "string" }, { "name": "id", "type": "string" }, { "name": "onChange", "type": "({ pageIndex }: { pageIndex: number }) => void" }, { "name": "pageSize", "type": "number" }, { "name": "totalCount", "type": "number", "required": true } ] }, { "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": "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": { "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 \n This is some content\n
\n )\n}" } ], "importPath": "@primer/react", "props": [ { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "dialog_v2": { "id": "dialog_v2", "docsId": "dialog", "name": "Dialog", "status": "draft", "a11yReviewed": false, "stories": [ { "id": "drafts-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": "drafts-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": "drafts-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": "drafts-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 renderFooterConditionally = () => {\n if (step === 1) return null\n return (\n \n \n \n )\n }\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

\n \n \n \n \n

\n )}\n \n )}\n \n )\n}" }, { "id": "drafts-components-dialog-features--bottom-sheet-narrow", "code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n \n {isOpen && (\n \n {bodyContent}\n \n )}\n \n )\n}" }, { "id": "drafts-components-dialog-features--full-screen-narrow", "code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n \n {isOpen && (\n \n {bodyContent}\n \n )}\n \n )\n}" }, { "id": "drafts-components-dialog-features--side-sheet", "code": "() => {\n const [isOpen, setIsOpen] = useState(true)\n const buttonRef = useRef(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n \n {isOpen && (\n \n {bodyContent}\n \n )}\n \n )\n}" }, { "id": "drafts-components-dialog-features--return-focus-ref", "code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n const triggerRef = React.useRef(null)\n const triggerButton = (\n \n )\n if (!isOpen) return triggerButton\n return (\n Show Dialog}>\n {triggerButton}\n \n body\n \n \n )\n}" } ], "importPath": "@primer/react/experimental", "props": [ { "name": "title", "type": "React.ReactNode", "description": "Title of the Dialog. Also serves as the aria-label for this Dialog." }, { "name": "subtitle", "type": "React.ReactNode", "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog." }, { "name": "renderHeader", "type": "React.FunctionComponent>", "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles." }, { "name": "renderBody", "type": "React.FunctionComponent>", "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles." }, { "name": "renderFooter", "type": "React.FunctionComponent>", "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles." }, { "name": "footerButtons", "type": "DialogButtonProps[]", "description": "Specifies the buttons to be rendered in the Dialog footer." }, { "name": "onClose", "type": "(gesture: 'close-button' | 'escape') => void", "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')." }, { "name": "role", "type": "'dialog' | 'alertdialog'", "description": "The ARIA role to assign to this dialog." }, { "name": "width", "type": "'small' | 'medium' | 'large' | 'xlarge'" }, { "name": "height", "type": "'small' | 'large' | 'auto'" }, { "name": "returnFocusRef", "type": "React.RefObject", "describedby": "Return focus to this element when the Dialog closes, instead of the element that had focus immediately before the Dialog opened" } ], "subcomponents": [] }, "flash": { "id": "flash", "name": "Flash", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-flash--default", "code": "() => Default" }, { "id": "components-flash-features--success", "code": "() => Success" }, { "id": "components-flash-features--danger", "code": "() => Danger" }, { "id": "components-flash-features--warning", "code": "() => Warning" }, { "id": "components-flash-features--full", "code": "() => Full" }, { "id": "components-flash-features--with-icon-and-action", "code": "() => (\n \n \n \n \n \n This is a flash message with an icon and an action.\n Learn more.\n \n \n \n \n \n)" }, { "id": "components-flash-features--with-icon-action-dismiss", "code": "() => (\n \n \n \n \n \n This is a flash message with an icon and an action.\n Learn more.\n \n \n \n \n \n \n \n \n)" } ], "importPath": "@primer/react", "props": [ { "name": "full", "type": "boolean", "defaultValue": "false", "description": "Creates a full width Flash component" }, { "name": "variant", "type": "'default' | 'success' | 'warning' | 'danger'", "defaultValue": "'default'", "description": "Sets the background color and border" }, { "name": "ref", "type": "React.RefObject" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"div\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "form_control": { "id": "form_control", "name": "FormControl", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-formcontrol--default", "code": "() => (\n \n Form Input Label\n This is a caption\n \n \n)" }, { "id": "components-formcontrol-features--with-complex-inputs", "code": "() => {\n const [tokens, setTokens] = useState([...mockTokens])\n const onTokenRemove = (tokenId: string | number) => {\n setTokens(\n tokens.filter((token: { id: string | number }) => token.id !== tokenId),\n )\n }\n return (\n \n \n \n TextInputWithTokens\n \n \n \n \n Autocomplete\n \n \n \n \n \n \n \n \n Select\n \n \n \n Textarea\n