From 628170638ecb24bda54834c0de9ec1a9cf63f692 Mon Sep 17 00:00:00 2001 From: Marais Rossouw Date: Fri, 14 Jul 2023 10:03:39 +1000 Subject: [PATCH 01/41] chore: format css files with prettier (#3519) --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 54cfd102ca6..b2963f20230 100644 --- a/package.json +++ b/package.json @@ -39,8 +39,8 @@ "setup": "./script/setup", "build": "./script/build", "clean": "rimraf dist lib lib-esm css", - "format": "prettier --cache --write '**/*.{js,md,mdx,ts,tsx,yml}'", - "format:diff": "prettier --cache --list-different '**/*.{js.md,mdx,ts,tsx,yml}'", + "format": "prettier --cache --write '**/*.{js,css,md,mdx,ts,tsx,yml}'", + "format:diff": "prettier --cache --list-different '**/*.{js,css,md,mdx,ts,tsx,yml}'", "start": "concurrently npm:start:*", "start:docs": "cd docs && npm run develop", "start:storybook": "STORYBOOK=true storybook dev -p 6006", From 33d43459258c28fa5d69a1eca83d46cdb4bfe773 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Fri, 14 Jul 2023 10:32:05 +0200 Subject: [PATCH 02/41] Fix ActionList.Item width for `full` variant (#3516) * Fix ActionList.Item width for full variant * Update .changeset/plenty-bats-shop.md Co-authored-by: Mike Perrotti --------- Co-authored-by: Mike Perrotti --- .changeset/plenty-bats-shop.md | 7 +++++++ src/ActionList/Item.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/plenty-bats-shop.md diff --git a/.changeset/plenty-bats-shop.md b/.changeset/plenty-bats-shop.md new file mode 100644 index 00000000000..57090b350c0 --- /dev/null +++ b/.changeset/plenty-bats-shop.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +ActionList: Fixes the width of items for the full variant + + diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 90ead90ac58..e22a2d736b5 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -103,7 +103,7 @@ export const Item = React.forwardRef( appearance: 'none', background: 'unset', border: 'unset', - width: 'calc(100% - 16px)', + width: listVariant === 'inset' ? 'calc(100% - 16px)' : '100%', fontFamily: 'unset', textAlign: 'unset', marginY: 'unset', From daee9a9ce3f21901e029c856d452ca47cfe35887 Mon Sep 17 00:00:00 2001 From: Matthew Costabile Date: Fri, 14 Jul 2023 12:43:15 -0400 Subject: [PATCH 03/41] Pass props through to ToggleSwitch wrapper (#3520) * pass props through to toggle swtich wrapper * fix lint * changeset --- .changeset/empty-guests-live.md | 7 +++++++ src/ToggleSwitch/ToggleSwitch.tsx | 10 ++++------ src/__tests__/ToggleSwitch.test.tsx | 14 ++++++++++++++ 3 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 .changeset/empty-guests-live.md diff --git a/.changeset/empty-guests-live.md b/.changeset/empty-guests-live.md new file mode 100644 index 00000000000..6a9394bf6fa --- /dev/null +++ b/.changeset/empty-guests-live.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +passthrough dom props on toggleswitch + + diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx index 851757d9bab..20a23ed556e 100644 --- a/src/ToggleSwitch/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -13,11 +13,7 @@ import {CellAlignment} from '../DataTable/column' const TRANSITION_DURATION = '80ms' const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)' -export type ToggleSwitchProps = { - /** The id of the DOM node that describes the switch */ - ['aria-describedby']?: string - /** The id of the DOM node that labels the switch */ - ['aria-labelledby']: string +export interface ToggleSwitchProps extends Omit, 'onChange'>, SxProp { /** Uncontrolled - whether the switch is turned on */ defaultChecked?: boolean /** Whether the switch is ready for user input */ @@ -36,7 +32,7 @@ export type ToggleSwitchProps = { * **This should only be changed when the switch's alignment needs to be adjusted.** For example: It needs to be left-aligned because the label appears above it and the caption appears below it. */ statusLabelPosition?: CellAlignment -} & SxProp +} const sizeVariants = variant({ prop: 'size', @@ -221,6 +217,7 @@ const ToggleSwitch: React.FC> = ({ size = 'medium', statusLabelPosition = 'start', sx: sxProp, + ...props }) => { const isControlled = typeof checked !== 'undefined' const [isOn, setIsOn] = useProvidedStateOrCreate(checked, onChange, Boolean(defaultChecked)) @@ -247,6 +244,7 @@ const ToggleSwitch: React.FC> = ({ alignItems="center" flexDirection={statusLabelPosition === 'start' ? 'row' : 'row-reverse'} sx={sxProp} + {...props} > {loading ? : null} { await user.click(toggleSwitch) expect(handleChange).toHaveBeenCalledWith(true) }) +it('can pass data attributes to the rendered component', async () => { + const TEST_ID = 'a test id' + const ControlledSwitchComponent = () => { + return ( + <> +
{SWITCH_LABEL_TEXT}
+ + + ) + } + const {getByTestId} = render() + const toggleSwitch = getByTestId(TEST_ID) + expect(toggleSwitch).toBeInTheDocument() +}) checkStoriesForAxeViolations('ToggleSwitch.features', '../ToggleSwitch/') From b4e15b8452772dc72d3efda73f5d96dbe2c35150 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 14 Jul 2023 14:55:58 -0400 Subject: [PATCH 04/41] Make the `showPages` prop on our Pagination components responsive (#3390) * makes the showPages prop on our Pagination components responsive * Update generated/components.json * updates docs * adds changeset * Update generated/components.json * updates tests * updates changeset with changed components * updates changeset with changed components again * refactor to only calculate viewport sizes once --------- Co-authored-by: mperrotti --- .changeset/green-rules-tickle.md | 7 + generated/components.json | 5389 +++++++++++++++++ src/DataTable/Pagination.tsx | 47 +- src/Pagination/Pagination.docs.json | 2 +- .../Pagination.features.stories.tsx | 13 + src/Pagination/Pagination.stories.tsx | 38 +- src/Pagination/Pagination.tsx | 50 +- .../__snapshots__/Pagination.test.tsx.snap | 45 +- 8 files changed, 5581 insertions(+), 10 deletions(-) create mode 100644 .changeset/green-rules-tickle.md create mode 100644 generated/components.json diff --git a/.changeset/green-rules-tickle.md b/.changeset/green-rules-tickle.md new file mode 100644 index 00000000000..42b83cab770 --- /dev/null +++ b/.changeset/green-rules-tickle.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +The showPages prop on both Pagination components can now accept a responsive value. + + \ No newline at end of file diff --git a/generated/components.json b/generated/components.json new file mode 100644 index 00000000000..0eefafc31a4 --- /dev/null +++ b/generated/components.json @@ -0,0 +1,5389 @@ +{ + "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", + "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" + } + ] + } + ] + }, + "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": [] + }, + "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)" + } + ], + "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 ``" + }, + { + "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" + }, + { + "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": 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)" + } + ], + "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": "" + } + ], + "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": ">(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": "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": [], + "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" + }, + { + "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": "() => " + } + ], + "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 \n \n \n \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 \n \n \n \n \n \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 \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)" + } + ], + "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" + } + ], + "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": "() => branch_name" + } + ], + "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)" + } + ], + "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": "() => " + } + ], + "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", + "description": "An icon to display before the button text." + }, + { + "name": "trailingIcon", + "type": "React.ComponentType", + "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" + } + ], + "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": "() => " + } + ], + "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 \n \n \n \n \n)" + } + ], + "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)" + } + ], + "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.
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)" + } + ], + "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.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 \n \n \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" + }, + { + "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)" + } + ], + "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" + } + ], + "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 \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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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}" + } + ], + "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." + } + ] + } + ] + }, + "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}" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "drafts_dialog": { + "id": "drafts_dialog", + "name": "Dialog", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "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'" + } + ], + "subcomponents": [] + }, + "filter_list": { + "id": "filter_list", + "name": "FilterList", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-filterlist--default", + "code": "() => {\n const [selectedIndex, setSelectedIndex] = useState(0)\n return (\n \n setSelectedIndex(0)}\n count={32}\n >\n First Filter\n \n setSelectedIndex(1)}\n count={16}\n >\n Second Filter\n \n setSelectedIndex(2)}\n >\n Third Filter\n \n \n )\n}" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "FilterList.Item", + "props": [ + { + "name": "count", + "type": "number", + "description": "Number to be displayed in the list item" + }, + { + "name": "selected", + "type": "boolean", + "description": "Whether the list item is selected or not" + }, + { + "name": "small", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the list item is small or not" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'a'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "filtered_search": { + "id": "filtered_search", + "name": "FilteredSearch", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-filteredsearch--default", + "code": "() => (\n \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "flash": { + "id": "flash", + "name": "Flash", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-flash--default", + "code": "() => Default" + } + ], + "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": [], + "props": [ + { + "name": "children", + "type": "FormControl.Label | FormControl.Caption | FormControl.Validation | Autocomplete | TextInput | TextInputWithTokens | Select", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the control allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "a generated string", + "description": "The unique identifier for this control. Used to associate the label, validation text, and caption text" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must specify a value for the input before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [ + { + "name": "FormControl.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the label should be visually hidden" + }, + { + "name": "as", + "type": "'label' | 'legend' | 'span'", + "defaultValue": "'label'", + "description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.Caption", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The content (usually just text) that is rendered to give contextual info about the field" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.Validation", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The content (usually just text) that is rendered to give contextual info about the validation result for the field" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.LeadingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The visual to render before the choice input's label" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "header": { + "id": "header", + "name": "Header", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-header--default", + "code": "() => (\n
\n \n \n \n GitHub\n \n \n Menu\n \n \n \n
\n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Header.Item", + "props": [ + { + "name": "full", + "type": "string", + "defaultValue": "", + "description": "Stretches item to fill the available space" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "Header.Link", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "URL to be used for the Link" + }, + { + "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" + } + } + ] + }, + "heading": { + "id": "heading", + "name": "Heading", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-heading--default", + "code": "() => Default H2 Heading" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"h2\"" + } + ] + }, + "drafts_hidden": { + "id": "drafts_hidden", + "name": "Hidden", + "status": "draft", + "a11yReviewed": false, + "stories": [ + { + "id": "components-hidden--default", + "code": "() => (\n <>\n \n The below content is visible when the viewport is regular or wide but\n hidden when narrow:\n \n \n This is the said content and it is visible when the viewport is regular or\n wide but hidden when narrow\n \n \n)" + } + ], + "props": [ + { + "name": "when", + "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>", + "defaultValue": "", + "description": "In which viewport(s) the children are going to be hidden" + } + ], + "subcomponents": [] + }, + "label": { + "id": "label", + "name": "Label", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-label--default", + "code": "() => " + } + ], + "props": [ + { + "name": "variant", + "type": "| 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'", + "defaultValue": "'default'", + "description": "The color of the label" + }, + { + "name": "size", + "type": "'small' | 'large'", + "defaultValue": "'small'", + "description": "How large the label is rendered" + } + ], + "subcomponents": [] + }, + "label_group": { + "id": "label_group", + "name": "LabelGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-labelgroup--default", + "code": "() => (\n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "link": { + "id": "link", + "name": "Link", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-link--default", + "code": "() => Link" + } + ], + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "URL to be used for the Link. (The `href` is passed to the underlying `` element. If `as` is specified, the link behavior may need different props)." + }, + { + "name": "muted", + "type": "boolean", + "defaultValue": "false", + "description": "Uses a less prominent shade for Link color, and the default link shade on hover" + }, + { + "name": "underline", + "type": "boolean", + "defaultValue": "false", + "description": "Adds underline to the Link" + }, + { + "name": "hoverColor", + "type": "string", + "defaultValue": "", + "description": "Color used when hovering over link" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "nav_list": { + "id": "nav_list", + "name": "NavList", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"nav\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "NavList.Item", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "The URL that the item navigates to. `href` is passed to the underlying `` element. If `as` is specified, the component may need different props. If the item contains a sub-nav, the item is rendered as a `\n \n \n)" + } + ], + "props": [ + { + "name": "as", + "type": "string", + "defaultValue": "div", + "description": "Sets the underlying HTML tag for the component" + }, + { + "name": "caret", + "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ", + "defaultValue": "'top'", + "description": "Controls the position of the caret" + }, + { + "name": "open", + "type": "boolean", + "defaultValue": "false", + "description": "Controls the visibility of the popover." + }, + { + "name": "relative", + "type": "boolean", + "defaultValue": "false", + "description": "Set to true to render the popover using relative positioning. " + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Popover.Content", + "props": [ + { + "name": "as", + "type": "string", + "defaultValue": "div", + "description": "Sets the underlying HTML tag for the component" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "portal": { + "id": "portal", + "name": "Portal", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-portal--default", + "code": "() => (\n <>\n Root position\n \n Outer container\n \n Inner container\n \n Portaled content rendered at <BaseStyles> root.\n \n \n \n \n)" + } + ], + "props": [ + { + "name": "onMount", + "type": "function", + "defaultValue": "", + "description": "Called when this portal is added to the DOM" + }, + { + "name": "containerName", + "type": "string", + "defaultValue": "", + "description": "Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root." + } + ], + "subcomponents": [] + }, + "progress_bar": { + "id": "progress_bar", + "name": "ProgressBar", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-progressbar--default", + "code": "() => " + } + ], + "props": [ + { + "name": "progress", + "type": "number", + "defaultValue": "0", + "description": "Used to set the size of the green bar" + }, + { + "name": "barSize", + "type": "| 'small' | 'large' | 'default'", + "defaultValue": "'default'", + "description": "Controls the height of the progress bar. If omitted, height is set to the default height." + }, + { + "name": "inline", + "type": "boolean", + "defaultValue": "false", + "description": "Styles the progress bar inline" + }, + { + "name": "bg", + "type": "string", + "defaultValue": "'bg.successInverse'", + "description": "Set the progress bar color" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "radio": { + "id": "radio", + "name": "Radio", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-radio--default", + "code": "() => (\n \n \n \n Label\n \n \n)" + } + ], + "props": [ + { + "name": "value", + "type": "string", + "defaultValue": "", + "required": true, + "description": "A unique value that is never shown to the user" + }, + { + "name": "name", + "type": "string", + "defaultValue": "", + "description": "Required for grouping multiple radios" + }, + { + "name": "checked", + "type": "boolean", + "defaultValue": "", + "description": "Modifies true/false value of the native radio" + }, + { + "name": "defaultChecked", + "type": "boolean", + "defaultValue": "", + "description": "Selects the radio by default in uncontrolled mode" + }, + { + "name": "onChange", + "type": "(event: React.ChangeEvent) => void", + "defaultValue": "", + "description": "A callback function that is triggered when the input state has been changed" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "", + "description": "Modifies the native disabled state of the native checkbox" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"input\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "radio_group": { + "id": "radio_group", + "name": "RadioGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-radiogroup--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)" + } + ], + "props": [ + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "Used when associating the input group with a label other than RadioGroup.Label" + }, + { + "name": "children", + "type": "RadioGroup.Label | RadioGroup.Caption | RadioGroup.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": "name", + "type": "string", + "defaultValue": "", + "required": true, + "description": "The name used to identify this group of radios" + }, + { + "name": "onChange", + "type": "(selected: string | null, 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": "RadioGroup.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the fieldset legend will be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The caption content" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.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" + } + ] + } + ] + }, + "relative_time": { + "id": "relative_time", + "name": "RelativeTime", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-relativetime--default", + "code": "() => " + } + ], + "props": [ + { + "name": "datetime", + "type": "string", + "defaultValue": "", + "required": true, + "description": "An ISO8601 time representing the time" + }, + { + "name": "date", + "type": "string", + "defaultValue": "", + "description": "Instead of passing the `datetime`, it is possible to pass a full `Date` object into the `date` prop" + }, + { + "name": "format", + "type": "'auto' | 'micro' | 'elapsed'", + "defaultValue": "'auto'", + "description": "The format with which to display the time" + }, + { + "name": "tense", + "type": "'auto' | 'past' | 'future'", + "defaultValue": "'auto'", + "description": "The tense to use when displaying a relative time" + }, + { + "name": "precision", + "type": "'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'", + "defaultValue": "'second'", + "description": "The precision to use when displaying an elapsed time" + }, + { + "name": "threshold", + "type": "string", + "defaultValue": "'P30D'", + "description": "The threshold (ISO8601 duration) to display relative dates within" + }, + { + "name": "prefix", + "type": "string", + "defaultValue": "'on'", + "description": "The prefix to use when displaying a localised (non relative) date" + }, + { + "name": "second", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render seconds" + }, + { + "name": "minute", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render minutes" + }, + { + "name": "hour", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render hours" + }, + { + "name": "weekday", + "type": "'short' | 'long' | 'narrow'", + "defaultValue": "", + "description": "The format with which to render weekdays" + }, + { + "name": "day", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render days" + }, + { + "name": "month", + "type": "'numeric' | '2-digit' | 'short' | 'long' | 'narrow'", + "defaultValue": "'numeric'", + "description": "The format with which to render months" + }, + { + "name": "year", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render years" + }, + { + "name": "timeZoneName", + "type": "'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'", + "defaultValue": "", + "description": "The format with which to render the time zone" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"relative-time\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "segmented_control": { + "id": "segmented_control", + "name": "SegmentedControl", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-segmentedcontrol--default", + "code": "() => (\n \n Preview\n Raw\n Blame\n \n)" + } + ], + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-describedby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "fullWidth", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "", + "description": "Whether the control fills the width of its parent" + }, + { + "name": "onChange", + "type": "(selectedIndex?: number) => void", + "defaultValue": "", + "description": "The handler that gets called when a segment is selected" + }, + { + "name": "variant", + "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }", + "defaultValue": "'default'", + "description": "Configure alternative ways to render the control when it gets rendered in tight spaces" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [ + { + "name": "SegmentedControl.Button", + "props": [ + { + "name": "leadingIcon", + "type": "Component", + "defaultValue": "", + "description": "The leading icon comes before item label" + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl." + }, + { + "name": "defaultSelected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ] + }, + { + "name": "SegmentedControl.IconButton", + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "required": true, + "description": "The icon that represents the segmented control item" + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl." + }, + { + "name": "selected", + "type": "'small' | 'medium'", + "defaultValue": "", + "description": "The size of the buttons" + }, + { + "name": "defaultSelected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ] + } + ] + }, + "select": { + "id": "select", + "name": "Select", + "status": "alpha", + "a11yReviewed": true, + "stories": [ + { + "id": "components-select--default", + "code": "() => (\n \n \n Default label\n \n \n \n)" + } + ], + "props": [ + { + "name": "block", + "type": "boolean", + "defaultValue": "false", + "description": "Creates a full width input element" + }, + { + "name": "contrast", + "type": "boolean", + "defaultValue": "false", + "description": "Changes background color to a higher contrast color" + }, + { + "name": "placeholder", + "type": "string", + "defaultValue": "", + "description": "Placeholder text to show when no option is selected.
This option is hidden from the dropdown menu when the 'required' prop is set" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Creates a smaller or larger input than the default." + }, + { + "name": "validationStatus", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "description": "Style the input to match the status" + } + ], + "subcomponents": [] + }, + "select_panel": { + "id": "select_panel", + "name": "SelectPanel", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-selectpanel--default", + "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n overlayProps={{\n width: 'small',\n height: 'xsmall',\n }}\n />\n \n )\n}" + } + ], + "props": [ + { + "name": "title", + "type": "string | React.ReactElement", + "defaultValue": "\"Select an item\" or \"Select items\"", + "description": "A descriptive title for the panel" + }, + { + "name": "subtitle", + "type": "string | React.ReactElement", + "defaultValue": "", + "description": "When provided, a subtitle is displayed below the title" + }, + { + "name": "onOpenChange", + "type": "( open: boolean, gesture: | 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' ) => void", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "placeholder", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "Same as placeholderText", + "description": "The aria-label for the filter input" + }, + { + "name": "overlayProps", + "type": "Partial", + "defaultValue": "", + "description": "See [Overlay props](/react/Overlay#props)." + }, + { + "name": "title", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputPlaceholder", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "selected", + "type": "ItemInput | ItemInput[] | undefined", + "defaultValue": "", + "description": "Specify the selected item(s)" + }, + { + "name": "onSelectedChange", + "type": "(selected: ItemInput | ItemInput[]) => void", + "defaultValue": "", + "description": "Provide a callback called when the selected item(s) change" + } + ], + "subcomponents": [] + }, + "spinner": { + "id": "spinner", + "name": "Spinner", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-spinner--default", + "code": "() => " + } + ], + "props": [ + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "description": "Sets the width and height of the spinner." + } + ], + "subcomponents": [] + }, + "split_page_layout": { + "id": "split_page_layout", + "name": "SplitPageLayout", + "status": "alpha", + "a11yReviewed": true, + "stories": [ + { + "id": "components-splitpagelayout--default", + "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "SplitPageLayout.Header", + "props": [ + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the header." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the header is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Content", + "props": [ + { + "name": "width", + "type": "| 'full' | 'medium' | 'large' | 'xlarge'", + "defaultValue": "'large'", + "description": "The maximum width of the content region." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the content." + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the content is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Pane", + "props": [ + { + "name": "position", + "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", + "defaultValue": "'start'", + "description": "" + }, + { + "name": "width", + "type": "| 'small' | 'medium' | 'large'", + "defaultValue": "'medium'", + "description": "The width of the pane." + }, + { + "name": "minWidth", + "type": "number", + "defaultValue": "256", + "description": "The minimum width of the pane." + }, + { + "name": "resizable", + "type": "boolean", + "defaultValue": "false", + "description": "When true, the pane may be resized by the user." + }, + { + "name": "widthStorageKey", + "type": "string", + "defaultValue": "'paneWidth'", + "description": "Provide a key used by localStorage to persist the size of the pane on the client." + }, + { + "name": "sticky", + "type": "boolean", + "defaultValue": "true", + "description": "Whether the pane should stick to the top of the screen while the content scrolls." + }, + { + "name": "offsetHeader", + "type": "number | string", + "defaultValue": "0", + "description": "Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the pane." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the pane is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Footer", + "props": [ + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the footer." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the footer is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "state_label": { + "id": "state_label", + "name": "StateLabel", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-statelabel--default", + "code": "() => Open" + } + ], + "props": [ + { + "name": "variant", + "type": "'small' | 'normal'", + "defaultValue": "'normal'" + }, + { + "name": "status", + "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft'", + "required": true + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "sub_nav": { + "id": "sub_nav", + "name": "SubNav", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-subnav--default", + "code": "() => (\n \n \n \n Home\n \n Documentation\n Support\n \n \n)" + } + ], + "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 `