@primer/react

{ "schemaVersion": 2, "components": { "dialog": { "id": "dialog", "name": "Dialog", "status": "alpha", "a11yReviewed": false, "stories": [], "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<HTMLElement>", "description": "The element to restore focus back to after the `Dialog` is closed" }, { "name": "initialFocusRef", "type": " React.RefObject<HTMLElement>", "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" } ] } ] }, "tooltip": { "id": "tooltip", "name": "Tooltip", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { "name": "align", "type": "'left' | 'right'" }, { "name": "direction", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." }, { "name": "noDelay", "type": "boolean", "description": "When set to `true`, tooltip appears without any delay." }, { "name": "aria-label", "type": "string", "description": "Text used in `aria-label` (for accessibility)" }, { "name": "wrap", "type": "boolean", "description": "Use `true` to allow text within tooltip to wrap." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "underline_nav": { "id": "underline_nav", "name": "UnderlineNav", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { "name": "actions", "type": "React.ReactNode", "description": "Place another element, such as a button, to the opposite side of the navigation items." }, { "name": "align", "type": "'right'", "description": "Use `right` to have navigation items aligned right." }, { "name": "full", "type": "boolean", "description": "Used to make navigation fill the width of the container." }, { "name": "aria-label", "type": "string", "description": "Used to set the `aria-label` on the top level `<nav>` element." }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [ { "name": "UnderlineNav.Link", "props": [ { "name": "as", "type": "React.ElementType", "defaultValue": "'a'" }, { "name": "href", "type": "string" }, { "name": "selected", "type": "boolean" }, { "name": "sx", "type": "SystemStyleObject" } ] } ] }, "action_list": { "id": "action_list", "name": "ActionList", "status": "beta", "a11yReviewed": false, "stories": [ { "id": "components-actionlist--default", "code": "() => (\n <ActionList>\n <ActionList.Item>Copy link</ActionList.Item>\n <ActionList.Item>Quote reply</ActionList.Item>\n <ActionList.Item>Edit comment</ActionList.Item>\n </ActionList>\n)" } ], "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<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void", "defaultValue": "", "description": "Callback that is called when the item is selected using either the mouse or keyboard." }, { "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": "role", "type": "AriaRole", "defaultValue": "", "description": "ARIA role describing the function of the item. `option` is a common value." }, { "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<HTMLAnchorElement>" }, { "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.Group", "props": [ { "name": "children", "type": "ActionList.Item[] | ActionList.LinkItem[]", "defaultValue": "", "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", "description": "Title of the group." }, { "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": true, "stories": [ { "id": "components-actionmenu--default", "code": "() => (\n <ActionMenu>\n <ActionMenu.Button>Open menu</ActionMenu.Button>\n <ActionMenu.Overlay width=\"medium\">\n <ActionList>\n <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n Copy link\n <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n Quote reply\n <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n Edit comment\n <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item\n variant=\"danger\"\n onSelect={() => alert('Delete file clicked')}\n >\n Delete file\n <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n)" } ], "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<HTMLElement>", "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": "" } ], "passthrough": { "element": "Overlay", "url": "/react/Overlay" } } ] }, "anchored_overlay": { "id": "anchored_overlay", "name": "AnchoredOverlay", "status": "alpha", "a11yReviewed": false, "stories": [], "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": "<T extends React.HTMLAttributes<HTMLElement>>(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<HTMLElement>", "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": "overlayProps", "type": "Partial<OverlayProps>", "defaultValue": "", "description": "Props to be spread on the internal `Overlay` component." }, { "name": "focusTrapSettings", "type": "Partial<FocusTrapHookSettings>", "defaultValue": "", "description": "Settings to apply to the focus trap on the internal `Overlay` component." }, { "name": "focusZoneSettings", "type": "Partial<FocusZoneHookSettings>", "defaultValue": "", "description": "Settings to apply to the focus zone on the internal `Overlay` component." } ] }, "autocomplete": { "id": "autocomplete", "name": "Autocomplete", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { "name": "children", "type": "React.ReactNode" } ], "subcomponents": [ { "name": "Autocomplete.Input", "props": [ { "name": "as", "type": "React.ElementType", "defaultValue": "TextInput" } ], "passthrough": { "element": "TextInput", "url": "/react/TextInput" } }, { "name": "Autocomplete.Overlay", "props": [ { "name": "menuAnchorRef", "type": "React.RefObject<HTMLElement>" }, { "name": "children", "type": "React.ReactNode" }, { "name": "overlayProps", "deprecated": true, "type": "Partial<OverlayProps>", "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<T, 'id' | 'leadingVisual' | 'onAction'> & { handleAddItem: (item: Omit<T, 'leadingVisual' | 'onAction'>) => 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<HTMLElement | null>", "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": "() => <Avatar src=\"https://avatars.githubusercontent.com/u/92997159?v=4\" />" } ], "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", "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 <AvatarPair>\n <Avatar src=\"https://avatars.githubusercontent.com/u/92997159?v=4\" />\n <Avatar src=\"https://avatars.githubusercontent.com/primer\" />\n </AvatarPair>\n)" } ], "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 <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/primer\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/desktop\"\n />\n </AvatarStack>\n)" } ], "props": [ { "name": "alignRight", "type": "boolean", "defaultValue": "false", "description": "Align the avatars to the right" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "blankslate": { "id": "blankslate", "name": "Blankslate", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-blankslate--default", "code": "() => (\n <Blankslate>\n <Blankslate.Visual>\n <BookIcon size=\"medium\" />\n </Blankslate.Visual>\n <Blankslate.Heading>Welcome to the mona wiki!</Blankslate.Heading>\n <Blankslate.Description>\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 </Blankslate.Description>\n <Blankslate.PrimaryAction href=\"#\">\n Create the first page\n </Blankslate.PrimaryAction>\n <Blankslate.SecondaryAction href=\"#\">\n Learn more about wikis\n </Blankslate.SecondaryAction>\n </Blankslate>\n)" } ], "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": "() => <Box>Default Box</Box>" } ], "props": [ { "name": "ref", "type": "React.RefObject<HTMLDivElement>" }, { "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": "() => <BranchName href=\"#\">branch_name</BranchName>" } ], "props": [ { "name": "ref", "type": "React.RefObject<HTMLAnchorElement>" }, { "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 <Breadcrumbs>\n <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"#\">About</Breadcrumbs.Item>\n <Breadcrumbs.Item href=\"#\" selected>\n Team\n </Breadcrumbs.Item>\n </Breadcrumbs>\n)" } ], "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<HTMLAnchorElement>" }, { "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": "() => <Button>Default</Button>" } ], "props": [ { "name": "children", "required": true, "type": "React.ReactNode", "description": "The content of the button." }, { "name": "variant", "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'", "defaultValue": "'default'", "description": "Change the visual style of the button." }, { "name": "size", "type": "| 'small'\n| 'medium'\n| 'large'", "defaultValue": "'medium'" }, { "name": "leadingIcon", "type": "React.ComponentType<OcticonProps>", "description": "An icon to display before the button text." }, { "name": "trailingIcon", "type": "React.ComponentType<OcticonProps>", "description": "An icon to display after the button text." }, { "name": "as", "type": "React.ElementType", "defaultValue": "'button'" }, { "name": "sx", "type": "SystemStyleObject" }, { "name": "ref", "type": "React.RefObject<HTMLButtonElement>" } ], "passthrough": { "element": "button", "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" }, "subcomponents": [ { "name": "Button.Counter", "props": [ { "name": "children", "required": true, "type": "number", "description": "The counter value." }, { "name": "sx", "type": "SystemStyleObject" } ] } ] }, "icon_button": { "id": "icon_button", "name": "IconButton", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-iconbutton--default", "code": "() => <IconButton icon={HeartIcon} aria-label=\"Default\" />" } ], "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": "icon", "type": "Component", "defaultValue": "", "description": "provide an octicon. It will be placed in the center of the button" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [] }, "button_group": { "id": "button_group", "name": "ButtonGroup", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-buttongroup--default", "code": "() => (\n <ButtonGroup>\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </ButtonGroup>\n)" } ], "props": [ { "name": "sx", "type": "SystemStyleObject" }, { "name": "ref", "type": "React.RefObject<HTMLDivElement>" } ], "subcomponents": [] }, "checkbox": { "id": "checkbox", "name": "Checkbox", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-checkbox--default", "code": "() => (\n <Box as=\"form\">\n <FormControl>\n <Checkbox value=\"default\" />\n <FormControl.Label>Default label</FormControl.Label>\n </FormControl>\n </Box>\n)" } ], "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' | 'warning'", "defaultValue": "", "description": "Only used to inform ARIA attributes.<br /> Individual checkboxes do not have validation styles." }, { "name": "value", "type": "string", "defaultValue": "", "description": "A unique value that is never shown to the user.<br /> Used during form submission and to identify which checkbox inputs are selected." }, { "name": "ref", "type": "React.RefObject<HTMLInputElement>" }, { "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 <CheckboxGroup>\n <CheckboxGroup.Label>Choices</CheckboxGroup.Label>\n <FormControl>\n <Checkbox value=\"one\" defaultChecked />\n <FormControl.Label>Choice one</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"two\" defaultChecked />\n <FormControl.Label>Choice two</FormControl.Label>\n </FormControl>\n <FormControl>\n <Checkbox value=\"three\" />\n <FormControl.Label>Choice three</FormControl.Label>\n </FormControl>\n </CheckboxGroup>\n)" } ], "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": "<span> The unique identifier for this input group. Used to associate the label, validation text, and caption text. <br /> You may want a custom ID to make it easier to select elements in integration tests. </span>" }, { "name": "onChange", "type": "(selected: string[], e?: ChangeEvent<HTMLInputElement>) => 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.Description", "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' | 'warning'", "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 <CircleBadge>\n <CircleBadge.Icon icon={ZapIcon} />\n </CircleBadge>\n)" } ], "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<HTMLDivElement>" }, { "name": "as", "type": "React.ElementType", "defaultValue": "\"div\"" }, { "name": "sx", "type": "SystemStyleObject" } ], "subcomponents": [ { "name": "CircleBadge.Icon", "props": [ { "name": "as", "type": "React.ElementType", "defaultValue": "StyledOcticon" } ], "passthrough": { "element": "StyledOcticon", "url": "/StyledOcticon" } } ] }, "circle_octicon": { "id": "circle_octicon", "name": "CircleOcticon", "status": "alpha", "a11yReviewed": false, "stories": [ { "id": "components-circleocticon--default", "code": "() => (\n <CircleOcticon\n icon={CheckIcon}\n size={32}\n sx={{\n backgroundColor: 'success.fg',\n color: 'fg.onEmphasis',\n }}\n />\n)" } ], "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": "() => <CounterLabel>12</CounterLabel>" } ], "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": "components-datatable--default", "code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)" }, { "id": "components-datatable-features--with-title", "code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)} />\n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.dependabot.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n <LabelGroup>\n {row.securityFeatures.codeScanning.map((feature) => {\n return <Label key={feature}>{uppercase(feature)}</Label>\n })}\n </LabelGroup>\n ) : null\n },\n },\n ]}\n />\n </Table.Container>\n)" }, { "id": "components-datatable-features--with-title-and-subtitle", "code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n A subtitle could appear here to give extra context to the data.\n </Table.Subtitle>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\n columns={[\n {\n header: 'Repository',\n field: 'name',\n rowHeader: true,\n },\n {\n header: 'Type',\n field: 'type',\n renderCell: (row) => {\n return <Label>{uppercase(row.type)}</Label>\n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return <RelativeTime date={new Date(row.updatedAt)}