From a0db832302702b869aa22b0c4049ad9305ef631f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 5 Dec 2022 10:27:45 -0600 Subject: [PATCH] chore(deps-dev): bump @github/prettier-config from 0.0.4 to 0.0.6 (#2642) * chore(deps-dev): bump @github/prettier-config from 0.0.4 to 0.0.6 Bumps [@github/prettier-config](https://github.com/github/prettier-config) from 0.0.4 to 0.0.6. - [Release notes](https://github.com/github/prettier-config/releases) - [Commits](https://github.com/github/prettier-config/compare/v0.0.4...v0.0.6) --- updated-dependencies: - dependency-name: "@github/prettier-config" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] * chore(project): format file Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Josh Black Co-authored-by: Josh Black --- babel-defines.js | 6 +- babel.config.js | 16 +- .../__tests__/deprecateUtilityComponents.js | 18 +- codemods/__tests__/removeSystemProps.js | 16 +- codemods/__tests__/v1.js | 2 +- codemods/__tests__/v12.js | 2 +- codemods/__tests__/v2.js | 2 +- codemods/__tests__/v3.js | 2 +- codemods/__tests__/v4.js | 6 +- codemods/deprecateUtilityComponents.js | 32 +-- codemods/lib/modifyProps.js | 8 +- codemods/lib/prettify.js | 6 +- codemods/removeSystemProps.js | 22 +- codemods/v1.js | 2 +- codemods/v12.js | 2 +- codemods/v2.js | 2 +- codemods/v3.js | 2 +- codemods/v4.js | 2 +- docs/components/constants.js | 4 +- docs/gatsby-config.js | 16 +- docs/gatsby-node.js | 20 +- .../gatsby-theme-doctocat/live-code-scope.js | 2 +- .../gatsby-theme-doctocat/mdx-components.js | 2 +- docs/src/component-statuses.js | 4 +- e2e/components/ActionList.test.ts | 196 ++++++++--------- e2e/components/Button.test.ts | 78 +++---- e2e/components/TreeView.test.ts | 56 ++--- e2e/components/UnderlineNav.test.ts | 112 +++++----- e2e/matchers/toHaveNoViolations.ts | 32 +-- e2e/test-helpers/themes.ts | 2 +- e2e/test-helpers/waitForImages.ts | 2 +- jest.config.js | 4 +- package-lock.json | 18 +- package.json | 2 +- playwright.config.ts | 16 +- rollup.config.js | 56 ++--- script/component-status-project/build.ts | 8 +- script/generate-e2e-tests.js | 74 +++---- .../ActionList.examples.stories.tsx | 28 +-- .../ActionList.features.stories.tsx | 10 +- src/ActionList/ActionList.stories.tsx | 90 ++++---- src/ActionList/Description.tsx | 2 +- src/ActionList/Divider.tsx | 4 +- src/ActionList/Group.tsx | 6 +- src/ActionList/Item.tsx | 36 +-- src/ActionList/LinkItem.tsx | 2 +- src/ActionList/List.tsx | 10 +- src/ActionList/Selection.tsx | 8 +- src/ActionList/Visuals.tsx | 12 +- src/ActionList/index.ts | 2 +- src/ActionList/shared.ts | 8 +- src/ActionMenu.tsx | 12 +- src/AnchoredOverlay/AnchoredOverlay.tsx | 16 +- src/Autocomplete/Autocomplete.tsx | 6 +- src/Autocomplete/AutocompleteInput.tsx | 20 +- src/Autocomplete/AutocompleteMenu.tsx | 36 +-- src/Autocomplete/AutocompleteOverlay.tsx | 6 +- src/Avatar.tsx | 4 +- src/AvatarStack.tsx | 4 +- src/BaseStyles.tsx | 2 +- src/Box.tsx | 4 +- src/Breadcrumbs.tsx | 2 +- src/Button/Button.stories.tsx | 14 +- src/Button/ButtonBase.tsx | 6 +- src/Button/IconButton.tsx | 2 +- src/Button/LinkButton.tsx | 10 +- src/Button/index.ts | 2 +- src/Button/styles.ts | 100 ++++----- src/Caret.tsx | 14 +- src/Checkbox.tsx | 4 +- src/CheckboxGroup.tsx | 8 +- src/CircleBadge.tsx | 6 +- src/CircleOcticon.tsx | 2 +- src/CounterLabel.tsx | 6 +- src/Dialog.tsx | 8 +- src/Dialog/ConfirmationDialog.tsx | 12 +- src/Dialog/Dialog.tsx | 16 +- src/DropdownStyles.ts | 2 +- .../FilteredActionList.stories.tsx | 10 +- src/FilteredActionList/FilteredActionList.tsx | 10 +- src/Flash.tsx | 22 +- src/FormControl/FormControl.tsx | 50 ++--- src/FormControl/_FormControlLabel.tsx | 2 +- src/FormControl/_FormControlLeadingVisual.tsx | 4 +- src/FormControl/_FormControlValidation.tsx | 2 +- src/Hidden/Hidden.stories.tsx | 14 +- src/Label.tsx | 30 +-- src/Link.tsx | 4 +- src/NavList/NavList.stories.tsx | 8 +- src/NavList/NavList.test.tsx | 22 +- src/NavList/NavList.tsx | 24 +- src/Overlay.tsx | 18 +- src/PageLayout/PageLayout.stories.tsx | 206 +++++++++--------- src/PageLayout/PageLayout.test.tsx | 18 +- src/PageLayout/PageLayout.tsx | 100 ++++----- src/PageLayout/interaction.stories.tsx | 186 ++++++++-------- src/PageLayout/useStickyPaneHeight.ts | 2 +- src/Pagination/Pagination.tsx | 6 +- src/Pagination/model.tsx | 20 +- src/Placeholder.tsx | 2 +- src/PointerBox.tsx | 2 +- src/Popover.tsx | 4 +- src/Portal/Portal.tsx | 4 +- src/ProgressBar.tsx | 4 +- src/Radio.tsx | 6 +- src/RadioGroup.tsx | 4 +- .../SegmentedControl.stories.tsx | 42 ++-- .../SegmentedControl.test.tsx | 32 +-- src/SegmentedControl/SegmentedControl.tsx | 21 +- .../SegmentedControlButton.stories.tsx | 18 +- .../SegmentedControlFeatures.stories.tsx | 2 +- .../SegmentedControlIconButton.stories.tsx | 16 +- .../SegmentedControlIconButton.tsx | 4 +- .../getSegmentedControlStyles.ts | 34 +-- src/Select.tsx | 10 +- src/SelectPanel/SelectPanel.tsx | 18 +- src/SideNav.tsx | 4 +- src/Spinner.tsx | 2 +- .../SplitPageLayout.stories.tsx | 156 ++++++------- src/SplitPageLayout/SplitPageLayout.test.tsx | 2 +- src/SplitPageLayout/SplitPageLayout.tsx | 4 +- src/StateLabel.tsx | 34 +-- src/StyledOcticon.tsx | 2 +- src/SubNav.tsx | 2 +- src/TabNav.tsx | 8 +- src/TextInput.tsx | 12 +- src/TextInputWithTokens.tsx | 26 +-- src/Textarea.tsx | 4 +- src/ThemeProvider.tsx | 18 +- src/Timeline.tsx | 4 +- src/ToggleSwitch.tsx | 18 +- src/Token/AvatarToken.tsx | 6 +- src/Token/IssueLabelToken.tsx | 18 +- src/Token/Token.tsx | 18 +- src/Token/TokenBase.tsx | 20 +- src/Token/_RemoveTokenButton.tsx | 16 +- src/Tooltip.tsx | 2 +- src/TreeView/TreeView.features.stories.tsx | 46 ++-- src/TreeView/TreeView.stories.tsx | 4 +- src/TreeView/TreeView.test.tsx | 68 +++--- src/TreeView/TreeView.tsx | 38 ++-- src/TreeView/useRovingTabIndex.ts | 4 +- src/Truncate.tsx | 2 +- src/UnderlineNav.tsx | 4 +- .../UnderlineNav.Item.stories.tsx | 16 +- src/UnderlineNav2/UnderlineNav.test.tsx | 18 +- src/UnderlineNav2/UnderlineNav.tsx | 20 +- src/UnderlineNav2/UnderlineNav2.stories.tsx | 18 +- src/UnderlineNav2/UnderlineNavContext.tsx | 2 +- src/UnderlineNav2/UnderlineNavItem.tsx | 16 +- src/UnderlineNav2/examples.stories.tsx | 10 +- src/UnderlineNav2/features.stories.tsx | 16 +- src/UnderlineNav2/index.ts | 2 +- src/UnderlineNav2/interactions.stories.tsx | 2 +- src/UnderlineNav2/styles.ts | 50 ++--- .../CheckboxOrRadioGroup.tsx | 20 +- .../_CheckboxOrRadioGroupLabel.tsx | 6 +- .../_CheckboxOrRadioGroupValidation.tsx | 2 +- src/_InputLabel.tsx | 4 +- src/_InputValidation.tsx | 8 +- src/_TextInputInnerAction.tsx | 12 +- src/_TextInputInnerVisualSlot.tsx | 2 +- src/_TextInputWrapper.tsx | 16 +- src/_VisuallyHidden.tsx | 2 +- src/__tests__/ActionList.test.tsx | 10 +- src/__tests__/ActionMenu.test.tsx | 10 +- src/__tests__/AnchoredOverlay.test.tsx | 18 +- src/__tests__/Autocomplete.test.tsx | 77 +++---- src/__tests__/Avatar.test.tsx | 2 +- src/__tests__/AvatarStack.test.tsx | 4 +- src/__tests__/BorderBox.test.tsx | 6 +- src/__tests__/Box.test.tsx | 2 +- src/__tests__/BranchName.test.tsx | 2 +- src/__tests__/Breadcrumbs.test.tsx | 2 +- src/__tests__/Button.test.tsx | 4 +- src/__tests__/Button.types.test.tsx | 2 +- src/__tests__/Caret.test.tsx | 2 +- src/__tests__/Checkbox.test.tsx | 2 +- src/__tests__/CheckboxGroup.test.tsx | 24 +- src/__tests__/CheckboxOrRadioGroup.test.tsx | 18 +- src/__tests__/CircleBadge.test.tsx | 12 +- src/__tests__/CircleOcticon.test.tsx | 6 +- src/__tests__/ConfirmationDialog.test.tsx | 6 +- src/__tests__/CounterLabel.test.tsx | 2 +- src/__tests__/Details.test.tsx | 2 +- src/__tests__/Dialog.test.tsx | 4 +- src/__tests__/Dropdown.test.tsx | 8 +- src/__tests__/FilterList.test.tsx | 2 +- src/__tests__/FilteredSearch.test.tsx | 2 +- src/__tests__/Flash.test.tsx | 8 +- src/__tests__/Flex.test.tsx | 2 +- src/__tests__/FormControl.test.tsx | 50 ++--- src/__tests__/Grid.test.tsx | 2 +- src/__tests__/Header.test.tsx | 4 +- src/__tests__/Heading.test.tsx | 52 ++--- src/__tests__/Label.test.tsx | 4 +- src/__tests__/LabelGroup.test.tsx | 2 +- src/__tests__/Link.test.tsx | 2 +- src/__tests__/Overlay.test.tsx | 8 +- src/__tests__/Pagehead.test.tsx | 2 +- src/__tests__/Pagination/Pagination.test.tsx | 6 +- .../Pagination/PaginationModel.test.tsx | 12 +- src/__tests__/PointerBox.test.tsx | 2 +- src/__tests__/Popover.test.tsx | 6 +- src/__tests__/Position.test.tsx | 10 +- src/__tests__/ProgressBar.test.tsx | 2 +- src/__tests__/Radio.test.tsx | 4 +- src/__tests__/RadioGroup.test.tsx | 18 +- src/__tests__/Select.test.tsx | 10 +- src/__tests__/SelectMenu.test.tsx | 6 +- src/__tests__/SelectPanel.test.tsx | 4 +- src/__tests__/SideNav.test.tsx | 6 +- src/__tests__/Spinner.test.tsx | 4 +- src/__tests__/StateLabel.test.tsx | 6 +- src/__tests__/StyledOcticon.test.tsx | 4 +- src/__tests__/SubNav.test.tsx | 4 +- src/__tests__/TabNav.test.tsx | 2 +- src/__tests__/Text.test.tsx | 10 +- src/__tests__/TextInput.test.tsx | 22 +- src/__tests__/TextInputWithTokens.test.tsx | 54 ++--- src/__tests__/Textarea.test.tsx | 10 +- src/__tests__/ThemeProvider.test.tsx | 82 +++---- src/__tests__/Timeline.test.tsx | 2 +- src/__tests__/ToggleSwitch.test.tsx | 14 +- src/__tests__/Token.test.tsx | 4 +- src/__tests__/Tooltip.test.tsx | 4 +- src/__tests__/Truncate.test.tsx | 6 +- src/__tests__/UnderlineNav.test.tsx | 4 +- src/__tests__/deprecated/ActionList.test.tsx | 8 +- .../deprecated/ActionList.types.test.tsx | 12 +- src/__tests__/deprecated/ActionMenu.test.tsx | 6 +- src/__tests__/deprecated/Button.test.tsx | 6 +- .../deprecated/ChoiceFieldset.test.tsx | 48 ++-- .../deprecated/ChoiceInputField.test.tsx | 34 +-- .../deprecated/DropdownMenu.test.tsx | 4 +- src/__tests__/deprecated/FormGroup.test.tsx | 4 +- src/__tests__/deprecated/InputField.test.tsx | 32 +-- src/__tests__/deprecated/Label.test.tsx | 2 +- src/__tests__/filterObject.test.ts | 18 +- src/__tests__/hooks/useMnemonics.test.tsx | 2 +- .../hooks/useResponsiveValue.test.tsx | 6 +- .../hooks/useResponsiveValues.types.test.tsx | 2 +- src/__tests__/storybook.test.tsx | 4 +- src/__tests__/utils/createSlots.test.tsx | 6 +- src/constants.ts | 4 +- src/deprecated/ActionList/Item.tsx | 14 +- src/deprecated/ActionList/List.tsx | 24 +- src/deprecated/ActionList/index.ts | 2 +- src/deprecated/ActionMenu.tsx | 4 +- src/deprecated/BorderBox.tsx | 2 +- src/deprecated/Button/ButtonBase.tsx | 14 +- .../ChoiceFieldset/ChoiceFieldset.tsx | 10 +- .../ChoiceFieldset/ChoiceFieldsetLegend.tsx | 4 +- .../ChoiceFieldset/ChoiceFieldsetList.tsx | 10 +- .../ChoiceFieldset/ChoiceFieldsetListItem.tsx | 8 +- src/deprecated/ChoiceInputField.tsx | 30 +-- src/deprecated/Dropdown.tsx | 2 +- .../DropdownMenu/DropdownButton.tsx | 2 +- src/deprecated/DropdownMenu/DropdownMenu.tsx | 4 +- src/deprecated/Flex.tsx | 2 +- src/deprecated/Grid.tsx | 2 +- src/deprecated/InputField/InputField.tsx | 30 +-- src/deprecated/Label.tsx | 14 +- src/deprecated/SelectMenu/SelectMenu.tsx | 8 +- .../SelectMenu/SelectMenuFilter.tsx | 2 +- src/deprecated/SelectMenu/SelectMenuItem.tsx | 6 +- src/deprecated/SelectMenu/SelectMenuModal.tsx | 4 +- .../SelectMenu/hooks/useKeyboardNav.js | 6 +- src/deprecated/SelectMenu/index.ts | 2 +- src/deprecated/index.ts | 8 +- .../InlineAutocomplete.stories.tsx | 26 +-- .../InlineAutocomplete.test.tsx | 22 +- .../InlineAutocomplete/InlineAutocomplete.tsx | 6 +- .../_AutocompleteSuggestions.tsx | 14 +- src/drafts/InlineAutocomplete/utils.ts | 8 +- .../MarkdownEditor/MarkdownEditor.stories.tsx | 76 +++---- .../MarkdownEditor/MarkdownEditor.test.tsx | 68 +++--- src/drafts/MarkdownEditor/MarkdownEditor.tsx | 26 +-- src/drafts/MarkdownEditor/Toolbar.tsx | 4 +- src/drafts/MarkdownEditor/_Footer.tsx | 2 +- .../MarkdownEditor/_FormattingTools.tsx | 2 +- .../MarkdownEditor/_MarkdownEditorContext.ts | 2 +- src/drafts/MarkdownEditor/_MarkdownInput.tsx | 16 +- src/drafts/MarkdownEditor/_SavedReplies.tsx | 12 +- src/drafts/MarkdownEditor/_ViewSwitch.tsx | 4 +- src/drafts/MarkdownEditor/_useFileHandling.ts | 20 +- src/drafts/MarkdownEditor/_useIndenting.ts | 2 +- src/drafts/MarkdownEditor/_useListEditing.ts | 6 +- src/drafts/MarkdownEditor/index.ts | 2 +- .../suggestions/_useEmojiSuggestions.tsx | 6 +- .../suggestions/_useMentionSuggestions.tsx | 6 +- .../suggestions/_useReferenceSuggestions.tsx | 8 +- .../MarkdownEditor/suggestions/index.ts | 2 +- .../MarkdownViewer/MarkdownViewer.stories.tsx | 20 +- .../MarkdownViewer/MarkdownViewer.test.tsx | 12 +- src/drafts/MarkdownViewer/MarkdownViewer.tsx | 10 +- .../MarkdownViewer/_useListInteraction.ts | 14 +- src/drafts/hooks/useCombobox.ts | 12 +- src/drafts/hooks/useDynamicTextareaHeight.ts | 2 +- .../useIgnoreKeyboardActionsWhileComposing.ts | 6 +- src/drafts/hooks/useSafeAsyncCallback.ts | 4 +- src/drafts/hooks/useSyntheticChange.ts | 14 +- src/drafts/hooks/useUnifiedFileSelect.ts | 24 +- src/drafts/index.ts | 2 +- src/drafts/utils/character-coordinates.ts | 12 +- .../__tests__/useControllableState.test.tsx | 2 +- src/hooks/__tests__/useMedia.test.tsx | 14 +- src/hooks/useAnchoredPosition.ts | 6 +- src/hooks/useControllableState.ts | 8 +- src/hooks/useDetails.tsx | 2 +- src/hooks/useDialog.ts | 10 +- src/hooks/useFocusTrap.ts | 4 +- src/hooks/useFocusZone.ts | 6 +- src/hooks/useMedia.tsx | 2 +- src/hooks/useMenuInitialFocus.ts | 6 +- src/hooks/useMenuKeyboardNavigation.ts | 6 +- src/hooks/useMnemonics.ts | 4 +- src/hooks/useOnEscapePress.ts | 4 +- src/hooks/useOnOutsideClick.tsx | 2 +- src/hooks/useOpenAndCloseFocus.ts | 2 +- src/hooks/useOverlay.tsx | 2 +- src/hooks/useProvidedStateOrCreate.ts | 4 +- src/hooks/useRenderForcingRef.ts | 2 +- src/hooks/useResponsiveValue.ts | 2 +- src/hooks/useSafeTimeout.ts | 2 +- src/index.ts | 10 +- src/polyfills/eventListenerSignal.ts | 6 +- src/stories/ActionMenu/examples.stories.tsx | 22 +- src/stories/ActionMenu/fixtures.stories.tsx | 46 ++-- src/stories/AnchoredOverlay.stories.tsx | 4 +- src/stories/Autocomplete.stories.tsx | 106 ++++----- src/stories/AvatarStack.stories.tsx | 8 +- src/stories/ButtonGroup.stories.tsx | 16 +- src/stories/Checkbox.stories.tsx | 26 +-- .../CheckboxGroup/examples.stories.tsx | 36 +-- .../CheckboxGroup/fixtures.stories.tsx | 40 ++-- src/stories/ConfirmationDialog.stories.tsx | 6 +- src/stories/Dialog.stories.tsx | 28 +-- src/stories/IssueLabelToken.stories.tsx | 20 +- src/stories/Label.stories.tsx | 18 +- src/stories/Overlay.stories.tsx | 22 +- src/stories/Portal.stories.tsx | 4 +- src/stories/ProfileToken.stories.tsx | 14 +- src/stories/Radio.stories.tsx | 16 +- src/stories/RadioGroup/examples.stories.tsx | 36 +-- src/stories/RadioGroup/fixtures.stories.tsx | 40 ++-- src/stories/Select.stories.tsx | 16 +- src/stories/SelectPanel.stories.tsx | 16 +- src/stories/Switch/examples.stories.tsx | 26 +-- src/stories/Switch/fixtures.stories.tsx | 28 +-- src/stories/TextInput.stories.tsx | 20 +- src/stories/TextInputWithTokens.stories.tsx | 26 +-- src/stories/Textarea.stories.tsx | 26 +-- src/stories/ThemeProvider.stories.tsx | 10 +- src/stories/Token.stories.tsx | 20 +- src/stories/Tooltip.stories.tsx | 4 +- src/stories/deprecated/ActionList.stories.tsx | 88 ++++---- src/stories/deprecated/ActionMenu.stories.tsx | 52 ++--- src/stories/deprecated/Button.stories.tsx | 22 +- .../deprecated/DropdownMenu.stories.tsx | 8 +- src/stories/useAnchoredPosition.stories.tsx | 48 ++-- src/stories/useFocusTrap.stories.tsx | 18 +- src/stories/useFocusZone.stories.tsx | 28 +-- src/theme-preval.js | 14 +- src/utils/create-slots.tsx | 6 +- src/utils/story-helpers.tsx | 122 +++++------ src/utils/test-helpers.tsx | 4 +- src/utils/test-matchers.tsx | 20 +- src/utils/testing.tsx | 4 +- src/utils/theme.js | 4 +- 370 files changed, 2987 insertions(+), 2983 deletions(-) diff --git a/babel-defines.js b/babel-defines.js index 63361e78474..612ee6918d1 100644 --- a/babel-defines.js +++ b/babel-defines.js @@ -1,5 +1,5 @@ const shared = { - __DEV__: "process.env.NODE_ENV !== 'production'" + __DEV__: "process.env.NODE_ENV !== 'production'", } module.exports = { @@ -8,6 +8,6 @@ module.exports = { production: { ...shared, __DEV__: 'false', - 'process.env.NODE_ENV': "'production'" - } + 'process.env.NODE_ENV': "'production'", + }, } diff --git a/babel.config.js b/babel.config.js index 8df549cd2dd..596c9d30212 100644 --- a/babel.config.js +++ b/babel.config.js @@ -10,7 +10,7 @@ const sharedPlugins = [ 'add-react-displayname', 'babel-plugin-styled-components', '@babel/plugin-proposal-nullish-coalescing-operator', - '@babel/plugin-proposal-optional-chaining' + '@babel/plugin-proposal-optional-chaining', ] function makePresets(moduleValue) { @@ -27,19 +27,19 @@ module.exports = { : process.env.STORYBOOK ? [] : [ - 'transform-commonjs' // theme-preval is commonjs and needs to be transformed to esm + 'transform-commonjs', // theme-preval is commonjs and needs to be transformed to esm ]), ...sharedPlugins, - replacementPlugin('development') - ] + replacementPlugin('development'), + ], }, production: { presets: makePresets(false), - plugins: [...sharedPlugins, replacementPlugin('production')] + plugins: [...sharedPlugins, replacementPlugin('production')], }, test: { presets: makePresets('commonjs'), - plugins: [...sharedPlugins, ['@babel/plugin-transform-modules-commonjs'], replacementPlugin('test')] - } - } + plugins: [...sharedPlugins, ['@babel/plugin-transform-modules-commonjs'], replacementPlugin('test')], + }, + }, } diff --git a/codemods/__tests__/deprecateUtilityComponents.js b/codemods/__tests__/deprecateUtilityComponents.js index 08bf7853fe1..c7cda752fe3 100644 --- a/codemods/__tests__/deprecateUtilityComponents.js +++ b/codemods/__tests__/deprecateUtilityComponents.js @@ -20,7 +20,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -42,7 +42,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -64,7 +64,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -86,7 +86,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -108,7 +108,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -130,7 +130,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -152,7 +152,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -174,7 +174,7 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) defineInlineTest( @@ -196,5 +196,5 @@ export default () => ( ) `.trim(), - 'deprecateUtilityComponents' + 'deprecateUtilityComponents', ) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index 40307079fa7..ef37944d92c 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -22,7 +22,7 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -54,7 +54,7 @@ const ClipboardCopy = ({value}) => ( )} )`.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -95,7 +95,7 @@ const link = ( Primer )`.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -119,7 +119,7 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -143,7 +143,7 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -171,7 +171,7 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -195,7 +195,7 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) defineInlineTest( @@ -221,5 +221,5 @@ export default () => ( ) `.trim(), - 'removeSystemProps' + 'removeSystemProps', ) diff --git a/codemods/__tests__/v1.js b/codemods/__tests__/v1.js index d8a76fd0727..4bb0ded4402 100644 --- a/codemods/__tests__/v1.js +++ b/codemods/__tests__/v1.js @@ -19,5 +19,5 @@ export default () => ( ) `.trim(), - 'v1' + 'v1', ) diff --git a/codemods/__tests__/v12.js b/codemods/__tests__/v12.js index 332e8f1537c..3247dbb8207 100644 --- a/codemods/__tests__/v12.js +++ b/codemods/__tests__/v12.js @@ -19,5 +19,5 @@ export default () => ( ) `.trim(), - 'v12' + 'v12', ) diff --git a/codemods/__tests__/v2.js b/codemods/__tests__/v2.js index e7527903734..8516cb7a410 100644 --- a/codemods/__tests__/v2.js +++ b/codemods/__tests__/v2.js @@ -20,5 +20,5 @@ export default () => ( ) `.trim(), - 'v2' + 'v2', ) diff --git a/codemods/__tests__/v3.js b/codemods/__tests__/v3.js index 0554e9f372b..1c0474cd37e 100644 --- a/codemods/__tests__/v3.js +++ b/codemods/__tests__/v3.js @@ -20,5 +20,5 @@ export default () => ( ) `.trim(), - 'v3' + 'v3', ) diff --git a/codemods/__tests__/v4.js b/codemods/__tests__/v4.js index 250a6ed8216..5e5f4b97ece 100644 --- a/codemods/__tests__/v4.js +++ b/codemods/__tests__/v4.js @@ -20,7 +20,7 @@ export default () => ( ) `.trim(), - 'v4' + 'v4', ) defineInlineTest( @@ -42,7 +42,7 @@ export default () => ( ) `.trim(), - 'v4' + 'v4', ) defineInlineTest( @@ -64,5 +64,5 @@ export default () => ( ) `.trim(), - 'v4' + 'v4', ) diff --git a/codemods/deprecateUtilityComponents.js b/codemods/deprecateUtilityComponents.js index 2e88f669da6..e72a41b215f 100644 --- a/codemods/deprecateUtilityComponents.js +++ b/codemods/deprecateUtilityComponents.js @@ -8,42 +8,42 @@ module.exports = (file, api) => { Flex: { identifier: 'Box', attributes: { - display: 'flex' - } + display: 'flex', + }, }, Grid: { identifier: 'Box', attributes: { - display: 'grid' - } + display: 'grid', + }, }, Position: { identifier: 'Box', - attributes: {} + attributes: {}, }, Absolute: { identifier: 'Box', attributes: { - position: 'absolute' - } + position: 'absolute', + }, }, Relative: { identifier: 'Box', attributes: { - position: 'relative' - } + position: 'relative', + }, }, Fixed: { identifier: 'Box', attributes: { - position: 'fixed' - } + position: 'fixed', + }, }, Sticky: { identifier: 'Box', attributes: { - position: 'sticky' - } + position: 'sticky', + }, }, BorderBox: { identifier: 'Box', @@ -51,9 +51,9 @@ module.exports = (file, api) => { borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', - borderRadius: 2 - } - } + borderRadius: 2, + }, + }, }) return prettify(ast, file) diff --git a/codemods/lib/modifyProps.js b/codemods/lib/modifyProps.js index 0b0af4f8461..87cbff2a2d5 100644 --- a/codemods/lib/modifyProps.js +++ b/codemods/lib/modifyProps.js @@ -17,16 +17,16 @@ module.exports = (ast, j, moduleName, propsMap) => { name: { name: name => { return name in importsByName - } - } - } + }, + }, + }, }) .forEach(el => { j(el) .find(j.JSXAttribute, { name: name => { return name.name in propsMap - } + }, }) .forEach(attr => { const name = attr.value.name.name diff --git a/codemods/lib/prettify.js b/codemods/lib/prettify.js index 463e849e8f5..7437572f4b4 100644 --- a/codemods/lib/prettify.js +++ b/codemods/lib/prettify.js @@ -8,9 +8,9 @@ module.exports = function prettify(ast, file) { Object.assign( { parser: 'typescript', - filepath: file.path + filepath: file.path, }, - config - ) + config, + ), ) } diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index 919c2c9447f..b5b0f203027 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -33,7 +33,7 @@ const COMMON = [ 'backgroundColor', 'opacity', 'bg', - 'display' + 'display', ] const TYPOGRAPHY = [ @@ -44,7 +44,7 @@ const TYPOGRAPHY = [ 'letterSpacing', 'textAlign', 'fontStyle', - 'whiteSpace' + 'whiteSpace', ] const BORDER = [ @@ -76,7 +76,7 @@ const BORDER = [ 'borderRightColor', 'borderRightStyle', 'boxShadow', - 'textShadow' + 'textShadow', ] const LAYOUT = [ @@ -91,7 +91,7 @@ const LAYOUT = [ 'overflowX', 'overflowY', 'display', - 'verticalAlign' + 'verticalAlign', ] const POSITION = ['position', 'zIndex', 'top', 'right', 'bottom', 'left'] @@ -109,7 +109,7 @@ const FLEX = [ 'flexBasis', 'justifySelf', 'alignSelf', - 'order' + 'order', ] // const GRID = [ @@ -179,7 +179,7 @@ const stylePropsMap = { Timeline: [...COMMON], Tooltip: [...COMMON], Truncate: [...TYPOGRAPHY, ...COMMON], - UnderlineNav: [...COMMON] + UnderlineNav: [...COMMON], } const expressionToString = expression => { @@ -243,9 +243,9 @@ module.exports = (file, api) => { name: { name: name => { return name in stylePropsMap - } - } - } + }, + }, + }, }) .forEach(el => { const sx = {} @@ -256,14 +256,14 @@ module.exports = (file, api) => { name: name => { const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end return systemProps && systemProps.includes(name.name) && isInElement - } + }, }) const sxNodes = j(el).find(j.JSXAttribute, { name: name => { const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end return name.name === 'sx' && isInElement - } + }, }) const existingSx = {} diff --git a/codemods/v1.js b/codemods/v1.js index ce86e9a7f64..fde3eb3b70f 100644 --- a/codemods/v1.js +++ b/codemods/v1.js @@ -7,7 +7,7 @@ module.exports = (file, api) => { modifyProps(ast, j, 'primer-react', { tag: 'is', - fg: 'color' + fg: 'color', }) return prettify(ast, file) diff --git a/codemods/v12.js b/codemods/v12.js index 081ff08fffd..2041b3d989c 100644 --- a/codemods/v12.js +++ b/codemods/v12.js @@ -6,7 +6,7 @@ module.exports = (file, api) => { const ast = j(file.source) modifyProps(ast, j, '@primer/components', { - is: 'as' + is: 'as', }) return prettify(ast, file) diff --git a/codemods/v2.js b/codemods/v2.js index 60b58f489ac..6232df59f63 100644 --- a/codemods/v2.js +++ b/codemods/v2.js @@ -8,7 +8,7 @@ module.exports = (file, api) => { renameImports(ast, j, 'primer-react', { Box: 'BorderBox', Block: 'Box', - CaretBox: 'PointerBox' + CaretBox: 'PointerBox', }) return prettify(ast, file) diff --git a/codemods/v3.js b/codemods/v3.js index a1e390cf1ea..3c594a69f67 100644 --- a/codemods/v3.js +++ b/codemods/v3.js @@ -10,7 +10,7 @@ module.exports = (file, api) => { renameImports(ast, j, '@primer/components', { DonutChart: 'Donut', - DonutSlice: 'Donut.Slice' + DonutSlice: 'Donut.Slice', }) return prettify(ast, file) diff --git a/codemods/v4.js b/codemods/v4.js index ac9bda7019e..288fda2f6b9 100644 --- a/codemods/v4.js +++ b/codemods/v4.js @@ -9,7 +9,7 @@ module.exports = (file, api) => { FlexContainer: 'Flex', FlexItem: 'Flex.Item', UnderlineNavItem: 'UnderlineNav.Item', - FilterListItem: 'FilterList.Item' + FilterListItem: 'FilterList.Item', }) return prettify(ast, file) diff --git a/docs/components/constants.js b/docs/components/constants.js index bdb1fb355b9..7b3c39078c9 100644 --- a/docs/components/constants.js +++ b/docs/components/constants.js @@ -10,8 +10,8 @@ export const get = key => themeGet(key, getKey(theme, key)) const whiteSpace = system({ whiteSpace: { property: 'whiteSpace', - cssProperty: 'whiteSpace' - } + cssProperty: 'whiteSpace', + }, }) export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace) diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index 35e1be0415b..0e35d6a9ef6 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -4,7 +4,7 @@ module.exports = { siteMetadata: { title: 'Primer React', shortName: 'React', - description: 'React components for the Primer design system' + description: 'React components for the Primer design system', }, plugins: [ 'gatsby-plugin-typescript', @@ -12,8 +12,8 @@ module.exports = { resolve: '@primer/gatsby-theme-doctocat', options: { repoRootPath: '..', - defaultBranch: 'main' - } + defaultBranch: 'main', + }, }, { resolve: `gatsby-plugin-alias-imports`, @@ -22,10 +22,10 @@ module.exports = { '@primer/components': path.resolve(__dirname, '../src'), '@primer/react': path.resolve(__dirname, '../src'), 'styled-components': path.resolve(__dirname, '..', 'node_modules', 'styled-components'), - react: path.resolve(__dirname, 'node_modules', 'react') - } - } - } + react: path.resolve(__dirname, 'node_modules', 'react'), + }, + }, + }, ], - pathPrefix: '/react' + pathPrefix: '/react', } diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index 8cdd0a135a9..e02b8640798 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -17,8 +17,8 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => { exclude: modulePath => /node_modules/.test(modulePath), // ...except that we want to run Primer React through webpack as well. // By default, Gatsby won't use the define plugin we added above on Primer React. - include: modulePath => /@primer\/components/.test(modulePath) - } + include: modulePath => /@primer\/components/.test(modulePath), + }, ] // Polyfill `path` and stub `fs` for use in the browser @@ -27,12 +27,12 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => { ...config.resolve, alias: { ...config.resolve.alias, - path: require.resolve('path-browserify') + path: require.resolve('path-browserify'), }, fallback: { ...config.resolve.fallback, - fs: false - } + fs: false, + }, } actions.replaceWebpackConfig(config) @@ -55,7 +55,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => { } return true - } + }, }) const components = data.map(component => { @@ -69,7 +69,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => { description: prop.description, defaultValue: prop.defaultValue ? prop.defaultValue.value : '', required: prop.required, - type: prop.type.name + type: prop.type.name, } }) // Move required props to beginning of the list @@ -77,7 +77,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => { if (a.required && !b.required) return -1 if (!a.required && b.required) return 1 return 0 - }) + }), } }) @@ -92,8 +92,8 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => { type: `ComponentMetadata`, mediaType: `text/html`, content: nodeContent, - contentDigest: createContentDigest(component) - } + contentDigest: createContentDigest(component), + }, } const node = Object.assign({}, component, nodeMeta) createNode(node) diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 991f401f1fd..6862add0119 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -24,6 +24,6 @@ export default function resolveScope(metastring) { ...(metastring.includes('deprecated') ? deprecated : {}), ReactRouterLink, State, - Placeholder + Placeholder, } } diff --git a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js index 76371da5ac9..b15a5ce86a5 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js +++ b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js @@ -18,5 +18,5 @@ export default { PropsTablePassthroughPropsRow: PropsTable.PassthroughPropsRow, PropsTableAsRow: PropsTable.AsRow, PropsTableRefRow: PropsTable.RefRow, - PropsTableSxRow: PropsTable.SxRow + PropsTableSxRow: PropsTable.SxRow, } diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js index ca38eec1ec9..a6cad737efb 100644 --- a/docs/src/component-statuses.js +++ b/docs/src/component-statuses.js @@ -76,7 +76,7 @@ export function ComponentStatuses() { gap: 1, backgroundColor: 'done.subtle', fontWeight: 'normal', - borderColor: 'transparent' + borderColor: 'transparent', }} > @@ -88,7 +88,7 @@ export function ComponentStatuses() { sx={{ backgroundColor: 'neutral.subtle', fontWeight: 'normal', - borderColor: 'transparent' + borderColor: 'transparent', }} > Not reviewed diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts index 889545b0b1c..1d7dd8754d9 100644 --- a/e2e/components/ActionList.test.ts +++ b/e2e/components/ActionList.test.ts @@ -10,8 +10,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -22,15 +22,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -44,8 +44,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--block-description', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -56,15 +56,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--block-description', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -78,8 +78,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--disabled-item', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -90,15 +90,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--disabled-item', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -112,8 +112,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--inline-description', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -124,15 +124,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--inline-description', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -146,8 +146,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--inside-overlay', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -158,15 +158,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--inside-overlay', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -180,8 +180,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--item-dividers', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -192,15 +192,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--item-dividers', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -214,8 +214,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--links', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -226,15 +226,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--links', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -248,8 +248,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--multi-select', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -260,15 +260,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--multi-select', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -282,8 +282,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--simple-list', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -294,15 +294,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--simple-list', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -316,8 +316,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--single-divider', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -328,15 +328,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--single-divider', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -350,8 +350,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--single-select', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -362,15 +362,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--single-select', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -384,8 +384,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--text-wrap-and-truncation', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -396,15 +396,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--text-wrap-and-truncation', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -418,8 +418,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--with-avatars', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -430,15 +430,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--with-avatars', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -452,8 +452,8 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--with-icons', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -464,15 +464,15 @@ test.describe('ActionList', () => { await visit(page, { id: 'components-actionlist-features--with-icons', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index a9337583657..9612329eeaa 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -9,8 +9,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--default-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -24,7 +24,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--default-button' + id: 'components-button--default-button', }) await expect(page).toHaveNoViolations() }) @@ -36,8 +36,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--primary-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -51,7 +51,7 @@ test.describe('Button', () => { test.fixme('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--primary-button' + id: 'components-button--primary-button', }) await expect(page).toHaveNoViolations() }) @@ -63,8 +63,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--danger-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -78,7 +78,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--danger-button' + id: 'components-button--danger-button', }) await expect(page).toHaveNoViolations() }) @@ -90,8 +90,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--invisible-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -105,7 +105,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--invisible-button' + id: 'components-button--invisible-button', }) await expect(page).toHaveNoViolations() }) @@ -117,8 +117,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--outline-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -132,7 +132,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--outline-button' + id: 'components-button--outline-button', }) await expect(page).toHaveNoViolations() }) @@ -144,8 +144,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--icon-before-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -159,7 +159,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--icon-before-button' + id: 'components-button--icon-before-button', }) await expect(page).toHaveNoViolations() }) @@ -171,8 +171,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--icon-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -186,7 +186,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--icon-button' + id: 'components-button--icon-button', }) await expect(page).toHaveNoViolations() }) @@ -198,8 +198,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--watch-counter-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -213,7 +213,7 @@ test.describe('Button', () => { test.fixme('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--watch-counter-button' + id: 'components-button--watch-counter-button', }) await expect(page).toHaveNoViolations() }) @@ -225,8 +225,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--watch-icon-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -240,7 +240,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--watch-icon-button' + id: 'components-button--watch-icon-button', }) await expect(page).toHaveNoViolations() }) @@ -252,8 +252,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--caret-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -267,7 +267,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--caret-button' + id: 'components-button--caret-button', }) await expect(page).toHaveNoViolations() }) @@ -279,8 +279,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--block-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -294,7 +294,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--block-button' + id: 'components-button--block-button', }) await expect(page).toHaveNoViolations() }) @@ -306,8 +306,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--disabled-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -321,7 +321,7 @@ test.describe('Button', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--disabled-button' + id: 'components-button--disabled-button', }) await expect(page).toHaveNoViolations() }) @@ -333,8 +333,8 @@ test.describe('Button', () => { await visit(page, { id: 'components-button--link-button', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -348,7 +348,7 @@ test.describe('Button', () => { test.fixme('axe @aat', async ({page}) => { await visit(page, { - id: 'components-button--link-button' + id: 'components-button--link-button', }) await expect(page).toHaveNoViolations() }) diff --git a/e2e/components/TreeView.test.ts b/e2e/components/TreeView.test.ts index ccd657d56c3..1f665117e85 100644 --- a/e2e/components/TreeView.test.ts +++ b/e2e/components/TreeView.test.ts @@ -10,8 +10,8 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -22,15 +22,15 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -44,8 +44,8 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--empty-directories', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -56,15 +56,15 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--empty-directories', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -78,8 +78,8 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--files', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -90,15 +90,15 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--files', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -112,8 +112,8 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--files-changed', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -124,15 +124,15 @@ test.describe('TreeView', () => { await visit(page, { id: 'components-treeview-features--files-changed', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) diff --git a/e2e/components/UnderlineNav.test.ts b/e2e/components/UnderlineNav.test.ts index 5708a4b54e3..bbb23ca3b15 100644 --- a/e2e/components/UnderlineNav.test.ts +++ b/e2e/components/UnderlineNav.test.ts @@ -10,8 +10,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--profile-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -22,15 +22,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--profile-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -44,8 +44,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--pull-request-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -56,8 +56,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--pull-request-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // These themes currently have a contrast violation due to @@ -67,9 +67,9 @@ test.describe('UnderlineNav', () => { await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: !denylist.has(theme) - } - } + enabled: !denylist.has(theme), + }, + }, }) }) }) @@ -83,8 +83,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--repos-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -95,15 +95,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-examples--repos-page', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -117,8 +117,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--counters-loading-state', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -129,15 +129,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--counters-loading-state', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -151,8 +151,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -163,15 +163,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--default', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -185,8 +185,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--overflow-template', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -197,15 +197,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--overflow-template', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -219,8 +219,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--with-counter-labels', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -231,15 +231,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--with-counter-labels', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) @@ -253,8 +253,8 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--with-icons', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) // Default state @@ -265,15 +265,15 @@ test.describe('UnderlineNav', () => { await visit(page, { id: 'drafts-components-underlinenav-features--with-icons', globals: { - colorScheme: theme - } + colorScheme: theme, + }, }) await expect(page).toHaveNoViolations({ rules: { 'color-contrast': { - enabled: theme !== 'dark_dimmed' - } - } + enabled: theme !== 'dark_dimmed', + }, + }, }) }) }) diff --git a/e2e/matchers/toHaveNoViolations.ts b/e2e/matchers/toHaveNoViolations.ts index 91669fcc18e..396b10ffa7b 100644 --- a/e2e/matchers/toHaveNoViolations.ts +++ b/e2e/matchers/toHaveNoViolations.ts @@ -7,21 +7,21 @@ import fs from 'node:fs' const defaultOptions = { rules: { 'document-title': { - enabled: false + enabled: false, }, 'html-has-lang': { - enabled: false + enabled: false, }, 'landmark-one-main': { - enabled: false + enabled: false, }, 'page-has-heading-one': { - enabled: false + enabled: false, }, region: { - enabled: false - } - } + enabled: false, + }, + }, } expect.extend({ @@ -34,8 +34,8 @@ expect.extend({ ...options, rules: { ...defaultOptions.rules, - ...options.rules - } + ...options.rules, + }, }) .analyze() @@ -43,7 +43,7 @@ expect.extend({ if (result.violations.length === 0) { return { - pass: true + pass: true, } } @@ -69,9 +69,9 @@ expect.extend({ return `${result.violations.length} axe violations ${violations.join('\n\n')}` - } + }, } - } + }, }) function saveResult(result: AxeResults) { @@ -80,7 +80,7 @@ function saveResult(result: AxeResults) { if (!fs.existsSync(resultsDir)) { fs.mkdirSync(resultsDir, { - recursive: true + recursive: true, }) } @@ -89,10 +89,10 @@ function saveResult(result: AxeResults) { resultsDir, path.format({ name: testInfo.titlePath.slice(1).join('-').replace(/ /g, '-'), - ext: '.json' - }) + ext: '.json', + }), ), JSON.stringify(result, null, 2), - 'utf8' + 'utf8', ) } diff --git a/e2e/test-helpers/themes.ts b/e2e/test-helpers/themes.ts index c065a6016dd..9aa3177c5bb 100644 --- a/e2e/test-helpers/themes.ts +++ b/e2e/test-helpers/themes.ts @@ -7,5 +7,5 @@ export const themes = [ 'dark_dimmed', 'dark_high_contrast', 'dark_colorblind', - 'dark_tritanopia' + 'dark_tritanopia', ] diff --git a/e2e/test-helpers/waitForImages.ts b/e2e/test-helpers/waitForImages.ts index 3c83447f357..9127d711c90 100644 --- a/e2e/test-helpers/waitForImages.ts +++ b/e2e/test-helpers/waitForImages.ts @@ -17,7 +17,7 @@ export async function waitForImages(page: Page) { img.addEventListener('load', resolve) img.addEventListener('error', reject) }) - }) + }), ) }) } diff --git a/jest.config.js b/jest.config.js index 29e435deeb8..90263ee6b73 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,7 @@ module.exports = { setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'], testMatch: ['/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'], transformIgnorePatterns: [ - 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)' + 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)', ], - watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'] + watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'], } diff --git a/package-lock.json b/package-lock.json index e8d180f7c15..e9f0ae56b12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "35.14.2", + "version": "35.15.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "35.14.2", + "version": "35.15.1", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", @@ -44,7 +44,7 @@ "@babel/preset-typescript": "7.18.6", "@changesets/changelog-github": "0.4.7", "@changesets/cli": "2.25.1", - "@github/prettier-config": "0.0.4", + "@github/prettier-config": "0.0.6", "@playwright/test": "1.27.1", "@rollup/plugin-babel": "6.0.2", "@rollup/plugin-commonjs": "23.0.0", @@ -3011,9 +3011,9 @@ "integrity": "sha512-BU//VcOhAFIz/t36NW/nlmGIFqTrPVMECZEZx+jlrEh87qCoO79fLIcsLr2xAT7E/F/lLAuYFVSwpnsPCAPdrQ==" }, "node_modules/@github/prettier-config": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.4.tgz", - "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.6.tgz", + "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==", "dev": true }, "node_modules/@hapi/hoek": { @@ -44816,9 +44816,9 @@ "integrity": "sha512-BU//VcOhAFIz/t36NW/nlmGIFqTrPVMECZEZx+jlrEh87qCoO79fLIcsLr2xAT7E/F/lLAuYFVSwpnsPCAPdrQ==" }, "@github/prettier-config": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.4.tgz", - "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.6.tgz", + "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==", "dev": true }, "@hapi/hoek": { diff --git a/package.json b/package.json index 30abb501570..e5141980efb 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "@babel/preset-typescript": "7.18.6", "@changesets/changelog-github": "0.4.7", "@changesets/cli": "2.25.1", - "@github/prettier-config": "0.0.4", + "@github/prettier-config": "0.0.6", "@playwright/test": "1.27.1", "@rollup/plugin-babel": "6.0.2", "@rollup/plugin-commonjs": "23.0.0", diff --git a/playwright.config.ts b/playwright.config.ts index 0697cb175a8..624feb19ed2 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -23,13 +23,13 @@ const config: Config = { // Large breakpoint // @see https://primer.style/primitives/spacing#breakpoints width: 1012, - height: 768 - } + height: 768, + }, }, expect: { toHaveScreenshot: { - animations: 'disabled' - } + animations: 'disabled', + }, }, reporter: [ ['line'], @@ -37,10 +37,10 @@ const config: Config = { [ 'json', { - outputFile: path.join(__dirname, '.playwright', 'results.json') - } - ] - ] + outputFile: path.join(__dirname, '.playwright', 'results.json'), + }, + ], + ], } export default config diff --git a/rollup.config.js b/rollup.config.js index e65259a88ae..02b366b82a4 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -30,7 +30,7 @@ const input = new Set([ 'src/polyfills/*', // "./lib-esm/utils/*" - 'src/utils/*' + 'src/utils/*', ], { cwd: __dirname, @@ -43,10 +43,10 @@ const input = new Set([ // Files use dependencies which are not listed by package 'src/utils/testing.tsx', - 'src/utils/test-matchers.tsx' - ] - } - ) + 'src/utils/test-matchers.tsx', + ], + }, + ), ]) const extensions = ['.js', '.jsx', '.ts', '.tsx'] @@ -54,7 +54,7 @@ const ESM_ONLY = new Set(['@github/combobox-nav', '@github/markdown-toolbar-elem const dependencies = [ ...Object.keys(packageJson.peerDependencies ?? {}), ...Object.keys(packageJson.dependencies ?? {}), - ...Object.keys(packageJson.devDependencies ?? {}) + ...Object.keys(packageJson.devDependencies ?? {}), ] function createPackageRegex(name) { @@ -77,9 +77,9 @@ const baseConfig = { [ '@babel/preset-react', { - modules: false - } - ] + modules: false, + }, + ], ], plugins: [ 'macros', @@ -92,19 +92,19 @@ const baseConfig = { 'babel-plugin-transform-replace-expressions', { replace: { - __DEV__: "process.env.NODE_ENV !== 'production'" - } - } - ] - ] + __DEV__: "process.env.NODE_ENV !== 'production'", + }, + }, + ], + ], }), commonjs({ - extensions + extensions, }), resolve({ - extensions - }) - ] + extensions, + }), + ], } export default [ @@ -116,8 +116,8 @@ export default [ dir: 'lib-esm', format: 'esm', preserveModules: true, - preserveModulesRoot: 'src' - } + preserveModulesRoot: 'src', + }, }, // CommonJS @@ -129,8 +129,8 @@ export default [ format: 'commonjs', preserveModules: true, preserveModulesRoot: 'src', - exports: 'auto' - } + exports: 'auto', + }, }, // Bundles @@ -141,11 +141,11 @@ export default [ plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify('production'), - preventAssignment: true + preventAssignment: true, }), ...baseConfig.plugins, terser(), - visualizer({sourcemap: true}) + visualizer({sourcemap: true}), ], output: ['esm', 'umd'].map(format => ({ file: `dist/browser.${format}.js`, @@ -155,8 +155,8 @@ export default [ globals: { react: 'React', 'react-dom': 'ReactDOM', - 'styled-components': 'styled' - } - })) - } + 'styled-components': 'styled', + }, + })), + }, ] diff --git a/script/component-status-project/build.ts b/script/component-status-project/build.ts index 0054289b62d..b9a008e3ded 100644 --- a/script/component-status-project/build.ts +++ b/script/component-status-project/build.ts @@ -24,14 +24,14 @@ function getComponentStatuses(filenames: string[], dir: string) { const handleCallback = ( filename: string, resolve: (value: ComponentStatus | null) => void, - reject: (value: unknown) => void + reject: (value: unknown) => void, ) => { fs.readFile(path.resolve(dir, filename), 'utf-8', (err, content) => { if (err) return reject(err) if (fm.test(content)) { const { - attributes: {title, status} + attributes: {title, status}, } = fm(content) if (status) { @@ -71,9 +71,9 @@ async function readFiles(dir: string) { .reduce( (acc, file) => ({ ...acc, - ...file + ...file, }), - {} + {}, ) } catch (err) { throw new Error(`error reading files: ${err}`) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 7c7cff6eeed..cb306c1a08a 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -13,62 +13,62 @@ const components = new Map([ stories: [ { id: 'components-actionlist--default', - name: 'Default' + name: 'Default', }, { id: 'components-actionlist-features--block-description', - name: 'Block Description' + name: 'Block Description', }, { id: 'components-actionlist-features--disabled-item', - name: 'Disabled Item' + name: 'Disabled Item', }, { id: 'components-actionlist-features--inline-description', - name: 'Inline Description' + name: 'Inline Description', }, { id: 'components-actionlist-features--inside-overlay', - name: 'Inside Overlay' + name: 'Inside Overlay', }, { id: 'components-actionlist-features--item-dividers', - name: 'Item Dividers' + name: 'Item Dividers', }, { id: 'components-actionlist-features--links', - name: 'Links' + name: 'Links', }, { id: 'components-actionlist-features--multi-select', - name: 'Multi Select' + name: 'Multi Select', }, { id: 'components-actionlist-features--simple-list', - name: 'Simple List' + name: 'Simple List', }, { id: 'components-actionlist-features--single-divider', - name: 'Single Divider' + name: 'Single Divider', }, { id: 'components-actionlist-features--single-select', - name: 'Single Select' + name: 'Single Select', }, { id: 'components-actionlist-features--text-wrap-and-truncation', - name: 'Text Wrap And Truncation' + name: 'Text Wrap And Truncation', }, { id: 'components-actionlist-features--with-avatars', - name: 'With Avatars' + name: 'With Avatars', }, { id: 'components-actionlist-features--with-icons', - name: 'With Icons' - } - ] - } + name: 'With Icons', + }, + ], + }, ], [ 'UnderlineNav', @@ -76,38 +76,38 @@ const components = new Map([ stories: [ { id: 'drafts-components-underlinenav-examples--profile-page', - name: 'Profile Page' + name: 'Profile Page', }, { id: 'drafts-components-underlinenav-examples--pull-request-page', - name: 'Pull Request Page' + name: 'Pull Request Page', }, { id: 'drafts-components-underlinenav-examples--repos-page', - name: 'Repos Page' + name: 'Repos Page', }, { id: 'drafts-components-underlinenav-features--counters-loading-state', - name: 'Counters Loading State' + name: 'Counters Loading State', }, { id: 'drafts-components-underlinenav-features--default', - name: 'Default' + name: 'Default', }, { id: 'drafts-components-underlinenav-features--overflow-template', - name: 'Overflow Template' + name: 'Overflow Template', }, { id: 'drafts-components-underlinenav-features--with-counter-labels', - name: 'With Counter Labels' + name: 'With Counter Labels', }, { id: 'drafts-components-underlinenav-features--with-icons', - name: 'With Icons' - } - ] - } + name: 'With Icons', + }, + ], + }, ], [ 'TreeView', @@ -115,23 +115,23 @@ const components = new Map([ stories: [ { id: 'components-treeview--default', - name: 'Default' + name: 'Default', }, { id: 'components-treeview-features--empty-directories', - name: 'Empty Directories' + name: 'Empty Directories', }, { id: 'components-treeview-features--files', - name: 'Files' + name: 'Files', }, { id: 'components-treeview-features--files-changed', - name: 'Files Changed' - } - ] - } - ] + name: 'Files Changed', + }, + ], + }, + ], ]) for (const [component, info] of components) { @@ -193,7 +193,7 @@ test.describe('${component}', () => { singleQuote: true, bracketSpacing: false, trailingComma: 'none', - arrowParens: 'avoid' + arrowParens: 'avoid', }) fs.writeFileSync(filepath, formatted, 'utf8') } diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx index cb05c95bbfe..d1875ef8cd6 100644 --- a/src/ActionList/ActionList.examples.stories.tsx +++ b/src/ActionList/ActionList.examples.stories.tsx @@ -11,7 +11,7 @@ import { IssueOpenedIcon, NumberIcon, LinkIcon, - XIcon + XIcon, } from '@primer/octicons-react' import {ActionList, ActionListItemProps} from '.' import TextInput from '../TextInput' @@ -24,9 +24,9 @@ const meta: Meta = { component: ActionList, parameters: { controls: { - disable: true - } - } + disable: true, + }, + }, } export default meta @@ -35,7 +35,7 @@ const ReactRouterLikeLink = forwardRef { // eslint-disable-next-line jsx-a11y/anchor-has-content return - } + }, ) const NextJSLikeLink = forwardRef( @@ -43,10 +43,10 @@ const NextJSLikeLink = forwardRef( const child = React.Children.only(children) const childProps = { ref, - href + href, } return <>{React.isValidElement(child) ? React.cloneElement(child, childProps) : null} - } + }, ) export const ListLinkItem = () => ( @@ -106,7 +106,7 @@ const branches = [ 'dependabot/npm_and_yarn/docs/engine.io-4.1.2', 'ci-order', 'mdx-components', - 'emoji-picker-api' + 'emoji-picker-api', ] const filterSlowly = async (query: string) => { @@ -124,7 +124,7 @@ export function MixedSelection(): JSX.Element { {text: 'Assignee', icon: }, {text: 'Team', icon: }, {text: 'Estimate', icon: }, - {text: 'Due Date', icon: } + {text: 'Due Date', icon: }, ] return ( @@ -216,7 +216,7 @@ export function MemexSortable(): JSX.Element { {text: 'Assignee', icon: , selected: true}, {text: 'Team', icon: , selected: true}, {text: 'Estimate', icon: , selected: false}, - {text: 'Due Date', icon: , selected: false} + {text: 'Due Date', icon: , selected: false}, ]) const toggle = (text: string) => { @@ -224,7 +224,7 @@ export function MemexSortable(): JSX.Element { options.map(option => { if (option.text === text) option.selected = !option.selected return option - }) + }), ) } @@ -296,7 +296,7 @@ const SortableItem: React.FC> = ({opt item: option, collect: monitor => { return {isDragging: monitor.isDragging()} - } + }, })) const [{isOver}, dropRef] = useDrop(() => ({ @@ -306,7 +306,7 @@ const SortableItem: React.FC> = ({opt }, drop: (optionDropped: Option) => { reorder({optionToMove: optionDropped, moveAfterOption: option}) - } + }, })) return ( @@ -318,7 +318,7 @@ const SortableItem: React.FC> = ({opt sx={{ opacity: isDragging ? 0.5 : 1, boxShadow: isOver ? theme => `0px 2px 0 0px ${theme.colors.accent.emphasis}` : undefined, - borderRadius: isOver ? 0 : 2 + borderRadius: isOver ? 0 : 2, }} > {option.icon} diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx index 5098bc24de3..ee692993678 100644 --- a/src/ActionList/ActionList.features.stories.tsx +++ b/src/ActionList/ActionList.features.stories.tsx @@ -22,13 +22,13 @@ import { RepoForkedIcon, AlertIcon, TableIcon, - PeopleIcon + PeopleIcon, } from '@primer/octicons-react' export default { title: 'Components/ActionList/Features', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description} + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const SimpleList = () => ( @@ -83,7 +83,7 @@ const users = [ {login: 'mperrotti', name: 'Mike Perrotti'}, {login: 'dgreif', name: 'Dusty Greif'}, {login: 'smockle', name: 'Clay Miller'}, - {login: 'siddharthkp', name: 'Siddharth Kshetrapal'} + {login: 'siddharthkp', name: 'Siddharth Kshetrapal'}, ] export const WithAvatars = () => ( @@ -149,7 +149,7 @@ const projects = [ {name: 'Primer Backlog', scope: 'GitHub'}, {name: 'Accessibility', scope: 'GitHub'}, {name: 'Octicons', scope: 'github/primer'}, - {name: 'Primer React', scope: 'github/primer'} + {name: 'Primer React', scope: 'github/primer'}, ] export const SingleSelect = () => { @@ -316,7 +316,7 @@ export const TextWrapAndTruncation = () => ( const teams = [ {id: '5025661', type: 'team', slug: 'github/primer-reviewers', name: 'Primer Reviewers', members: 20}, - {id: '1929972', type: 'team', slug: 'github/design-infrastructure', name: 'Design Infrastructure', members: 20} + {id: '1929972', type: 'team', slug: 'github/design-infrastructure', name: 'Design Infrastructure', members: 20}, ] export const ConditionalChildren = () => { diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx index 53d8f5bc8df..de6f66ae6f5 100644 --- a/src/ActionList/ActionList.stories.tsx +++ b/src/ActionList/ActionList.stories.tsx @@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} export default { title: 'Components/ActionList', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description} + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const Default = () => ( @@ -33,31 +33,31 @@ Playground.args = { showDividers: false, selectionVariant: undefined, variant: 'inset', - role: 'listbox' + role: 'listbox', } Playground.argTypes = { showDividers: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, variant: { control: { - type: 'radio' + type: 'radio', }, - options: ['inset', 'full'] + options: ['inset', 'full'], }, selectionVariant: { control: { type: 'radio', - labels: ['single', 'multiple', 'unset'] + labels: ['single', 'multiple', 'unset'], }, options: [0, 1, 2], - mapping: ['single', 'multiple', null] + mapping: ['single', 'multiple', null], }, role: { - type: 'string' - } + type: 'string', + }, } const icons = ['unset', 'TypographyIcon', 'VersionsIcon', 'SearchIcon', 'ArrowRightIcon', 'ArrowLeftIcon'] @@ -107,49 +107,49 @@ export const ItemPlayground = args => { ItemPlayground.argTypes = { selected: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, active: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, disabled: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, variant: { control: 'radio', - options: ['default', 'danger'] + options: ['default', 'danger'], }, role: { - type: 'string' + type: 'string', }, id: { - type: 'string' + type: 'string', }, leadingVisual: { control: { - type: 'select' + type: 'select', }, - options: icons + options: icons, }, trailingVisual: { control: { - type: 'select' + type: 'select', }, - options: icons + options: icons, }, selectionVariant: { control: 'radio', if: {arg: 'selected'}, options: ['single', 'multiple'], table: { - category: 'ActionList' - } - } + category: 'ActionList', + }, + }, } ItemPlayground.args = { selected: false, @@ -160,7 +160,7 @@ ItemPlayground.args = { id: 'item-1', leadingVisual: null, trailingVisual: null, - selectionVariant: 'single' + selectionVariant: 'single', } // @ts-ignore ignoring types here to pass in options for icon selection in Storybook @@ -211,35 +211,35 @@ LinkItemPlayground.args = { role: 'listitem', id: 'item-1', leadingVisual: null, - trailingVisual: null + trailingVisual: null, } LinkItemPlayground.argTypes = { active: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, role: { - type: 'string' + type: 'string', }, id: { - type: 'string' + type: 'string', }, leadingVisual: { control: { - type: 'select' + type: 'select', }, - options: icons + options: icons, }, trailingVisual: { control: { - type: 'select' + type: 'select', }, - options: icons + options: icons, }, href: { - type: 'string' - } + type: 'string', + }, } export const GroupPlayground: Story = args => ( @@ -253,23 +253,23 @@ export const GroupPlayground: Story = args => ( GroupPlayground.argTypes = { variant: { control: { - type: 'radio' + type: 'radio', }, - options: ['subtle', 'filled'] + options: ['subtle', 'filled'], }, role: { - type: 'string' + type: 'string', }, title: { - type: 'string' + type: 'string', }, auxiliaryText: { - type: 'string' - } + type: 'string', + }, } GroupPlayground.args = { variant: 'subtle', role: 'listbox', title: 'Group title', - auxiliaryText: '' + auxiliaryText: '', } diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index b8a653ba74c..63b89d4356b 100644 --- a/src/ActionList/Description.tsx +++ b/src/ActionList/Description.tsx @@ -25,7 +25,7 @@ export const Description: React.FC> backgroundColor: 'actionListItem.inlineDivider', marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`, marginBottom: 2, - listStyle: 'none' // hide the ::marker inserted by browser's stylesheet + listStyle: 'none', // hide the ::marker inserted by browser's stylesheet }, - sx as SxProp + sx as SxProp, )} data-component="ActionList.Divider" /> diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx index 68fc9406793..bd2052fb2e8 100644 --- a/src/ActionList/Group.tsx +++ b/src/ActionList/Group.tsx @@ -54,7 +54,7 @@ export const Group: React.FC> = ({ sx={{ '&:not(:first-child)': {marginTop: 2}, listStyle: 'none', // hide the ::marker inserted by browser's stylesheet - ...sx + ...sx, }} {...props} > @@ -97,8 +97,8 @@ const Header: React.FC> = ({variant, title, marginBottom: 2, borderTop: '1px solid', borderBottom: '1px solid', - borderColor: 'neutral.muted' - }) + borderColor: 'neutral.muted', + }), } return ( diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 1cd4969f054..ca97e3a727a 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -27,7 +27,7 @@ export const Item = React.forwardRef( _PrivateItemWrapper, ...props }, - forwardedRef + forwardedRef, ): JSX.Element => { const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext) const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext) @@ -58,8 +58,8 @@ export const Item = React.forwardRef( height: '24px', content: '""', bg: 'accent.fg', - borderRadius: 2 - } + borderRadius: 2, + }, } const styles = { @@ -89,35 +89,35 @@ export const Item = React.forwardRef( '@media (hover: hover) and (pointer: fine)': { ':hover:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.hoverBg`, - color: getVariantStyles(variant, disabled).hoverColor + color: getVariantStyles(variant, disabled).hoverColor, }, ':focus:not([data-focus-visible-added]), > a:focus:not([data-focus-visible-added])': { backgroundColor: `actionListItem.${variant}.selectedBg`, color: getVariantStyles(variant, disabled).hoverColor, - outline: 'none' + outline: 'none', }, '&[data-focus-visible-added], > a[data-focus-visible-added]': { // we don't use :focus-visible because not all browsers (safari) have it yet outline: 'none', border: `2 solid`, - boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}` + boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`, }, ':active:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.activeBg`, - color: getVariantStyles(variant, disabled).hoverColor - } + color: getVariantStyles(variant, disabled).hoverColor, + }, }, '@media (forced-colors: active)': { ':focus': { // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips - outline: 'solid 1px transparent !important' - } + outline: 'solid 1px transparent !important', + }, }, /** Divider styles */ '[data-component="ActionList.Item--DividerContainer"]': { - position: 'relative' + position: 'relative', }, '[data-component="ActionList.Item--DividerContainer"]::before': { content: '" "', @@ -127,7 +127,7 @@ export const Item = React.forwardRef( top: '-7px', border: '0 solid', borderTopWidth: showDividers ? `1px` : '0', - borderColor: 'var(--divider-color, transparent)' + borderColor: 'var(--divider-color, transparent)', }, // show between 2 items ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider}, @@ -135,12 +135,12 @@ export const Item = React.forwardRef( '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'}, // hide border on current and previous item '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': { - '--divider-color': 'transparent' + '--divider-color': 'transparent', }, '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': { - '--divider-color': 'transparent' + '--divider-color': 'transparent', }, - ...(active ? activeStyles : {}) + ...(active ? activeStyles : {}), } const clickHandler = React.useCallback( @@ -152,7 +152,7 @@ export const Item = React.forwardRef( if (typeof afterSelect === 'function') afterSelect() } }, - [onSelect, disabled, afterSelect] + [onSelect, disabled, afterSelect], ) const keyPressHandler = React.useCallback( @@ -164,7 +164,7 @@ export const Item = React.forwardRef( if (typeof afterSelect === 'function') afterSelect() } }, - [onSelect, disabled, afterSelect] + [onSelect, disabled, afterSelect], ) // use props.id if provided, otherwise generate one. @@ -216,7 +216,7 @@ export const Item = React.forwardRef( )} ) - } + }, ) as PolymorphicForwardRefComponent<'li', ActionListItemProps> Item.displayName = 'ActionList.Item' diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index 6003cc35cb8..fb1f17a8d01 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -32,7 +32,7 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr // inherit Item styles color: 'inherit', - '&:hover': {color: 'inherit', textDecoration: 'none'} + '&:hover': {color: 'inherit', textDecoration: 'none'}, } return ( diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx index 59c23360b45..3a469e7d0ac 100644 --- a/src/ActionList/List.tsx +++ b/src/ActionList/List.tsx @@ -32,19 +32,19 @@ const ListBox = styled.ul(sx) export const List = React.forwardRef( ( {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props}, - forwardedRef + forwardedRef, ): JSX.Element => { const styles = { margin: 0, paddingInlineStart: 0, // reset ul styles - paddingY: variant === 'inset' ? 2 : 0 + paddingY: variant === 'inset' ? 2 : 0, } /** if list is inside a Menu, it will get a role from the Menu */ const { listRole, listLabelledBy, - selectionVariant: containerSelectionVariant // TODO: Remove after DropdownMenu2 deprecation + selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation } = React.useContext(ActionListContainerContext) return ( @@ -60,14 +60,14 @@ export const List = React.forwardRef( variant, selectionVariant: selectionVariant || containerSelectionVariant, showDividers, - role: role || listRole + role: role || listRole, }} > {props.children} ) - } + }, ) as PolymorphicForwardRefComponent<'ul', ActionListProps> List.displayName = 'ActionList' diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx index d98599a66f5..b4a9b71b6e4 100644 --- a/src/ActionList/Selection.tsx +++ b/src/ActionList/Selection.tsx @@ -21,7 +21,7 @@ export const Selection: React.FC> = ({se // fail loudly instead of silently ignoring if (selected) { throw new Error( - 'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined' + 'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined', ) } else { return null @@ -44,13 +44,13 @@ export const Selection: React.FC> = ({se rect: { fill: selected ? 'accent.fg' : 'canvas.default', stroke: selected ? 'accent.fg' : 'border.default', - shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666 + shapeRendering: 'auto', // this is a workaround to override global style in github/github, see primer/react#1666 }, path: { fill: 'fg.onEmphasis', boxShadow: 'shadow.small', - opacity: selected ? 1 : 0 - } + opacity: selected ? 1 : 0, + }, }} > footer - + , ) expect(screen.getByRole('banner')).toHaveAccessibleName('header') @@ -167,7 +167,7 @@ describe('PageLayout', () => {
Pane
- + , ) expect(ref).toHaveBeenCalledWith(screen.getByTestId('content').parentNode) }) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index eb0516fa741..5276ad8ad60 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -16,13 +16,13 @@ const REGION_ORDER = { paneStart: 1, content: 2, paneEnd: 3, - footer: 4 + footer: 4, } const SPACING_MAP = { none: 0, condensed: 3, - normal: [3, null, null, 4] + normal: [3, null, null, 4], } const PageLayoutContext = React.createContext<{ @@ -36,7 +36,7 @@ const PageLayoutContext = React.createContext<{ }>({ padding: 'normal', rowGap: 'normal', - columnGap: 'normal' + columnGap: 'normal', }) // ---------------------------------------------------------------------------- @@ -55,7 +55,7 @@ const containerWidths = { full: '100%', medium: '768px', large: '1012px', - xlarge: '1280px' + xlarge: '1280px', } // TODO: refs @@ -65,7 +65,7 @@ const Root: React.FC> = ({ rowGap = 'normal', columnGap = 'normal', children, - sx = {} + sx = {}, }) => { const {rootRef, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} = useStickyPaneHeight() @@ -78,14 +78,14 @@ const Root: React.FC> = ({ enableStickyPane, disableStickyPane, contentTopRef, - contentBottomRef + contentBottomRef, }} > ({padding: SPACING_MAP[padding]}, sx)} > @@ -94,7 +94,7 @@ const Root: React.FC> = ({ maxWidth: containerWidths[containerWidth], marginX: 'auto', display: 'flex', - flexWrap: 'wrap' + flexWrap: 'wrap', }} > @@ -125,12 +125,12 @@ type DividerProps = { const horizontalDividerVariants = { none: { - display: 'none' + display: 'none', }, line: { display: 'block', height: 1, - backgroundColor: 'border.default' + backgroundColor: 'border.default', }, filled: { display: 'block', @@ -138,8 +138,8 @@ const horizontalDividerVariants = { backgroundColor: 'canvas.inset', // eslint-disable-next-line @typescript-eslint/no-explicit-any boxShadow: (theme: any) => - `inset 0 -1px 0 0 ${theme.colors.border.default}, inset 0 1px 0 0 ${theme.colors.border.default}` - } + `inset 0 -1px 0 0 ${theme.colors.border.default}, inset 0 1px 0 0 ${theme.colors.border.default}`, + }, } function negateSpacingValue(value: number | null | Array) { @@ -164,10 +164,10 @@ const HorizontalDivider: React.FC> = ({var marginX: negateSpacingValue(SPACING_MAP[padding]), ...horizontalDividerVariants[responsiveVariant], [`@media screen and (min-width: ${theme.breakpoints[1]})`]: { - marginX: '0 !important' - } + marginX: '0 !important', + }, }, - sx + sx, ) } /> @@ -176,12 +176,12 @@ const HorizontalDivider: React.FC> = ({var const verticalDividerVariants = { none: { - display: 'none' + display: 'none', }, line: { display: 'block', width: 1, - backgroundColor: 'border.default' + backgroundColor: 'border.default', }, filled: { display: 'block', @@ -189,8 +189,8 @@ const verticalDividerVariants = { backgroundColor: 'canvas.inset', // eslint-disable-next-line @typescript-eslint/no-explicit-any boxShadow: (theme: any) => - `inset -1px 0 0 0 ${theme.colors.border.default}, inset 1px 0 0 0 ${theme.colors.border.default}` - } + `inset -1px 0 0 0 ${theme.colors.border.default}, inset 1px 0 0 0 ${theme.colors.border.default}`, + }, } type DraggableDividerProps = { @@ -220,7 +220,7 @@ const VerticalDivider: React.FC { const [isDragging, setIsDragging] = React.useState(false) const responsiveVariant = useResponsiveValue(variant, 'none') @@ -272,9 +272,9 @@ const VerticalDivider: React.FC {draggable ? ( @@ -288,8 +288,8 @@ const VerticalDivider: React.FC { setIsDragging(true) @@ -346,7 +346,7 @@ const Header: React.FC> = ({ dividerWhenNarrow = 'inherit', hidden = false, children, - sx = {} + sx = {}, }) => { // Combine divider and dividerWhenNarrow for backwards compatibility const dividerProp = @@ -367,9 +367,9 @@ const Header: React.FC> = ({ sx={merge( { width: '100%', - marginBottom: SPACING_MAP[rowGap] + marginBottom: SPACING_MAP[rowGap], }, - sx + sx, )} > {children} @@ -404,7 +404,7 @@ const contentWidths = { full: '100%', medium: '768px', large: '1012px', - xlarge: '1280px' + xlarge: '1280px', } const Content: React.FC> = ({ @@ -414,7 +414,7 @@ const Content: React.FC> = ({ padding = 'none', hidden = false, children, - sx = {} + sx = {}, }) => { const isHidden = useResponsiveValue(hidden, false) const {contentTopRef, contentBottomRef} = React.useContext(PageLayoutContext) @@ -434,9 +434,9 @@ const Content: React.FC> = ({ flexBasis: 0, flexGrow: 1, flexShrink: 1, - minWidth: 1 // Hack to prevent overflowing content from pushing the pane region to the next line + minWidth: 1, // Hack to prevent overflowing content from pushing the pane region to the next line }, - sx + sx, )} > {/* Track the top of the content region so we can calculate the height of the pane region */} @@ -448,7 +448,7 @@ const Content: React.FC> = ({ maxWidth: contentWidths[width], marginX: 'auto', flexGrow: 1, - padding: SPACING_MAP[padding] + padding: SPACING_MAP[padding], }} > {children} @@ -509,13 +509,13 @@ export type PageLayoutPaneProps = { const panePositions = { start: REGION_ORDER.paneStart, - end: REGION_ORDER.paneEnd + end: REGION_ORDER.paneEnd, } const paneWidths = { small: ['100%', null, '240px', '256px'], medium: ['100%', null, '256px', '296px'], - large: ['100%', null, '256px', '320px', '336px'] + large: ['100%', null, '256px', '320px', '336px'], } const defaultPaneWidth = {small: 256, medium: 296, large: 320} @@ -535,9 +535,9 @@ const Pane = React.forwardRef { // Combine position and positionWhenNarrow for backwards compatibility const positionProp = @@ -621,15 +621,15 @@ const Pane = React.forwardRef @@ -642,7 +642,7 @@ const Pane = React.forwardRef ({ '--pane-min-width': `256px`, @@ -676,19 +676,19 @@ const Pane = React.forwardRef {children} ) - } + }, ) Pane.displayName = 'PageLayout.Pane' @@ -734,7 +734,7 @@ const Footer: React.FC> = ({ dividerWhenNarrow = 'inherit', hidden = false, children, - sx = {} + sx = {}, }) => { // Combine divider and dividerWhenNarrow for backwards compatibility const dividerProp = @@ -756,9 +756,9 @@ const Footer: React.FC> = ({ { order: REGION_ORDER.footer, width: '100%', - marginTop: SPACING_MAP[rowGap] + marginTop: SPACING_MAP[rowGap], }, - sx + sx, )} > @@ -777,5 +777,5 @@ export const PageLayout = Object.assign(Root, { Header, Content, Pane, - Footer + Footer, }) diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx index c477c12968c..86c8ca3748f 100644 --- a/src/PageLayout/interaction.stories.tsx +++ b/src/PageLayout/interaction.stories.tsx @@ -8,7 +8,7 @@ const meta: Meta = { // component: PageLayout, parameters: { layout: 'fullscreen', - controls: {expanded: true} + controls: {expanded: true}, }, args: { // Debug controls @@ -50,307 +50,307 @@ const meta: Meta = { 'Footer.padding': 'none', 'Footer.hidden.regular': false, 'Footer.hidden.narrow': false, - 'Footer.hidden.wide': false + 'Footer.hidden.wide': false, }, argTypes: { // Debug controls 'Render header?': { type: 'boolean', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Render pane?': { type: 'boolean', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Render footer?': { type: 'boolean', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Header placeholder height': { type: 'number', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Pane placeholder height': { type: 'number', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Content placeholder height': { type: 'number', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Footer placeholder height': { type: 'number', - table: {category: 'Debug'} + table: {category: 'Debug'}, }, // PageLayout prop controls containerWidth: { type: { name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'] + value: ['full', 'medium', 'large', 'xlarge'], }, control: {type: 'radio'}, - table: {category: 'PageLayout props'} + table: {category: 'PageLayout props'}, }, padding: { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'PageLayout props'} + table: {category: 'PageLayout props'}, }, rowGap: { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'PageLayout props'} + table: {category: 'PageLayout props'}, }, columnGap: { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'PageLayout props'} + table: {category: 'PageLayout props'}, }, // Header prop controls 'Header.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.regular': { type: 'boolean', - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.narrow': { type: 'boolean', - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.wide': { type: 'boolean', - table: {category: 'Header props'} + table: {category: 'Header props'}, }, // Content prop controls 'Content.width': { type: { name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'] + value: ['full', 'medium', 'large', 'xlarge'], }, control: {type: 'radio'}, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.regular': { type: 'boolean', - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.narrow': { type: 'boolean', - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.wide': { type: 'boolean', - table: {category: 'Content props'} + table: {category: 'Content props'}, }, // Pane prop controls 'Pane.position.regular': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.position.narrow': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.position.wide': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.width': { type: { name: 'enum', - value: ['small', 'medium', 'large'] + value: ['small', 'medium', 'large'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.sticky': { type: 'boolean', - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, // Footer prop controls 'Footer.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, control: {type: 'radio'}, - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.regular': { type: 'boolean', - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.narrow': { type: 'boolean', - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.wide': { type: 'boolean', - table: {category: 'Footer props'} - } - } + table: {category: 'Footer props'}, + }, + }, } StickyPane.args = { sticky: true, numParagraphsInPane: 3, - numParagraphsInContent: 30 + numParagraphsInContent: 30, } StickyPane.argTypes = { sticky: { - type: 'boolean' + type: 'boolean', }, numParagraphsInPane: { - type: 'number' + type: 'number', }, numParagraphsInContent: { - type: 'number' - } + type: 'number', + }, } const isInViewPort = (boundingRect: {top: number; left: number; right: number; bottom: number}) => { @@ -376,19 +376,19 @@ const NonStickyPane = StickyPane.bind({}) NonStickyPane.args = { sticky: false, numParagraphsInPane: 6, - numParagraphsInContent: 30 + numParagraphsInContent: 30, } NonStickyPane.argTypes = { sticky: { - type: 'boolean' + type: 'boolean', }, numParagraphsInPane: { - type: 'number' + type: 'number', }, numParagraphsInContent: { - type: 'number' - } + type: 'number', + }, } NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { @@ -404,22 +404,22 @@ CustomStickyHeader.args = { sticky: true, offsetHeader: '8rem', numParagraphsInPane: 10, - numParagraphsInContent: 30 + numParagraphsInContent: 30, } CustomStickyHeader.argTypes = { sticky: { - type: 'boolean' + type: 'boolean', }, offsetHeader: { - type: 'string' + type: 'string', }, numParagraphsInPane: { - type: 'number' + type: 'number', }, numParagraphsInContent: { - type: 'number' - } + type: 'number', + }, } CustomStickyHeader.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts index a6c2a4356a9..9104ee616cb 100644 --- a/src/PageLayout/useStickyPaneHeight.ts +++ b/src/PageLayout/useStickyPaneHeight.ts @@ -99,7 +99,7 @@ export function useStickyPaneHeight() { disableStickyPane, contentTopRef, contentBottomRef, - stickyPaneHeight: height + stickyPaneHeight: height, } } diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index 4596ce4dd60..c7165b45ea7 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -127,7 +127,7 @@ function usePaginationPages({ hrefBuilder, marginPageCount, showPages, - surroundingPageCount + surroundingPageCount, }: UsePaginationPagesParameters) { const pageChange = React.useCallback(n => (e: React.MouseEvent) => onPageChange(e, n), [onPageChange]) @@ -186,7 +186,7 @@ function Pagination({ hrefBuilder, marginPageCount, showPages, - surroundingPageCount + surroundingPageCount, }) return ( @@ -208,7 +208,7 @@ Pagination.defaultProps = { marginPageCount: 1, onPageChange: noop, showPages: true, - surroundingPageCount: 2 + surroundingPageCount: 2, } export default Pagination diff --git a/src/Pagination/model.tsx b/src/Pagination/model.tsx index 2fb6be24f57..5be580e76c7 100644 --- a/src/Pagination/model.tsx +++ b/src/Pagination/model.tsx @@ -3,7 +3,7 @@ export function buildPaginationModel( currentPage: number, showPages: boolean, marginPageCount: number, - surroundingPageCount: number + surroundingPageCount: number, ) { const pages = [] @@ -71,13 +71,13 @@ export function buildPaginationModel( // we need to add a break pages.push({ type: 'BREAK', - num: 1 + num: 1, }) } pages.push({ type: 'NUM', num, - selected + selected, }) } else { const last = sorted[idx - 1] @@ -86,18 +86,18 @@ export function buildPaginationModel( pages.push({ type: 'NUM', num, - selected + selected, }) } else { // We skipped some, so add a break pages.push({ type: 'BREAK', - num: num - 1 + num: num - 1, }) pages.push({ type: 'NUM', num, - selected + selected, }) } } @@ -109,7 +109,7 @@ export function buildPaginationModel( // so we need an additional break pages.push({ type: 'BREAK', - num: pageCount + num: pageCount, }) } } @@ -129,7 +129,7 @@ type PageType = { export function buildComponentData( page: PageType, hrefBuilder: (n: number) => string, - onClick: (e: React.MouseEvent) => void + onClick: (e: React.MouseEvent) => void, ) { const props = {} let content = '' @@ -146,7 +146,7 @@ export function buildComponentData( rel: 'prev', href: hrefBuilder(page.num), 'aria-label': 'Previous Page', - onClick + onClick, }) } break @@ -161,7 +161,7 @@ export function buildComponentData( rel: 'next', href: hrefBuilder(page.num), 'aria-label': 'Next Page', - onClick + onClick, }) } break diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx index 460a75e2c17..a2616629f4a 100644 --- a/src/Placeholder.tsx +++ b/src/Placeholder.tsx @@ -21,7 +21,7 @@ export const Placeholder: React.FC< bg: 'canvas.inset', borderRadius: 2, border: '1px solid', - borderColor: 'border.subtle' + borderColor: 'border.subtle', }} > {label} diff --git a/src/PointerBox.tsx b/src/PointerBox.tsx index ff02cb9df7d..45ebf065171 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox.tsx @@ -30,7 +30,7 @@ function PointerBox(props: PointerBoxProps) { borderColor: borderColor || sx?.borderColor, borderWidth: border, location: caret, - theme + theme, } const defaultBoxProps = {borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2} diff --git a/src/Popover.tsx b/src/Popover.tsx index a2d98dbf7f8..f28490b324e 100644 --- a/src/Popover.tsx +++ b/src/Popover.tsx @@ -26,7 +26,7 @@ type StyledPopoverProps = { const Popover = styled.div.attrs(({className, caret}) => { return { - className: classnames(className, `caret-pos--${caret}`) + className: classnames(className, `caret-pos--${caret}`), } })` position: ${props => (props.relative ? 'relative' : 'absolute')}; @@ -215,7 +215,7 @@ const PopoverContent = styled.div` ` Popover.defaultProps = { - caret: 'top' + caret: 'top', } PopoverContent.displayName = 'Popover.Content' diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index c881cda5366..2c1cf7cf9e1 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -63,7 +63,7 @@ export interface PortalProps { export const Portal: React.FC> = ({ children, onMount, - containerName: _containerName + containerName: _containerName, }) => { const hostElement = document.createElement('div') @@ -84,7 +84,7 @@ export const Portal: React.FC> = ({ if (!parentElement) { throw new Error( - `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.` + `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`, ) } const element = elementRef.current diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index b8476b593ed..ce62eedf076 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -15,7 +15,7 @@ const Bar = styled.span` const sizeMap = { small: '5px', large: '10px', - default: '8px' + default: '8px', } type StyledProgressContainerProps = { @@ -47,7 +47,7 @@ function ProgressBar({progress, bg, ...rest}: ProgressBarProps) { ProgressBar.defaultProps = { bg: 'success.emphasis', - barSize: 'default' + barSize: 'default', } export default ProgressBar diff --git a/src/Radio.tsx b/src/Radio.tsx index e05abf72846..0e81432f7b0 100644 --- a/src/Radio.tsx +++ b/src/Radio.tsx @@ -53,7 +53,7 @@ const StyledRadio = styled.input` const Radio = React.forwardRef( ( {checked, disabled, name: nameProp, onChange, sx: sxProp, required, validationStatus, value, ...rest}: RadioProps, - ref + ref, ): ReactElement => { const radioGroupContext = useContext(RadioGroupContext) const handleOnChange: ChangeEventHandler = e => { @@ -65,7 +65,7 @@ const Radio = React.forwardRef( if (!name) { // eslint-disable-next-line no-console console.warn( - 'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop' + 'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop', ) } @@ -87,7 +87,7 @@ const Radio = React.forwardRef( {...rest} /> ) - } + }, ) Radio.displayName = 'Radio' diff --git a/src/RadioGroup.tsx b/src/RadioGroup.tsx index 35874ff4312..0b04974ee0a 100644 --- a/src/RadioGroup.tsx +++ b/src/RadioGroup.tsx @@ -46,7 +46,7 @@ const RadioGroup: FC> = ({children, dis updateSelectedCheckboxes(e) onChange(selectedRadioValue.current, e) } - } + }, }} > @@ -59,5 +59,5 @@ const RadioGroup: FC> = ({children, dis export default Object.assign(RadioGroup, { Caption: CheckboxOrRadioGroupCaption, Label: CheckboxOrRadioGroupLabel, - Validation: CheckboxOrRadioGroupValidation + Validation: CheckboxOrRadioGroupValidation, }) diff --git a/src/SegmentedControl/SegmentedControl.stories.tsx b/src/SegmentedControl/SegmentedControl.stories.tsx index 031babb78c5..806da7a3626 100644 --- a/src/SegmentedControl/SegmentedControl.stories.tsx +++ b/src/SegmentedControl/SegmentedControl.stories.tsx @@ -24,7 +24,7 @@ const variantOptions = ['dropdown', 'hideLabels', 'default'] const parseVariantFromArgs = ({variantAtNarrow, variantAtRegular, variantAtWide}: Args) => ({ narrow: variantAtNarrow, regular: variantAtRegular, - wide: variantAtWide + wide: variantAtWide, }) const parseFullWidthFromArgs = ({fullWidth, fullWidthAtNarrow, fullWidthAtRegular, fullWidthAtWide}: Args) => @@ -33,7 +33,7 @@ const parseFullWidthFromArgs = ({fullWidth, fullWidthAtNarrow, fullWidthAtRegula : { narrow: fullWidthAtNarrow, regular: fullWidthAtRegular, - wide: fullWidthAtWide + wide: fullWidthAtWide, } export default { @@ -48,61 +48,61 @@ export default { size: 'medium', variantAtNarrow: 'default', variantAtRegular: 'default', - variantAtWide: 'defualt' + variantAtWide: 'defualt', }, argTypes: { fullWidth: { control: { - type: 'boolean' - } + type: 'boolean', + }, }, fullWidthAtNarrow: { name: 'fullWidth.narrow', control: { - type: 'boolean' - } + type: 'boolean', + }, }, fullWidthAtRegular: { name: 'fullWidth.regular', control: { - type: 'boolean' - } + type: 'boolean', + }, }, fullWidthAtWide: { name: 'fullWidth.wide', control: { - type: 'boolean' - } + type: 'boolean', + }, }, size: { control: { - type: 'radio' + type: 'radio', }, - options: ['small', 'medium'] + options: ['small', 'medium'], }, variantAtNarrow: { name: 'variant.narrow', control: { - type: 'radio' + type: 'radio', }, - options: variantOptions + options: variantOptions, }, variantAtRegular: { name: 'variant.regular', control: { - type: 'radio' + type: 'radio', }, - options: variantOptions + options: variantOptions, }, variantAtWide: { name: 'variant.wide', control: { - type: 'radio' + type: 'radio', }, - options: variantOptions - } + options: variantOptions, + }, }, - parameters: {controls: {exclude: excludedControlKeys}} + parameters: {controls: {exclude: excludedControlKeys}}, } as Meta export const Playground: Story = args => ( diff --git a/src/SegmentedControl/SegmentedControl.test.tsx b/src/SegmentedControl/SegmentedControl.test.tsx index daba293e72c..b75cf47e571 100644 --- a/src/SegmentedControl/SegmentedControl.test.tsx +++ b/src/SegmentedControl/SegmentedControl.test.tsx @@ -14,7 +14,7 @@ import {viewportRanges} from '../hooks/useResponsiveValue' const segmentData = [ {label: 'Preview', id: 'preview', iconLabel: 'EyeIcon', icon: () => }, {label: 'Raw', id: 'raw', iconLabel: 'FileCodeIcon', icon: () => }, - {label: 'Blame', id: 'blame', iconLabel: 'PeopleIcon', icon: () => } + {label: 'Blame', id: 'blame', iconLabel: 'PeopleIcon', icon: () => }, ] let matchMedia: MatchMediaMock @@ -42,12 +42,12 @@ describe('SegmentedControl', () => { ))} - ) + ), }) checkExports('SegmentedControl', { default: undefined, - SegmentedControl + SegmentedControl, }) it('renders with a selected segment', () => { @@ -58,7 +58,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) const selectedButton = getByText('Raw').closest('button') @@ -78,7 +78,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) const button = getByText(segmentData[1].label) @@ -98,7 +98,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) for (const datum of segmentData) { @@ -113,7 +113,7 @@ describe('SegmentedControl', () => { {segmentData.map(({label}) => ( {label} ))} - + , ) const selectedButton = getByText('Preview').closest('button') @@ -129,7 +129,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) for (const datum of segmentData) { @@ -144,7 +144,7 @@ describe('SegmentedControl', () => { {segmentData.map(({label, icon}) => ( ))} - + , ) for (const datum of segmentData) { @@ -163,7 +163,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) const buttonToClick = getByText('Raw').closest('button') @@ -182,7 +182,7 @@ describe('SegmentedControl', () => { {segmentData.map(({label}) => ( {label} ))} - + , ) const buttonToClick = getByText('Raw').closest('button') @@ -204,7 +204,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) const buttonToClick = getByText('Raw').closest('button') @@ -234,7 +234,7 @@ describe('SegmentedControl', () => { - + , ) const button = component.getByText(segmentData[0].label) @@ -264,7 +264,7 @@ describe('SegmentedControl', () => { - + , ) const button = component.getByText(segmentData[0].label) @@ -288,7 +288,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) expect(consoleSpy).toHaveBeenCalled() }) @@ -301,7 +301,7 @@ describe('SegmentedControl', () => { {label} ))} - + , ) expect(mockWarningFn).toHaveBeenCalled() diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index f0c47c70e13..35bd5722bc6 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -41,7 +41,7 @@ const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: Segment height: props.size === 'small' ? '28px' : '32px', // TODO: use primitive `control.{small|medium}.size` when it is available margin: 0, padding: 0, - width: props.isFullWidth ? '100%' : undefined + width: props.isFullWidth ? '100%' : undefined, }) const Root: React.FC> = ({ @@ -60,20 +60,21 @@ const Root: React.FC> = ({ const isUncontrolled = onChange === undefined || React.Children.toArray(children).some( - child => React.isValidElement(child) && child.props.defaultSelected !== undefined + child => React.isValidElement(child) && child.props.defaultSelected !== undefined, ) const responsiveVariant = useResponsiveValue(variant, 'default') const isFullWidth = useResponsiveValue(fullWidth, false) const selectedSegments = React.Children.toArray(children).map( child => - React.isValidElement(child) && child.props.selected + React.isValidElement(child) && + child.props.selected, ) const hasSelectedButton = selectedSegments.some(isSelected => isSelected) const selectedIndexExternal = hasSelectedButton ? selectedSegments.indexOf(true) : 0 const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal) const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal const selectedChild = React.isValidElement( - React.Children.toArray(children)[selectedIndex] + React.Children.toArray(children)[selectedIndex], ) ? React.Children.toArray(children)[selectedIndex] : undefined @@ -100,7 +101,7 @@ const Root: React.FC> = ({ if (!ariaLabel && !ariaLabelledby) { // eslint-disable-next-line no-console console.warn( - 'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technology' + 'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technology', ) } @@ -163,8 +164,8 @@ const Root: React.FC> = ({ sx: { '--separator-color': index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default, - ...child.props.sx - } + ...child.props.sx, + }, } // Render the 'hideLabels' variant of the SegmentedControlButton @@ -192,7 +193,7 @@ const Root: React.FC> = ({ { ...sharedSxProp, // setting width here avoids having to pass `isFullWidth` directly to child components - width: !isFullWidth ? '32px' : '100%' // TODO: use primitive `control.medium.size` when it is available instead of '32px' + width: !isFullWidth ? '32px' : '100%', // TODO: use primitive `control.medium.size` when it is available instead of '32px' } as React.CSSProperties } {...restSharedChildProps} @@ -212,10 +213,10 @@ const Root: React.FC> = ({ Root.displayName = 'SegmentedControl' Root.defaultProps = { - variant: 'default' + variant: 'default', } export const SegmentedControl = Object.assign(Root, { Button, - IconButton: SegmentedControlIconButton + IconButton: SegmentedControlIconButton, }) diff --git a/src/SegmentedControl/SegmentedControlButton.stories.tsx b/src/SegmentedControl/SegmentedControlButton.stories.tsx index 1004ef41d08..91f2c254ecf 100644 --- a/src/SegmentedControl/SegmentedControlButton.stories.tsx +++ b/src/SegmentedControl/SegmentedControlButton.stories.tsx @@ -14,25 +14,25 @@ export default { children: 'Option', leadingIcon: null, selected: false, - defaultSelected: false + defaultSelected: false, }, argTypes: { children: { - type: 'string' + type: 'string', }, leadingIcon: { control: { type: 'select', - options: Object.keys(icons) + options: Object.keys(icons), }, - mapping: icons + mapping: icons, }, selected: { - type: 'boolean' + type: 'boolean', }, defaultSelected: { - type: 'boolean' - } + type: 'boolean', + }, }, decorators: [ Story => { @@ -41,8 +41,8 @@ export default { ) - } - ] + }, + ], } as Meta export const Playground: Story = args => diff --git a/src/SegmentedControl/SegmentedControlFeatures.stories.tsx b/src/SegmentedControl/SegmentedControlFeatures.stories.tsx index 7a94dd98d30..58cc79629bf 100644 --- a/src/SegmentedControl/SegmentedControlFeatures.stories.tsx +++ b/src/SegmentedControl/SegmentedControlFeatures.stories.tsx @@ -6,7 +6,7 @@ import {Box, Text} from '../' export default { title: 'Components/SegmentedControl/Features', - component: SegmentedControl + component: SegmentedControl, } as Meta export const Default = () => ( diff --git a/src/SegmentedControl/SegmentedControlIconButton.stories.tsx b/src/SegmentedControl/SegmentedControlIconButton.stories.tsx index fe7f5807795..2caa57007ed 100644 --- a/src/SegmentedControl/SegmentedControlIconButton.stories.tsx +++ b/src/SegmentedControl/SegmentedControlIconButton.stories.tsx @@ -13,22 +13,22 @@ export default { args: { icon: 'FileCodeIcon', selected: false, - defaultSelected: false + defaultSelected: false, }, argTypes: { icon: { control: { type: 'select', - options: Object.keys(icons) + options: Object.keys(icons), }, - mapping: icons + mapping: icons, }, selected: { - type: 'boolean' + type: 'boolean', }, defaultSelected: { - type: 'boolean' - } + type: 'boolean', + }, }, decorators: [ Story => { @@ -37,8 +37,8 @@ export default { ) - } - ] + }, + ], } as Meta export const Playground: Story = args => ( diff --git a/src/SegmentedControl/SegmentedControlIconButton.tsx b/src/SegmentedControl/SegmentedControlIconButton.tsx index a715ce24a71..9b0dd0b8536 100644 --- a/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -37,9 +37,9 @@ export const SegmentedControlIconButton: React.FC> & {isIconOnly?: boolean} + props?: Partial> & {isIconOnly?: boolean}, ) => ({ '--segmented-control-button-inner-padding': '12px', // TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available '--segmented-control-button-bg-inset': '4px', @@ -62,24 +62,24 @@ export const getSegmentedControlButtonStyles = ( : 'calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))', paddingRight: props?.selected ? 'var(--segmented-control-button-inner-padding)' - : 'calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))' + : 'calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))', }, svg: { - fill: 'fg.muted' + fill: 'fg.muted', }, ':hover .segmentedControl-content': { - backgroundColor: props?.selected ? undefined : 'segmentedControl.button.hover.bg' + backgroundColor: props?.selected ? undefined : 'segmentedControl.button.hover.bg', }, ':active .segmentedControl-content': { - backgroundColor: props?.selected ? undefined : 'segmentedControl.button.active.bg' + backgroundColor: props?.selected ? undefined : 'segmentedControl.button.active.bg', }, // fixes an issue where the focus outline shows over the pseudo-element ':focus:focus-visible:not(:last-child):after': { - width: 0 + width: 0, }, '.segmentedControl-text': { @@ -91,8 +91,8 @@ export const getSegmentedControlButtonStyles = ( overflow: 'hidden', pointerEvents: 'none', userSelect: 'none', - visibility: 'hidden' - } + visibility: 'hidden', + }, }, '@media (pointer: coarse)': { @@ -103,9 +103,9 @@ export const getSegmentedControlButtonStyles = ( right: 0, transform: 'translateY(-50%)', top: '50%', - minHeight: '44px' - } - } + minHeight: '44px', + }, + }, }) export const getSegmentedControlListItemStyles = () => ({ @@ -115,5 +115,5 @@ export const getSegmentedControlListItemStyles = () => ({ marginTop: '-1px', marginBottom: '-1px', ':not(:last-child)': borderedSegment, - ...directChildLayoutAdjustments + ...directChildLayoutAdjustments, }) diff --git a/src/Select.tsx b/src/Select.tsx index 9580ca7885b..3c569a302cb 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -71,9 +71,9 @@ const Select = React.forwardRef( position: 'relative', '@media screen and (forced-colors: active)': { svg: { - fill: disabled ? 'GrayText' : 'FieldText' - } - } + fill: disabled ? 'GrayText' : 'FieldText', + }, + }, }} block={block} contrast={contrast} @@ -99,7 +99,7 @@ const Select = React.forwardRef( - ) + ), ) const Option: React.FC & {value: string}>> = props => ( @@ -112,5 +112,5 @@ const OptGroup: React.FC void placeholder?: string overlayProps?: Partial @@ -37,14 +37,14 @@ export type SelectPanelProps = SelectPanelBaseProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) function isMultiSelectVariant( - selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'] + selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'], ): selected is SelectPanelMultiSelection['selected'] { return Array.isArray(selected) } const focusZoneSettings: Partial = { // Let FilteredActionList handle focus zone - disabled: true + disabled: true, } export function SelectPanel({ @@ -69,7 +69,7 @@ export function SelectPanel({ externalOnFilterChange(value, e) setInternalFilterValue(value) }, - [externalOnFilterChange, setInternalFilterValue] + [externalOnFilterChange, setInternalFilterValue], ) const anchorRef = useProvidedRefOrCreate(externalAnchorRef) @@ -78,7 +78,7 @@ export function SelectPanel({ (gesture: Parameters>[0] | 'selection') => { onOpenChange(false, gesture) }, - [onOpenChange] + [onOpenChange], ) const renderMenuAnchor = useMemo(() => { @@ -91,7 +91,7 @@ export function SelectPanel({ return >(props: T) => { return renderAnchor({ ...props, - children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder + children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder, }) } }, [placeholder, renderAnchor, selected]) @@ -124,21 +124,21 @@ export function SelectPanel({ const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange'] singleSelectOnChange(item === selected ? undefined : item) onClose('selection') - } + }, } as ItemProps }) }, [onClose, onSelectedChange, items, selected]) const inputRef = React.useRef(null) const focusTrapSettings = { - initialFocusRef: inputRef + initialFocusRef: inputRef, } const extendedTextInputProps: Partial = useMemo(() => { return { sx: {m: 2}, contrast: true, - ...textInputProps + ...textInputProps, } }, [textInputProps]) diff --git a/src/SideNav.tsx b/src/SideNav.tsx index 51d8b590219..2bd96444211 100644 --- a/src/SideNav.tsx +++ b/src/SideNav.tsx @@ -173,11 +173,11 @@ const SideNavLink = styled(Link).attrs(props => { ` SideNav.defaultProps = { - variant: 'normal' + variant: 'normal', } SideNavLink.defaultProps = { - variant: 'normal' + variant: 'normal', } SideNavLink.displayName = 'SideNav.Link' diff --git a/src/Spinner.tsx b/src/Spinner.tsx index ad0de3b05e6..3771d752d11 100644 --- a/src/Spinner.tsx +++ b/src/Spinner.tsx @@ -6,7 +6,7 @@ import {ComponentProps} from './utils/types' const sizeMap = { small: '16px', medium: '32px', - large: '64px' + large: '64px', } export interface SpinnerInternalProps { diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index db5f67a78b2..d3efd979e45 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -9,295 +9,295 @@ const meta: Meta = { title: 'Components/SplitPageLayout', parameters: { layout: 'fullscreen', - controls: {expanded: true} + controls: {expanded: true}, }, argTypes: { // Debug controls 'Render header?': { type: 'boolean', defaultValue: true, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Render pane?': { type: 'boolean', defaultValue: true, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Render footer?': { type: 'boolean', defaultValue: true, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Header placeholder height': { type: 'number', defaultValue: 64, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Pane placeholder height': { type: 'number', defaultValue: 200, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Content placeholder height': { type: 'number', defaultValue: 400, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, 'Footer placeholder height': { type: 'number', defaultValue: 64, - table: {category: 'Debug'} + table: {category: 'Debug'}, }, // Header prop controls 'Header.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Header props' - } + category: 'Header props', + }, }, 'Header.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, defaultValue: 'normal', control: {type: 'radio'}, - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.regular': { type: 'boolean', defaultValue: false, - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.narrow': { type: 'boolean', defaultValue: false, - table: {category: 'Header props'} + table: {category: 'Header props'}, }, 'Header.hidden.wide': { type: 'boolean', defaultValue: false, - table: {category: 'Header props'} + table: {category: 'Header props'}, }, // Content prop controls 'Content.width': { type: { name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'] + value: ['full', 'medium', 'large', 'xlarge'], }, defaultValue: 'xlarge', control: {type: 'radio'}, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, defaultValue: 'normal', control: {type: 'radio'}, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.regular': { type: 'boolean', defaultValue: false, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.narrow': { type: 'boolean', defaultValue: false, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, 'Content.hidden.wide': { type: 'boolean', defaultValue: false, - table: {category: 'Content props'} + table: {category: 'Content props'}, }, // Pane prop controls 'Pane.position.regular': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, defaultValue: 'start', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.position.narrow': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, defaultValue: 'start', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.position.wide': { type: { name: 'enum', - value: ['start', 'end'] + value: ['start', 'end'], }, defaultValue: 'start', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.width': { type: { name: 'enum', - value: ['small', 'medium', 'large'] + value: ['small', 'medium', 'large'], }, defaultValue: 'medium', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.sticky': { type: 'boolean', defaultValue: true, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.resizable': { type: 'boolean', defaultValue: false, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, defaultValue: 'normal', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, defaultValue: 'line', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, 'Pane.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: {type: 'radio'}, - table: {category: 'Pane props'} + table: {category: 'Pane props'}, }, // Footer prop controls 'Footer.divider.regular': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.divider.narrow': { type: { name: 'enum', - value: ['none', 'line', 'filled'] + value: ['none', 'line', 'filled'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.divider.wide': { type: { name: 'enum', - value: ['none', 'line'] + value: ['none', 'line'], }, defaultValue: 'line', control: { - type: 'radio' + type: 'radio', }, table: { - category: 'Footer props' - } + category: 'Footer props', + }, }, 'Footer.padding': { type: { name: 'enum', - value: ['none', 'condensed', 'normal'] + value: ['none', 'condensed', 'normal'], }, defaultValue: 'normal', control: {type: 'radio'}, - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.regular': { type: 'boolean', defaultValue: false, - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.narrow': { type: 'boolean', defaultValue: false, - table: {category: 'Footer props'} + table: {category: 'Footer props'}, }, 'Footer.hidden.wide': { type: 'boolean', defaultValue: false, - table: {category: 'Footer props'} - } - } + table: {category: 'Footer props'}, + }, + }, } const Template: Story = args => ( @@ -308,12 +308,12 @@ const Template: Story = args => ( divider={{ narrow: args['Header.divider.narrow'], regular: args['Header.divider.regular'], - wide: args['Header.divider.wide'] + wide: args['Header.divider.wide'], }} hidden={{ narrow: args['Header.hidden.narrow'], regular: args['Header.hidden.regular'], - wide: args['Header.hidden.wide'] + wide: args['Header.hidden.wide'], }} > @@ -325,7 +325,7 @@ const Template: Story = args => ( hidden={{ narrow: args['Content.hidden.narrow'], regular: args['Content.hidden.regular'], - wide: args['Content.hidden.wide'] + wide: args['Content.hidden.wide'], }} > @@ -336,7 +336,7 @@ const Template: Story = args => ( position={{ narrow: args['Pane.position.narrow'], regular: args['Pane.position.regular'], - wide: args['Pane.position.wide'] + wide: args['Pane.position.wide'], }} width={args['Pane.width']} sticky={args['Pane.sticky']} @@ -344,12 +344,12 @@ const Template: Story = args => ( divider={{ narrow: args['Pane.divider.narrow'], regular: args['Pane.divider.regular'], - wide: args['Pane.divider.wide'] + wide: args['Pane.divider.wide'], }} hidden={{ narrow: args['Pane.hidden.narrow'], regular: args['Pane.hidden.regular'], - wide: args['Pane.hidden.wide'] + wide: args['Pane.hidden.wide'], }} > @@ -361,12 +361,12 @@ const Template: Story = args => ( divider={{ narrow: args['Footer.divider.narrow'], regular: args['Footer.divider.regular'], - wide: args['Footer.divider.wide'] + wide: args['Footer.divider.wide'], }} hidden={{ narrow: args['Footer.hidden.narrow'], regular: args['Footer.hidden.regular'], - wide: args['Footer.hidden.wide'] + wide: args['Footer.hidden.wide'], }} > @@ -402,7 +402,7 @@ export const SettingsPage = () => ( display: 'flex', alignItems: 'center', justifyContent: 'space-between', - gap: 3 + gap: 3, }} > diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx index 171c490b8bd..b2b18058ce6 100644 --- a/src/SplitPageLayout/SplitPageLayout.test.tsx +++ b/src/SplitPageLayout/SplitPageLayout.test.tsx @@ -25,7 +25,7 @@ describe('SplitPageLayout', () => { Pane Footer - + , ) expect(container).toMatchSnapshot() }) diff --git a/src/SplitPageLayout/SplitPageLayout.tsx b/src/SplitPageLayout/SplitPageLayout.tsx index 8dc7f1caeb6..5a8fd845bde 100644 --- a/src/SplitPageLayout/SplitPageLayout.tsx +++ b/src/SplitPageLayout/SplitPageLayout.tsx @@ -5,7 +5,7 @@ import { PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, - PageLayoutPaneProps + PageLayoutPaneProps, } from '../PageLayout' // ---------------------------------------------------------------------------- @@ -87,5 +87,5 @@ export const SplitPageLayout = Object.assign(Root, { Header, Content, Pane, - Footer + Footer, }) diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx index 690e2ed4488..9fbd994ed13 100644 --- a/src/StateLabel.tsx +++ b/src/StateLabel.tsx @@ -5,7 +5,7 @@ import { SkipIcon, IssueDraftIcon, IssueOpenedIcon, - QuestionIcon + QuestionIcon, } from '@primer/octicons-react' import React from 'react' import styled from 'styled-components' @@ -23,7 +23,7 @@ const octiconMap = { pullClosed: GitPullRequestIcon, pullMerged: GitMergeIcon, draft: GitPullRequestIcon, - issueDraft: IssueDraftIcon + issueDraft: IssueDraftIcon, } const colorVariants = variant({ @@ -31,37 +31,37 @@ const colorVariants = variant({ variants: { issueClosed: { backgroundColor: 'done.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, issueClosedNotPlanned: { backgroundColor: 'neutral.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, pullClosed: { backgroundColor: 'danger.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, pullMerged: { backgroundColor: 'done.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, issueOpened: { backgroundColor: 'success.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, pullOpened: { backgroundColor: 'success.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, draft: { backgroundColor: 'neutral.emphasis', - color: 'fg.onEmphasis' + color: 'fg.onEmphasis', }, issueDraft: { backgroundColor: 'neutral.emphasis', - color: 'fg.onEmphasis' - } - } + color: 'fg.onEmphasis', + }, + }, }) const sizeVariants = variant({ @@ -70,14 +70,14 @@ const sizeVariants = variant({ small: { paddingX: 2, paddingY: 1, - fontSize: 0 + fontSize: 0, }, normal: { paddingX: '12px', paddingY: 2, - fontSize: 1 - } - } + fontSize: 1, + }, + }, }) type StyledStateLabelBaseProps = { @@ -112,7 +112,7 @@ function StateLabel({children, status, variant: variantProp, ...rest}: StateLabe } StateLabel.defaultProps = { - variant: 'normal' + variant: 'normal', } export default StateLabel diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon.tsx index f508ec26e71..826fc7f44e9 100644 --- a/src/StyledOcticon.tsx +++ b/src/StyledOcticon.tsx @@ -15,7 +15,7 @@ const StyledOcticon = styled(Octicon)` ` StyledOcticon.defaultProps = { - size: 16 + size: 16, } export type StyledOcticonProps = ComponentProps diff --git a/src/SubNav.tsx b/src/SubNav.tsx index b21f46d362e..7c38bbc2c53 100644 --- a/src/SubNav.tsx +++ b/src/SubNav.tsx @@ -64,7 +64,7 @@ type StyledSubNavLinkProps = { const SubNavLink = styled.a.attrs(props => ({ activeClassName: typeof props.to === 'string' ? 'selected' : '', - className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className) + className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className), }))` padding-left: ${get('space.3')}; padding-right: ${get('space.3')}; diff --git a/src/TabNav.tsx b/src/TabNav.tsx index 78e5d785f39..79b859d2518 100644 --- a/src/TabNav.tsx +++ b/src/TabNav.tsx @@ -42,7 +42,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) { const customStrategy = React.useCallback(() => { if (customContainerRef.current) { const tabs = Array.from( - customContainerRef.current.querySelectorAll('[role=tab][aria-selected=true]') + customContainerRef.current.querySelectorAll('[role=tab][aria-selected=true]'), ) setInitialFocus(true) return tabs[0] @@ -54,9 +54,9 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) { bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd, focusOutBehavior: 'wrap', focusInStrategy: initialFocus ? 'previous' : customStrategy, - focusableElementFilter: element => element.getAttribute('role') === 'tab' + focusableElementFilter: element => element.getAttribute('role') === 'tab', }, - [initialFocus] + [initialFocus], ) return ( }> @@ -77,7 +77,7 @@ const TabNavLink = styled.a.attrs(props => ({ className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className), role: 'tab', 'aria-selected': !!props.selected, - tabIndex: -1 + tabIndex: -1, }))` padding: 8px 12px; font-size: ${get('fontSizes.1')}; diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 02bf944d3b3..d3fd02288ea 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -78,7 +78,7 @@ const TextInput = React.forwardRef( // end deprecated props ...inputProps }, - ref + ref, ) => { const [isInputFocused, setIsInputFocused] = useState(false) const inputRef = useProvidedRefOrCreate(ref as React.RefObject) @@ -96,14 +96,14 @@ const TextInput = React.forwardRef( setIsInputFocused(true) onFocus && onFocus(e) }, - [onFocus] + [onFocus], ) const handleInputBlur = useCallback( e => { setIsInputFocused(false) onBlur && onBlur(e) }, - [onBlur] + [onBlur], ) return ( @@ -154,16 +154,16 @@ const TextInput = React.forwardRef( {trailingAction} ) - } + }, ) as PolymorphicForwardRefComponent<'input', TextInputProps> TextInput.defaultProps = { type: 'text', - loaderPosition: 'auto' + loaderPosition: 'auto', } TextInput.displayName = 'TextInput' export default Object.assign(TextInput, { - Action: TextInputAction + Action: TextInputAction, }) diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index 6cac39ff3b5..59d582a9861 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -61,7 +61,7 @@ const overflowCountFontSizeMap: Record = { medium: 1, large: 1, extralarge: 2, - xlarge: 2 // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md + xlarge: 2, // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md } // using forwardRef is important so that other components (ex. Autocomplete) can use the ref @@ -92,7 +92,7 @@ function TextInputWithTokensInnerComponent, - forwardedRef: React.ForwardedRef + forwardedRef: React.ForwardedRef, ) { const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = omit(rest) const ref = useRef(null) @@ -126,9 +126,9 @@ function TextInputWithTokensInnerComponent { @@ -241,7 +241,7 @@ function TextInputWithTokensInnerComponent {IconComponent && !LeadingVisual && } @@ -310,14 +310,14 @@ function TextInputWithTokensInnerComponent *': { flexShrink: 0, marginLeft: '0.25rem', - marginBottom: '0.25rem' - } + marginBottom: '0.25rem', + }, }} > ( block, ...rest }: TextareaProps, - ref + ref, ): ReactElement => { return ( @@ -93,7 +93,7 @@ const Textarea = React.forwardRef( /> ) - } + }, ) Textarea.displayName = 'Textarea' diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx index b290c4af335..6082e335d27 100644 --- a/src/ThemeProvider.tsx +++ b/src/ThemeProvider.tsx @@ -34,7 +34,7 @@ const ThemeContext = React.createContext<{ }>({ setColorMode: () => null, setDayScheme: () => null, - setNightScheme: () => null + setNightScheme: () => null, }) // inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts @@ -54,7 +54,7 @@ export const ThemeProvider: React.FC theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, - nightScheme: fallbackNightScheme + nightScheme: fallbackNightScheme, } = useTheme() // Initialize state @@ -71,7 +71,7 @@ export const ThemeProvider: React.FC const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme) const {resolvedTheme, resolvedColorScheme} = React.useMemo( () => applyColorScheme(theme, colorScheme), - [theme, colorScheme] + [theme, colorScheme], ) // this effect will only run on client @@ -93,7 +93,7 @@ export const ThemeProvider: React.FC resolvedColorModePassthrough.current = null } }, - [colorMode, systemColorMode] + [colorMode, systemColorMode], ) // Update state if props change @@ -121,7 +121,7 @@ export const ThemeProvider: React.FC nightScheme, setColorMode, setDayScheme, - setNightScheme + setNightScheme, }} > @@ -212,12 +212,12 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme: function applyColorScheme( theme: Theme, - colorScheme: string + colorScheme: string, ): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} { if (!theme.colorSchemes) { return { resolvedTheme: theme, - resolvedColorScheme: undefined + resolvedColorScheme: undefined, } } @@ -229,13 +229,13 @@ function applyColorScheme( const defaultColorScheme = Object.keys(theme.colorSchemes)[0] return { resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]), - resolvedColorScheme: defaultColorScheme + resolvedColorScheme: defaultColorScheme, } } return { resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]), - resolvedColorScheme: colorScheme + resolvedColorScheme: colorScheme, } } diff --git a/src/Timeline.tsx b/src/Timeline.tsx index 9236456a1b7..48f79627244 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -27,7 +27,7 @@ const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>` type StyledTimelineItemProps = {condensed?: boolean} & SxProp const TimelineItem = styled.div.attrs(props => ({ - className: classnames('Timeline-Item', props.className) + className: classnames('Timeline-Item', props.className), }))` display: flex; position: relative; @@ -136,5 +136,5 @@ export default Object.assign(Timeline, { Item: TimelineItem, Badge: TimelineBadge, Body: TimelineBody, - Break: TimelineBreak + Break: TimelineBreak, }) diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx index 4aca0e59a6b..53e4c025f69 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch.tsx @@ -42,9 +42,9 @@ const sizeVariants = variant({ variants: { small: { height: '24px', - width: '48px' - } - } + width: '48px', + }, + }, }) type SwitchButtonProps = { @@ -208,7 +208,7 @@ const ToggleKnob = styled.div<{checked?: boolean; disabled?: boolean}>` const hiddenTextStyles: BetterSystemStyleObject = { visibility: 'hidden', - height: 0 + height: 0, } const Switch: React.FC> = ({ @@ -222,7 +222,7 @@ const Switch: React.FC> = ({ onClick, size, statusLabelPosition, - sx: sxProp + sx: sxProp, }) => { const isControlled = typeof checked !== 'undefined' const [isOn, setIsOn] = useProvidedStateOrCreate(checked, onChange, Boolean(defaultChecked)) @@ -234,7 +234,7 @@ const Switch: React.FC> = ({ } onClick && onClick(e) }, - [onClick, isControlled, isOn, setIsOn] + [onClick, isControlled, isOn, setIsOn], ) useEffect(() => { @@ -287,7 +287,7 @@ const Switch: React.FC> = ({ sx={{ transform: `translateX(${isOn ? '0' : '-100%'})`, transitionProperty: 'transform', - transitionDuration: TRANSITION_DURATION + transitionDuration: TRANSITION_DURATION, }} > @@ -301,7 +301,7 @@ const Switch: React.FC> = ({ sx={{ transform: `translateX(${isOn ? '100%' : '0'})`, transitionProperty: 'transform', - transitionDuration: TRANSITION_DURATION + transitionDuration: TRANSITION_DURATION, }} > @@ -315,7 +315,7 @@ const Switch: React.FC> = ({ Switch.defaultProps = { statusLabelPosition: 'start', - size: 'medium' + size: 'medium', } export default Switch diff --git a/src/Token/AvatarToken.tsx b/src/Token/AvatarToken.tsx index 6dd1532922b..56be7184ec8 100644 --- a/src/Token/AvatarToken.tsx +++ b/src/Token/AvatarToken.tsx @@ -30,7 +30,7 @@ const AvatarToken = forwardRef(({avatarSrc, id, s size={parseInt(tokenSizes[size || defaultTokenSize], 10)} sx={{ width: '100%', - height: '100%' + height: '100%', }} /> @@ -38,7 +38,7 @@ const AvatarToken = forwardRef(({avatarSrc, id, s size={size} id={id?.toString()} sx={{ - paddingLeft: get('space.1') + paddingLeft: get('space.1'), }} {...rest} ref={forwardedRef} @@ -47,7 +47,7 @@ const AvatarToken = forwardRef(({avatarSrc, id, s }) AvatarToken.defaultProps = { - size: defaultTokenSize + size: defaultTokenSize, } AvatarToken.displayName = 'AvatarToken' diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index 7082583b0cd..d9556941531 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -23,7 +23,7 @@ const lightModeStyles = { color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))', borderWidth: tokenBorderWidthPx, borderStyle: 'solid', - borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))' + borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))', } const darkModeStyles = { @@ -36,7 +36,7 @@ const darkModeStyles = { background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))', color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))', borderColor: - 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))' + 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))', } const IssueLabelToken = forwardRef((props, forwardedRef) => { @@ -44,7 +44,7 @@ const IssueLabelToken = forwardRef((props, fo const interactiveTokenProps = { as, href, - onClick + onClick, } const {colorScheme} = useTheme() const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton @@ -78,7 +78,7 @@ const IssueLabelToken = forwardRef((props, fo ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' : darkModeStyles.background, ':focus': { - outline: 'none' + outline: 'none', }, ':after': { content: '""', @@ -95,10 +95,10 @@ const IssueLabelToken = forwardRef((props, fo ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' }`, - borderRadius: '999px' - } + borderRadius: '999px', + }, } - : {}) + : {}), } }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]) @@ -126,7 +126,7 @@ const IssueLabelToken = forwardRef((props, fo hasMultipleActionTargets ? { position: 'relative', - zIndex: '1' + zIndex: '1', } : {} } @@ -138,7 +138,7 @@ const IssueLabelToken = forwardRef((props, fo IssueLabelToken.defaultProps = { fillColor: '#999', - size: defaultTokenSize + size: defaultTokenSize, } IssueLabelToken.displayName = 'IssueLabelToken' diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index e9866969a3e..4305a5fe033 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -20,7 +20,7 @@ const LeadingVisualContainer: React.FC {children} @@ -50,7 +50,7 @@ const Token = forwardRef ) - } + }, ) Token.displayName = 'Token' Token.defaultProps = { - size: defaultTokenSize + size: defaultTokenSize, } export default Token diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx index 0e9b5013f06..8f8b3369959 100644 --- a/src/Token/TokenBase.tsx +++ b/src/Token/TokenBase.tsx @@ -16,7 +16,7 @@ export const tokenSizes: Record = { medium: '20px', large: '24px', extralarge: xlargeSize, - xlarge: xlargeSize + xlarge: xlargeSize, } export const defaultTokenSize: TokenSizeKeys = 'medium' @@ -56,7 +56,7 @@ export const isTokenInteractive = ({ as = 'span', onClick, onFocus, - tabIndex = -1 + tabIndex = -1, }: Pick) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as)) @@ -67,7 +67,7 @@ const xlargeVariantStyles = { paddingLeft: 3, paddingRight: 3, paddingTop: 0, - paddingBottom: 0 + paddingBottom: 0, } const variants = variant< @@ -94,7 +94,7 @@ const variants = variant< // need to explicitly set padding top and bottom to "0" to override default ` + , ) const button = container.getByRole('button') expect(button.hasAttribute('disabled')).toEqual(true) @@ -58,7 +58,7 @@ describe('Button', () => { const container = render( + , ) const button = container.getByRole('button') expect(button).toHaveStyleRule('font-size', '20px') diff --git a/src/__tests__/Button.types.test.tsx b/src/__tests__/Button.types.test.tsx index 22d0cceaf66..5509e866d18 100644 --- a/src/__tests__/Button.types.test.tsx +++ b/src/__tests__/Button.types.test.tsx @@ -21,7 +21,7 @@ export function ShouldAcceptKnownButtonPropsAndDomProps() { buttonEl.current = e.currentTarget }} sx={{ - m: 1 + m: 1, }} > Child diff --git a/src/__tests__/Caret.test.tsx b/src/__tests__/Caret.test.tsx index 6b2bc9ee6b9..c09e8829de5 100644 --- a/src/__tests__/Caret.test.tsx +++ b/src/__tests__/Caret.test.tsx @@ -12,7 +12,7 @@ describe('Caret', () => { }) checkExports('Caret', { - default: Caret + default: Caret, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/Checkbox.test.tsx b/src/__tests__/Checkbox.test.tsx index 339f0d48f95..1c030e06248 100644 --- a/src/__tests__/Checkbox.test.tsx +++ b/src/__tests__/Checkbox.test.tsx @@ -14,7 +14,7 @@ describe('Checkbox', () => { behavesAsComponent({Component: Checkbox}) checkExports('Checkbox', { - default: Checkbox + default: Checkbox, }) it('renders a valid checkbox input', () => { diff --git a/src/__tests__/CheckboxGroup.test.tsx b/src/__tests__/CheckboxGroup.test.tsx index 36826e8e2cd..05c8c4923e4 100644 --- a/src/__tests__/CheckboxGroup.test.tsx +++ b/src/__tests__/CheckboxGroup.test.tsx @@ -36,11 +36,11 @@ describe('CheckboxGroup', () => { - ) + ), }) checkExports('CheckboxGroup', { default: CheckboxGroup, - CheckboxGroupContext + CheckboxGroupContext, }) it('renders a disabled group of inputs', () => { const {getAllByRole, getByRole} = render( @@ -58,7 +58,7 @@ describe('CheckboxGroup', () => { Choice three - + , ) const checkboxInputs = getAllByRole('checkbox') as HTMLInputElement[] const fieldset = getByRole('group') as HTMLFieldSetElement @@ -85,7 +85,7 @@ describe('CheckboxGroup', () => { Choice three - + , ) const requiredIndicator = getByTitle('required field') @@ -110,7 +110,7 @@ describe('CheckboxGroup', () => { Choice three - + , ) const checkbox = getByLabelText('Choice one') as HTMLInputElement @@ -138,7 +138,7 @@ describe('CheckboxGroup', () => { Choice three - + , ) const checkbox = getByLabelText('Choice one') as HTMLInputElement @@ -149,18 +149,18 @@ describe('CheckboxGroup', () => { ['two', 'one'], expect.objectContaining({ target: expect.objectContaining({ - value: 'one' - }) - }) + value: 'one', + }), + }), ) await user.click(checkbox) expect(handleParentChange).toHaveBeenCalledWith( ['two'], expect.objectContaining({ target: expect.objectContaining({ - value: 'one' - }) - }) + value: 'one', + }), + }), ) }) }) diff --git a/src/__tests__/CheckboxOrRadioGroup.test.tsx b/src/__tests__/CheckboxOrRadioGroup.test.tsx index 59e91a901dd..10fa9583a99 100644 --- a/src/__tests__/CheckboxOrRadioGroup.test.tsx +++ b/src/__tests__/CheckboxOrRadioGroup.test.tsx @@ -37,10 +37,10 @@ describe('CheckboxOrRadioGroup', () => { - ) + ), }) checkExports('_CheckboxOrRadioGroup', { - default: CheckboxOrRadioGroup + default: CheckboxOrRadioGroup, }) it('renders a group of inputs with a caption in the ', () => { render( @@ -59,7 +59,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) const legend = document.getElementsByTagName('legend')[0] const caption = within(legend).getByText('Caption text') @@ -84,7 +84,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three Validation text - + , ) const legend = document.getElementsByTagName('legend')[0] const validationMsg = within(legend).getByText('Validation text') @@ -107,7 +107,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) const legend = getByText(INPUT_GROUP_LABEL) @@ -129,7 +129,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) expect(getByRole('group', {name: INPUT_GROUP_LABEL})).toBeTruthy() @@ -153,7 +153,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) const fieldset = getByLabelText(INPUT_GROUP_LABEL) @@ -176,7 +176,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) expect(consoleSpy).toHaveBeenCalled() @@ -199,7 +199,7 @@ describe('CheckboxOrRadioGroup', () => { Choice three - + , ) expect(consoleSpy).toHaveBeenCalled() diff --git a/src/__tests__/CircleBadge.test.tsx b/src/__tests__/CircleBadge.test.tsx index c15ab105c27..2a77f05fc1b 100644 --- a/src/__tests__/CircleBadge.test.tsx +++ b/src/__tests__/CircleBadge.test.tsx @@ -10,17 +10,17 @@ const imgInput = describe('CircleBadge', () => { behavesAsComponent({ Component: CircleBadge, - toRender: () => {imgInput} + toRender: () => {imgInput}, }) checkExports('CircleBadge', { - default: CircleBadge + default: CircleBadge, }) describe('CircleBadge.Icon', () => { behavesAsComponent({ Component: CircleBadge.Icon, - toRender: () => + toRender: () => , }) }) @@ -47,8 +47,8 @@ describe('CircleBadge', () => { render( {imgInput} - - ).props['title'] + , + ).props['title'], ).toEqual('primer logo') }) @@ -56,7 +56,7 @@ describe('CircleBadge', () => { const {getByRole} = HTMLRender( - + , ) expect(getByRole('img')).toHaveClass('primer') }) diff --git a/src/__tests__/CircleOcticon.test.tsx b/src/__tests__/CircleOcticon.test.tsx index 2c989b122bd..f4a898999a1 100644 --- a/src/__tests__/CircleOcticon.test.tsx +++ b/src/__tests__/CircleOcticon.test.tsx @@ -11,11 +11,11 @@ expect.extend(toHaveNoViolations) describe('CircleOcticon', () => { behavesAsComponent({ Component: CircleOcticon, - toRender: () => + toRender: () => , }) checkExports('CircleOcticon', { - default: CircleOcticon + default: CircleOcticon, }) it('renders a
with width and height', () => { @@ -37,7 +37,7 @@ describe('CircleOcticon', () => { it('respects the bg prop', () => { expect(render()).toHaveStyleRule( 'background-color', - theme.colorSchemes.light.colors.danger?.subtle + theme.colorSchemes.light.colors.danger?.subtle, ) }) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index 153d6d401ee..bdec3c7030b 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -51,7 +51,7 @@ const ShorthandHookFromActionMenu = () => { title: 'Confirm', content: 'Confirm', cancelButtonContent: 'Secondary', - confirmButtonContent: 'Primary' + confirmButtonContent: 'Primary', }) ) { setText('Confirmed') @@ -77,13 +77,13 @@ describe('ConfirmationDialog', () => { behavesAsComponent({ Component: ConfirmationDialog, toRender: () => , - options: {skipAs: true, skipSx: true} + options: {skipAs: true, skipSx: true}, }) checkExports('Dialog/ConfirmationDialog', { default: undefined, useConfirm, - ConfirmationDialog + ConfirmationDialog, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/CounterLabel.test.tsx b/src/__tests__/CounterLabel.test.tsx index f5502d4c62d..66147bac3e0 100644 --- a/src/__tests__/CounterLabel.test.tsx +++ b/src/__tests__/CounterLabel.test.tsx @@ -10,7 +10,7 @@ describe('CounterLabel', () => { behavesAsComponent({Component: CounterLabel, options: {skipAs: true, skipSx: true}}) checkExports('CounterLabel', { - default: CounterLabel + default: CounterLabel, }) it('renders a ', () => { diff --git a/src/__tests__/Details.test.tsx b/src/__tests__/Details.test.tsx index e390f7ca991..76792b62b79 100644 --- a/src/__tests__/Details.test.tsx +++ b/src/__tests__/Details.test.tsx @@ -11,7 +11,7 @@ describe('Details', () => { behavesAsComponent({Component: Details}) checkExports('Details', { - default: Details + default: Details, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/Dialog.test.tsx b/src/__tests__/Dialog.test.tsx index 2b4d25b797b..df5f8dc02a8 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/__tests__/Dialog.test.tsx @@ -75,11 +75,11 @@ describe('Dialog', () => { behavesAsComponent({ Component: Dialog, toRender: () => comp, - options: {skipAs: true, skipSx: true} + options: {skipAs: true, skipSx: true}, }) checkExports('Dialog', { - default: Dialog + default: Dialog, }) describe('Dialog.Header', () => { diff --git a/src/__tests__/Dropdown.test.tsx b/src/__tests__/Dropdown.test.tsx index 56182631bf3..08af8c9fa43 100644 --- a/src/__tests__/Dropdown.test.tsx +++ b/src/__tests__/Dropdown.test.tsx @@ -10,7 +10,7 @@ describe('Dropdown', () => { behavesAsComponent({Component: Dropdown, toRender: () => Hello!}) checkExports('deprecated/Dropdown', { - default: Dropdown + default: Dropdown, }) it('should have no axe violations', async () => { @@ -23,14 +23,14 @@ describe('Dropdown', () => { describe('Dropdown.Item', () => { behavesAsComponent({ Component: Dropdown.Item, - toRender: () => Hello! + toRender: () => Hello!, }) }) describe('Dropdown.Button', () => { behavesAsComponent({ Component: Dropdown.Button, - toRender: () => Hello! + toRender: () => Hello!, }) }) @@ -47,6 +47,6 @@ describe('Dropdown.Menu', () => {
  • 2
  • 3
    • - ) + ), }) }) diff --git a/src/__tests__/FilterList.test.tsx b/src/__tests__/FilterList.test.tsx index ea4dcaa42ff..ceef639d4d1 100644 --- a/src/__tests__/FilterList.test.tsx +++ b/src/__tests__/FilterList.test.tsx @@ -10,7 +10,7 @@ describe('FilterList', () => { behavesAsComponent({Component: FilterList}) checkExports('FilterList', { - default: FilterList + default: FilterList, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/FilteredSearch.test.tsx b/src/__tests__/FilteredSearch.test.tsx index 28a73af0e48..db5fb8f8f4c 100644 --- a/src/__tests__/FilteredSearch.test.tsx +++ b/src/__tests__/FilteredSearch.test.tsx @@ -10,7 +10,7 @@ describe('FilteredSearch', () => { behavesAsComponent({Component: FilteredSearch}) checkExports('FilteredSearch', { - default: FilteredSearch + default: FilteredSearch, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/Flash.test.tsx b/src/__tests__/Flash.test.tsx index 113de6fce4c..6e40f49e144 100644 --- a/src/__tests__/Flash.test.tsx +++ b/src/__tests__/Flash.test.tsx @@ -11,7 +11,7 @@ describe('Flash', () => { behavesAsComponent({Component: Flash}) checkExports('Flash', { - default: Flash + default: Flash, }) it('should have no axe violations', async () => { @@ -29,15 +29,15 @@ describe('Flash', () => { it('respects the "variant" prop', () => { expect(render()).toHaveStyleRule( 'background-color', - theme.colorSchemes.light.colors.attention?.subtle + theme.colorSchemes.light.colors.attention?.subtle, ) expect(render()).toHaveStyleRule( 'background-color', - theme.colorSchemes.light.colors.danger?.subtle + theme.colorSchemes.light.colors.danger?.subtle, ) expect(render()).toHaveStyleRule( 'background-color', - theme.colorSchemes.light.colors.success?.subtle + theme.colorSchemes.light.colors.success?.subtle, ) expect(render()).toHaveStyleRule('background-color', theme.colorSchemes.light.colors.accent?.subtle) }) diff --git a/src/__tests__/Flex.test.tsx b/src/__tests__/Flex.test.tsx index 1303cc08b0f..750eeb44c89 100644 --- a/src/__tests__/Flex.test.tsx +++ b/src/__tests__/Flex.test.tsx @@ -10,7 +10,7 @@ describe('Flex', () => { behavesAsComponent({Component: Flex}) checkExports('deprecated/Flex', { - default: Flex + default: Flex, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/FormControl.test.tsx b/src/__tests__/FormControl.test.tsx index 5e8f864407d..010efcaa389 100644 --- a/src/__tests__/FormControl.test.tsx +++ b/src/__tests__/FormControl.test.tsx @@ -31,7 +31,7 @@ describe('FormControl', () => { {LABEL_TEXT} - + , ) const input = getByLabelText(LABEL_TEXT) @@ -47,7 +47,7 @@ describe('FormControl', () => { {LABEL_TEXT} - + , ) const input = getByLabelText(LABEL_TEXT) @@ -61,7 +61,7 @@ describe('FormControl', () => { {LABEL_TEXT} - + , ) const input = getByLabelText(LABEL_TEXT) @@ -75,7 +75,7 @@ describe('FormControl', () => { {LABEL_TEXT} - + , ) const input = getByRole('textbox') @@ -90,7 +90,7 @@ describe('FormControl', () => { {CAPTION_TEXT} - + , ) const caption = getByText(CAPTION_TEXT) @@ -105,7 +105,7 @@ describe('FormControl', () => { {ERROR_TEXT} - + , ) const validationMessage = getByText(ERROR_TEXT) @@ -120,7 +120,7 @@ describe('FormControl', () => { {ERROR_TEXT} - + , ) const validationMessage = getByText(ERROR_TEXT) @@ -137,12 +137,12 @@ describe('FormControl', () => { tokens={[ {text: 'zero', id: 0}, {text: 'one', id: 1}, - {text: 'two', id: 2} + {text: 'two', id: 2}, ]} onTokenRemove={onRemoveMock} /> - + , ) const input = getByLabelText(LABEL_TEXT) @@ -158,7 +158,7 @@ describe('FormControl', () => { - + , ) const input = getByLabelText(LABEL_TEXT) @@ -176,7 +176,7 @@ describe('FormControl', () => { Choice three - + , ) const input = getByLabelText(LABEL_TEXT) @@ -192,7 +192,7 @@ describe('FormControl', () => { {LABEL_TEXT}