@primer/components 32.1.0-rc.6f5d2b00 → 32.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/.changeset/README.md +0 -8
- package/.changeset/config.json +0 -10
- package/.devcontainer/devcontainer.json +0 -8
- package/.eslintrc.json +0 -137
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
- package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
- package/.github/dependabot.yml +0 -18
- package/.github/pull_request_template.md +0 -18
- package/.github/workflows/check_for_changeset.yml +0 -25
- package/.github/workflows/ci.yml +0 -31
- package/.github/workflows/deploy_preview.yml +0 -47
- package/.github/workflows/deploy_production.yml +0 -70
- package/.github/workflows/release.yml +0 -35
- package/.github/workflows/release_canary.yml +0 -70
- package/.github/workflows/release_candidate.yml +0 -60
- package/.github/workflows/size.yml +0 -13
- package/.github/workflows/stale.yml +0 -26
- package/.gitignore +0 -10
- package/.npmrc +0 -4
- package/.nvmrc +0 -1
- package/.storybook/main.js +0 -9
- package/.storybook/preview.js +0 -117
- package/.vscode/launch.json +0 -21
- package/.vscode/settings.json +0 -13
- package/@types/@styled-system/index.d.ts +0 -0
- package/@types/@styled-system/prop-types/index.d.ts +0 -1
- package/@types/@styled-system/props/index.d.ts +0 -1
- package/@types/jest-styled-components/index.d.ts +0 -1
- package/CODEOWNERS +0 -2
- package/babel-defines.js +0 -13
- package/babel.config.js +0 -39
- package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
- package/contributor-docs/CONTRIBUTING.md +0 -274
- package/contributor-docs/adrs/adr-001-typescript.md +0 -23
- package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -108
- package/contributor-docs/adrs/adr-003-prop-norms.md +0 -72
- package/contributor-docs/behaviors.md +0 -132
- package/contributor-docs/component-contents-api-patterns.md +0 -316
- package/contributor-docs/principles.md +0 -39
- package/docs/.eslintrc +0 -0
- package/docs/.gitignore +0 -91
- package/docs/components/PropsList.js +0 -5
- package/docs/components/State.js +0 -9
- package/docs/components/constants.js +0 -34
- package/docs/components/index.js +0 -2
- package/docs/content/ActionList.mdx +0 -99
- package/docs/content/ActionList2.mdx +0 -359
- package/docs/content/ActionMenu.mdx +0 -80
- package/docs/content/AnchoredOverlay.mdx +0 -37
- package/docs/content/Autocomplete.mdx +0 -657
- package/docs/content/Avatar.mdx +0 -33
- package/docs/content/AvatarStack.mdx +0 -37
- package/docs/content/BorderBox.md +0 -46
- package/docs/content/Box.mdx +0 -96
- package/docs/content/BranchName.md +0 -18
- package/docs/content/Breadcrumbs.md +0 -47
- package/docs/content/Buttons.md +0 -46
- package/docs/content/Checkbox.md +0 -118
- package/docs/content/CircleBadge.md +0 -35
- package/docs/content/CircleOcticon.md +0 -18
- package/docs/content/CounterLabel.md +0 -22
- package/docs/content/Details.md +0 -105
- package/docs/content/Dialog.md +0 -105
- package/docs/content/Dialog2.mdx +0 -180
- package/docs/content/Dropdown.md +0 -65
- package/docs/content/DropdownMenu.mdx +0 -49
- package/docs/content/FilterList.md +0 -37
- package/docs/content/FilteredSearch.md +0 -32
- package/docs/content/Flash.md +0 -35
- package/docs/content/Flex.md +0 -58
- package/docs/content/FormGroup.md +0 -38
- package/docs/content/Grid.md +0 -59
- package/docs/content/Header.md +0 -77
- package/docs/content/Heading.md +0 -22
- package/docs/content/Label.md +0 -49
- package/docs/content/LabelGroup.md +0 -21
- package/docs/content/Link.md +0 -28
- package/docs/content/Overlay.mdx +0 -85
- package/docs/content/Pagehead.md +0 -18
- package/docs/content/Pagination.md +0 -178
- package/docs/content/PointerBox.md +0 -81
- package/docs/content/Popover.md +0 -129
- package/docs/content/Portal.mdx +0 -78
- package/docs/content/Position.md +0 -100
- package/docs/content/ProgressBar.mdx +0 -29
- package/docs/content/SelectMenu.md +0 -371
- package/docs/content/SelectPanel.mdx +0 -67
- package/docs/content/SideNav.md +0 -171
- package/docs/content/Spinner.mdx +0 -32
- package/docs/content/StateLabel.md +0 -27
- package/docs/content/StyledOcticon.md +0 -27
- package/docs/content/SubNav.md +0 -100
- package/docs/content/TabNav.md +0 -42
- package/docs/content/Text.md +0 -31
- package/docs/content/TextInput.md +0 -34
- package/docs/content/TextInputTokens.mdx +0 -89
- package/docs/content/TextInputWithTokens.mdx +0 -211
- package/docs/content/Timeline.md +0 -148
- package/docs/content/Token.mdx +0 -381
- package/docs/content/Tooltip.md +0 -32
- package/docs/content/Truncate.md +0 -55
- package/docs/content/UnderlineNav.md +0 -45
- package/docs/content/anchoredPosition.mdx +0 -163
- package/docs/content/core-concepts.md +0 -70
- package/docs/content/focusTrap.mdx +0 -103
- package/docs/content/focusZone.mdx +0 -145
- package/docs/content/getting-started.md +0 -138
- package/docs/content/index.md +0 -33
- package/docs/content/linting.md +0 -35
- package/docs/content/overriding-styles.mdx +0 -82
- package/docs/content/philosophy.md +0 -23
- package/docs/content/primer-theme.md +0 -89
- package/docs/content/ssr.mdx +0 -43
- package/docs/content/system-props.mdx +0 -37
- package/docs/content/theme-reference.md +0 -16
- package/docs/content/theming.md +0 -272
- package/docs/content/useOnEscapePress.mdx +0 -56
- package/docs/content/useOnOutsideClick.mdx +0 -57
- package/docs/content/useOpenAndCloseFocus.mdx +0 -49
- package/docs/content/useOverlay.mdx +0 -62
- package/docs/content/useSafeTimeout.mdx +0 -32
- package/docs/gatsby-config.js +0 -30
- package/docs/gatsby-node.js +0 -101
- package/docs/package-lock.json +0 -20867
- package/docs/package.json +0 -36
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -21
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -41
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -73
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -135
- package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
- package/docs/src/component-checklist.js +0 -81
- package/docs/src/props.js +0 -77
- package/jest.config.js +0 -13
- package/lib/__tests__/ActionList.test.d.ts +0 -1
- package/lib/__tests__/ActionList.test.js +0 -69
- package/lib/__tests__/ActionList.types.test.d.ts +0 -6
- package/lib/__tests__/ActionList.types.test.js +0 -69
- package/lib/__tests__/ActionList2.test.d.ts +0 -1
- package/lib/__tests__/ActionList2.test.js +0 -53
- package/lib/__tests__/ActionMenu.test.d.ts +0 -1
- package/lib/__tests__/ActionMenu.test.js +0 -151
- package/lib/__tests__/AnchoredOverlay.test.d.ts +0 -1
- package/lib/__tests__/AnchoredOverlay.test.js +0 -162
- package/lib/__tests__/Autocomplete.test.d.ts +0 -1
- package/lib/__tests__/Autocomplete.test.js +0 -528
- package/lib/__tests__/Avatar.test.d.ts +0 -1
- package/lib/__tests__/Avatar.test.js +0 -67
- package/lib/__tests__/AvatarStack.test.d.ts +0 -1
- package/lib/__tests__/AvatarStack.test.js +0 -71
- package/lib/__tests__/BorderBox.test.d.ts +0 -1
- package/lib/__tests__/BorderBox.test.js +0 -58
- package/lib/__tests__/Box.test.d.ts +0 -1
- package/lib/__tests__/Box.test.js +0 -78
- package/lib/__tests__/BranchName.test.d.ts +0 -1
- package/lib/__tests__/BranchName.test.js +0 -36
- package/lib/__tests__/Breadcrumbs.test.d.ts +0 -1
- package/lib/__tests__/Breadcrumbs.test.js +0 -40
- package/lib/__tests__/Breadcrumbs.types.test.d.ts +0 -3
- package/lib/__tests__/Breadcrumbs.types.test.js +0 -25
- package/lib/__tests__/BreadcrumbsItem.test.d.ts +0 -1
- package/lib/__tests__/BreadcrumbsItem.test.js +0 -49
- package/lib/__tests__/Button.test.d.ts +0 -1
- package/lib/__tests__/Button.test.js +0 -147
- package/lib/__tests__/Caret.test.d.ts +0 -1
- package/lib/__tests__/Caret.test.js +0 -52
- package/lib/__tests__/Checkbox.test.d.ts +0 -2
- package/lib/__tests__/Checkbox.test.js +0 -189
- package/lib/__tests__/CircleBadge.test.d.ts +0 -1
- package/lib/__tests__/CircleBadge.test.js +0 -83
- package/lib/__tests__/CircleBadge.types.test.d.ts +0 -3
- package/lib/__tests__/CircleBadge.types.test.js +0 -28
- package/lib/__tests__/CircleOcticon.test.d.ts +0 -1
- package/lib/__tests__/CircleOcticon.test.js +0 -71
- package/lib/__tests__/ConfirmationDialog.test.d.ts +0 -1
- package/lib/__tests__/ConfirmationDialog.test.js +0 -134
- package/lib/__tests__/CounterLabel.test.d.ts +0 -1
- package/lib/__tests__/CounterLabel.test.js +0 -58
- package/lib/__tests__/CounterLabel.types.test.d.ts +0 -3
- package/lib/__tests__/CounterLabel.types.test.js +0 -28
- package/lib/__tests__/Details.test.d.ts +0 -1
- package/lib/__tests__/Details.test.js +0 -117
- package/lib/__tests__/Dialog.test.d.ts +0 -1
- package/lib/__tests__/Dialog.test.js +0 -184
- package/lib/__tests__/Dialog.types.test.d.ts +0 -3
- package/lib/__tests__/Dialog.types.test.js +0 -28
- package/lib/__tests__/Dialog2.types.test.d.ts +0 -3
- package/lib/__tests__/Dialog2.types.test.js +0 -31
- package/lib/__tests__/Dropdown.test.d.ts +0 -1
- package/lib/__tests__/Dropdown.test.js +0 -63
- package/lib/__tests__/Dropdown.types.test.d.ts +0 -3
- package/lib/__tests__/Dropdown.types.test.js +0 -31
- package/lib/__tests__/DropdownMenu.test.d.ts +0 -1
- package/lib/__tests__/DropdownMenu.test.js +0 -150
- package/lib/__tests__/FilterList.test.d.ts +0 -1
- package/lib/__tests__/FilterList.test.js +0 -36
- package/lib/__tests__/FilterList.types.test.d.ts +0 -3
- package/lib/__tests__/FilterList.types.test.js +0 -27
- package/lib/__tests__/FilterListItem.test.d.ts +0 -1
- package/lib/__tests__/FilterListItem.test.js +0 -46
- package/lib/__tests__/FilteredSearch.test.d.ts +0 -1
- package/lib/__tests__/FilteredSearch.test.js +0 -36
- package/lib/__tests__/FilteredSearch.types.test.d.ts +0 -3
- package/lib/__tests__/FilteredSearch.types.test.js +0 -28
- package/lib/__tests__/Flash.test.d.ts +0 -1
- package/lib/__tests__/Flash.test.js +0 -62
- package/lib/__tests__/Flash.types.test.d.ts +0 -3
- package/lib/__tests__/Flash.types.test.js +0 -28
- package/lib/__tests__/Flex.test.d.ts +0 -1
- package/lib/__tests__/Flex.test.js +0 -74
- package/lib/__tests__/FormGroup.test.d.ts +0 -1
- package/lib/__tests__/FormGroup.test.js +0 -54
- package/lib/__tests__/FormGroup.types.test.d.ts +0 -3
- package/lib/__tests__/FormGroup.types.test.js +0 -28
- package/lib/__tests__/Grid.test.d.ts +0 -1
- package/lib/__tests__/Grid.test.js +0 -104
- package/lib/__tests__/Header.test.d.ts +0 -1
- package/lib/__tests__/Header.test.js +0 -58
- package/lib/__tests__/Header.types.test.d.ts +0 -3
- package/lib/__tests__/Header.types.test.js +0 -29
- package/lib/__tests__/Heading.test.d.ts +0 -1
- package/lib/__tests__/Heading.test.js +0 -109
- package/lib/__tests__/KeyPaths.types.test.d.ts +0 -11
- package/lib/__tests__/KeyPaths.types.test.js +0 -10
- package/lib/__tests__/Label.test.d.ts +0 -1
- package/lib/__tests__/Label.test.js +0 -46
- package/lib/__tests__/Label.types.test.d.ts +0 -3
- package/lib/__tests__/Label.types.test.js +0 -28
- package/lib/__tests__/LabelGroup.test.d.ts +0 -1
- package/lib/__tests__/LabelGroup.test.js +0 -38
- package/lib/__tests__/LabelGroup.types.test.d.ts +0 -3
- package/lib/__tests__/LabelGroup.types.test.js +0 -28
- package/lib/__tests__/Link.test.d.ts +0 -1
- package/lib/__tests__/Link.test.js +0 -76
- package/lib/__tests__/Link.types.test.d.ts +0 -3
- package/lib/__tests__/Link.types.test.js +0 -28
- package/lib/__tests__/Merge.types.test.d.ts +0 -30
- package/lib/__tests__/Merge.types.test.js +0 -27
- package/lib/__tests__/NewButton.test.d.ts +0 -1
- package/lib/__tests__/NewButton.test.js +0 -95
- package/lib/__tests__/Overlay.test.d.ts +0 -1
- package/lib/__tests__/Overlay.test.js +0 -145
- package/lib/__tests__/Overlay.types.test.d.ts +0 -6
- package/lib/__tests__/Overlay.types.test.js +0 -73
- package/lib/__tests__/Pagehead.test.d.ts +0 -1
- package/lib/__tests__/Pagehead.test.js +0 -37
- package/lib/__tests__/Pagehead.types.test.d.ts +0 -3
- package/lib/__tests__/Pagehead.types.test.js +0 -28
- package/lib/__tests__/Pagination/Pagination.test.d.ts +0 -1
- package/lib/__tests__/Pagination/Pagination.test.js +0 -47
- package/lib/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
- package/lib/__tests__/Pagination/PaginationModel.test.js +0 -186
- package/lib/__tests__/Pagination.types.test.d.ts +0 -3
- package/lib/__tests__/Pagination.types.test.js +0 -33
- package/lib/__tests__/PointerBox.test.d.ts +0 -1
- package/lib/__tests__/PointerBox.test.js +0 -46
- package/lib/__tests__/Popover.test.d.ts +0 -1
- package/lib/__tests__/Popover.test.js +0 -66
- package/lib/__tests__/Popover.types.test.d.ts +0 -3
- package/lib/__tests__/Popover.types.test.js +0 -27
- package/lib/__tests__/Portal.test.d.ts +0 -1
- package/lib/__tests__/Portal.test.js +0 -124
- package/lib/__tests__/Position.test.d.ts +0 -1
- package/lib/__tests__/Position.test.js +0 -143
- package/lib/__tests__/ProgressBar.test.d.ts +0 -1
- package/lib/__tests__/ProgressBar.test.js +0 -68
- package/lib/__tests__/SelectMenu.test.d.ts +0 -1
- package/lib/__tests__/SelectMenu.test.js +0 -155
- package/lib/__tests__/SelectMenu.types.test.d.ts +0 -3
- package/lib/__tests__/SelectMenu.types.test.js +0 -47
- package/lib/__tests__/SelectPanel.test.d.ts +0 -1
- package/lib/__tests__/SelectPanel.test.js +0 -80
- package/lib/__tests__/SelectPanel.types.test.d.ts +0 -3
- package/lib/__tests__/SelectPanel.types.test.js +0 -44
- package/lib/__tests__/SideNav.test.d.ts +0 -1
- package/lib/__tests__/SideNav.test.js +0 -71
- package/lib/__tests__/SideNav.types.test.d.ts +0 -3
- package/lib/__tests__/SideNav.types.test.js +0 -28
- package/lib/__tests__/Spinner.test.d.ts +0 -1
- package/lib/__tests__/Spinner.test.js +0 -53
- package/lib/__tests__/StateLabel.test.d.ts +0 -1
- package/lib/__tests__/StateLabel.test.js +0 -71
- package/lib/__tests__/StateLabel.types.test.d.ts +0 -3
- package/lib/__tests__/StateLabel.types.test.js +0 -28
- package/lib/__tests__/StyledOcticon.test.d.ts +0 -1
- package/lib/__tests__/StyledOcticon.test.js +0 -40
- package/lib/__tests__/StyledOcticon.types.test.d.ts +0 -3
- package/lib/__tests__/StyledOcticon.types.test.js +0 -32
- package/lib/__tests__/SubNav.test.d.ts +0 -1
- package/lib/__tests__/SubNav.test.js +0 -62
- package/lib/__tests__/SubNav.types.test.d.ts +0 -3
- package/lib/__tests__/SubNav.types.test.js +0 -27
- package/lib/__tests__/SubNavLink.test.d.ts +0 -1
- package/lib/__tests__/SubNavLink.test.js +0 -49
- package/lib/__tests__/TabNav.test.d.ts +0 -1
- package/lib/__tests__/TabNav.test.js +0 -49
- package/lib/__tests__/TabNav.types.test.d.ts +0 -3
- package/lib/__tests__/TabNav.types.test.js +0 -25
- package/lib/__tests__/Text.test.d.ts +0 -1
- package/lib/__tests__/Text.test.js +0 -105
- package/lib/__tests__/TextInput.test.d.ts +0 -1
- package/lib/__tests__/TextInput.test.js +0 -78
- package/lib/__tests__/TextInputWithTokens.test.d.ts +0 -1
- package/lib/__tests__/TextInputWithTokens.test.js +0 -572
- package/lib/__tests__/ThemeProvider.test.d.ts +0 -1
- package/lib/__tests__/ThemeProvider.test.js +0 -444
- package/lib/__tests__/Timeline.test.d.ts +0 -1
- package/lib/__tests__/Timeline.test.js +0 -75
- package/lib/__tests__/Timeline.types.test.d.ts +0 -3
- package/lib/__tests__/Timeline.types.test.js +0 -31
- package/lib/__tests__/Token.test.d.ts +0 -1
- package/lib/__tests__/Token.test.js +0 -180
- package/lib/__tests__/Tooltip.test.d.ts +0 -1
- package/lib/__tests__/Tooltip.test.js +0 -69
- package/lib/__tests__/Tooltip.types.test.d.ts +0 -3
- package/lib/__tests__/Tooltip.types.test.js +0 -28
- package/lib/__tests__/Truncate.test.d.ts +0 -1
- package/lib/__tests__/Truncate.test.js +0 -63
- package/lib/__tests__/Truncate.types.test.d.ts +0 -3
- package/lib/__tests__/Truncate.types.test.js +0 -31
- package/lib/__tests__/UnderlineNav.test.d.ts +0 -1
- package/lib/__tests__/UnderlineNav.test.js +0 -72
- package/lib/__tests__/UnderlineNav.types.test.d.ts +0 -3
- package/lib/__tests__/UnderlineNav.types.test.js +0 -25
- package/lib/__tests__/UnderlineNavLink.test.d.ts +0 -1
- package/lib/__tests__/UnderlineNavLink.test.js +0 -51
- package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
- package/lib/__tests__/behaviors/anchoredPosition.test.js +0 -390
- package/lib/__tests__/behaviors/focusTrap.test.d.ts +0 -1
- package/lib/__tests__/behaviors/focusTrap.test.js +0 -234
- package/lib/__tests__/behaviors/focusZone.test.d.ts +0 -1
- package/lib/__tests__/behaviors/focusZone.test.js +0 -570
- package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
- package/lib/__tests__/behaviors/iterateFocusableElements.test.js +0 -55
- package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
- package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -226
- package/lib/__tests__/filterObject.test.d.ts +0 -1
- package/lib/__tests__/filterObject.test.js +0 -30
- package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
- package/lib/__tests__/hooks/useAnchoredPosition.test.js +0 -54
- package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
- package/lib/__tests__/hooks/useOnEscapePress.test.js +0 -32
- package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
- package/lib/__tests__/hooks/useOnOutsideClick.test.js +0 -87
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -60
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -45
- package/lib/__tests__/theme.test.d.ts +0 -1
- package/lib/__tests__/theme.test.js +0 -36
- package/lib/__tests__/themeGet.test.d.ts +0 -1
- package/lib/__tests__/themeGet.test.js +0 -25
- package/lib/__tests__/useSafeTimeout.test.d.ts +0 -1
- package/lib/__tests__/useSafeTimeout.test.js +0 -45
- package/lib/__tests__/utils/createSlots.test.d.ts +0 -1
- package/lib/__tests__/utils/createSlots.test.js +0 -75
- package/lib/stories/ActionList.stories.js +0 -454
- package/lib/stories/ActionList2.stories.js +0 -909
- package/lib/stories/ActionMenu.stories.js +0 -348
- package/lib/stories/AnchoredOverlay.stories.js +0 -127
- package/lib/stories/Autocomplete.stories.js +0 -619
- package/lib/stories/AvatarStack.stories.js +0 -49
- package/lib/stories/Button.stories.js +0 -125
- package/lib/stories/Checkbox.stories.js +0 -227
- package/lib/stories/ConfirmationDialog.stories.js +0 -119
- package/lib/stories/Dialog.stories.js +0 -269
- package/lib/stories/DropdownMenu.stories.js +0 -122
- package/lib/stories/IssueLabelToken.stories.js +0 -165
- package/lib/stories/NewButton.stories.js +0 -230
- package/lib/stories/Overlay.stories.js +0 -204
- package/lib/stories/Portal.stories.js +0 -104
- package/lib/stories/ProfileToken.stories.js +0 -162
- package/lib/stories/SelectPanel.stories.js +0 -399
- package/lib/stories/TextInput.stories.js +0 -144
- package/lib/stories/TextInputWithTokens.stories.js +0 -252
- package/lib/stories/ThemeProvider.stories.js +0 -102
- package/lib/stories/Token.stories.js +0 -176
- package/lib/stories/useAnchoredPosition.stories.js +0 -351
- package/lib/stories/useFocusTrap.stories.js +0 -360
- package/lib/stories/useFocusZone.stories.js +0 -607
- package/lib-esm/__tests__/ActionList.test.d.ts +0 -1
- package/lib-esm/__tests__/ActionList.test.js +0 -57
- package/lib-esm/__tests__/ActionList.types.test.d.ts +0 -6
- package/lib-esm/__tests__/ActionList.types.test.js +0 -45
- package/lib-esm/__tests__/ActionList2.test.d.ts +0 -1
- package/lib-esm/__tests__/ActionList2.test.js +0 -41
- package/lib-esm/__tests__/ActionMenu.test.d.ts +0 -1
- package/lib-esm/__tests__/ActionMenu.test.js +0 -139
- package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +0 -1
- package/lib-esm/__tests__/AnchoredOverlay.test.js +0 -136
- package/lib-esm/__tests__/Autocomplete.test.d.ts +0 -1
- package/lib-esm/__tests__/Autocomplete.test.js +0 -494
- package/lib-esm/__tests__/Avatar.test.d.ts +0 -1
- package/lib-esm/__tests__/Avatar.test.js +0 -56
- package/lib-esm/__tests__/AvatarStack.test.d.ts +0 -1
- package/lib-esm/__tests__/AvatarStack.test.js +0 -58
- package/lib-esm/__tests__/BorderBox.test.d.ts +0 -1
- package/lib-esm/__tests__/BorderBox.test.js +0 -47
- package/lib-esm/__tests__/Box.test.d.ts +0 -1
- package/lib-esm/__tests__/Box.test.js +0 -67
- package/lib-esm/__tests__/BranchName.test.d.ts +0 -1
- package/lib-esm/__tests__/BranchName.test.js +0 -26
- package/lib-esm/__tests__/Breadcrumbs.test.d.ts +0 -1
- package/lib-esm/__tests__/Breadcrumbs.test.js +0 -30
- package/lib-esm/__tests__/Breadcrumbs.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Breadcrumbs.types.test.js +0 -12
- package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +0 -1
- package/lib-esm/__tests__/BreadcrumbsItem.test.js +0 -39
- package/lib-esm/__tests__/Button.test.d.ts +0 -1
- package/lib-esm/__tests__/Button.test.js +0 -137
- package/lib-esm/__tests__/Caret.test.d.ts +0 -1
- package/lib-esm/__tests__/Caret.test.js +0 -42
- package/lib-esm/__tests__/Checkbox.test.d.ts +0 -2
- package/lib-esm/__tests__/Checkbox.test.js +0 -169
- package/lib-esm/__tests__/CircleBadge.test.d.ts +0 -1
- package/lib-esm/__tests__/CircleBadge.test.js +0 -70
- package/lib-esm/__tests__/CircleBadge.types.test.d.ts +0 -3
- package/lib-esm/__tests__/CircleBadge.types.test.js +0 -13
- package/lib-esm/__tests__/CircleOcticon.test.d.ts +0 -1
- package/lib-esm/__tests__/CircleOcticon.test.js +0 -59
- package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +0 -1
- package/lib-esm/__tests__/ConfirmationDialog.test.js +0 -113
- package/lib-esm/__tests__/CounterLabel.test.d.ts +0 -1
- package/lib-esm/__tests__/CounterLabel.test.js +0 -47
- package/lib-esm/__tests__/CounterLabel.types.test.d.ts +0 -3
- package/lib-esm/__tests__/CounterLabel.types.test.js +0 -13
- package/lib-esm/__tests__/Details.test.d.ts +0 -1
- package/lib-esm/__tests__/Details.test.js +0 -107
- package/lib-esm/__tests__/Dialog.test.d.ts +0 -1
- package/lib-esm/__tests__/Dialog.test.js +0 -171
- package/lib-esm/__tests__/Dialog.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Dialog.types.test.js +0 -13
- package/lib-esm/__tests__/Dialog2.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Dialog2.types.test.js +0 -16
- package/lib-esm/__tests__/Dropdown.test.d.ts +0 -1
- package/lib-esm/__tests__/Dropdown.test.js +0 -53
- package/lib-esm/__tests__/Dropdown.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Dropdown.types.test.js +0 -17
- package/lib-esm/__tests__/DropdownMenu.test.d.ts +0 -1
- package/lib-esm/__tests__/DropdownMenu.test.js +0 -137
- package/lib-esm/__tests__/FilterList.test.d.ts +0 -1
- package/lib-esm/__tests__/FilterList.test.js +0 -26
- package/lib-esm/__tests__/FilterList.types.test.d.ts +0 -3
- package/lib-esm/__tests__/FilterList.types.test.js +0 -13
- package/lib-esm/__tests__/FilterListItem.test.d.ts +0 -1
- package/lib-esm/__tests__/FilterListItem.test.js +0 -36
- package/lib-esm/__tests__/FilteredSearch.test.d.ts +0 -1
- package/lib-esm/__tests__/FilteredSearch.test.js +0 -26
- package/lib-esm/__tests__/FilteredSearch.types.test.d.ts +0 -3
- package/lib-esm/__tests__/FilteredSearch.types.test.js +0 -13
- package/lib-esm/__tests__/Flash.test.d.ts +0 -1
- package/lib-esm/__tests__/Flash.test.js +0 -51
- package/lib-esm/__tests__/Flash.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Flash.types.test.js +0 -13
- package/lib-esm/__tests__/Flex.test.d.ts +0 -1
- package/lib-esm/__tests__/Flex.test.js +0 -64
- package/lib-esm/__tests__/FormGroup.test.d.ts +0 -1
- package/lib-esm/__tests__/FormGroup.test.js +0 -44
- package/lib-esm/__tests__/FormGroup.types.test.d.ts +0 -3
- package/lib-esm/__tests__/FormGroup.types.test.js +0 -13
- package/lib-esm/__tests__/Grid.test.d.ts +0 -1
- package/lib-esm/__tests__/Grid.test.js +0 -94
- package/lib-esm/__tests__/Header.test.d.ts +0 -1
- package/lib-esm/__tests__/Header.test.js +0 -48
- package/lib-esm/__tests__/Header.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Header.types.test.js +0 -15
- package/lib-esm/__tests__/Heading.test.d.ts +0 -1
- package/lib-esm/__tests__/Heading.test.js +0 -99
- package/lib-esm/__tests__/KeyPaths.types.test.d.ts +0 -11
- package/lib-esm/__tests__/KeyPaths.types.test.js +0 -3
- package/lib-esm/__tests__/Label.test.d.ts +0 -1
- package/lib-esm/__tests__/Label.test.js +0 -36
- package/lib-esm/__tests__/Label.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Label.types.test.js +0 -13
- package/lib-esm/__tests__/LabelGroup.test.d.ts +0 -1
- package/lib-esm/__tests__/LabelGroup.test.js +0 -26
- package/lib-esm/__tests__/LabelGroup.types.test.d.ts +0 -3
- package/lib-esm/__tests__/LabelGroup.types.test.js +0 -13
- package/lib-esm/__tests__/Link.test.d.ts +0 -1
- package/lib-esm/__tests__/Link.test.js +0 -66
- package/lib-esm/__tests__/Link.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Link.types.test.js +0 -13
- package/lib-esm/__tests__/Merge.types.test.d.ts +0 -30
- package/lib-esm/__tests__/Merge.types.test.js +0 -14
- package/lib-esm/__tests__/NewButton.test.d.ts +0 -1
- package/lib-esm/__tests__/NewButton.test.js +0 -84
- package/lib-esm/__tests__/Overlay.test.d.ts +0 -1
- package/lib-esm/__tests__/Overlay.test.js +0 -123
- package/lib-esm/__tests__/Overlay.types.test.d.ts +0 -6
- package/lib-esm/__tests__/Overlay.types.test.js +0 -49
- package/lib-esm/__tests__/Pagehead.test.d.ts +0 -1
- package/lib-esm/__tests__/Pagehead.test.js +0 -26
- package/lib-esm/__tests__/Pagehead.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Pagehead.types.test.js +0 -13
- package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +0 -1
- package/lib-esm/__tests__/Pagination/Pagination.test.js +0 -35
- package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +0 -1
- package/lib-esm/__tests__/Pagination/PaginationModel.test.js +0 -182
- package/lib-esm/__tests__/Pagination.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Pagination.types.test.js +0 -18
- package/lib-esm/__tests__/PointerBox.test.d.ts +0 -1
- package/lib-esm/__tests__/PointerBox.test.js +0 -36
- package/lib-esm/__tests__/Popover.test.d.ts +0 -1
- package/lib-esm/__tests__/Popover.test.js +0 -53
- package/lib-esm/__tests__/Popover.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Popover.types.test.js +0 -13
- package/lib-esm/__tests__/Portal.test.d.ts +0 -1
- package/lib-esm/__tests__/Portal.test.js +0 -104
- package/lib-esm/__tests__/Position.test.d.ts +0 -1
- package/lib-esm/__tests__/Position.test.js +0 -133
- package/lib-esm/__tests__/ProgressBar.test.d.ts +0 -1
- package/lib-esm/__tests__/ProgressBar.test.js +0 -58
- package/lib-esm/__tests__/SelectMenu.test.d.ts +0 -1
- package/lib-esm/__tests__/SelectMenu.test.js +0 -145
- package/lib-esm/__tests__/SelectMenu.types.test.d.ts +0 -3
- package/lib-esm/__tests__/SelectMenu.types.test.js +0 -33
- package/lib-esm/__tests__/SelectPanel.test.d.ts +0 -1
- package/lib-esm/__tests__/SelectPanel.test.js +0 -65
- package/lib-esm/__tests__/SelectPanel.types.test.d.ts +0 -3
- package/lib-esm/__tests__/SelectPanel.types.test.js +0 -29
- package/lib-esm/__tests__/SideNav.test.d.ts +0 -1
- package/lib-esm/__tests__/SideNav.test.js +0 -60
- package/lib-esm/__tests__/SideNav.types.test.d.ts +0 -3
- package/lib-esm/__tests__/SideNav.types.test.js +0 -13
- package/lib-esm/__tests__/Spinner.test.d.ts +0 -1
- package/lib-esm/__tests__/Spinner.test.js +0 -43
- package/lib-esm/__tests__/StateLabel.test.d.ts +0 -1
- package/lib-esm/__tests__/StateLabel.test.js +0 -61
- package/lib-esm/__tests__/StateLabel.types.test.d.ts +0 -3
- package/lib-esm/__tests__/StateLabel.types.test.js +0 -13
- package/lib-esm/__tests__/StyledOcticon.test.d.ts +0 -1
- package/lib-esm/__tests__/StyledOcticon.test.js +0 -29
- package/lib-esm/__tests__/StyledOcticon.types.test.d.ts +0 -3
- package/lib-esm/__tests__/StyledOcticon.types.test.js +0 -16
- package/lib-esm/__tests__/SubNav.test.d.ts +0 -1
- package/lib-esm/__tests__/SubNav.test.js +0 -50
- package/lib-esm/__tests__/SubNav.types.test.d.ts +0 -3
- package/lib-esm/__tests__/SubNav.types.test.js +0 -14
- package/lib-esm/__tests__/SubNavLink.test.d.ts +0 -1
- package/lib-esm/__tests__/SubNavLink.test.js +0 -39
- package/lib-esm/__tests__/TabNav.test.d.ts +0 -1
- package/lib-esm/__tests__/TabNav.test.js +0 -39
- package/lib-esm/__tests__/TabNav.types.test.d.ts +0 -3
- package/lib-esm/__tests__/TabNav.types.test.js +0 -12
- package/lib-esm/__tests__/Text.test.d.ts +0 -1
- package/lib-esm/__tests__/Text.test.js +0 -93
- package/lib-esm/__tests__/TextInput.test.d.ts +0 -1
- package/lib-esm/__tests__/TextInput.test.js +0 -68
- package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +0 -1
- package/lib-esm/__tests__/TextInputWithTokens.test.js +0 -511
- package/lib-esm/__tests__/ThemeProvider.test.d.ts +0 -1
- package/lib-esm/__tests__/ThemeProvider.test.js +0 -408
- package/lib-esm/__tests__/Timeline.test.d.ts +0 -1
- package/lib-esm/__tests__/Timeline.test.js +0 -65
- package/lib-esm/__tests__/Timeline.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Timeline.types.test.js +0 -18
- package/lib-esm/__tests__/Token.test.d.ts +0 -1
- package/lib-esm/__tests__/Token.test.js +0 -166
- package/lib-esm/__tests__/Tooltip.test.d.ts +0 -1
- package/lib-esm/__tests__/Tooltip.test.js +0 -59
- package/lib-esm/__tests__/Tooltip.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Tooltip.types.test.js +0 -13
- package/lib-esm/__tests__/Truncate.test.d.ts +0 -1
- package/lib-esm/__tests__/Truncate.test.js +0 -53
- package/lib-esm/__tests__/Truncate.types.test.d.ts +0 -3
- package/lib-esm/__tests__/Truncate.types.test.js +0 -16
- package/lib-esm/__tests__/UnderlineNav.test.d.ts +0 -1
- package/lib-esm/__tests__/UnderlineNav.test.js +0 -60
- package/lib-esm/__tests__/UnderlineNav.types.test.d.ts +0 -3
- package/lib-esm/__tests__/UnderlineNav.types.test.js +0 -12
- package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +0 -1
- package/lib-esm/__tests__/UnderlineNavLink.test.js +0 -41
- package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +0 -388
- package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/focusTrap.test.js +0 -227
- package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/focusZone.test.js +0 -487
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +0 -48
- package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +0 -224
- package/lib-esm/__tests__/filterObject.test.d.ts +0 -1
- package/lib-esm/__tests__/filterObject.test.js +0 -27
- package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +0 -46
- package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +0 -23
- package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +0 -68
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +0 -52
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +0 -36
- package/lib-esm/__tests__/theme.test.d.ts +0 -1
- package/lib-esm/__tests__/theme.test.js +0 -33
- package/lib-esm/__tests__/themeGet.test.d.ts +0 -1
- package/lib-esm/__tests__/themeGet.test.js +0 -22
- package/lib-esm/__tests__/useSafeTimeout.test.d.ts +0 -1
- package/lib-esm/__tests__/useSafeTimeout.test.js +0 -39
- package/lib-esm/__tests__/utils/createSlots.test.d.ts +0 -1
- package/lib-esm/__tests__/utils/createSlots.test.js +0 -67
- package/lib-esm/stories/ActionList.stories.js +0 -395
- package/lib-esm/stories/ActionList2.stories.js +0 -797
- package/lib-esm/stories/ActionMenu.stories.js +0 -303
- package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
- package/lib-esm/stories/Autocomplete.stories.js +0 -560
- package/lib-esm/stories/AvatarStack.stories.js +0 -32
- package/lib-esm/stories/Button.stories.js +0 -86
- package/lib-esm/stories/Checkbox.stories.js +0 -197
- package/lib-esm/stories/ConfirmationDialog.stories.js +0 -94
- package/lib-esm/stories/Dialog.stories.js +0 -244
- package/lib-esm/stories/DropdownMenu.stories.js +0 -94
- package/lib-esm/stories/IssueLabelToken.stories.js +0 -139
- package/lib-esm/stories/NewButton.stories.js +0 -178
- package/lib-esm/stories/Overlay.stories.js +0 -173
- package/lib-esm/stories/Portal.stories.js +0 -68
- package/lib-esm/stories/ProfileToken.stories.js +0 -136
- package/lib-esm/stories/SelectPanel.stories.js +0 -334
- package/lib-esm/stories/TextInput.stories.js +0 -117
- package/lib-esm/stories/TextInputWithTokens.stories.js +0 -210
- package/lib-esm/stories/ThemeProvider.stories.js +0 -83
- package/lib-esm/stories/Token.stories.js +0 -146
- package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
- package/lib-esm/stories/useFocusTrap.stories.js +0 -313
- package/lib-esm/stories/useFocusZone.stories.js +0 -562
- package/migrating.md +0 -250
- package/now.json +0 -17
- package/package-lock.json +0 -66509
- package/rollup.config.js +0 -36
- package/script/build +0 -21
- package/script/build-storybook +0 -10
- package/script/setup +0 -12
- package/src/ActionList/Divider.tsx +0 -25
- package/src/ActionList/Group.tsx +0 -45
- package/src/ActionList/Header.tsx +0 -74
- package/src/ActionList/Item.tsx +0 -480
- package/src/ActionList/List.tsx +0 -258
- package/src/ActionList/index.ts +0 -21
- package/src/ActionList2/Description.tsx +0 -52
- package/src/ActionList2/Divider.tsx +0 -24
- package/src/ActionList2/Group.tsx +0 -103
- package/src/ActionList2/Header.tsx +0 -58
- package/src/ActionList2/Item.tsx +0 -246
- package/src/ActionList2/LinkItem.tsx +0 -49
- package/src/ActionList2/List.tsx +0 -55
- package/src/ActionList2/Selection.tsx +0 -60
- package/src/ActionList2/Visuals.tsx +0 -76
- package/src/ActionList2/index.ts +0 -39
- package/src/ActionMenu.tsx +0 -106
- package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -191
- package/src/AnchoredOverlay/index.ts +0 -2
- package/src/Autocomplete/Autocomplete.tsx +0 -103
- package/src/Autocomplete/AutocompleteContext.tsx +0 -19
- package/src/Autocomplete/AutocompleteInput.tsx +0 -179
- package/src/Autocomplete/AutocompleteMenu.tsx +0 -341
- package/src/Autocomplete/AutocompleteOverlay.tsx +0 -68
- package/src/Autocomplete/index.ts +0 -2
- package/src/Avatar.tsx +0 -46
- package/src/AvatarPair.tsx +0 -35
- package/src/AvatarStack.tsx +0 -159
- package/src/BaseStyles.tsx +0 -53
- package/src/BorderBox.tsx +0 -18
- package/src/Box.tsx +0 -54
- package/src/BranchName.tsx +0 -19
- package/src/Breadcrumbs.tsx +0 -101
- package/src/Button/Button.tsx +0 -39
- package/src/Button/ButtonBase.tsx +0 -39
- package/src/Button/ButtonClose.tsx +0 -36
- package/src/Button/ButtonDanger.tsx +0 -42
- package/src/Button/ButtonGroup.tsx +0 -55
- package/src/Button/ButtonInvisible.tsx +0 -31
- package/src/Button/ButtonOutline.tsx +0 -42
- package/src/Button/ButtonPrimary.tsx +0 -40
- package/src/Button/ButtonStyles.tsx +0 -36
- package/src/Button/ButtonTableList.tsx +0 -45
- package/src/Button/index.ts +0 -16
- package/src/Caret.tsx +0 -133
- package/src/Checkbox.tsx +0 -75
- package/src/CircleBadge.tsx +0 -53
- package/src/CircleOcticon.tsx +0 -37
- package/src/CounterLabel.tsx +0 -50
- package/src/Details.tsx +0 -23
- package/src/Dialog/ConfirmationDialog.tsx +0 -184
- package/src/Dialog/Dialog.tsx +0 -444
- package/src/Dialog.tsx +0 -145
- package/src/Dropdown.tsx +0 -154
- package/src/DropdownMenu/DropdownButton.tsx +0 -15
- package/src/DropdownMenu/DropdownMenu.tsx +0 -115
- package/src/DropdownMenu/index.ts +0 -4
- package/src/DropdownStyles.ts +0 -128
- package/src/FilterList.tsx +0 -75
- package/src/FilteredActionList/FilteredActionList.tsx +0 -142
- package/src/FilteredActionList/index.ts +0 -2
- package/src/FilteredSearch.tsx +0 -27
- package/src/Flash.tsx +0 -75
- package/src/Flex.tsx +0 -15
- package/src/FormGroup.tsx +0 -24
- package/src/Grid.tsx +0 -15
- package/src/Header.tsx +0 -74
- package/src/Heading.tsx +0 -21
- package/src/Label.tsx +0 -72
- package/src/LabelGroup.tsx +0 -17
- package/src/Link.tsx +0 -42
- package/src/NewButton/button-counter.tsx +0 -15
- package/src/NewButton/button.tsx +0 -283
- package/src/NewButton/index.ts +0 -10
- package/src/NewButton/types.ts +0 -36
- package/src/Overlay.tsx +0 -203
- package/src/Pagehead.tsx +0 -16
- package/src/Pagination/Pagination.tsx +0 -212
- package/src/Pagination/index.ts +0 -4
- package/src/Pagination/model.tsx +0 -187
- package/src/PointerBox.tsx +0 -31
- package/src/Popover.tsx +0 -225
- package/src/Portal/Portal.tsx +0 -97
- package/src/Portal/index.ts +0 -5
- package/src/Position.tsx +0 -63
- package/src/ProgressBar.tsx +0 -52
- package/src/SelectMenu/SelectMenu.tsx +0 -123
- package/src/SelectMenu/SelectMenuContext.tsx +0 -9
- package/src/SelectMenu/SelectMenuDivider.tsx +0 -24
- package/src/SelectMenu/SelectMenuFilter.tsx +0 -50
- package/src/SelectMenu/SelectMenuFooter.tsx +0 -27
- package/src/SelectMenu/SelectMenuHeader.tsx +0 -48
- package/src/SelectMenu/SelectMenuItem.tsx +0 -136
- package/src/SelectMenu/SelectMenuList.tsx +0 -41
- package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -25
- package/src/SelectMenu/SelectMenuModal.tsx +0 -119
- package/src/SelectMenu/SelectMenuTab.tsx +0 -87
- package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -29
- package/src/SelectMenu/SelectMenuTabs.tsx +0 -43
- package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
- package/src/SelectMenu/index.ts +0 -15
- package/src/SelectPanel/SelectPanel.tsx +0 -173
- package/src/SelectPanel/index.ts +0 -2
- package/src/SideNav.tsx +0 -191
- package/src/Spinner.tsx +0 -59
- package/src/StateLabel.tsx +0 -112
- package/src/StyledOcticon.tsx +0 -22
- package/src/SubNav.tsx +0 -124
- package/src/TabNav.tsx +0 -73
- package/src/Text.tsx +0 -13
- package/src/TextInput.tsx +0 -68
- package/src/TextInputWithTokens.tsx +0 -351
- package/src/ThemeProvider.tsx +0 -176
- package/src/Timeline.tsx +0 -140
- package/src/Token/AvatarToken.tsx +0 -54
- package/src/Token/IssueLabelToken.tsx +0 -150
- package/src/Token/Token.tsx +0 -126
- package/src/Token/TokenBase.tsx +0 -129
- package/src/Token/_RemoveTokenButton.tsx +0 -111
- package/src/Token/_TokenTextContainer.tsx +0 -47
- package/src/Token/index.ts +0 -3
- package/src/Tooltip.tsx +0 -263
- package/src/Truncate.tsx +0 -31
- package/src/UnderlineNav.tsx +0 -107
- package/src/_TextInputWrapper.tsx +0 -113
- package/src/_UnstyledTextInput.tsx +0 -19
- package/src/__tests__/.eslintrc.json +0 -11
- package/src/__tests__/ActionList.test.tsx +0 -53
- package/src/__tests__/ActionList.types.test.tsx +0 -51
- package/src/__tests__/ActionList2.test.tsx +0 -47
- package/src/__tests__/ActionMenu.test.tsx +0 -136
- package/src/__tests__/AnchoredOverlay.test.tsx +0 -150
- package/src/__tests__/Autocomplete.test.tsx +0 -444
- package/src/__tests__/Avatar.test.tsx +0 -44
- package/src/__tests__/AvatarStack.test.tsx +0 -48
- package/src/__tests__/BorderBox.test.tsx +0 -43
- package/src/__tests__/Box.test.tsx +0 -42
- package/src/__tests__/BranchName.test.tsx +0 -26
- package/src/__tests__/Breadcrumbs.test.tsx +0 -27
- package/src/__tests__/Breadcrumbs.types.test.tsx +0 -22
- package/src/__tests__/BreadcrumbsItem.test.tsx +0 -31
- package/src/__tests__/Button.test.tsx +0 -128
- package/src/__tests__/Caret.test.tsx +0 -36
- package/src/__tests__/Checkbox.test.tsx +0 -155
- package/src/__tests__/CircleBadge.test.tsx +0 -66
- package/src/__tests__/CircleBadge.types.test.tsx +0 -11
- package/src/__tests__/CircleOcticon.test.tsx +0 -50
- package/src/__tests__/ConfirmationDialog.test.tsx +0 -120
- package/src/__tests__/CounterLabel.test.tsx +0 -50
- package/src/__tests__/CounterLabel.types.test.tsx +0 -11
- package/src/__tests__/Details.test.tsx +0 -115
- package/src/__tests__/Dialog.test.tsx +0 -155
- package/src/__tests__/Dialog.types.test.tsx +0 -11
- package/src/__tests__/Dialog2.types.test.tsx +0 -11
- package/src/__tests__/Dropdown.test.tsx +0 -53
- package/src/__tests__/Dropdown.types.test.tsx +0 -21
- package/src/__tests__/DropdownMenu.test.tsx +0 -136
- package/src/__tests__/FilterList.test.tsx +0 -26
- package/src/__tests__/FilterList.types.test.tsx +0 -17
- package/src/__tests__/FilterListItem.test.tsx +0 -31
- package/src/__tests__/FilteredSearch.test.tsx +0 -26
- package/src/__tests__/FilteredSearch.types.test.tsx +0 -11
- package/src/__tests__/Flash.test.tsx +0 -45
- package/src/__tests__/Flash.types.test.tsx +0 -11
- package/src/__tests__/Flex.test.tsx +0 -58
- package/src/__tests__/FormGroup.test.tsx +0 -38
- package/src/__tests__/FormGroup.types.test.tsx +0 -11
- package/src/__tests__/Grid.test.tsx +0 -82
- package/src/__tests__/Header.test.tsx +0 -49
- package/src/__tests__/Header.types.test.tsx +0 -19
- package/src/__tests__/Heading.test.tsx +0 -91
- package/src/__tests__/KeyPaths.types.test.ts +0 -14
- package/src/__tests__/Label.test.tsx +0 -34
- package/src/__tests__/Label.types.test.tsx +0 -11
- package/src/__tests__/LabelGroup.test.tsx +0 -30
- package/src/__tests__/LabelGroup.types.test.tsx +0 -11
- package/src/__tests__/Link.test.tsx +0 -47
- package/src/__tests__/Link.types.test.tsx +0 -11
- package/src/__tests__/Merge.types.test.ts +0 -39
- package/src/__tests__/NewButton.test.tsx +0 -70
- package/src/__tests__/Overlay.test.tsx +0 -103
- package/src/__tests__/Overlay.types.test.tsx +0 -33
- package/src/__tests__/Pagehead.test.tsx +0 -23
- package/src/__tests__/Pagehead.types.test.tsx +0 -11
- package/src/__tests__/Pagination/Pagination.test.tsx +0 -30
- package/src/__tests__/Pagination/PaginationModel.test.tsx +0 -133
- package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -184
- package/src/__tests__/Pagination.types.test.tsx +0 -11
- package/src/__tests__/PointerBox.test.tsx +0 -34
- package/src/__tests__/Popover.test.tsx +0 -68
- package/src/__tests__/Popover.types.test.tsx +0 -17
- package/src/__tests__/Portal.test.tsx +0 -103
- package/src/__tests__/Position.test.tsx +0 -117
- package/src/__tests__/ProgressBar.test.tsx +0 -40
- package/src/__tests__/SelectMenu.test.tsx +0 -142
- package/src/__tests__/SelectMenu.types.test.tsx +0 -37
- package/src/__tests__/SelectPanel.test.tsx +0 -63
- package/src/__tests__/SelectPanel.types.test.tsx +0 -31
- package/src/__tests__/SideNav.test.tsx +0 -62
- package/src/__tests__/SideNav.types.test.tsx +0 -11
- package/src/__tests__/Spinner.test.tsx +0 -42
- package/src/__tests__/StateLabel.test.tsx +0 -48
- package/src/__tests__/StateLabel.types.test.tsx +0 -11
- package/src/__tests__/StyledOcticon.test.tsx +0 -26
- package/src/__tests__/StyledOcticon.types.test.tsx +0 -12
- package/src/__tests__/SubNav.test.tsx +0 -50
- package/src/__tests__/SubNav.types.test.tsx +0 -25
- package/src/__tests__/SubNavLink.test.tsx +0 -31
- package/src/__tests__/TabNav.test.tsx +0 -32
- package/src/__tests__/TabNav.types.test.tsx +0 -22
- package/src/__tests__/Text.test.tsx +0 -78
- package/src/__tests__/TextInput.test.tsx +0 -49
- package/src/__tests__/TextInputWithTokens.test.tsx +0 -422
- package/src/__tests__/ThemeProvider.test.tsx +0 -441
- package/src/__tests__/Timeline.test.tsx +0 -58
- package/src/__tests__/Timeline.types.test.tsx +0 -31
- package/src/__tests__/Token.test.tsx +0 -118
- package/src/__tests__/Tooltip.test.tsx +0 -52
- package/src/__tests__/Tooltip.types.test.tsx +0 -11
- package/src/__tests__/Truncate.test.tsx +0 -43
- package/src/__tests__/Truncate.types.test.tsx +0 -11
- package/src/__tests__/UnderlineNav.test.tsx +0 -58
- package/src/__tests__/UnderlineNav.types.test.tsx +0 -22
- package/src/__tests__/UnderlineNavLink.test.tsx +0 -31
- package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +0 -223
- package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +0 -14
- package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +0 -80
- package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +0 -232
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +0 -3888
- package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +0 -19
- package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +0 -377
- package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +0 -14
- package/src/__tests__/__snapshots__/Box.test.tsx.snap +0 -201
- package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +0 -17
- package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +0 -29
- package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +0 -79
- package/src/__tests__/__snapshots__/Button.test.tsx.snap +0 -840
- package/src/__tests__/__snapshots__/Caret.test.tsx.snap +0 -373
- package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap +0 -16
- package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +0 -142
- package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +0 -65
- package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +0 -89
- package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +0 -22
- package/src/__tests__/__snapshots__/Details.test.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +0 -201
- package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +0 -249
- package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +0 -107
- package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +0 -13
- package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +0 -80
- package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +0 -32
- package/src/__tests__/__snapshots__/Flash.test.tsx.snap +0 -32
- package/src/__tests__/__snapshots__/Flex.test.tsx.snap +0 -130
- package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +0 -25
- package/src/__tests__/__snapshots__/Grid.test.tsx.snap +0 -178
- package/src/__tests__/__snapshots__/Header.test.tsx.snap +0 -79
- package/src/__tests__/__snapshots__/Heading.test.tsx.snap +0 -13
- package/src/__tests__/__snapshots__/Label.test.tsx.snap +0 -73
- package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Link.test.tsx.snap +0 -212
- package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +0 -305
- package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +0 -174
- package/src/__tests__/__snapshots__/Popover.test.tsx.snap +0 -4687
- package/src/__tests__/__snapshots__/Position.test.tsx.snap +0 -44
- package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +0 -53
- package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +0 -473
- package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +0 -124
- package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +0 -143
- package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +0 -33
- package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +0 -395
- package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +0 -26
- package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +0 -44
- package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +0 -199
- package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +0 -58
- package/src/__tests__/__snapshots__/Text.test.tsx.snap +0 -7
- package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +0 -446
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +0 -6045
- package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +0 -159
- package/src/__tests__/__snapshots__/Token.test.tsx.snap +0 -3811
- package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -227
- package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +0 -17
- package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +0 -59
- package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +0 -130
- package/src/__tests__/behaviors/anchoredPosition.test.ts +0 -295
- package/src/__tests__/behaviors/focusTrap.test.tsx +0 -236
- package/src/__tests__/behaviors/focusZone.test.tsx +0 -549
- package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +0 -61
- package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +0 -195
- package/src/__tests__/filterObject.test.ts +0 -54
- package/src/__tests__/hooks/useAnchoredPosition.test.tsx +0 -31
- package/src/__tests__/hooks/useOnEscapePress.test.tsx +0 -16
- package/src/__tests__/hooks/useOnOutsideClick.test.tsx +0 -48
- package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +0 -48
- package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +0 -39
- package/src/__tests__/theme.test.ts +0 -41
- package/src/__tests__/themeGet.test.ts +0 -15
- package/src/__tests__/useSafeTimeout.test.tsx +0 -36
- package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +0 -55
- package/src/__tests__/utils/createSlots.test.tsx +0 -74
- package/src/behaviors/anchoredPosition.ts +0 -442
- package/src/behaviors/focusTrap.ts +0 -184
- package/src/behaviors/focusZone.ts +0 -713
- package/src/behaviors/scrollIntoViewingArea.ts +0 -27
- package/src/constants.ts +0 -62
- package/src/drafts.ts +0 -10
- package/src/hooks/index.ts +0 -11
- package/src/hooks/useAnchoredPosition.ts +0 -54
- package/src/hooks/useCombinedRefs.ts +0 -40
- package/src/hooks/useDetails.tsx +0 -54
- package/src/hooks/useDialog.ts +0 -121
- package/src/hooks/useFocusTrap.ts +0 -80
- package/src/hooks/useFocusZone.ts +0 -64
- package/src/hooks/useOnEscapePress.ts +0 -63
- package/src/hooks/useOnOutsideClick.tsx +0 -82
- package/src/hooks/useOpenAndCloseFocus.ts +0 -32
- package/src/hooks/useOverlay.tsx +0 -34
- package/src/hooks/useProvidedRefOrCreate.ts +0 -14
- package/src/hooks/useProvidedStateOrCreate.ts +0 -27
- package/src/hooks/useRenderForcingRef.ts +0 -22
- package/src/hooks/useResizeObserver.ts +0 -11
- package/src/hooks/useSafeTimeout.ts +0 -38
- package/src/hooks/useScrollFlash.ts +0 -21
- package/src/index.ts +0 -175
- package/src/polyfills/eventListenerSignal.ts +0 -66
- package/src/stories/ActionList.stories.tsx +0 -436
- package/src/stories/ActionList2.stories.tsx +0 -1291
- package/src/stories/ActionMenu.stories.tsx +0 -331
- package/src/stories/AnchoredOverlay.stories.tsx +0 -117
- package/src/stories/Autocomplete.stories.tsx +0 -655
- package/src/stories/AvatarStack.stories.tsx +0 -37
- package/src/stories/Button.stories.tsx +0 -92
- package/src/stories/Checkbox.stories.tsx +0 -164
- package/src/stories/ConfirmationDialog.stories.tsx +0 -105
- package/src/stories/Dialog.stories.tsx +0 -240
- package/src/stories/DropdownMenu.stories.tsx +0 -84
- package/src/stories/IssueLabelToken.stories.tsx +0 -138
- package/src/stories/NewButton.stories.tsx +0 -201
- package/src/stories/Overlay.stories.tsx +0 -213
- package/src/stories/Portal.stories.tsx +0 -109
- package/src/stories/ProfileToken.stories.tsx +0 -129
- package/src/stories/SelectPanel.stories.tsx +0 -353
- package/src/stories/TextInput.stories.tsx +0 -113
- package/src/stories/TextInputWithTokens.stories.tsx +0 -155
- package/src/stories/ThemeProvider.stories.tsx +0 -104
- package/src/stories/Token.stories.tsx +0 -137
- package/src/stories/useAnchoredPosition.stories.tsx +0 -332
- package/src/stories/useFocusTrap.stories.tsx +0 -400
- package/src/stories/useFocusZone.stories.tsx +0 -663
- package/src/sx.ts +0 -24
- package/src/theme-preval.js +0 -80
- package/src/theme.ts +0 -89
- package/src/utils/create-slots.tsx +0 -96
- package/src/utils/deprecate.tsx +0 -73
- package/src/utils/isNumeric.tsx +0 -4
- package/src/utils/iterateFocusableElements.ts +0 -121
- package/src/utils/ssr.tsx +0 -1
- package/src/utils/test-deprecations.tsx +0 -19
- package/src/utils/test-helpers.tsx +0 -7
- package/src/utils/test-matchers.tsx +0 -109
- package/src/utils/testing.tsx +0 -242
- package/src/utils/theme.js +0 -64
- package/src/utils/types/AriaRole.ts +0 -71
- package/src/utils/types/ComponentProps.ts +0 -13
- package/src/utils/types/Flatten.ts +0 -4
- package/src/utils/types/KeyPaths.ts +0 -10
- package/src/utils/types/MandateProps.ts +0 -19
- package/src/utils/types/Merge.ts +0 -20
- package/src/utils/types/index.ts +0 -5
- package/src/utils/uniqueId.ts +0 -6
- package/src/utils/use-force-update.ts +0 -7
- package/src/utils/useIsomorphicLayoutEffect.ts +0 -10
- package/src/utils/userAgent.ts +0 -7
- package/stats.html +0 -3279
- package/tsconfig.build.json +0 -7
- package/tsconfig.json +0 -20
@@ -1,371 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SelectMenu
|
3
|
-
---
|
4
|
-
|
5
|
-
The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item.
|
6
|
-
|
7
|
-
Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`.
|
8
|
-
|
9
|
-
## Basic Example
|
10
|
-
|
11
|
-
```jsx live
|
12
|
-
<SelectMenu>
|
13
|
-
<Button as="summary">Projects</Button>
|
14
|
-
<SelectMenu.Modal>
|
15
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
16
|
-
<SelectMenu.List>
|
17
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
18
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
19
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
20
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
21
|
-
</SelectMenu.List>
|
22
|
-
</SelectMenu.Modal>
|
23
|
-
</SelectMenu>
|
24
|
-
```
|
25
|
-
|
26
|
-
## SelectMenu
|
27
|
-
|
28
|
-
Main wrapper component for select menu.
|
29
|
-
|
30
|
-
```jsx
|
31
|
-
<SelectMenu>{/* all other sub components are wrapped here*/}</SelectMenu>
|
32
|
-
```
|
33
|
-
|
34
|
-
### Component Props
|
35
|
-
|
36
|
-
| Name | Type | Default | Description |
|
37
|
-
| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
|
38
|
-
| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
|
39
|
-
| ref | React ref | | ref to pass down to SelectMenu component |
|
40
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
41
|
-
|
42
|
-
## SelectMenu.MenuContext
|
43
|
-
|
44
|
-
SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider).
|
45
|
-
|
46
|
-
### Values available on MenuContext
|
47
|
-
|
48
|
-
| Name | Type | Description |
|
49
|
-
| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
|
50
|
-
| selectedTab | string | The currently selected tab |
|
51
|
-
| setSelectedTab | function | Used to update the currently selected tab state |
|
52
|
-
| open | boolean | State for open/closed status of the menu modal |
|
53
|
-
| setOpen | function | Used to update the `open` state |
|
54
|
-
| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. |
|
55
|
-
|
56
|
-
### Example Usage
|
57
|
-
|
58
|
-
```jsx
|
59
|
-
import {SelectMenu, Button} from `@primer/components`
|
60
|
-
import React, {useContext} from 'react'
|
61
|
-
|
62
|
-
const MyMenu = () => {
|
63
|
-
<SelectMenu>
|
64
|
-
<MyButton />
|
65
|
-
<SelectMenu.Modal>
|
66
|
-
content
|
67
|
-
</SelectMenu.Modal>
|
68
|
-
</SelectMenu>
|
69
|
-
}
|
70
|
-
|
71
|
-
// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider)
|
72
|
-
const MyButton = () => {
|
73
|
-
const menuContext = useContext(SelectMenu.MenuContext);
|
74
|
-
|
75
|
-
return (
|
76
|
-
<Button as="summary">{menuContext.open ? 'Open' : 'Closed'}</Button>
|
77
|
-
)
|
78
|
-
}
|
79
|
-
```
|
80
|
-
|
81
|
-
## SelectMenu.Modal
|
82
|
-
|
83
|
-
Used to wrap the content in a `SelectMenu`.
|
84
|
-
|
85
|
-
```jsx
|
86
|
-
<SelectMenu.Modal>{/* all menu content is wrapped in the modal*/}</SelectMenu.Modal>
|
87
|
-
```
|
88
|
-
|
89
|
-
### Right-aligned modal
|
90
|
-
|
91
|
-
Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly.
|
92
|
-
|
93
|
-
```jsx live
|
94
|
-
<Box position="relative" display="flex" justifyContent="flex-end">
|
95
|
-
<SelectMenu>
|
96
|
-
<Button as="summary">Projects</Button>
|
97
|
-
<SelectMenu.Modal align="right">
|
98
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
99
|
-
<SelectMenu.List>
|
100
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
101
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
102
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
103
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
104
|
-
</SelectMenu.List>
|
105
|
-
</SelectMenu.Modal>
|
106
|
-
</SelectMenu>
|
107
|
-
</Box>
|
108
|
-
```
|
109
|
-
|
110
|
-
### Component Props
|
111
|
-
|
112
|
-
| Prop name | Type | Default | Description |
|
113
|
-
| :-------- | :---------------- | :------ | ------------------------------------------------- |
|
114
|
-
| align | String | 'left' | Use `right` to align the select menu to the right |
|
115
|
-
| width | String or Number | 300px | Sets the modal width |
|
116
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
117
|
-
|
118
|
-
## SelectMenu.List
|
119
|
-
|
120
|
-
Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper.
|
121
|
-
|
122
|
-
```jsx
|
123
|
-
<SelectMenu.List>{/* all menu list items are wrapped in the list*/}</SelectMenu.List>
|
124
|
-
```
|
125
|
-
|
126
|
-
### Component Props
|
127
|
-
|
128
|
-
| Name | Type | Default | Description |
|
129
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
130
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
131
|
-
|
132
|
-
## SelectMenu.Item
|
133
|
-
|
134
|
-
Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`.
|
135
|
-
|
136
|
-
You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component.
|
137
|
-
|
138
|
-
```jsx
|
139
|
-
<SelectMenu.Item href="/link/to/thing" selected={true}>
|
140
|
-
{/* wraps an individual list item*/}
|
141
|
-
</SelectMenu.Item>
|
142
|
-
```
|
143
|
-
|
144
|
-
### Component Props
|
145
|
-
|
146
|
-
| Name | Type | Default | Description |
|
147
|
-
| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
148
|
-
| selected | boolean | | Used to apply styles to the selected items in the list. |
|
149
|
-
| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
|
150
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
151
|
-
|
152
|
-
## SelectMenu.Filter
|
153
|
-
|
154
|
-
Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item.
|
155
|
-
|
156
|
-
```jsx live
|
157
|
-
<SelectMenu>
|
158
|
-
<Button as="summary">Projects</Button>
|
159
|
-
<SelectMenu.Modal>
|
160
|
-
<SelectMenu.Header>Filter by Project</SelectMenu.Header>
|
161
|
-
<SelectMenu.Filter placeholder="Filter projects" value="" aria-label="Filter Projects" />
|
162
|
-
<SelectMenu.List>
|
163
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
164
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
165
|
-
<SelectMenu.Divider>More Options</SelectMenu.Divider>
|
166
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
167
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
168
|
-
</SelectMenu.List>
|
169
|
-
</SelectMenu.Modal>
|
170
|
-
</SelectMenu>
|
171
|
-
```
|
172
|
-
|
173
|
-
### Component Props
|
174
|
-
|
175
|
-
SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets.
|
176
|
-
|
177
|
-
| Name | Type | Default | Description |
|
178
|
-
| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- |
|
179
|
-
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
|
180
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
181
|
-
|
182
|
-
## SelectMenu.Tabs
|
183
|
-
|
184
|
-
Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation.
|
185
|
-
|
186
|
-
`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`.
|
187
|
-
|
188
|
-
To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default.
|
189
|
-
|
190
|
-
Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default.
|
191
|
-
|
192
|
-
If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`.
|
193
|
-
|
194
|
-
```jsx live
|
195
|
-
<SelectMenu>
|
196
|
-
<Button as="summary">Projects</Button>
|
197
|
-
<SelectMenu.Modal>
|
198
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
199
|
-
<SelectMenu.Tabs>
|
200
|
-
<SelectMenu.Tab index={0} tabName="Repository" />
|
201
|
-
<SelectMenu.Tab index={1} tabName="Organization" />
|
202
|
-
</SelectMenu.Tabs>
|
203
|
-
<SelectMenu.TabPanel tabName="Repository">
|
204
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
205
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
206
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
207
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
208
|
-
</SelectMenu.TabPanel>
|
209
|
-
<SelectMenu.TabPanel tabName="Organization">
|
210
|
-
<SelectMenu.Item href="#"> Project 2</SelectMenu.Item>
|
211
|
-
</SelectMenu.TabPanel>
|
212
|
-
<SelectMenu.Footer>Showing 3 of 3</SelectMenu.Footer>
|
213
|
-
</SelectMenu.Modal>
|
214
|
-
</SelectMenu>
|
215
|
-
```
|
216
|
-
|
217
|
-
### Component Props
|
218
|
-
|
219
|
-
| Name | Type | Default | Description |
|
220
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
221
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
222
|
-
|
223
|
-
## SelectMenu.Tab
|
224
|
-
|
225
|
-
Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`.
|
226
|
-
|
227
|
-
The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks.
|
228
|
-
|
229
|
-
```jsx
|
230
|
-
<>
|
231
|
-
<SelectMenu.Tab index={0} tabName="Repository" />
|
232
|
-
<SelectMenu.Tab index={1} tabName="Organization" />
|
233
|
-
</>
|
234
|
-
```
|
235
|
-
|
236
|
-
### Component Props
|
237
|
-
|
238
|
-
| Name | Type | Default | Description |
|
239
|
-
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
|
240
|
-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
|
241
|
-
| index | Number | | The index at which the tab is in the list of tabs |
|
242
|
-
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
|
243
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
244
|
-
|
245
|
-
## SelectMenu.TabPanel
|
246
|
-
|
247
|
-
Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation.
|
248
|
-
|
249
|
-
**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary.
|
250
|
-
|
251
|
-
```jsx
|
252
|
-
<SelectMenu.TabPanel tabName="Repository">{/* Wraps content for each tab */}</SelectMenu.TabPanel>
|
253
|
-
```
|
254
|
-
|
255
|
-
### Component Props
|
256
|
-
|
257
|
-
| Name | Type | Default | Description |
|
258
|
-
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
|
259
|
-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
|
260
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
261
|
-
|
262
|
-
## SelectMenu.Divider
|
263
|
-
|
264
|
-
Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`.
|
265
|
-
|
266
|
-
```jsx live
|
267
|
-
<SelectMenu>
|
268
|
-
<Button as="summary">Projects</Button>
|
269
|
-
<SelectMenu.Modal>
|
270
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
271
|
-
<SelectMenu.List>
|
272
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
273
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
274
|
-
<SelectMenu.Divider>More Options</SelectMenu.Divider>
|
275
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
276
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
277
|
-
</SelectMenu.List>
|
278
|
-
</SelectMenu.Modal>
|
279
|
-
</SelectMenu>
|
280
|
-
```
|
281
|
-
|
282
|
-
### Component Props
|
283
|
-
|
284
|
-
| Name | Type | Default | Description |
|
285
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
286
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
287
|
-
|
288
|
-
## SelectMenu.Footer
|
289
|
-
|
290
|
-
Use a `SelectMenu.Footer` to add content to the bottom of the select menu.
|
291
|
-
|
292
|
-
```jsx live
|
293
|
-
<SelectMenu>
|
294
|
-
<Button as="summary">Projects</Button>
|
295
|
-
<SelectMenu.Modal>
|
296
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
297
|
-
<SelectMenu.List>
|
298
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
299
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
300
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
301
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
302
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
303
|
-
</SelectMenu.List>
|
304
|
-
</SelectMenu.Modal>
|
305
|
-
</SelectMenu>
|
306
|
-
```
|
307
|
-
|
308
|
-
### Component Props
|
309
|
-
|
310
|
-
| Name | Type | Default | Description |
|
311
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
312
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
313
|
-
|
314
|
-
## SelectMenu.Header
|
315
|
-
|
316
|
-
Use a `SelectMenu.Header` to add a header to the top of the select menu content.
|
317
|
-
|
318
|
-
```jsx live
|
319
|
-
<SelectMenu>
|
320
|
-
<Button as="summary">Projects</Button>
|
321
|
-
<SelectMenu.Modal>
|
322
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
323
|
-
<SelectMenu.List>
|
324
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
325
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
326
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
327
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
328
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
329
|
-
</SelectMenu.List>
|
330
|
-
</SelectMenu.Modal>
|
331
|
-
</SelectMenu>
|
332
|
-
```
|
333
|
-
|
334
|
-
### Component Props
|
335
|
-
|
336
|
-
| Name | Type | Default | Description |
|
337
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
338
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
339
|
-
|
340
|
-
## SelectMenu.LoadingAnimation
|
341
|
-
|
342
|
-
Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu.
|
343
|
-
|
344
|
-
**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state.
|
345
|
-
|
346
|
-
```jsx live
|
347
|
-
<SelectMenu>
|
348
|
-
<Button as="summary">Projects</Button>
|
349
|
-
<SelectMenu.Modal>
|
350
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
351
|
-
<SelectMenu.Filter placeholder="Filter projects" value="" aria-label="Filter Projects" />
|
352
|
-
{true ? (
|
353
|
-
<SelectMenu.LoadingAnimation />
|
354
|
-
) : (
|
355
|
-
<SelectMenu.List>
|
356
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
357
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
358
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
359
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
360
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
361
|
-
</SelectMenu.List>
|
362
|
-
)}
|
363
|
-
</SelectMenu.Modal>
|
364
|
-
</SelectMenu>
|
365
|
-
```
|
366
|
-
|
367
|
-
### Component Props
|
368
|
-
|
369
|
-
| Name | Type | Default | Description |
|
370
|
-
| :--- | :---------------- | :-----: | :----------------------------------- |
|
371
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
@@ -1,67 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SelectPanel
|
3
|
-
status: Alpha
|
4
|
-
---
|
5
|
-
|
6
|
-
A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items
|
7
|
-
|
8
|
-
## Example
|
9
|
-
|
10
|
-
```javascript live noinline
|
11
|
-
function getColorCircle(color) {
|
12
|
-
return function () {
|
13
|
-
return (
|
14
|
-
<Box
|
15
|
-
borderWidth="1px"
|
16
|
-
borderStyle="solid"
|
17
|
-
bg={color}
|
18
|
-
borderColor={color}
|
19
|
-
width={14}
|
20
|
-
height={14}
|
21
|
-
borderRadius={10}
|
22
|
-
margin="auto"
|
23
|
-
/>
|
24
|
-
)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
const items = [
|
29
|
-
{leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
|
30
|
-
{leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
|
31
|
-
{leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
|
32
|
-
{leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
|
33
|
-
{leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
|
34
|
-
{leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
|
35
|
-
{leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
|
36
|
-
]
|
37
|
-
|
38
|
-
function DemoComponent() {
|
39
|
-
const [selected, setSelected] = React.useState([items[0], items[1]])
|
40
|
-
const [filter, setFilter] = React.useState('')
|
41
|
-
const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
|
42
|
-
const [open, setOpen] = React.useState(false)
|
43
|
-
|
44
|
-
return (
|
45
|
-
<SelectPanel
|
46
|
-
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
|
47
|
-
<DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
|
48
|
-
{children || 'Select Labels'}
|
49
|
-
</DropdownButton>
|
50
|
-
)}
|
51
|
-
placeholderText="Filter Labels"
|
52
|
-
open={open}
|
53
|
-
onOpenChange={setOpen}
|
54
|
-
items={filteredItems}
|
55
|
-
selected={selected}
|
56
|
-
onSelectedChange={setSelected}
|
57
|
-
onFilterChange={setFilter}
|
58
|
-
showItemDividers={true}
|
59
|
-
overlayProps={{width: 'small', height: 'xsmall'}}
|
60
|
-
/>
|
61
|
-
)
|
62
|
-
}
|
63
|
-
|
64
|
-
render(<DemoComponent />)
|
65
|
-
```
|
66
|
-
|
67
|
-
## Component props
|
package/docs/content/SideNav.md
DELETED
@@ -1,171 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SideNav
|
3
|
-
---
|
4
|
-
|
5
|
-
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **SideNav elements have no default width or positioning.**
|
6
|
-
|
7
|
-
## Default example
|
8
|
-
|
9
|
-
```jsx live
|
10
|
-
<SideNav bordered maxWidth={360} aria-label="Main">
|
11
|
-
<SideNav.Link href="#account">
|
12
|
-
<Text>Account</Text>
|
13
|
-
</SideNav.Link>
|
14
|
-
<SideNav.Link href="#home" selected>
|
15
|
-
<Text>Profile</Text>
|
16
|
-
</SideNav.Link>
|
17
|
-
<SideNav.Link href="#emails">
|
18
|
-
<Text>Emails</Text>
|
19
|
-
</SideNav.Link>
|
20
|
-
<SideNav.Link href="#notifications">
|
21
|
-
<Text>Notifications</Text>
|
22
|
-
</SideNav.Link>
|
23
|
-
</SideNav>
|
24
|
-
```
|
25
|
-
|
26
|
-
Different kinds of content can be added inside a SideNav item. Use system props to further style them if needed.
|
27
|
-
|
28
|
-
## Full variant
|
29
|
-
|
30
|
-
Add the `variant='full'` prop to a `SideNav.Link` to spread child elements across the link, which is useful for status icons, labels, and the like.
|
31
|
-
|
32
|
-
```jsx live
|
33
|
-
<SideNav bordered maxWidth={360} aria-label="Main">
|
34
|
-
<SideNav.Link href="#url">
|
35
|
-
<Text>Text Only</Text>
|
36
|
-
</SideNav.Link>
|
37
|
-
<SideNav.Link href="#url">
|
38
|
-
<Avatar size={16} mr={2} src="https://avatars.githubusercontent.com/hubot?s=32" />
|
39
|
-
<Text>With an avatar</Text>
|
40
|
-
</SideNav.Link>
|
41
|
-
<SideNav.Link href="#url">
|
42
|
-
<StyledOcticon sx={{mr: 2}} size={16} icon={ZapIcon} />
|
43
|
-
<Text>With an Octicon</Text>
|
44
|
-
</SideNav.Link>
|
45
|
-
<SideNav.Link href="#url" variant="full" selected>
|
46
|
-
<Text>With a status icon</Text>
|
47
|
-
<StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
|
48
|
-
</SideNav.Link>
|
49
|
-
<SideNav.Link href="#url" variant="full">
|
50
|
-
<Text>With a label</Text>
|
51
|
-
<Label outline>label</Label>
|
52
|
-
</SideNav.Link>
|
53
|
-
<SideNav.Link href="#url" variant="full">
|
54
|
-
<Text>With a counter</Text>
|
55
|
-
<CounterLabel>16</CounterLabel>
|
56
|
-
</SideNav.Link>
|
57
|
-
<SideNav.Link href="#url">
|
58
|
-
<Heading as="h5" sx={{fontSize: 1}}>
|
59
|
-
A heading
|
60
|
-
</Heading>
|
61
|
-
<Text>and some more content</Text>
|
62
|
-
</SideNav.Link>
|
63
|
-
</SideNav>
|
64
|
-
```
|
65
|
-
|
66
|
-
## Lightweight variant
|
67
|
-
|
68
|
-
Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more lightweight version that has items with no borders and are more condensed.
|
69
|
-
|
70
|
-
```jsx live
|
71
|
-
<Box
|
72
|
-
borderWidth="1px"
|
73
|
-
borderStyle="solid"
|
74
|
-
borderColor="border.default"
|
75
|
-
borderRadius={2}
|
76
|
-
p={3}
|
77
|
-
backgroundColor="canvas.subtle"
|
78
|
-
maxWidth={360}
|
79
|
-
>
|
80
|
-
<Box
|
81
|
-
borderStyle="solid"
|
82
|
-
borderColor="border.default"
|
83
|
-
borderWidth={0}
|
84
|
-
borderBottomWidth={1}
|
85
|
-
borderRadius={0}
|
86
|
-
mb={2}
|
87
|
-
pb={1}
|
88
|
-
>
|
89
|
-
<Heading as="h5" fontSize={1} color="fg.muted">
|
90
|
-
Menu
|
91
|
-
</Heading>
|
92
|
-
</Box>
|
93
|
-
<SideNav variant="lightweight">
|
94
|
-
<SideNav.Link href="#url">
|
95
|
-
<Text>Account</Text>
|
96
|
-
</SideNav.Link>
|
97
|
-
<SideNav.Link href="#url" selected>
|
98
|
-
<Text>Profile</Text>
|
99
|
-
</SideNav.Link>
|
100
|
-
<SideNav.Link href="#url">
|
101
|
-
<Text>Emails</Text>
|
102
|
-
</SideNav.Link>
|
103
|
-
<SideNav.Link href="#url">
|
104
|
-
<Text>Notifications</Text>
|
105
|
-
</SideNav.Link>
|
106
|
-
</SideNav>
|
107
|
-
</Box>
|
108
|
-
```
|
109
|
-
|
110
|
-
It can also appear nested, as a sub navigation. Use margin/padding [System Props](/system-props) to add indentation.
|
111
|
-
|
112
|
-
```jsx live
|
113
|
-
<SideNav bordered maxWidth={360}>
|
114
|
-
<SideNav.Link href="#url">
|
115
|
-
<StyledOcticon mr={2} size={16} icon={PersonIcon} />
|
116
|
-
<Text>Account</Text>
|
117
|
-
</SideNav.Link>
|
118
|
-
<SideNav.Link href="#url" selected>
|
119
|
-
<StyledOcticon mr={2} size={16} icon={OctofaceIcon} />
|
120
|
-
<Text>Profile</Text>
|
121
|
-
</SideNav.Link>
|
122
|
-
|
123
|
-
<SideNav bordered variant="lightweight" py={3} pl={6} backgroundColor="sidenav.selectedBg">
|
124
|
-
<SideNav.Link href="#url" selected>
|
125
|
-
<Text>Sub item 1</Text>
|
126
|
-
</SideNav.Link>
|
127
|
-
<SideNav.Link href="#url">
|
128
|
-
<Text>Sub item 2</Text>
|
129
|
-
</SideNav.Link>
|
130
|
-
<SideNav.Link href="#url">
|
131
|
-
<Text>Sub item 3</Text>
|
132
|
-
</SideNav.Link>
|
133
|
-
</SideNav>
|
134
|
-
|
135
|
-
<SideNav.Link href="#url">
|
136
|
-
<StyledOcticon mr={2} size={16} icon={MailIcon} />
|
137
|
-
<Text>Emails</Text>
|
138
|
-
</SideNav.Link>
|
139
|
-
</SideNav>
|
140
|
-
```
|
141
|
-
|
142
|
-
## Usage with React Router
|
143
|
-
|
144
|
-
If using React Router, you can use the `as` prop to render the element as a `NavLink`. React Router will automatically handle setting `aria-current="page"` for you.
|
145
|
-
|
146
|
-
```
|
147
|
-
<SideNav.Link as={NavLink} to="...">...</SideNav.Link>
|
148
|
-
```
|
149
|
-
|
150
|
-
## Component props
|
151
|
-
|
152
|
-
### SideNav
|
153
|
-
|
154
|
-
| Name | Type | Default | Description |
|
155
|
-
| :------- | :---------------- | :------: | :----------------------------------------------------------------------------- |
|
156
|
-
| as | String | 'nav' | Sets the HTML tag for the component. |
|
157
|
-
| bordered | Boolean | false | Renders the component with a border. |
|
158
|
-
| variant | String | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
|
159
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
160
|
-
|
161
|
-
### SideNav.Link
|
162
|
-
|
163
|
-
| Name | Type | Default | Description |
|
164
|
-
| :-------- | :---------------- | :------: | :------------------------------------------------------------------------------------------------ |
|
165
|
-
| as | String | 'a' | Sets the HTML tag for the component. |
|
166
|
-
| href | String | | URL to be used for the Link |
|
167
|
-
| muted | Boolean | false | Uses a less prominent shade for Link color, and the default link shade on hover |
|
168
|
-
| selected | Boolean | false | Sets the link as selected, giving it a different style and setting the `aria-current` attribute. |
|
169
|
-
| underline | Boolean | false | Adds underline to the Link |
|
170
|
-
| variant | String | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
|
171
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|
package/docs/content/Spinner.mdx
DELETED
@@ -1,32 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: Spinner
|
3
|
-
status: Alpha
|
4
|
-
description: Use spinners to let users know that content is being loaded.
|
5
|
-
componentId: spinner
|
6
|
-
source: https://github.com/primer/components/blob/main/src/Spinner.tsx
|
7
|
-
---
|
8
|
-
|
9
|
-
import {Props} from '../src/props'
|
10
|
-
import {Spinner} from '@primer/components'
|
11
|
-
|
12
|
-
```jsx live
|
13
|
-
<Spinner />
|
14
|
-
```
|
15
|
-
|
16
|
-
## Props
|
17
|
-
|
18
|
-
<Props of={Spinner} />
|
19
|
-
|
20
|
-
## Examples
|
21
|
-
|
22
|
-
### Small
|
23
|
-
|
24
|
-
```jsx live
|
25
|
-
<Spinner size="small" />
|
26
|
-
```
|
27
|
-
|
28
|
-
### Large
|
29
|
-
|
30
|
-
```jsx live
|
31
|
-
<Spinner size="large" />
|
32
|
-
```
|
@@ -1,27 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: StateLabel
|
3
|
-
---
|
4
|
-
|
5
|
-
Use StateLabel components to show the status of an issue or pull request.
|
6
|
-
|
7
|
-
## Default example
|
8
|
-
|
9
|
-
```jsx live
|
10
|
-
<>
|
11
|
-
<StateLabel status="issueOpened">Open</StateLabel>
|
12
|
-
<StateLabel status="issueClosed">Closed</StateLabel>
|
13
|
-
<StateLabel status="pullOpened">Open</StateLabel>
|
14
|
-
<StateLabel status="pullClosed">Closed</StateLabel>
|
15
|
-
<StateLabel status="pullMerged">Merged</StateLabel>
|
16
|
-
<StateLabel status="draft">Draft</StateLabel>
|
17
|
-
<StateLabel status="issueDraft">Draft</StateLabel>
|
18
|
-
</>
|
19
|
-
```
|
20
|
-
|
21
|
-
## Component props
|
22
|
-
|
23
|
-
| Name | Type | Default | Description |
|
24
|
-
| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
|
25
|
-
| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. |
|
26
|
-
| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
|
27
|
-
| sx | SystemStyleObject | {} | Style to be applied to the component |
|