@primer/components 31.2.0 → 31.2.1-rc.0e01900c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.changeset/README.md +8 -0
- package/.changeset/config.json +10 -0
- package/.devcontainer/devcontainer.json +8 -0
- package/.eslintrc.json +137 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
- package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
- package/.github/dependabot.yml +18 -0
- package/.github/pull_request_template.md +18 -0
- package/.github/workflows/check_for_changeset.yml +25 -0
- package/.github/workflows/ci.yml +34 -0
- package/.github/workflows/deploy_preview.yml +47 -0
- package/.github/workflows/deploy_production.yml +70 -0
- package/.github/workflows/release.yml +36 -0
- package/.github/workflows/release_canary.yml +71 -0
- package/.github/workflows/release_candidate.yml +60 -0
- package/.github/workflows/size.yml +13 -0
- package/.github/workflows/stale.yml +26 -0
- package/.gitignore +10 -0
- package/.npmrc +4 -0
- package/.nvmrc +1 -0
- package/.storybook/main.js +9 -0
- package/.storybook/preview.js +117 -0
- package/.vscode/launch.json +21 -0
- package/.vscode/settings.json +13 -0
- package/@types/@styled-system/index.d.ts +0 -0
- package/@types/@styled-system/prop-types/index.d.ts +1 -0
- package/@types/@styled-system/props/index.d.ts +1 -0
- package/@types/jest-styled-components/index.d.ts +1 -0
- package/CHANGELOG.md +8 -0
- package/CODEOWNERS +2 -0
- package/babel-defines.js +13 -0
- package/babel.config.js +39 -0
- package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
- package/contributor-docs/CONTRIBUTING.md +274 -0
- package/contributor-docs/adrs/adr-001-typescript.md +23 -0
- package/contributor-docs/adrs/adr-002-behavior-isolation.md +108 -0
- package/contributor-docs/adrs/adr-003-prop-norms.md +72 -0
- package/contributor-docs/behaviors.md +132 -0
- package/contributor-docs/component-contents-api-patterns.md +316 -0
- package/contributor-docs/principles.md +39 -0
- package/dist/browser.esm.js +32 -21
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +35 -24
- package/dist/browser.umd.js.map +1 -1
- package/docs/.eslintrc +0 -0
- package/docs/.gitignore +91 -0
- package/docs/components/PropsList.js +5 -0
- package/docs/components/State.js +9 -0
- package/docs/components/constants.js +34 -0
- package/docs/components/index.js +2 -0
- package/docs/content/ActionList.mdx +99 -0
- package/docs/content/ActionList2.mdx +358 -0
- package/docs/content/ActionMenu.mdx +80 -0
- package/docs/content/AnchoredOverlay.mdx +37 -0
- package/docs/content/Autocomplete.mdx +657 -0
- package/docs/content/Avatar.mdx +33 -0
- package/docs/content/AvatarStack.mdx +37 -0
- package/docs/content/BorderBox.md +46 -0
- package/docs/content/Box.md +74 -0
- package/docs/content/BranchName.md +18 -0
- package/docs/content/Breadcrumbs.md +52 -0
- package/docs/content/Buttons.md +56 -0
- package/docs/content/CircleBadge.md +45 -0
- package/docs/content/CircleOcticon.md +18 -0
- package/docs/content/CounterLabel.md +32 -0
- package/docs/content/Details.md +105 -0
- package/docs/content/Dialog.md +108 -0
- package/docs/content/Dialog2.mdx +179 -0
- package/docs/content/Dropdown.md +72 -0
- package/docs/content/DropdownMenu.mdx +49 -0
- package/docs/content/FilterList.md +44 -0
- package/docs/content/FilteredSearch.md +39 -0
- package/docs/content/Flash.md +44 -0
- package/docs/content/Flex.md +58 -0
- package/docs/content/FormGroup.md +46 -0
- package/docs/content/Grid.md +59 -0
- package/docs/content/Header.md +79 -0
- package/docs/content/Heading.md +22 -0
- package/docs/content/Label.md +42 -0
- package/docs/content/LabelGroup.md +31 -0
- package/docs/content/Link.md +37 -0
- package/docs/content/Overlay.mdx +94 -0
- package/docs/content/Pagehead.md +27 -0
- package/docs/content/Pagination.md +187 -0
- package/docs/content/PointerBox.md +81 -0
- package/docs/content/Popover.md +137 -0
- package/docs/content/Portal.mdx +78 -0
- package/docs/content/Position.md +100 -0
- package/docs/content/ProgressBar.mdx +29 -0
- package/docs/content/SelectMenu.md +435 -0
- package/docs/content/SelectPanel.mdx +67 -0
- package/docs/content/SideNav.md +179 -0
- package/docs/content/Spinner.mdx +32 -0
- package/docs/content/StateLabel.md +36 -0
- package/docs/content/StyledOcticon.md +36 -0
- package/docs/content/SubNav.md +102 -0
- package/docs/content/TabNav.md +50 -0
- package/docs/content/Text.md +31 -0
- package/docs/content/TextInput.md +34 -0
- package/docs/content/TextInputTokens.mdx +89 -0
- package/docs/content/TextInputWithTokens.mdx +211 -0
- package/docs/content/Timeline.md +138 -0
- package/docs/content/Token.mdx +381 -0
- package/docs/content/Tooltip.md +41 -0
- package/docs/content/Truncate.md +64 -0
- package/docs/content/UnderlineNav.md +53 -0
- package/docs/content/anchoredPosition.mdx +163 -0
- package/docs/content/core-concepts.md +70 -0
- package/docs/content/focusTrap.mdx +103 -0
- package/docs/content/focusZone.mdx +145 -0
- package/docs/content/getting-started.md +138 -0
- package/docs/content/index.md +33 -0
- package/docs/content/linting.md +35 -0
- package/docs/content/overriding-styles.mdx +82 -0
- package/docs/content/philosophy.md +23 -0
- package/docs/content/primer-theme.md +89 -0
- package/docs/content/ssr.mdx +43 -0
- package/docs/content/system-props.mdx +37 -0
- package/docs/content/theme-reference.md +16 -0
- package/docs/content/theming.md +272 -0
- package/docs/content/useOnEscapePress.mdx +56 -0
- package/docs/content/useOnOutsideClick.mdx +57 -0
- package/docs/content/useOpenAndCloseFocus.mdx +49 -0
- package/docs/content/useOverlay.mdx +62 -0
- package/docs/content/useSafeTimeout.mdx +32 -0
- package/docs/gatsby-config.js +30 -0
- package/docs/gatsby-node.js +101 -0
- package/docs/package-lock.json +20756 -0
- package/docs/package.json +36 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +41 -0
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +73 -0
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +133 -0
- package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
- package/docs/src/props.js +77 -0
- package/jest.config.js +13 -0
- package/lib/ActionList/Item.js +28 -19
- package/lib/ActionList/Item.jsx +21 -11
- package/lib/ActionList2/Description.js +8 -4
- package/lib/ActionList2/Description.jsx +2 -3
- package/lib/ActionList2/Item.js +7 -9
- package/lib/ActionList2/Item.jsx +6 -6
- package/lib/ActionList2/Selection.d.ts +1 -1
- package/lib/ActionList2/Selection.js +29 -15
- package/lib/ActionList2/Selection.jsx +19 -5
- package/lib/NewButton/button.js +6 -6
- package/lib/NewButton/button.jsx +4 -4
- package/lib/__tests__/ActionList.test.d.ts +1 -0
- package/lib/__tests__/ActionList.test.js +69 -0
- package/lib/__tests__/ActionList.test.jsx +49 -0
- package/lib/__tests__/ActionList.types.test.d.ts +6 -0
- package/lib/__tests__/ActionList.types.test.js +69 -0
- package/lib/__tests__/ActionList.types.test.jsx +45 -0
- package/lib/__tests__/ActionList2.test.d.ts +1 -0
- package/lib/__tests__/ActionList2.test.js +53 -0
- package/lib/__tests__/ActionList2.test.jsx +46 -0
- package/lib/__tests__/ActionMenu.test.d.ts +1 -0
- package/lib/__tests__/ActionMenu.test.js +151 -0
- package/lib/__tests__/ActionMenu.test.jsx +124 -0
- package/lib/__tests__/AnchoredOverlay.test.d.ts +1 -0
- package/lib/__tests__/AnchoredOverlay.test.js +162 -0
- package/lib/__tests__/AnchoredOverlay.test.jsx +121 -0
- package/lib/__tests__/Autocomplete.test.d.ts +1 -0
- package/lib/__tests__/Autocomplete.test.js +528 -0
- package/lib/__tests__/Autocomplete.test.jsx +299 -0
- package/lib/__tests__/Avatar.test.d.ts +1 -0
- package/lib/__tests__/Avatar.test.js +67 -0
- package/lib/__tests__/Avatar.test.jsx +42 -0
- package/lib/__tests__/AvatarStack.test.d.ts +1 -0
- package/lib/__tests__/AvatarStack.test.js +71 -0
- package/lib/__tests__/AvatarStack.test.jsx +43 -0
- package/lib/__tests__/BorderBox.test.d.ts +1 -0
- package/lib/__tests__/BorderBox.test.js +58 -0
- package/lib/__tests__/BorderBox.test.jsx +36 -0
- package/lib/__tests__/Box.test.d.ts +1 -0
- package/lib/__tests__/Box.test.js +78 -0
- package/lib/__tests__/Box.test.jsx +41 -0
- package/lib/__tests__/BranchName.test.d.ts +1 -0
- package/lib/__tests__/BranchName.test.js +36 -0
- package/lib/__tests__/BranchName.test.jsx +27 -0
- package/lib/__tests__/Breadcrumbs.test.d.ts +1 -0
- package/lib/__tests__/Breadcrumbs.test.js +37 -0
- package/lib/__tests__/Breadcrumbs.test.jsx +28 -0
- package/lib/__tests__/BreadcrumbsItem.test.d.ts +1 -0
- package/lib/__tests__/BreadcrumbsItem.test.js +49 -0
- package/lib/__tests__/BreadcrumbsItem.test.jsx +31 -0
- package/lib/__tests__/Button.test.d.ts +1 -0
- package/lib/__tests__/Button.test.js +143 -0
- package/lib/__tests__/Button.test.jsx +100 -0
- package/lib/__tests__/Caret.test.d.ts +1 -0
- package/lib/__tests__/Caret.test.js +52 -0
- package/lib/__tests__/Caret.test.jsx +37 -0
- package/lib/__tests__/CircleBadge.test.d.ts +1 -0
- package/lib/__tests__/CircleBadge.test.js +83 -0
- package/lib/__tests__/CircleBadge.test.jsx +55 -0
- package/lib/__tests__/CircleOcticon.test.d.ts +1 -0
- package/lib/__tests__/CircleOcticon.test.js +71 -0
- package/lib/__tests__/CircleOcticon.test.jsx +45 -0
- package/lib/__tests__/ConfirmationDialog.test.d.ts +1 -0
- package/lib/__tests__/ConfirmationDialog.test.js +134 -0
- package/lib/__tests__/ConfirmationDialog.test.jsx +119 -0
- package/lib/__tests__/CounterLabel.test.d.ts +1 -0
- package/lib/__tests__/CounterLabel.test.js +58 -0
- package/lib/__tests__/CounterLabel.test.jsx +36 -0
- package/lib/__tests__/Details.test.d.ts +1 -0
- package/lib/__tests__/Details.test.js +117 -0
- package/lib/__tests__/Details.test.jsx +85 -0
- package/lib/__tests__/Dialog.test.d.ts +1 -0
- package/lib/__tests__/Dialog.test.js +184 -0
- package/lib/__tests__/Dialog.test.jsx +139 -0
- package/lib/__tests__/Dropdown.test.d.ts +1 -0
- package/lib/__tests__/Dropdown.test.js +63 -0
- package/lib/__tests__/Dropdown.test.jsx +49 -0
- package/lib/__tests__/DropdownMenu.test.d.ts +1 -0
- package/lib/__tests__/DropdownMenu.test.js +150 -0
- package/lib/__tests__/DropdownMenu.test.jsx +119 -0
- package/lib/__tests__/FilterList.test.d.ts +1 -0
- package/lib/__tests__/FilterList.test.js +36 -0
- package/lib/__tests__/FilterList.test.jsx +27 -0
- package/lib/__tests__/FilterListItem.test.d.ts +1 -0
- package/lib/__tests__/FilterListItem.test.js +46 -0
- package/lib/__tests__/FilterListItem.test.jsx +31 -0
- package/lib/__tests__/FilteredSearch.test.d.ts +1 -0
- package/lib/__tests__/FilteredSearch.test.js +36 -0
- package/lib/__tests__/FilteredSearch.test.jsx +27 -0
- package/lib/__tests__/Flash.test.d.ts +1 -0
- package/lib/__tests__/Flash.test.js +62 -0
- package/lib/__tests__/Flash.test.jsx +36 -0
- package/lib/__tests__/Flex.test.d.ts +1 -0
- package/lib/__tests__/Flex.test.js +74 -0
- package/lib/__tests__/Flex.test.jsx +51 -0
- package/lib/__tests__/FormGroup.test.d.ts +1 -0
- package/lib/__tests__/FormGroup.test.js +54 -0
- package/lib/__tests__/FormGroup.test.jsx +36 -0
- package/lib/__tests__/Grid.test.d.ts +1 -0
- package/lib/__tests__/Grid.test.js +104 -0
- package/lib/__tests__/Grid.test.jsx +69 -0
- package/lib/__tests__/Header.test.d.ts +1 -0
- package/lib/__tests__/Header.test.js +58 -0
- package/lib/__tests__/Header.test.jsx +45 -0
- package/lib/__tests__/Heading.test.d.ts +1 -0
- package/lib/__tests__/Heading.test.js +109 -0
- package/lib/__tests__/Heading.test.jsx +71 -0
- package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib/__tests__/KeyPaths.types.test.js +7 -0
- package/lib/__tests__/Label.test.d.ts +1 -0
- package/lib/__tests__/Label.test.js +46 -0
- package/lib/__tests__/Label.test.jsx +33 -0
- package/lib/__tests__/LabelGroup.test.d.ts +1 -0
- package/lib/__tests__/LabelGroup.test.js +38 -0
- package/lib/__tests__/LabelGroup.test.jsx +29 -0
- package/lib/__tests__/Link.test.d.ts +1 -0
- package/lib/__tests__/Link.test.js +70 -0
- package/lib/__tests__/Link.test.jsx +43 -0
- package/lib/__tests__/Merge.types.test.d.ts +30 -0
- package/lib/__tests__/Merge.types.test.js +21 -0
- package/lib/__tests__/NewButton.test.d.ts +1 -0
- package/lib/__tests__/NewButton.test.js +95 -0
- package/lib/__tests__/NewButton.test.jsx +61 -0
- package/lib/__tests__/Overlay.test.d.ts +1 -0
- package/lib/__tests__/Overlay.test.js +145 -0
- package/lib/__tests__/Overlay.test.jsx +105 -0
- package/lib/__tests__/Pagehead.test.d.ts +1 -0
- package/lib/__tests__/Pagehead.test.js +37 -0
- package/lib/__tests__/Pagehead.test.jsx +25 -0
- package/lib/__tests__/Pagination/Pagination.test.d.ts +1 -0
- package/lib/__tests__/Pagination/Pagination.test.js +47 -0
- package/lib/__tests__/Pagination/Pagination.test.jsx +32 -0
- package/lib/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
- package/lib/__tests__/Pagination/PaginationModel.test.js +186 -0
- package/lib/__tests__/Pagination/PaginationModel.test.jsx +118 -0
- package/lib/__tests__/PointerBox.test.d.ts +1 -0
- package/lib/__tests__/PointerBox.test.js +46 -0
- package/lib/__tests__/PointerBox.test.jsx +33 -0
- package/lib/__tests__/Popover.test.d.ts +1 -0
- package/lib/__tests__/Popover.test.js +66 -0
- package/lib/__tests__/Popover.test.jsx +58 -0
- package/lib/__tests__/Portal.test.d.ts +1 -0
- package/lib/__tests__/Portal.test.js +124 -0
- package/lib/__tests__/Portal.test.jsx +102 -0
- package/lib/__tests__/Position.test.d.ts +1 -0
- package/lib/__tests__/Position.test.js +143 -0
- package/lib/__tests__/Position.test.jsx +96 -0
- package/lib/__tests__/ProgressBar.test.d.ts +1 -0
- package/lib/__tests__/ProgressBar.test.js +68 -0
- package/lib/__tests__/ProgressBar.test.jsx +38 -0
- package/lib/__tests__/SelectMenu.test.d.ts +1 -0
- package/lib/__tests__/SelectMenu.test.js +155 -0
- package/lib/__tests__/SelectMenu.test.jsx +120 -0
- package/lib/__tests__/SelectPanel.test.d.ts +1 -0
- package/lib/__tests__/SelectPanel.test.js +80 -0
- package/lib/__tests__/SelectPanel.test.jsx +48 -0
- package/lib/__tests__/SideNav.test.d.ts +1 -0
- package/lib/__tests__/SideNav.test.js +71 -0
- package/lib/__tests__/SideNav.test.jsx +55 -0
- package/lib/__tests__/Spinner.test.d.ts +1 -0
- package/lib/__tests__/Spinner.test.js +53 -0
- package/lib/__tests__/Spinner.test.jsx +41 -0
- package/lib/__tests__/StateLabel.test.d.ts +1 -0
- package/lib/__tests__/StateLabel.test.js +71 -0
- package/lib/__tests__/StateLabel.test.jsx +46 -0
- package/lib/__tests__/StyledOcticon.test.d.ts +1 -0
- package/lib/__tests__/StyledOcticon.test.js +40 -0
- package/lib/__tests__/StyledOcticon.test.jsx +28 -0
- package/lib/__tests__/SubNav.test.d.ts +1 -0
- package/lib/__tests__/SubNav.test.js +62 -0
- package/lib/__tests__/SubNav.test.jsx +47 -0
- package/lib/__tests__/SubNavLink.test.d.ts +1 -0
- package/lib/__tests__/SubNavLink.test.js +49 -0
- package/lib/__tests__/SubNavLink.test.jsx +31 -0
- package/lib/__tests__/TabNav.test.d.ts +1 -0
- package/lib/__tests__/TabNav.test.js +49 -0
- package/lib/__tests__/TabNav.test.jsx +32 -0
- package/lib/__tests__/Text.test.d.ts +1 -0
- package/lib/__tests__/Text.test.js +105 -0
- package/lib/__tests__/Text.test.jsx +71 -0
- package/lib/__tests__/TextInput.test.d.ts +1 -0
- package/lib/__tests__/TextInput.test.js +78 -0
- package/lib/__tests__/TextInput.test.jsx +45 -0
- package/lib/__tests__/TextInputWithTokens.test.d.ts +1 -0
- package/lib/__tests__/TextInputWithTokens.test.js +572 -0
- package/lib/__tests__/TextInputWithTokens.test.jsx +302 -0
- package/lib/__tests__/ThemeProvider.test.d.ts +1 -0
- package/lib/__tests__/ThemeProvider.test.js +444 -0
- package/lib/__tests__/ThemeProvider.test.jsx +314 -0
- package/lib/__tests__/Timeline.test.d.ts +1 -0
- package/lib/__tests__/Timeline.test.js +75 -0
- package/lib/__tests__/Timeline.test.jsx +51 -0
- package/lib/__tests__/Token.test.d.ts +1 -0
- package/lib/__tests__/Token.test.js +180 -0
- package/lib/__tests__/Token.test.jsx +93 -0
- package/lib/__tests__/Tooltip.test.d.ts +1 -0
- package/lib/__tests__/Tooltip.test.js +69 -0
- package/lib/__tests__/Tooltip.test.jsx +46 -0
- package/lib/__tests__/Truncate.test.d.ts +1 -0
- package/lib/__tests__/Truncate.test.js +63 -0
- package/lib/__tests__/Truncate.test.jsx +41 -0
- package/lib/__tests__/UnderlineNav.test.d.ts +1 -0
- package/lib/__tests__/UnderlineNav.test.js +72 -0
- package/lib/__tests__/UnderlineNav.test.jsx +53 -0
- package/lib/__tests__/UnderlineNavLink.test.d.ts +1 -0
- package/lib/__tests__/UnderlineNavLink.test.js +51 -0
- package/lib/__tests__/UnderlineNavLink.test.jsx +31 -0
- package/lib/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
- package/lib/__tests__/behaviors/anchoredPosition.test.js +243 -0
- package/lib/__tests__/behaviors/focusTrap.test.d.ts +1 -0
- package/lib/__tests__/behaviors/focusTrap.test.js +234 -0
- package/lib/__tests__/behaviors/focusTrap.test.jsx +184 -0
- package/lib/__tests__/behaviors/focusZone.test.d.ts +1 -0
- package/lib/__tests__/behaviors/focusZone.test.js +570 -0
- package/lib/__tests__/behaviors/focusZone.test.jsx +406 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.test.js +55 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx +58 -0
- package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
- package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js +155 -0
- package/lib/__tests__/filterObject.test.d.ts +1 -0
- package/lib/__tests__/filterObject.test.js +51 -0
- package/lib/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
- package/lib/__tests__/hooks/useAnchoredPosition.test.js +54 -0
- package/lib/__tests__/hooks/useAnchoredPosition.test.jsx +29 -0
- package/lib/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
- package/lib/__tests__/hooks/useOnEscapePress.test.js +32 -0
- package/lib/__tests__/hooks/useOnEscapePress.test.jsx +19 -0
- package/lib/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
- package/lib/__tests__/hooks/useOnOutsideClick.test.js +87 -0
- package/lib/__tests__/hooks/useOnOutsideClick.test.jsx +63 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.js +60 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx +61 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.js +45 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx +56 -0
- package/lib/__tests__/theme.test.d.ts +1 -0
- package/lib/__tests__/theme.test.js +35 -0
- package/lib/__tests__/themeGet.test.d.ts +1 -0
- package/lib/__tests__/themeGet.test.js +14 -0
- package/lib/__tests__/useSafeTimeout.test.d.ts +1 -0
- package/lib/__tests__/useSafeTimeout.test.js +45 -0
- package/lib/__tests__/useSafeTimeout.test.jsx +36 -0
- package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib/__tests__/utils/createSlots.test.js +75 -0
- package/lib/__tests__/utils/createSlots.test.jsx +57 -0
- package/lib/stories/ActionList.stories.js +454 -0
- package/lib/stories/ActionList2.stories.js +908 -0
- package/lib/stories/ActionMenu.stories.js +350 -0
- package/lib/stories/AnchoredOverlay.stories.js +127 -0
- package/lib/stories/Autocomplete.stories.js +619 -0
- package/lib/stories/AvatarStack.stories.js +49 -0
- package/lib/stories/Button.stories.js +125 -0
- package/lib/stories/ConfirmationDialog.stories.js +111 -0
- package/lib/stories/Dialog.stories.js +265 -0
- package/lib/stories/DropdownMenu.stories.js +122 -0
- package/lib/stories/IssueLabelToken.stories.js +165 -0
- package/lib/stories/NewButton.stories.js +230 -0
- package/lib/stories/Overlay.stories.js +204 -0
- package/lib/stories/Portal.stories.js +104 -0
- package/lib/stories/ProfileToken.stories.js +162 -0
- package/lib/stories/SelectPanel.stories.js +399 -0
- package/lib/stories/TextInput.stories.js +144 -0
- package/lib/stories/TextInputWithTokens.stories.js +252 -0
- package/lib/stories/ThemeProvider.stories.js +102 -0
- package/lib/stories/Token.stories.js +176 -0
- package/lib/stories/useAnchoredPosition.stories.js +351 -0
- package/lib/stories/useFocusTrap.stories.js +356 -0
- package/lib/stories/useFocusZone.stories.js +599 -0
- package/lib-esm/ActionList/Item.js +28 -19
- package/lib-esm/ActionList2/Description.js +8 -4
- package/lib-esm/ActionList2/Item.js +7 -9
- package/lib-esm/ActionList2/Selection.d.ts +1 -1
- package/lib-esm/ActionList2/Selection.js +29 -15
- package/lib-esm/NewButton/button.js +6 -6
- package/lib-esm/__tests__/ActionList.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionList.test.js +57 -0
- package/lib-esm/__tests__/ActionList.types.test.d.ts +6 -0
- package/lib-esm/__tests__/ActionList.types.test.js +45 -0
- package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionList2.test.js +41 -0
- package/lib-esm/__tests__/ActionMenu.test.d.ts +1 -0
- package/lib-esm/__tests__/ActionMenu.test.js +139 -0
- package/lib-esm/__tests__/AnchoredOverlay.test.d.ts +1 -0
- package/lib-esm/__tests__/AnchoredOverlay.test.js +136 -0
- package/lib-esm/__tests__/Autocomplete.test.d.ts +1 -0
- package/lib-esm/__tests__/Autocomplete.test.js +494 -0
- package/lib-esm/__tests__/Avatar.test.d.ts +1 -0
- package/lib-esm/__tests__/Avatar.test.js +56 -0
- package/lib-esm/__tests__/AvatarStack.test.d.ts +1 -0
- package/lib-esm/__tests__/AvatarStack.test.js +58 -0
- package/lib-esm/__tests__/BorderBox.test.d.ts +1 -0
- package/lib-esm/__tests__/BorderBox.test.js +47 -0
- package/lib-esm/__tests__/Box.test.d.ts +1 -0
- package/lib-esm/__tests__/Box.test.js +67 -0
- package/lib-esm/__tests__/BranchName.test.d.ts +1 -0
- package/lib-esm/__tests__/BranchName.test.js +26 -0
- package/lib-esm/__tests__/Breadcrumbs.test.d.ts +1 -0
- package/lib-esm/__tests__/Breadcrumbs.test.js +27 -0
- package/lib-esm/__tests__/BreadcrumbsItem.test.d.ts +1 -0
- package/lib-esm/__tests__/BreadcrumbsItem.test.js +39 -0
- package/lib-esm/__tests__/Button.test.d.ts +1 -0
- package/lib-esm/__tests__/Button.test.js +133 -0
- package/lib-esm/__tests__/Caret.test.d.ts +1 -0
- package/lib-esm/__tests__/Caret.test.js +42 -0
- package/lib-esm/__tests__/CircleBadge.test.d.ts +1 -0
- package/lib-esm/__tests__/CircleBadge.test.js +70 -0
- package/lib-esm/__tests__/CircleOcticon.test.d.ts +1 -0
- package/lib-esm/__tests__/CircleOcticon.test.js +59 -0
- package/lib-esm/__tests__/ConfirmationDialog.test.d.ts +1 -0
- package/lib-esm/__tests__/ConfirmationDialog.test.js +113 -0
- package/lib-esm/__tests__/CounterLabel.test.d.ts +1 -0
- package/lib-esm/__tests__/CounterLabel.test.js +47 -0
- package/lib-esm/__tests__/Details.test.d.ts +1 -0
- package/lib-esm/__tests__/Details.test.js +107 -0
- package/lib-esm/__tests__/Dialog.test.d.ts +1 -0
- package/lib-esm/__tests__/Dialog.test.js +171 -0
- package/lib-esm/__tests__/Dropdown.test.d.ts +1 -0
- package/lib-esm/__tests__/Dropdown.test.js +53 -0
- package/lib-esm/__tests__/DropdownMenu.test.d.ts +1 -0
- package/lib-esm/__tests__/DropdownMenu.test.js +137 -0
- package/lib-esm/__tests__/FilterList.test.d.ts +1 -0
- package/lib-esm/__tests__/FilterList.test.js +26 -0
- package/lib-esm/__tests__/FilterListItem.test.d.ts +1 -0
- package/lib-esm/__tests__/FilterListItem.test.js +36 -0
- package/lib-esm/__tests__/FilteredSearch.test.d.ts +1 -0
- package/lib-esm/__tests__/FilteredSearch.test.js +26 -0
- package/lib-esm/__tests__/Flash.test.d.ts +1 -0
- package/lib-esm/__tests__/Flash.test.js +51 -0
- package/lib-esm/__tests__/Flex.test.d.ts +1 -0
- package/lib-esm/__tests__/Flex.test.js +64 -0
- package/lib-esm/__tests__/FormGroup.test.d.ts +1 -0
- package/lib-esm/__tests__/FormGroup.test.js +44 -0
- package/lib-esm/__tests__/Grid.test.d.ts +1 -0
- package/lib-esm/__tests__/Grid.test.js +94 -0
- package/lib-esm/__tests__/Header.test.d.ts +1 -0
- package/lib-esm/__tests__/Header.test.js +48 -0
- package/lib-esm/__tests__/Heading.test.d.ts +1 -0
- package/lib-esm/__tests__/Heading.test.js +99 -0
- package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
- package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
- package/lib-esm/__tests__/Label.test.d.ts +1 -0
- package/lib-esm/__tests__/Label.test.js +36 -0
- package/lib-esm/__tests__/LabelGroup.test.d.ts +1 -0
- package/lib-esm/__tests__/LabelGroup.test.js +26 -0
- package/lib-esm/__tests__/Link.test.d.ts +1 -0
- package/lib-esm/__tests__/Link.test.js +60 -0
- package/lib-esm/__tests__/Merge.types.test.d.ts +30 -0
- package/lib-esm/__tests__/Merge.types.test.js +14 -0
- package/lib-esm/__tests__/NewButton.test.d.ts +1 -0
- package/lib-esm/__tests__/NewButton.test.js +84 -0
- package/lib-esm/__tests__/Overlay.test.d.ts +1 -0
- package/lib-esm/__tests__/Overlay.test.js +123 -0
- package/lib-esm/__tests__/Pagehead.test.d.ts +1 -0
- package/lib-esm/__tests__/Pagehead.test.js +26 -0
- package/lib-esm/__tests__/Pagination/Pagination.test.d.ts +1 -0
- package/lib-esm/__tests__/Pagination/Pagination.test.js +35 -0
- package/lib-esm/__tests__/Pagination/PaginationModel.test.d.ts +1 -0
- package/lib-esm/__tests__/Pagination/PaginationModel.test.js +182 -0
- package/lib-esm/__tests__/PointerBox.test.d.ts +1 -0
- package/lib-esm/__tests__/PointerBox.test.js +36 -0
- package/lib-esm/__tests__/Popover.test.d.ts +1 -0
- package/lib-esm/__tests__/Popover.test.js +53 -0
- package/lib-esm/__tests__/Portal.test.d.ts +1 -0
- package/lib-esm/__tests__/Portal.test.js +104 -0
- package/lib-esm/__tests__/Position.test.d.ts +1 -0
- package/lib-esm/__tests__/Position.test.js +133 -0
- package/lib-esm/__tests__/ProgressBar.test.d.ts +1 -0
- package/lib-esm/__tests__/ProgressBar.test.js +58 -0
- package/lib-esm/__tests__/SelectMenu.test.d.ts +1 -0
- package/lib-esm/__tests__/SelectMenu.test.js +145 -0
- package/lib-esm/__tests__/SelectPanel.test.d.ts +1 -0
- package/lib-esm/__tests__/SelectPanel.test.js +65 -0
- package/lib-esm/__tests__/SideNav.test.d.ts +1 -0
- package/lib-esm/__tests__/SideNav.test.js +60 -0
- package/lib-esm/__tests__/Spinner.test.d.ts +1 -0
- package/lib-esm/__tests__/Spinner.test.js +43 -0
- package/lib-esm/__tests__/StateLabel.test.d.ts +1 -0
- package/lib-esm/__tests__/StateLabel.test.js +61 -0
- package/lib-esm/__tests__/StyledOcticon.test.d.ts +1 -0
- package/lib-esm/__tests__/StyledOcticon.test.js +29 -0
- package/lib-esm/__tests__/SubNav.test.d.ts +1 -0
- package/lib-esm/__tests__/SubNav.test.js +50 -0
- package/lib-esm/__tests__/SubNavLink.test.d.ts +1 -0
- package/lib-esm/__tests__/SubNavLink.test.js +39 -0
- package/lib-esm/__tests__/TabNav.test.d.ts +1 -0
- package/lib-esm/__tests__/TabNav.test.js +39 -0
- package/lib-esm/__tests__/Text.test.d.ts +1 -0
- package/lib-esm/__tests__/Text.test.js +93 -0
- package/lib-esm/__tests__/TextInput.test.d.ts +1 -0
- package/lib-esm/__tests__/TextInput.test.js +68 -0
- package/lib-esm/__tests__/TextInputWithTokens.test.d.ts +1 -0
- package/lib-esm/__tests__/TextInputWithTokens.test.js +511 -0
- package/lib-esm/__tests__/ThemeProvider.test.d.ts +1 -0
- package/lib-esm/__tests__/ThemeProvider.test.js +408 -0
- package/lib-esm/__tests__/Timeline.test.d.ts +1 -0
- package/lib-esm/__tests__/Timeline.test.js +65 -0
- package/lib-esm/__tests__/Token.test.d.ts +1 -0
- package/lib-esm/__tests__/Token.test.js +166 -0
- package/lib-esm/__tests__/Tooltip.test.d.ts +1 -0
- package/lib-esm/__tests__/Tooltip.test.js +59 -0
- package/lib-esm/__tests__/Truncate.test.d.ts +1 -0
- package/lib-esm/__tests__/Truncate.test.js +53 -0
- package/lib-esm/__tests__/UnderlineNav.test.d.ts +1 -0
- package/lib-esm/__tests__/UnderlineNav.test.js +60 -0
- package/lib-esm/__tests__/UnderlineNavLink.test.d.ts +1 -0
- package/lib-esm/__tests__/UnderlineNavLink.test.js +41 -0
- package/lib-esm/__tests__/behaviors/anchoredPosition.test.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/anchoredPosition.test.js +388 -0
- package/lib-esm/__tests__/behaviors/focusTrap.test.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/focusTrap.test.js +227 -0
- package/lib-esm/__tests__/behaviors/focusZone.test.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/focusZone.test.js +487 -0
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.test.js +48 -0
- package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/scrollIntoViewingArea.test.js +224 -0
- package/lib-esm/__tests__/filterObject.test.d.ts +1 -0
- package/lib-esm/__tests__/filterObject.test.js +27 -0
- package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js +46 -0
- package/lib-esm/__tests__/hooks/useOnEscapePress.test.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOnEscapePress.test.js +23 -0
- package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js +68 -0
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js +52 -0
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js +36 -0
- package/lib-esm/__tests__/theme.test.d.ts +1 -0
- package/lib-esm/__tests__/theme.test.js +33 -0
- package/lib-esm/__tests__/themeGet.test.d.ts +1 -0
- package/lib-esm/__tests__/themeGet.test.js +22 -0
- package/lib-esm/__tests__/useSafeTimeout.test.d.ts +1 -0
- package/lib-esm/__tests__/useSafeTimeout.test.js +39 -0
- package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
- package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
- package/lib-esm/stories/ActionList.stories.js +395 -0
- package/lib-esm/stories/ActionList2.stories.js +796 -0
- package/lib-esm/stories/ActionMenu.stories.js +305 -0
- package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
- package/lib-esm/stories/Autocomplete.stories.js +560 -0
- package/lib-esm/stories/AvatarStack.stories.js +32 -0
- package/lib-esm/stories/Button.stories.js +86 -0
- package/lib-esm/stories/ConfirmationDialog.stories.js +86 -0
- package/lib-esm/stories/Dialog.stories.js +240 -0
- package/lib-esm/stories/DropdownMenu.stories.js +94 -0
- package/lib-esm/stories/IssueLabelToken.stories.js +139 -0
- package/lib-esm/stories/NewButton.stories.js +178 -0
- package/lib-esm/stories/Overlay.stories.js +173 -0
- package/lib-esm/stories/Portal.stories.js +68 -0
- package/lib-esm/stories/ProfileToken.stories.js +136 -0
- package/lib-esm/stories/SelectPanel.stories.js +334 -0
- package/lib-esm/stories/TextInput.stories.js +117 -0
- package/lib-esm/stories/TextInputWithTokens.stories.js +210 -0
- package/lib-esm/stories/ThemeProvider.stories.js +83 -0
- package/lib-esm/stories/Token.stories.js +146 -0
- package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
- package/lib-esm/stories/useFocusTrap.stories.js +309 -0
- package/lib-esm/stories/useFocusZone.stories.js +554 -0
- package/migrating.md +250 -0
- package/now.json +17 -0
- package/package-lock.json +66509 -0
- package/package.json +1 -1
- package/rollup.config.js +36 -0
- package/script/build +21 -0
- package/script/build-storybook +10 -0
- package/script/setup +12 -0
- package/src/ActionList/Divider.tsx +25 -0
- package/src/ActionList/Group.tsx +45 -0
- package/src/ActionList/Header.tsx +74 -0
- package/src/ActionList/Item.tsx +509 -0
- package/src/ActionList/List.tsx +258 -0
- package/src/ActionList/index.ts +21 -0
- package/src/ActionList2/Description.tsx +52 -0
- package/src/ActionList2/Divider.tsx +24 -0
- package/src/ActionList2/Group.tsx +34 -0
- package/src/ActionList2/Header.tsx +58 -0
- package/src/ActionList2/Item.tsx +246 -0
- package/src/ActionList2/LinkItem.tsx +49 -0
- package/src/ActionList2/List.tsx +55 -0
- package/src/ActionList2/Selection.tsx +60 -0
- package/src/ActionList2/Visuals.tsx +76 -0
- package/src/ActionList2/index.ts +39 -0
- package/src/ActionMenu.tsx +106 -0
- package/src/AnchoredOverlay/AnchoredOverlay.tsx +191 -0
- package/src/AnchoredOverlay/index.ts +2 -0
- package/src/Autocomplete/Autocomplete.tsx +103 -0
- package/src/Autocomplete/AutocompleteContext.tsx +19 -0
- package/src/Autocomplete/AutocompleteInput.tsx +179 -0
- package/src/Autocomplete/AutocompleteMenu.tsx +341 -0
- package/src/Autocomplete/AutocompleteOverlay.tsx +68 -0
- package/src/Autocomplete/index.ts +2 -0
- package/src/Avatar.tsx +46 -0
- package/src/AvatarPair.tsx +35 -0
- package/src/AvatarStack.tsx +159 -0
- package/src/BaseStyles.tsx +53 -0
- package/src/BorderBox.tsx +18 -0
- package/src/Box.tsx +54 -0
- package/src/BranchName.tsx +19 -0
- package/src/Breadcrumbs.tsx +101 -0
- package/src/Button/Button.tsx +40 -0
- package/src/Button/ButtonBase.tsx +43 -0
- package/src/Button/ButtonClose.tsx +40 -0
- package/src/Button/ButtonDanger.tsx +43 -0
- package/src/Button/ButtonGroup.tsx +55 -0
- package/src/Button/ButtonInvisible.tsx +32 -0
- package/src/Button/ButtonOutline.tsx +43 -0
- package/src/Button/ButtonPrimary.tsx +41 -0
- package/src/Button/ButtonStyles.tsx +36 -0
- package/src/Button/ButtonTableList.tsx +58 -0
- package/src/Button/index.ts +16 -0
- package/src/Caret.tsx +133 -0
- package/src/CircleBadge.tsx +55 -0
- package/src/CircleOcticon.tsx +37 -0
- package/src/CounterLabel.tsx +52 -0
- package/src/Details.tsx +23 -0
- package/src/Dialog/ConfirmationDialog.tsx +184 -0
- package/src/Dialog/Dialog.tsx +433 -0
- package/src/Dialog.tsx +149 -0
- package/src/Dropdown.tsx +158 -0
- package/src/DropdownMenu/DropdownButton.tsx +15 -0
- package/src/DropdownMenu/DropdownMenu.tsx +115 -0
- package/src/DropdownMenu/index.ts +4 -0
- package/src/DropdownStyles.ts +128 -0
- package/src/FilterList.tsx +81 -0
- package/src/FilteredActionList/FilteredActionList.tsx +142 -0
- package/src/FilteredActionList/index.ts +2 -0
- package/src/FilteredSearch.tsx +28 -0
- package/src/Flash.tsx +77 -0
- package/src/Flex.tsx +15 -0
- package/src/FormGroup.tsx +27 -0
- package/src/Grid.tsx +15 -0
- package/src/Header.tsx +84 -0
- package/src/Heading.tsx +21 -0
- package/src/Label.tsx +75 -0
- package/src/LabelGroup.tsx +18 -0
- package/src/Link.tsx +46 -0
- package/src/NewButton/button-counter.tsx +15 -0
- package/src/NewButton/button.tsx +279 -0
- package/src/NewButton/index.ts +10 -0
- package/src/NewButton/types.ts +36 -0
- package/src/Overlay.tsx +198 -0
- package/src/Pagehead.tsx +17 -0
- package/src/Pagination/Pagination.tsx +214 -0
- package/src/Pagination/index.ts +4 -0
- package/src/Pagination/model.tsx +187 -0
- package/src/PointerBox.tsx +31 -0
- package/src/Popover.tsx +236 -0
- package/src/Portal/Portal.tsx +97 -0
- package/src/Portal/index.ts +5 -0
- package/src/Position.tsx +63 -0
- package/src/ProgressBar.tsx +52 -0
- package/src/SelectMenu/SelectMenu.tsx +125 -0
- package/src/SelectMenu/SelectMenuContext.tsx +9 -0
- package/src/SelectMenu/SelectMenuDivider.tsx +25 -0
- package/src/SelectMenu/SelectMenuFilter.tsx +51 -0
- package/src/SelectMenu/SelectMenuFooter.tsx +28 -0
- package/src/SelectMenu/SelectMenuHeader.tsx +50 -0
- package/src/SelectMenu/SelectMenuItem.tsx +137 -0
- package/src/SelectMenu/SelectMenuList.tsx +42 -0
- package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +24 -0
- package/src/SelectMenu/SelectMenuModal.tsx +121 -0
- package/src/SelectMenu/SelectMenuTab.tsx +88 -0
- package/src/SelectMenu/SelectMenuTabPanel.tsx +30 -0
- package/src/SelectMenu/SelectMenuTabs.tsx +44 -0
- package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
- package/src/SelectMenu/index.ts +15 -0
- package/src/SelectPanel/SelectPanel.tsx +173 -0
- package/src/SelectPanel/index.ts +2 -0
- package/src/SideNav.tsx +193 -0
- package/src/Spinner.tsx +59 -0
- package/src/StateLabel.tsx +114 -0
- package/src/StyledOcticon.tsx +24 -0
- package/src/SubNav.tsx +129 -0
- package/src/TabNav.tsx +77 -0
- package/src/Text.tsx +13 -0
- package/src/TextInput.tsx +68 -0
- package/src/TextInputWithTokens.tsx +351 -0
- package/src/ThemeProvider.tsx +176 -0
- package/src/Timeline.tsx +141 -0
- package/src/Token/AvatarToken.tsx +54 -0
- package/src/Token/IssueLabelToken.tsx +150 -0
- package/src/Token/Token.tsx +126 -0
- package/src/Token/TokenBase.tsx +129 -0
- package/src/Token/_RemoveTokenButton.tsx +111 -0
- package/src/Token/_TokenTextContainer.tsx +47 -0
- package/src/Token/index.ts +3 -0
- package/src/Tooltip.tsx +263 -0
- package/src/Truncate.tsx +36 -0
- package/src/UnderlineNav.tsx +110 -0
- package/src/_TextInputWrapper.tsx +113 -0
- package/src/_UnstyledTextInput.tsx +19 -0
- package/src/__tests__/.eslintrc.json +11 -0
- package/src/__tests__/ActionList.test.tsx +53 -0
- package/src/__tests__/ActionList.types.test.tsx +51 -0
- package/src/__tests__/ActionList2.test.tsx +47 -0
- package/src/__tests__/ActionMenu.test.tsx +136 -0
- package/src/__tests__/AnchoredOverlay.test.tsx +150 -0
- package/src/__tests__/Autocomplete.test.tsx +444 -0
- package/src/__tests__/Avatar.test.tsx +44 -0
- package/src/__tests__/AvatarStack.test.tsx +48 -0
- package/src/__tests__/BorderBox.test.tsx +43 -0
- package/src/__tests__/Box.test.tsx +42 -0
- package/src/__tests__/BranchName.test.tsx +26 -0
- package/src/__tests__/Breadcrumbs.test.tsx +27 -0
- package/src/__tests__/BreadcrumbsItem.test.tsx +31 -0
- package/src/__tests__/Button.test.tsx +128 -0
- package/src/__tests__/Caret.test.tsx +36 -0
- package/src/__tests__/CircleBadge.test.tsx +66 -0
- package/src/__tests__/CircleOcticon.test.tsx +50 -0
- package/src/__tests__/ConfirmationDialog.test.tsx +120 -0
- package/src/__tests__/CounterLabel.test.tsx +50 -0
- package/src/__tests__/Details.test.tsx +115 -0
- package/src/__tests__/Dialog.test.tsx +155 -0
- package/src/__tests__/Dropdown.test.tsx +53 -0
- package/src/__tests__/DropdownMenu.test.tsx +136 -0
- package/src/__tests__/FilterList.test.tsx +26 -0
- package/src/__tests__/FilterListItem.test.tsx +31 -0
- package/src/__tests__/FilteredSearch.test.tsx +26 -0
- package/src/__tests__/Flash.test.tsx +45 -0
- package/src/__tests__/Flex.test.tsx +58 -0
- package/src/__tests__/FormGroup.test.tsx +38 -0
- package/src/__tests__/Grid.test.tsx +82 -0
- package/src/__tests__/Header.test.tsx +49 -0
- package/src/__tests__/Heading.test.tsx +91 -0
- package/src/__tests__/KeyPaths.types.test.ts +14 -0
- package/src/__tests__/Label.test.tsx +34 -0
- package/src/__tests__/LabelGroup.test.tsx +30 -0
- package/src/__tests__/Link.test.tsx +47 -0
- package/src/__tests__/Merge.types.test.ts +39 -0
- package/src/__tests__/NewButton.test.tsx +70 -0
- package/src/__tests__/Overlay.test.tsx +103 -0
- package/src/__tests__/Pagehead.test.tsx +23 -0
- package/src/__tests__/Pagination/Pagination.test.tsx +30 -0
- package/src/__tests__/Pagination/PaginationModel.test.tsx +133 -0
- package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +184 -0
- package/src/__tests__/PointerBox.test.tsx +34 -0
- package/src/__tests__/Popover.test.tsx +68 -0
- package/src/__tests__/Portal.test.tsx +103 -0
- package/src/__tests__/Position.test.tsx +117 -0
- package/src/__tests__/ProgressBar.test.tsx +40 -0
- package/src/__tests__/SelectMenu.test.tsx +142 -0
- package/src/__tests__/SelectPanel.test.tsx +63 -0
- package/src/__tests__/SideNav.test.tsx +62 -0
- package/src/__tests__/Spinner.test.tsx +42 -0
- package/src/__tests__/StateLabel.test.tsx +48 -0
- package/src/__tests__/StyledOcticon.test.tsx +26 -0
- package/src/__tests__/SubNav.test.tsx +50 -0
- package/src/__tests__/SubNavLink.test.tsx +31 -0
- package/src/__tests__/TabNav.test.tsx +32 -0
- package/src/__tests__/Text.test.tsx +78 -0
- package/src/__tests__/TextInput.test.tsx +49 -0
- package/src/__tests__/TextInputWithTokens.test.tsx +422 -0
- package/src/__tests__/ThemeProvider.test.tsx +441 -0
- package/src/__tests__/Timeline.test.tsx +58 -0
- package/src/__tests__/Token.test.tsx +118 -0
- package/src/__tests__/Tooltip.test.tsx +52 -0
- package/src/__tests__/Truncate.test.tsx +43 -0
- package/src/__tests__/UnderlineNav.test.tsx +58 -0
- package/src/__tests__/UnderlineNavLink.test.tsx +31 -0
- package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +223 -0
- package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +80 -0
- package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +232 -0
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +3888 -0
- package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +19 -0
- package/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +377 -0
- package/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/Box.test.tsx.snap +201 -0
- package/src/__tests__/__snapshots__/BranchName.test.tsx.snap +17 -0
- package/src/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap +29 -0
- package/src/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +79 -0
- package/src/__tests__/__snapshots__/Button.test.tsx.snap +840 -0
- package/src/__tests__/__snapshots__/Caret.test.tsx.snap +373 -0
- package/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap +142 -0
- package/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap +65 -0
- package/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +89 -0
- package/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap +22 -0
- package/src/__tests__/__snapshots__/Details.test.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Dialog.test.tsx.snap +201 -0
- package/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +249 -0
- package/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap +107 -0
- package/src/__tests__/__snapshots__/FilterList.test.tsx.snap +13 -0
- package/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap +80 -0
- package/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap +32 -0
- package/src/__tests__/__snapshots__/Flash.test.tsx.snap +32 -0
- package/src/__tests__/__snapshots__/Flex.test.tsx.snap +130 -0
- package/src/__tests__/__snapshots__/FormGroup.test.tsx.snap +25 -0
- package/src/__tests__/__snapshots__/Grid.test.tsx.snap +178 -0
- package/src/__tests__/__snapshots__/Header.test.tsx.snap +79 -0
- package/src/__tests__/__snapshots__/Heading.test.tsx.snap +13 -0
- package/src/__tests__/__snapshots__/Label.test.tsx.snap +74 -0
- package/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Link.test.tsx.snap +213 -0
- package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +300 -0
- package/src/__tests__/__snapshots__/Pagehead.test.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/PointerBox.test.tsx.snap +174 -0
- package/src/__tests__/__snapshots__/Popover.test.tsx.snap +4687 -0
- package/src/__tests__/__snapshots__/Position.test.tsx.snap +44 -0
- package/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +53 -0
- package/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +473 -0
- package/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +124 -0
- package/src/__tests__/__snapshots__/SideNav.test.tsx.snap +143 -0
- package/src/__tests__/__snapshots__/Spinner.test.tsx.snap +33 -0
- package/src/__tests__/__snapshots__/StateLabel.test.tsx.snap +395 -0
- package/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +26 -0
- package/src/__tests__/__snapshots__/SubNav.test.tsx.snap +44 -0
- package/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +199 -0
- package/src/__tests__/__snapshots__/TabNav.test.tsx.snap +58 -0
- package/src/__tests__/__snapshots__/Text.test.tsx.snap +7 -0
- package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +446 -0
- package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +6045 -0
- package/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Timeline.test.tsx.snap +159 -0
- package/src/__tests__/__snapshots__/Token.test.tsx.snap +3811 -0
- package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap +227 -0
- package/src/__tests__/__snapshots__/Truncate.test.tsx.snap +17 -0
- package/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap +59 -0
- package/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +130 -0
- package/src/__tests__/behaviors/anchoredPosition.test.ts +295 -0
- package/src/__tests__/behaviors/focusTrap.test.tsx +236 -0
- package/src/__tests__/behaviors/focusZone.test.tsx +549 -0
- package/src/__tests__/behaviors/iterateFocusableElements.test.tsx +61 -0
- package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts +195 -0
- package/src/__tests__/filterObject.test.ts +54 -0
- package/src/__tests__/hooks/useAnchoredPosition.test.tsx +31 -0
- package/src/__tests__/hooks/useOnEscapePress.test.tsx +16 -0
- package/src/__tests__/hooks/useOnOutsideClick.test.tsx +48 -0
- package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx +48 -0
- package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx +39 -0
- package/src/__tests__/theme.test.ts +41 -0
- package/src/__tests__/themeGet.test.ts +15 -0
- package/src/__tests__/useSafeTimeout.test.tsx +36 -0
- package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
- package/src/__tests__/utils/createSlots.test.tsx +74 -0
- package/src/behaviors/anchoredPosition.ts +442 -0
- package/src/behaviors/focusTrap.ts +184 -0
- package/src/behaviors/focusZone.ts +713 -0
- package/src/behaviors/scrollIntoViewingArea.ts +27 -0
- package/src/constants.ts +62 -0
- package/src/drafts.ts +10 -0
- package/src/hooks/index.ts +11 -0
- package/src/hooks/useAnchoredPosition.ts +54 -0
- package/src/hooks/useCombinedRefs.ts +40 -0
- package/src/hooks/useDetails.tsx +54 -0
- package/src/hooks/useDialog.ts +121 -0
- package/src/hooks/useFocusTrap.ts +80 -0
- package/src/hooks/useFocusZone.ts +64 -0
- package/src/hooks/useOnEscapePress.ts +63 -0
- package/src/hooks/useOnOutsideClick.tsx +82 -0
- package/src/hooks/useOpenAndCloseFocus.ts +32 -0
- package/src/hooks/useOverlay.tsx +34 -0
- package/src/hooks/useProvidedRefOrCreate.ts +14 -0
- package/src/hooks/useProvidedStateOrCreate.ts +27 -0
- package/src/hooks/useRenderForcingRef.ts +22 -0
- package/src/hooks/useResizeObserver.ts +11 -0
- package/src/hooks/useSafeTimeout.ts +38 -0
- package/src/hooks/useScrollFlash.ts +21 -0
- package/src/index.ts +172 -0
- package/src/polyfills/eventListenerSignal.ts +66 -0
- package/src/stories/ActionList.stories.tsx +436 -0
- package/src/stories/ActionList2.stories.tsx +1291 -0
- package/src/stories/ActionMenu.stories.tsx +334 -0
- package/src/stories/AnchoredOverlay.stories.tsx +117 -0
- package/src/stories/Autocomplete.stories.tsx +655 -0
- package/src/stories/AvatarStack.stories.tsx +37 -0
- package/src/stories/Button.stories.tsx +92 -0
- package/src/stories/ConfirmationDialog.stories.tsx +105 -0
- package/src/stories/Dialog.stories.tsx +240 -0
- package/src/stories/DropdownMenu.stories.tsx +84 -0
- package/src/stories/IssueLabelToken.stories.tsx +138 -0
- package/src/stories/NewButton.stories.tsx +201 -0
- package/src/stories/Overlay.stories.tsx +213 -0
- package/src/stories/Portal.stories.tsx +109 -0
- package/src/stories/ProfileToken.stories.tsx +129 -0
- package/src/stories/SelectPanel.stories.tsx +353 -0
- package/src/stories/TextInput.stories.tsx +113 -0
- package/src/stories/TextInputWithTokens.stories.tsx +155 -0
- package/src/stories/ThemeProvider.stories.tsx +104 -0
- package/src/stories/Token.stories.tsx +137 -0
- package/src/stories/useAnchoredPosition.stories.tsx +332 -0
- package/src/stories/useFocusTrap.stories.tsx +400 -0
- package/src/stories/useFocusZone.stories.tsx +663 -0
- package/src/sx.ts +24 -0
- package/src/theme-preval.js +80 -0
- package/src/theme.ts +89 -0
- package/src/utils/create-slots.tsx +96 -0
- package/src/utils/deprecate.tsx +73 -0
- package/src/utils/isNumeric.tsx +4 -0
- package/src/utils/iterateFocusableElements.ts +121 -0
- package/src/utils/ssr.tsx +1 -0
- package/src/utils/test-deprecations.tsx +19 -0
- package/src/utils/test-helpers.tsx +7 -0
- package/src/utils/test-matchers.tsx +109 -0
- package/src/utils/testing.tsx +242 -0
- package/src/utils/theme.js +64 -0
- package/src/utils/types/AriaRole.ts +71 -0
- package/src/utils/types/ComponentProps.ts +13 -0
- package/src/utils/types/Flatten.ts +4 -0
- package/src/utils/types/KeyPaths.ts +10 -0
- package/src/utils/types/MandateProps.ts +19 -0
- package/src/utils/types/Merge.ts +20 -0
- package/src/utils/types/index.ts +5 -0
- package/src/utils/uniqueId.ts +6 -0
- package/src/utils/use-force-update.ts +7 -0
- package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
- package/src/utils/userAgent.ts +7 -0
- package/stats.html +3279 -0
- package/tsconfig.base.json +20 -0
- package/tsconfig.build.json +7 -0
- package/tsconfig.json +7 -0
@@ -0,0 +1,77 @@
|
|
1
|
+
import {Flash, Label} from '@primer/components'
|
2
|
+
import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
|
3
|
+
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
|
4
|
+
import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
|
5
|
+
import Table from '@primer/gatsby-theme-doctocat/src/components/table'
|
6
|
+
import {graphql, useStaticQuery} from 'gatsby'
|
7
|
+
import React from 'react'
|
8
|
+
|
9
|
+
/** Render prop documentation for the given component */
|
10
|
+
export function Props({of}) {
|
11
|
+
const data = useStaticQuery(graphql`
|
12
|
+
query {
|
13
|
+
allComponentMetadata {
|
14
|
+
nodes {
|
15
|
+
id
|
16
|
+
name
|
17
|
+
props {
|
18
|
+
description
|
19
|
+
defaultValue
|
20
|
+
name
|
21
|
+
required
|
22
|
+
type
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
}
|
27
|
+
`)
|
28
|
+
|
29
|
+
const displayName = of?.displayName || of?.name || ''
|
30
|
+
const component = data.allComponentMetadata.nodes.find(node => node.name === displayName)
|
31
|
+
|
32
|
+
if (!component) {
|
33
|
+
// eslint-disable-next-line no-console
|
34
|
+
console.error(`Could not find component ${displayName}`)
|
35
|
+
return (
|
36
|
+
<>
|
37
|
+
<H3>{displayName}</H3>
|
38
|
+
<Flash variant="danger">Component not found</Flash>
|
39
|
+
</>
|
40
|
+
)
|
41
|
+
}
|
42
|
+
|
43
|
+
return (
|
44
|
+
<>
|
45
|
+
<H3>{component.name}</H3>
|
46
|
+
{component.props.length > 0 ? (
|
47
|
+
<Table>
|
48
|
+
<thead>
|
49
|
+
<tr>
|
50
|
+
<th align="left">Prop</th>
|
51
|
+
<th align="left">Type</th>
|
52
|
+
<th align="left">Default</th>
|
53
|
+
<th align="left">Description</th>
|
54
|
+
</tr>
|
55
|
+
</thead>
|
56
|
+
<tbody>
|
57
|
+
{component.props.map(prop => (
|
58
|
+
<tr key={prop.name}>
|
59
|
+
<td style={{whiteSpace: 'nowrap'}}>
|
60
|
+
<InlineCode>{prop.name}</InlineCode>{' '}
|
61
|
+
{prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
|
62
|
+
</td>
|
63
|
+
<td>
|
64
|
+
<InlineCode>{prop.type}</InlineCode>
|
65
|
+
</td>
|
66
|
+
<td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
|
67
|
+
<td>{prop.description}</td>
|
68
|
+
</tr>
|
69
|
+
))}
|
70
|
+
</tbody>
|
71
|
+
</Table>
|
72
|
+
) : (
|
73
|
+
<Paragraph>No props</Paragraph>
|
74
|
+
)}
|
75
|
+
</>
|
76
|
+
)
|
77
|
+
}
|
package/jest.config.js
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
/* eslint-disable github/unescaped-html-literal */
|
2
|
+
module.exports = {
|
3
|
+
testEnvironment: 'jsdom',
|
4
|
+
cacheDirectory: '.test',
|
5
|
+
collectCoverage: true,
|
6
|
+
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],
|
7
|
+
setupFilesAfterEnv: [
|
8
|
+
'<rootDir>/src/utils/test-matchers.tsx',
|
9
|
+
'<rootDir>/src/utils/test-deprecations.tsx',
|
10
|
+
'<rootDir>/src/utils/test-helpers.tsx'
|
11
|
+
],
|
12
|
+
testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
|
13
|
+
}
|
package/lib/ActionList/Item.js
CHANGED
@@ -142,7 +142,7 @@ exports.TextContainer = TextContainer;
|
|
142
142
|
const BaseVisualContainer = _styledComponents.default.div.withConfig({
|
143
143
|
displayName: "Item__BaseVisualContainer",
|
144
144
|
componentId: "jqpvy8-4"
|
145
|
-
})(["height:20px;width:", ";margin-right:", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
|
145
|
+
})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
|
146
146
|
|
147
147
|
const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
|
148
148
|
displayName: "Item__ColoredVisualContainer",
|
@@ -168,10 +168,16 @@ const DescriptionContainer = _styledComponents.default.span.withConfig({
|
|
168
168
|
componentId: "jqpvy8-8"
|
169
169
|
})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
|
170
170
|
|
171
|
-
const
|
172
|
-
displayName: "
|
171
|
+
const MultiSelectIcon = _styledComponents.default.svg.withConfig({
|
172
|
+
displayName: "Item__MultiSelectIcon",
|
173
173
|
componentId: "jqpvy8-9"
|
174
|
-
})(["
|
174
|
+
})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
|
175
|
+
selected
|
176
|
+
}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({
|
177
|
+
selected
|
178
|
+
}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('shadow.small'), ({
|
179
|
+
selected
|
180
|
+
}) => selected ? 1 : 0);
|
175
181
|
/**
|
176
182
|
* An actionable or selectable `Item` with an optional icon and description.
|
177
183
|
*/
|
@@ -207,12 +213,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
|
|
207
213
|
}
|
208
214
|
|
209
215
|
onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
|
210
|
-
const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
|
211
|
-
|
212
|
-
if (isCheckbox && event.key === ' ') {
|
213
|
-
// space key on a checkbox will also trigger a click event. Ignore the space key so we don't get double events
|
214
|
-
return;
|
215
|
-
}
|
216
216
|
|
217
217
|
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
218
218
|
onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
|
@@ -250,15 +250,24 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
|
|
250
250
|
onClick: clickHandler,
|
251
251
|
hoverBackground: disabled ? 'inherit' : hoverBackground,
|
252
252
|
focusBackground: disabled ? 'inherit' : focusBackground
|
253
|
-
}), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
"
|
259
|
-
|
260
|
-
|
261
|
-
|
253
|
+
}), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
|
254
|
+
selected: selected,
|
255
|
+
width: "16",
|
256
|
+
height: "16",
|
257
|
+
viewBox: "0 0 16 16",
|
258
|
+
xmlns: "http://www.w3.org/2000/svg",
|
259
|
+
"aria-hidden": "true"
|
260
|
+
}, /*#__PURE__*/_react.default.createElement("rect", {
|
261
|
+
x: "2",
|
262
|
+
y: "2",
|
263
|
+
width: "12",
|
264
|
+
height: "12",
|
265
|
+
rx: "4"
|
266
|
+
}), /*#__PURE__*/_react.default.createElement("path", {
|
267
|
+
fillRule: "evenodd",
|
268
|
+
strokeWidth: "0",
|
269
|
+
d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
|
270
|
+
}))) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
|
262
271
|
fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
|
263
272
|
})), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
|
264
273
|
variant: variant,
|
package/lib/ActionList/Item.jsx
CHANGED
@@ -192,6 +192,9 @@ const BaseVisualContainer = styled_components_1.default.div `
|
|
192
192
|
height: 20px;
|
193
193
|
width: ${constants_1.get('space.3')};
|
194
194
|
margin-right: ${constants_1.get('space.2')};
|
195
|
+
display: flex;
|
196
|
+
justify-content: center;
|
197
|
+
align-items: center;
|
195
198
|
`;
|
196
199
|
const ColoredVisualContainer = styled_components_1.default(BaseVisualContainer) `
|
197
200
|
svg {
|
@@ -225,8 +228,16 @@ const DescriptionContainer = styled_components_1.default.span `
|
|
225
228
|
flex-grow: 1;
|
226
229
|
flex-basis: var(--description-container-flex-basis);
|
227
230
|
`;
|
228
|
-
const
|
229
|
-
|
231
|
+
const MultiSelectIcon = styled_components_1.default.svg `
|
232
|
+
rect {
|
233
|
+
fill: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.canvas.default'))};
|
234
|
+
stroke: ${({ selected }) => (selected ? constants_1.get('colors.accent.fg') : constants_1.get('colors.border.default'))};
|
235
|
+
}
|
236
|
+
path {
|
237
|
+
fill: ${constants_1.get('colors.fg.onEmphasis')};
|
238
|
+
boxshadow: ${constants_1.get('shadow.small')};
|
239
|
+
opacity: ${({ selected }) => (selected ? 1 : 0)};
|
240
|
+
}
|
230
241
|
`;
|
231
242
|
/**
|
232
243
|
* An actionable or selectable `Item` with an optional icon and description.
|
@@ -240,11 +251,6 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
|
|
240
251
|
return;
|
241
252
|
}
|
242
253
|
onKeyPress?.(event);
|
243
|
-
const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
|
244
|
-
if (isCheckbox && event.key === ' ') {
|
245
|
-
// space key on a checkbox will also trigger a click event. Ignore the space key so we don't get double events
|
246
|
-
return;
|
247
|
-
}
|
248
254
|
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
249
255
|
onAction?.(itemProps, event);
|
250
256
|
}
|
@@ -265,11 +271,15 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
|
|
265
271
|
return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
|
266
272
|
{!!selected === selected && (<BaseVisualContainer>
|
267
273
|
{selectionVariant === 'multiple' ? (<>
|
268
|
-
{
|
269
|
-
*
|
270
|
-
*
|
274
|
+
{/**
|
275
|
+
* we use a svg instead of an input because there should not
|
276
|
+
* be an interactive element inside an option
|
277
|
+
* svg copied from primer/css
|
271
278
|
*/}
|
272
|
-
<
|
279
|
+
<MultiSelectIcon selected={selected} width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
280
|
+
<rect x="2" y="2" width="12" height="12" rx="4"></rect>
|
281
|
+
<path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
|
282
|
+
</MultiSelectIcon>
|
273
283
|
</>) : (selected && <octicons_react_1.CheckIcon fill={theme?.colors.fg.default}/>)}
|
274
284
|
</BaseVisualContainer>)}
|
275
285
|
{LeadingVisual && (<LeadingVisualContainer variant={variant} disabled={disabled}>
|
@@ -23,7 +23,6 @@ const Description = ({
|
|
23
23
|
...props
|
24
24
|
}) => {
|
25
25
|
const styles = {
|
26
|
-
color: 'fg.muted',
|
27
26
|
fontSize: 0,
|
28
27
|
lineHeight: '16px',
|
29
28
|
flexGrow: 1,
|
@@ -35,14 +34,19 @@ const Description = ({
|
|
35
34
|
name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
|
36
35
|
}, ({
|
37
36
|
blockDescriptionId,
|
38
|
-
inlineDescriptionId
|
37
|
+
inlineDescriptionId,
|
38
|
+
disabled
|
39
39
|
}) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
|
40
40
|
as: "span",
|
41
|
-
sx: (0, _sx.merge)(styles,
|
41
|
+
sx: (0, _sx.merge)({ ...styles,
|
42
|
+
color: disabled ? 'fg.disabled' : 'fg.muted'
|
43
|
+
}, sx),
|
42
44
|
id: blockDescriptionId
|
43
45
|
}, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
|
44
46
|
id: inlineDescriptionId,
|
45
|
-
sx: (0, _sx.merge)(styles,
|
47
|
+
sx: (0, _sx.merge)({ ...styles,
|
48
|
+
color: disabled ? 'fg.disabled' : 'fg.muted'
|
49
|
+
}, sx),
|
46
50
|
title: props.children,
|
47
51
|
inline: true,
|
48
52
|
maxWidth: "100%"
|
@@ -11,7 +11,6 @@ const Truncate_1 = __importDefault(require("../Truncate"));
|
|
11
11
|
const Item_1 = require("./Item");
|
12
12
|
const Description = ({ variant = 'inline', sx = {}, ...props }) => {
|
13
13
|
const styles = {
|
14
|
-
color: 'fg.muted',
|
15
14
|
fontSize: 0,
|
16
15
|
lineHeight: '16px',
|
17
16
|
flexGrow: 1,
|
@@ -20,9 +19,9 @@ const Description = ({ variant = 'inline', sx = {}, ...props }) => {
|
|
20
19
|
marginLeft: variant === 'block' ? 0 : 2
|
21
20
|
};
|
22
21
|
return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
|
23
|
-
{({ blockDescriptionId, inlineDescriptionId }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge(styles, sx)} id={blockDescriptionId}>
|
22
|
+
{({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
|
24
23
|
{props.children}
|
25
|
-
</Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge(styles, sx)} title={props.children} inline={true} maxWidth="100%">
|
24
|
+
</Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
|
26
25
|
{props.children}
|
27
26
|
</Truncate_1.default>)}
|
28
27
|
</Item_1.Slot>);
|
package/lib/ActionList2/Item.js
CHANGED
@@ -34,9 +34,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
34
34
|
const getVariantStyles = (variant, disabled) => {
|
35
35
|
if (disabled) {
|
36
36
|
return {
|
37
|
-
color: 'fg.
|
38
|
-
iconColor: 'fg.
|
39
|
-
annotationColor: 'fg.
|
37
|
+
color: 'primer.fg.disabled',
|
38
|
+
iconColor: 'primer.fg.disabled',
|
39
|
+
annotationColor: 'primer.fg.disabled'
|
40
40
|
};
|
41
41
|
}
|
42
42
|
|
@@ -105,10 +105,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
105
105
|
borderRadius: listVariant === 'inset' ? 2 : 0,
|
106
106
|
transition: 'background 33.333ms linear',
|
107
107
|
color: getVariantStyles(variant, disabled).color,
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
cursor: 'pointer'
|
108
|
+
cursor: 'pointer',
|
109
|
+
'&[aria-disabled]': {
|
110
|
+
cursor: 'not-allowed'
|
112
111
|
},
|
113
112
|
'@media (hover: hover) and (pointer: fine)': {
|
114
113
|
':hover:not([aria-disabled])': {
|
@@ -199,8 +198,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
199
198
|
"aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
|
200
199
|
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
201
200
|
}, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
|
202
|
-
selected: selected
|
203
|
-
disabled: disabled
|
201
|
+
selected: selected
|
204
202
|
}), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
205
203
|
"data-component": "ActionList.Item--DividerContainer",
|
206
204
|
sx: {
|
package/lib/ActionList2/Item.jsx
CHANGED
@@ -35,9 +35,9 @@ const Selection_1 = require("./Selection");
|
|
35
35
|
const getVariantStyles = (variant, disabled) => {
|
36
36
|
if (disabled) {
|
37
37
|
return {
|
38
|
-
color: 'fg.
|
39
|
-
iconColor: 'fg.
|
40
|
-
annotationColor: 'fg.
|
38
|
+
color: 'primer.fg.disabled',
|
39
|
+
iconColor: 'primer.fg.disabled',
|
40
|
+
annotationColor: 'primer.fg.disabled'
|
41
41
|
};
|
42
42
|
}
|
43
43
|
switch (variant) {
|
@@ -76,8 +76,8 @@ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = fal
|
|
76
76
|
borderRadius: listVariant === 'inset' ? 2 : 0,
|
77
77
|
transition: 'background 33.333ms linear',
|
78
78
|
color: exports.getVariantStyles(variant, disabled).color,
|
79
|
-
|
80
|
-
'
|
79
|
+
cursor: 'pointer',
|
80
|
+
'&[aria-disabled]': { cursor: 'not-allowed' },
|
81
81
|
'@media (hover: hover) and (pointer: fine)': {
|
82
82
|
':hover:not([aria-disabled])': {
|
83
83
|
backgroundColor: `actionListItem.${variant}.hoverBg`,
|
@@ -146,7 +146,7 @@ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = fal
|
|
146
146
|
return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
|
147
147
|
{slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
|
148
148
|
<ItemWrapper>
|
149
|
-
<Selection_1.Selection selected={selected}
|
149
|
+
<Selection_1.Selection selected={selected}/>
|
150
150
|
{slots.LeadingVisual}
|
151
151
|
<Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
|
152
152
|
<ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ItemProps } from './Item';
|
3
|
-
declare type SelectionProps = Pick<ItemProps, 'selected'
|
3
|
+
declare type SelectionProps = Pick<ItemProps, 'selected'>;
|
4
4
|
export declare const Selection: React.FC<SelectionProps>;
|
5
5
|
export {};
|
@@ -18,8 +18,7 @@ var _Visuals = require("./Visuals");
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
19
|
|
20
20
|
const Selection = ({
|
21
|
-
selected
|
22
|
-
disabled
|
21
|
+
selected
|
23
22
|
}) => {
|
24
23
|
const {
|
25
24
|
selectionVariant: listSelectionVariant
|
@@ -44,26 +43,41 @@ const Selection = ({
|
|
44
43
|
}
|
45
44
|
/**
|
46
45
|
* selectionVariant is multiple
|
47
|
-
*
|
48
|
-
*
|
46
|
+
* we use a svg instead of an input because there should not
|
47
|
+
* be an interactive element inside an option
|
48
|
+
* svg copied from primer/css
|
49
49
|
*/
|
50
50
|
|
51
51
|
|
52
52
|
return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
|
53
53
|
sx: {
|
54
|
-
|
55
|
-
|
56
|
-
|
54
|
+
rect: {
|
55
|
+
fill: selected ? 'accent.fg' : 'canvas.default',
|
56
|
+
stroke: selected ? 'accent.fg' : 'border.default'
|
57
|
+
},
|
58
|
+
path: {
|
59
|
+
fill: 'fg.onEmphasis',
|
60
|
+
boxShadow: 'shadow.small',
|
61
|
+
opacity: selected ? 1 : 0
|
57
62
|
}
|
58
63
|
}
|
59
|
-
}, /*#__PURE__*/_react.default.createElement("
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
64
|
+
}, /*#__PURE__*/_react.default.createElement("svg", {
|
65
|
+
width: "16",
|
66
|
+
height: "16",
|
67
|
+
viewBox: "0 0 16 16",
|
68
|
+
xmlns: "http://www.w3.org/2000/svg",
|
69
|
+
"aria-hidden": "true"
|
70
|
+
}, /*#__PURE__*/_react.default.createElement("rect", {
|
71
|
+
x: "2",
|
72
|
+
y: "2",
|
73
|
+
width: "12",
|
74
|
+
height: "12",
|
75
|
+
rx: "4"
|
76
|
+
}), /*#__PURE__*/_react.default.createElement("path", {
|
77
|
+
fillRule: "evenodd",
|
78
|
+
strokeWidth: "0",
|
79
|
+
d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
|
80
|
+
})));
|
67
81
|
};
|
68
82
|
|
69
83
|
exports.Selection = Selection;
|
@@ -9,7 +9,7 @@ const octicons_react_1 = require("@primer/octicons-react");
|
|
9
9
|
const List_1 = require("./List");
|
10
10
|
const Group_1 = require("./Group");
|
11
11
|
const Visuals_1 = require("./Visuals");
|
12
|
-
const Selection = ({ selected
|
12
|
+
const Selection = ({ selected }) => {
|
13
13
|
const { selectionVariant: listSelectionVariant } = react_1.default.useContext(List_1.ListContext);
|
14
14
|
const { selectionVariant: groupSelectionVariant } = react_1.default.useContext(Group_1.GroupContext);
|
15
15
|
/** selectionVariant in Group can override the selectionVariant in List root */
|
@@ -26,11 +26,25 @@ const Selection = ({ selected, disabled }) => {
|
|
26
26
|
}
|
27
27
|
/**
|
28
28
|
* selectionVariant is multiple
|
29
|
-
*
|
30
|
-
*
|
29
|
+
* we use a svg instead of an input because there should not
|
30
|
+
* be an interactive element inside an option
|
31
|
+
* svg copied from primer/css
|
31
32
|
*/
|
32
|
-
return (<Visuals_1.LeadingVisualContainer sx={{
|
33
|
-
|
33
|
+
return (<Visuals_1.LeadingVisualContainer sx={{
|
34
|
+
rect: {
|
35
|
+
fill: selected ? 'accent.fg' : 'canvas.default',
|
36
|
+
stroke: selected ? 'accent.fg' : 'border.default'
|
37
|
+
},
|
38
|
+
path: {
|
39
|
+
fill: 'fg.onEmphasis',
|
40
|
+
boxShadow: 'shadow.small',
|
41
|
+
opacity: selected ? 1 : 0
|
42
|
+
}
|
43
|
+
}}>
|
44
|
+
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
45
|
+
<rect x="2" y="2" width="12" height="12" rx="4"></rect>
|
46
|
+
<path fillRule="evenodd" strokeWidth="0" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"/>
|
47
|
+
</svg>
|
34
48
|
</Visuals_1.LeadingVisualContainer>);
|
35
49
|
};
|
36
50
|
exports.Selection = Selection;
|
package/lib/NewButton/button.js
CHANGED
@@ -248,7 +248,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
248
248
|
userSelect: 'none',
|
249
249
|
textDecoration: 'none',
|
250
250
|
textAlign: 'center',
|
251
|
-
'> :not(:last-child)
|
251
|
+
'& > :not(:last-child)': {
|
252
252
|
mr: '2'
|
253
253
|
},
|
254
254
|
'&:focus': {
|
@@ -291,17 +291,17 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
291
291
|
"data-component": "leadingIcon",
|
292
292
|
sx: iconWrapStyles,
|
293
293
|
"aria-hidden": !iconOnly
|
294
|
-
}, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)),
|
294
|
+
}, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
|
295
|
+
"data-component": "text",
|
296
|
+
hidden: Icon ? true : undefined
|
297
|
+
}, children), Icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
295
298
|
"data-component": "icon-only",
|
296
299
|
as: "span",
|
297
300
|
sx: {
|
298
301
|
display: 'inline-block'
|
299
302
|
},
|
300
303
|
"aria-hidden": !iconOnly
|
301
|
-
}, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(
|
302
|
-
"data-component": "text",
|
303
|
-
hidden: Icon ? true : false
|
304
|
-
}, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
304
|
+
}, /*#__PURE__*/_react.default.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
305
305
|
as: "span",
|
306
306
|
"data-component": "trailingIcon",
|
307
307
|
sx: { ...iconWrapStyles,
|
package/lib/NewButton/button.jsx
CHANGED
@@ -228,7 +228,7 @@ const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
|
|
228
228
|
userSelect: 'none',
|
229
229
|
textDecoration: 'none',
|
230
230
|
textAlign: 'center',
|
231
|
-
'> :not(:last-child)
|
231
|
+
'& > :not(:last-child)': {
|
232
232
|
mr: '2'
|
233
233
|
},
|
234
234
|
'&:focus': {
|
@@ -262,12 +262,12 @@ const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
|
|
262
262
|
{LeadingIcon && (<Box_1.default as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
|
263
263
|
<LeadingIcon />
|
264
264
|
</Box_1.default>)}
|
265
|
+
<span data-component="text" hidden={Icon ? true : undefined}>
|
266
|
+
{children}
|
267
|
+
</span>
|
265
268
|
{Icon && (<Box_1.default data-component="icon-only" as="span" sx={{ display: 'inline-block' }} aria-hidden={!iconOnly}>
|
266
269
|
<Icon />
|
267
270
|
</Box_1.default>)}
|
268
|
-
<span data-component="text" hidden={Icon ? true : false}>
|
269
|
-
{children}
|
270
|
-
</span>
|
271
271
|
{TrailingIcon && (<Box_1.default as="span" data-component="trailingIcon" sx={{ ...iconWrapStyles, ml: 2 }} aria-hidden={!iconOnly}>
|
272
272
|
<TrailingIcon />
|
273
273
|
</Box_1.default>)}
|
@@ -0,0 +1 @@
|
|
1
|
+
import 'babel-polyfill';
|
@@ -0,0 +1,69 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _react = require("@testing-library/react");
|
4
|
+
|
5
|
+
require("babel-polyfill");
|
6
|
+
|
7
|
+
var _jestAxe = require("jest-axe");
|
8
|
+
|
9
|
+
var _react2 = _interopRequireDefault(require("react"));
|
10
|
+
|
11
|
+
var _theme = _interopRequireDefault(require("../theme"));
|
12
|
+
|
13
|
+
var _ActionList = require("../ActionList");
|
14
|
+
|
15
|
+
var _testing = require("../utils/testing");
|
16
|
+
|
17
|
+
var _ = require("..");
|
18
|
+
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
20
|
+
|
21
|
+
expect.extend(_jestAxe.toHaveNoViolations);
|
22
|
+
|
23
|
+
function SimpleActionList() {
|
24
|
+
return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
|
25
|
+
theme: _theme.default
|
26
|
+
}, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
|
27
|
+
items: [{
|
28
|
+
text: 'New file'
|
29
|
+
}, _ActionList.ActionList.Divider, {
|
30
|
+
text: 'Copy link'
|
31
|
+
}, {
|
32
|
+
text: 'Edit file'
|
33
|
+
}, {
|
34
|
+
text: 'Delete file',
|
35
|
+
variant: 'danger'
|
36
|
+
}]
|
37
|
+
})));
|
38
|
+
}
|
39
|
+
|
40
|
+
SimpleActionList.displayName = "SimpleActionList";
|
41
|
+
describe('ActionList', () => {
|
42
|
+
(0, _testing.behavesAsComponent)({
|
43
|
+
Component: _ActionList.ActionList,
|
44
|
+
options: {
|
45
|
+
skipAs: true,
|
46
|
+
skipSx: true
|
47
|
+
},
|
48
|
+
toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
|
49
|
+
items: []
|
50
|
+
})
|
51
|
+
});
|
52
|
+
(0, _testing.checkExports)('ActionList', {
|
53
|
+
default: undefined,
|
54
|
+
ActionList: _ActionList.ActionList
|
55
|
+
});
|
56
|
+
it('should have no axe violations', async () => {
|
57
|
+
const {
|
58
|
+
container
|
59
|
+
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
|
60
|
+
const results = await (0, _jestAxe.axe)(container);
|
61
|
+
expect(results).toHaveNoViolations();
|
62
|
+
(0, _react.cleanup)();
|
63
|
+
});
|
64
|
+
});
|
65
|
+
describe('ActionList.Item', () => {
|
66
|
+
(0, _testing.behavesAsComponent)({
|
67
|
+
Component: _ActionList.ActionList.Item
|
68
|
+
});
|
69
|
+
});
|
@@ -0,0 +1,49 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
const react_1 = require("@testing-library/react");
|
7
|
+
require("babel-polyfill");
|
8
|
+
const jest_axe_1 = require("jest-axe");
|
9
|
+
const react_2 = __importDefault(require("react"));
|
10
|
+
const theme_1 = __importDefault(require("../theme"));
|
11
|
+
const ActionList_1 = require("../ActionList");
|
12
|
+
const testing_1 = require("../utils/testing");
|
13
|
+
const __1 = require("..");
|
14
|
+
expect.extend(jest_axe_1.toHaveNoViolations);
|
15
|
+
function SimpleActionList() {
|
16
|
+
return (<__1.ThemeProvider theme={theme_1.default}>
|
17
|
+
<__1.BaseStyles>
|
18
|
+
<ActionList_1.ActionList items={[
|
19
|
+
{ text: 'New file' },
|
20
|
+
ActionList_1.ActionList.Divider,
|
21
|
+
{ text: 'Copy link' },
|
22
|
+
{ text: 'Edit file' },
|
23
|
+
{ text: 'Delete file', variant: 'danger' }
|
24
|
+
]}/>
|
25
|
+
</__1.BaseStyles>
|
26
|
+
</__1.ThemeProvider>);
|
27
|
+
}
|
28
|
+
describe('ActionList', () => {
|
29
|
+
testing_1.behavesAsComponent({
|
30
|
+
Component: ActionList_1.ActionList,
|
31
|
+
options: { skipAs: true, skipSx: true },
|
32
|
+
toRender: () => <ActionList_1.ActionList items={[]}/>
|
33
|
+
});
|
34
|
+
testing_1.checkExports('ActionList', {
|
35
|
+
default: undefined,
|
36
|
+
ActionList: ActionList_1.ActionList
|
37
|
+
});
|
38
|
+
it('should have no axe violations', async () => {
|
39
|
+
const { container } = react_1.render(<SimpleActionList />);
|
40
|
+
const results = await jest_axe_1.axe(container);
|
41
|
+
expect(results).toHaveNoViolations();
|
42
|
+
react_1.cleanup();
|
43
|
+
});
|
44
|
+
});
|
45
|
+
describe('ActionList.Item', () => {
|
46
|
+
testing_1.behavesAsComponent({
|
47
|
+
Component: ActionList_1.ActionList.Item
|
48
|
+
});
|
49
|
+
});
|