From de20f0e6e674419f1d74ed0c8e4b93c9061159a4 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 13:25:23 -0500 Subject: [PATCH 01/24] refactor(Autocomplete): moved story --- src/{stories => Autocomplete}/Autocomplete.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/{stories => Autocomplete}/Autocomplete.stories.tsx (99%) diff --git a/src/stories/Autocomplete.stories.tsx b/src/Autocomplete/Autocomplete.stories.tsx similarity index 99% rename from src/stories/Autocomplete.stories.tsx rename to src/Autocomplete/Autocomplete.stories.tsx index c294cce3951..a1ba9b7e6bf 100644 --- a/src/stories/Autocomplete.stories.tsx +++ b/src/Autocomplete/Autocomplete.stories.tsx @@ -3,7 +3,7 @@ import {Meta} from '@storybook/react' import {BaseStyles, Box, ThemeProvider} from '..' import TextInputTokens from '../TextInputWithTokens' -import Autocomplete from '../Autocomplete/Autocomplete' +import Autocomplete from './Autocomplete' import {AnchoredOverlay} from '../AnchoredOverlay' import FormControl from '../FormControl' import {Button} from '../Button' From df8c56ce14f88ef6c51ef1a370d5158d65f79dc7 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 13:28:14 -0500 Subject: [PATCH 02/24] test: update snapshot --- src/__tests__/__snapshots__/RelativeTime.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap index b1d5b1f082e..7d295b98ff2 100644 --- a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap +++ b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap @@ -2,6 +2,7 @@ exports[`RelativeTime renders consistently 1`] = ` `; From 1c7f885bcbce776171fe941cba366b33e2de1653 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 13:28:32 -0500 Subject: [PATCH 03/24] refactor(ActionMenu): part 1 --- src/{ => ActionMenu}/ActionMenu.docs.json | 0 src/{stories => }/ActionMenu/examples.stories.tsx | 2 +- src/{stories => }/ActionMenu/fixtures.stories.tsx | 2 +- src/ActionMenu/index.ts | 0 src/__tests__/ActionMenu.test.tsx | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/{ => ActionMenu}/ActionMenu.docs.json (100%) rename src/{stories => }/ActionMenu/examples.stories.tsx (99%) rename src/{stories => }/ActionMenu/fixtures.stories.tsx (99%) create mode 100644 src/ActionMenu/index.ts diff --git a/src/ActionMenu.docs.json b/src/ActionMenu/ActionMenu.docs.json similarity index 100% rename from src/ActionMenu.docs.json rename to src/ActionMenu/ActionMenu.docs.json diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/ActionMenu/examples.stories.tsx similarity index 99% rename from src/stories/ActionMenu/examples.stories.tsx rename to src/ActionMenu/examples.stories.tsx index 7cd400623cc..7a9cb4c6d3d 100644 --- a/src/stories/ActionMenu/examples.stories.tsx +++ b/src/ActionMenu/examples.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Meta} from '@storybook/react' -import {ThemeProvider, BaseStyles, Box, Text, Avatar, ActionMenu, ActionList} from '../..' +import {ThemeProvider, BaseStyles, Box, Text, Avatar, ActionMenu, ActionList} from '..' import { GearIcon, MilestoneIcon, diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/ActionMenu/fixtures.stories.tsx similarity index 99% rename from src/stories/ActionMenu/fixtures.stories.tsx rename to src/ActionMenu/fixtures.stories.tsx index f40e78a9714..df62b075f12 100644 --- a/src/stories/ActionMenu/fixtures.stories.tsx +++ b/src/ActionMenu/fixtures.stories.tsx @@ -13,7 +13,7 @@ import { Button, IconButton, AnchoredOverlay, -} from '../..' +} from '..' import { ServerIcon, PlusCircleIcon, diff --git a/src/ActionMenu/index.ts b/src/ActionMenu/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/__tests__/ActionMenu.test.tsx b/src/__tests__/ActionMenu.test.tsx index 6412b03bb5c..15c40e31d63 100644 --- a/src/__tests__/ActionMenu.test.tsx +++ b/src/__tests__/ActionMenu.test.tsx @@ -5,7 +5,7 @@ import React from 'react' import theme from '../theme' import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '..' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' -import {SingleSelection, MixedSelection} from '../stories/ActionMenu/examples.stories' +import {SingleSelection, MixedSelection} from '../ActionMenu/examples.stories' expect.extend(toHaveNoViolations) function Example(): JSX.Element { From 080d0cfb4474e1de30cb270ac5c238b626a2b813 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 13:45:18 -0500 Subject: [PATCH 04/24] refactor(ActionMenu): collect files --- src/{ => ActionMenu}/ActionMenu.tsx | 18 +++++++++--------- src/ActionMenu/examples.stories.tsx | 3 ++- src/ActionMenu/index.ts | 3 +++ src/SegmentedControl/SegmentedControl.tsx | 2 +- src/__tests__/ActionMenu.test.tsx | 4 ++-- src/hooks/useMenuKeyboardNavigation.ts | 2 +- src/index.ts | 4 ++-- src/stories/ConfirmationDialog.stories.tsx | 2 +- 8 files changed, 21 insertions(+), 17 deletions(-) rename src/{ => ActionMenu}/ActionMenu.tsx (91%) diff --git a/src/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx similarity index 91% rename from src/ActionMenu.tsx rename to src/ActionMenu/ActionMenu.tsx index bcf1179eb87..14cf4437635 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu/ActionMenu.tsx @@ -1,14 +1,14 @@ import React from 'react' import {TriangleDownIcon} from '@primer/octicons-react' -import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay' -import {OverlayProps} from './Overlay' -import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from './hooks' -import {Divider} from './ActionList/Divider' -import {ActionListContainerContext} from './ActionList/ActionListContainerContext' -import {Button, ButtonProps} from './Button' -import {useId} from './hooks/useId' -import {MandateProps} from './utils/types' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay' +import {OverlayProps} from '../Overlay' +import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from '../hooks' +import {Divider} from '../ActionList/Divider' +import {ActionListContainerContext} from '../ActionList/ActionListContainerContext' +import {Button, ButtonProps} from '../Button' +import {useId} from '../hooks/useId' +import {MandateProps} from '../utils/types' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' export type MenuContextProps = Pick< AnchoredOverlayProps, diff --git a/src/ActionMenu/examples.stories.tsx b/src/ActionMenu/examples.stories.tsx index 7a9cb4c6d3d..eec388be646 100644 --- a/src/ActionMenu/examples.stories.tsx +++ b/src/ActionMenu/examples.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {ThemeProvider, BaseStyles, Box, Text, Avatar, ActionMenu, ActionList} from '..' +import {ActionMenu} from '.' +import {ThemeProvider, BaseStyles, Box, Text, Avatar, ActionList} from '..' import { GearIcon, MilestoneIcon, diff --git a/src/ActionMenu/index.ts b/src/ActionMenu/index.ts index e69de29bb2d..d94155454a9 100644 --- a/src/ActionMenu/index.ts +++ b/src/ActionMenu/index.ts @@ -0,0 +1,3 @@ +import {ActionMenu, MenuContextProps, ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu' + +export {ActionMenu, MenuContextProps, ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index c22d3d2cd4f..c1c842b27df 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -2,7 +2,7 @@ import React, {useRef, useState} from 'react' import Button, {SegmentedControlButtonProps} from './SegmentedControlButton' import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './SegmentedControlIconButton' import {ActionList} from '../ActionList' -import {ActionMenu} from '../ActionMenu' +import {ActionMenu} from '../ActionMenu/ActionMenu' import {useTheme} from '../ThemeProvider' import sx, {merge, SxProp} from '../sx' import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' diff --git a/src/__tests__/ActionMenu.test.tsx b/src/__tests__/ActionMenu.test.tsx index 15c40e31d63..2d02219d04c 100644 --- a/src/__tests__/ActionMenu.test.tsx +++ b/src/__tests__/ActionMenu.test.tsx @@ -241,6 +241,6 @@ describe('ActionMenu', () => { expect(results).toHaveNoViolations() }) - checkStoriesForAxeViolations('ActionMenu/fixtures') - checkStoriesForAxeViolations('ActionMenu/examples') + checkStoriesForAxeViolations('fixtures', '../ActionMenu/') + checkStoriesForAxeViolations('examples', '../ActionMenu/') }) diff --git a/src/hooks/useMenuKeyboardNavigation.ts b/src/hooks/useMenuKeyboardNavigation.ts index 7b8f5b459bd..a438dca1c8d 100644 --- a/src/hooks/useMenuKeyboardNavigation.ts +++ b/src/hooks/useMenuKeyboardNavigation.ts @@ -2,7 +2,7 @@ import React from 'react' import {iterateFocusableElements} from '@primer/behaviors/utils' import {useMenuInitialFocus} from './useMenuInitialFocus' import {useMnemonics} from './useMnemonics' -import {MenuContextProps} from '../ActionMenu' +import {MenuContextProps} from '../ActionMenu/ActionMenu' /** * Keyboard navigation is a mix of 4 hooks diff --git a/src/index.ts b/src/index.ts index 0506d9dcf49..4a07cd57b73 100644 --- a/src/index.ts +++ b/src/index.ts @@ -55,8 +55,8 @@ export type { ActionListLeadingVisualProps, ActionListTrailingVisualProps, } from './ActionList' -export {ActionMenu} from './ActionMenu' -export type {ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu' +export {ActionMenu} from './ActionMenu/ActionMenu' +export type {ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu/ActionMenu' export {AnchoredOverlay} from './AnchoredOverlay' export type {AnchoredOverlayProps} from './AnchoredOverlay' export {default as Autocomplete} from './Autocomplete' diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx index 6f5668a4b32..1f6e1f0c1c4 100644 --- a/src/stories/ConfirmationDialog.stories.tsx +++ b/src/stories/ConfirmationDialog.stories.tsx @@ -2,7 +2,7 @@ import React, {useState, useRef, useCallback} from 'react' import {Meta} from '@storybook/react' import {BaseStyles, Box, ThemeProvider, useTheme} from '..' import {Button} from '../Button' -import {ActionMenu} from '../ActionMenu' +import {ActionMenu} from '../ActionMenu/ActionMenu' import {ActionList} from '../ActionList' import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' From 587088c86ff25bd5cf3088746bf077af2ae3c8a4 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 14:12:56 -0500 Subject: [PATCH 05/24] refactor: moved private variables into folder --- src/Autocomplete/AutocompleteMenu.tsx | 2 +- src/AvatarStack/index.ts | 4 ++++ src/Button/types.ts | 2 +- src/Checkbox.tsx | 4 ++-- src/CounterLabel.tsx | 2 +- src/FormControl/FormControl.tsx | 2 +- src/FormControl/_FormControlCaption.tsx | 2 +- src/FormControl/_FormControlLabel.tsx | 2 +- src/FormControl/_FormControlValidation.tsx | 2 +- src/PageLayout/PageLayout.tsx | 2 +- src/Pagination/Pagination.tsx | 2 +- src/Radio.tsx | 4 ++-- src/Select.tsx | 8 ++++---- src/TabNav.tsx | 2 +- src/TextInput.tsx | 8 ++++---- src/TextInputWithTokens.tsx | 6 +++--- src/Textarea.tsx | 2 +- src/ToggleSwitch.tsx | 2 +- src/TreeView/TreeView.tsx | 2 +- src/UnderlineNav.tsx | 2 +- src/UnderlineNav2/UnderlineNav.tsx | 2 +- src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx | 4 ++-- src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx | 2 +- .../_CheckboxOrRadioGroupValidation.tsx | 2 +- src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx | 4 ++-- src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx | 2 +- src/deprecated/InputField/InputField.tsx | 4 ++-- src/deprecated/InputField/_InputFieldCaption.tsx | 2 +- src/deprecated/InputField/_InputFieldLabel.tsx | 2 +- src/drafts/MarkdownEditor/Label.tsx | 2 +- src/drafts/MarkdownEditor/MarkdownEditor.tsx | 2 +- src/{ => private}/_InputCaption.tsx | 4 ++-- src/{ => private}/_InputLabel.tsx | 4 ++-- src/{ => private}/_InputValidation.tsx | 8 ++++---- src/{ => private}/_TextInputInnerAction.tsx | 8 ++++---- src/{ => private}/_TextInputInnerVisualSlot.tsx | 6 +++--- src/{ => private}/_TextInputWrapper.tsx | 6 +++--- src/{ => private}/_UnstyledTextInput.tsx | 2 +- src/{ => private}/_ValidationAnimationContainer.tsx | 2 +- src/{ => private}/_VisuallyHidden.tsx | 2 +- src/{ => private}/_getGlobalFocusStyles.ts | 2 +- src/{ => private}/_sharedCheckboxAndRadioStyles.ts | 2 +- 42 files changed, 70 insertions(+), 66 deletions(-) create mode 100644 src/AvatarStack/index.ts rename src/{ => private}/_InputCaption.tsx (89%) rename src/{ => private}/_InputLabel.tsx (96%) rename src/{ => private}/_InputValidation.tsx (90%) rename src/{ => private}/_TextInputInnerAction.tsx (94%) rename src/{ => private}/_TextInputInnerVisualSlot.tsx (92%) rename src/{ => private}/_TextInputWrapper.tsx (97%) rename src/{ => private}/_UnstyledTextInput.tsx (93%) rename src/{ => private}/_ValidationAnimationContainer.tsx (97%) rename src/{ => private}/_VisuallyHidden.tsx (93%) rename src/{ => private}/_getGlobalFocusStyles.ts (95%) rename src/{ => private}/_sharedCheckboxAndRadioStyles.ts (94%) diff --git a/src/Autocomplete/AutocompleteMenu.tsx b/src/Autocomplete/AutocompleteMenu.tsx index edd7cd59b2b..509f5f7a110 100644 --- a/src/Autocomplete/AutocompleteMenu.tsx +++ b/src/Autocomplete/AutocompleteMenu.tsx @@ -9,7 +9,7 @@ import Spinner from '../Spinner' import {useSSRSafeId} from '../utils/ssr' import {AutocompleteContext} from './AutocompleteContext' import {PlusIcon} from '@primer/octicons-react' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' type OnSelectedChange = (item: T | T[]) => void type AutocompleteMenuItem = MandateProps diff --git a/src/AvatarStack/index.ts b/src/AvatarStack/index.ts new file mode 100644 index 00000000000..e52297fb9d2 --- /dev/null +++ b/src/AvatarStack/index.ts @@ -0,0 +1,4 @@ +import AvatarStack from './AvatarStack' +export type {AvatarStackProps} from './AvatarStack' + +export default AvatarStack diff --git a/src/Button/types.ts b/src/Button/types.ts index 68eade62b71..399f30a8a98 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' import sx, {SxProp} from '../sx' -import getGlobalFocusStyles from '../_getGlobalFocusStyles' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' export const StyledButton = styled.button` ${getGlobalFocusStyles('-2px')}; diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx index 711b6e78d1b..56078aa0f91 100644 --- a/src/Checkbox.tsx +++ b/src/Checkbox.tsx @@ -5,9 +5,9 @@ import sx, {SxProp} from './sx' import useLayoutEffect from './utils/useIsomorphicLayoutEffect' import {FormValidationStatus} from './utils/types/FormValidationStatus' import {CheckboxGroupContext} from './CheckboxGroupContext' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import getGlobalFocusStyles from './private/_getGlobalFocusStyles' import {get} from './constants' -import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles' +import {sharedCheckboxAndRadioStyles} from './private/_sharedCheckboxAndRadioStyles' export type CheckboxProps = { /** diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx index 3229aa6ae30..195d2513621 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' import Box from './Box' import {BetterSystemStyleObject, SxProp, merge} from './sx' -import VisuallyHidden from './_VisuallyHidden' +import VisuallyHidden from './private/_VisuallyHidden' export type CounterLabelProps = { scheme?: 'primary' | 'secondary' diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index 41c2056ecf9..1473a350778 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -12,7 +12,7 @@ import FormControlCaption from './_FormControlCaption' import FormControlLabel, {Props as FormControlLabelProps} from './_FormControlLabel' import FormControlValidation from './_FormControlValidation' import {Slots} from './slots' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../private/_ValidationAnimationContainer' import {get} from '../constants' import FormControlLeadingVisual from './_FormControlLeadingVisual' import {SxProp} from '../sx' diff --git a/src/FormControl/_FormControlCaption.tsx b/src/FormControl/_FormControlCaption.tsx index e26b95cd5cc..a9083bfecb6 100644 --- a/src/FormControl/_FormControlCaption.tsx +++ b/src/FormControl/_FormControlCaption.tsx @@ -1,6 +1,6 @@ import React from 'react' import {SxProp} from '../sx' -import InputCaption from '../_InputCaption' +import InputCaption from '../private/_InputCaption' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/FormControl/_FormControlLabel.tsx b/src/FormControl/_FormControlLabel.tsx index 323b1081248..f1597a4dcc3 100644 --- a/src/FormControl/_FormControlLabel.tsx +++ b/src/FormControl/_FormControlLabel.tsx @@ -1,6 +1,6 @@ import React from 'react' import {SxProp} from '../sx' -import InputLabel from '../_InputLabel' +import InputLabel from '../private/_InputLabel' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx index d834cf5d9a3..bef81d66fec 100644 --- a/src/FormControl/_FormControlValidation.tsx +++ b/src/FormControl/_FormControlValidation.tsx @@ -1,7 +1,7 @@ import React from 'react' import {SxProp} from '../sx' import {FormValidationStatus} from '../utils/types/FormValidationStatus' -import InputValidation from '../_InputValidation' +import InputValidation from '../private/_InputValidation' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 54bd7f9e285..e69ceb79a3c 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -8,7 +8,7 @@ import {BetterSystemStyleObject, merge, SxProp} from '../sx' import {Theme} from '../ThemeProvider' import createSlots from '../utils/create-slots' import {canUseDOM} from '../utils/environment' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {useStickyPaneHeight} from './useStickyPaneHeight' const {Slots, Slot} = createSlots(['Header', 'Footer']) diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index beeb2d58eac..8c14c9a236c 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import Box from '../Box' import {get} from '../constants' import sx, {SxProp} from '../sx' -import getGlobalFocusStyles from '../_getGlobalFocusStyles' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' import {buildComponentData, buildPaginationModel} from './model' const Page = styled.a` diff --git a/src/Radio.tsx b/src/Radio.tsx index a22d9f15a89..9cfff392209 100644 --- a/src/Radio.tsx +++ b/src/Radio.tsx @@ -3,9 +3,9 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext import sx, {SxProp} from './sx' import {FormValidationStatus} from './utils/types/FormValidationStatus' import {RadioGroupContext} from './RadioGroup' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import getGlobalFocusStyles from './private/_getGlobalFocusStyles' import {get} from './constants' -import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles' +import {sharedCheckboxAndRadioStyles} from './private/_sharedCheckboxAndRadioStyles' export type RadioProps = { /** diff --git a/src/Select.tsx b/src/Select.tsx index 3c569a302cb..0e85af79ffb 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' +import TextInputWrapper, {StyledWrapperProps} from './private/_TextInputWrapper' export type SelectProps = Omit< Omit, 'size'> & Omit, @@ -21,7 +21,7 @@ const StyledSelect = styled.select` /* Firefox hacks: */ /* 1. Makes Firefox's native dropdown menu's background match the theme. - background-color should be 'transparent', but Firefox uses the background-color on + background-color should be 'transparent', but Firefox uses the background-color on so the background color doesn't hide the focus outline created with an inset box-shadow. @@ -32,7 +32,7 @@ const StyledSelect = styled.select` margin-bottom: 1px; /* 2. Prevents visible overlap of partially transparent background colors. - + 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' */ @media screen and (forced-colors: active) { &:disabled { diff --git a/src/TabNav.tsx b/src/TabNav.tsx index d77f2aa4123..764d0cfee98 100644 --- a/src/TabNav.tsx +++ b/src/TabNav.tsx @@ -7,7 +7,7 @@ import {get} from './constants' import {FocusKeys, useFocusZone} from './hooks/useFocusZone' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import getGlobalFocusStyles from './private/_getGlobalFocusStyles' const ITEM_CLASS = 'TabNav-item' const SELECTED_CLASS = 'selected' diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 5c22a65008f..33c05bd0a04 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -2,12 +2,12 @@ import React, {MouseEventHandler, useCallback, useState} from 'react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' import classnames from 'classnames' -import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' +import TextInputInnerVisualSlot from './private/_TextInputInnerVisualSlot' import {useProvidedRefOrCreate} from './hooks' import {Merge} from './utils/types' -import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' -import UnstyledTextInput from './_UnstyledTextInput' -import TextInputAction from './_TextInputInnerAction' +import TextInputWrapper, {StyledWrapperProps} from './private/_TextInputWrapper' +import UnstyledTextInput from './private/_UnstyledTextInput' +import TextInputAction from './private/_TextInputInnerAction' export type TextInputNonPassthroughProps = { /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index b102160777a..923f45067fc 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -9,9 +9,9 @@ import Text from './Text' import {TextInputProps} from './TextInput' import Token from './Token/Token' import {TokenSizeKeys} from './Token/TokenBase' -import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' -import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper' -import UnstyledTextInput from './_UnstyledTextInput' +import TextInputInnerVisualSlot from './private/_TextInputInnerVisualSlot' +import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './private/_TextInputWrapper' +import UnstyledTextInput from './private/_UnstyledTextInput' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType> diff --git a/src/Textarea.tsx b/src/Textarea.tsx index 2f397e459c9..cfbbb5667d5 100644 --- a/src/Textarea.tsx +++ b/src/Textarea.tsx @@ -1,6 +1,6 @@ import styled, {css} from 'styled-components' import React, {TextareaHTMLAttributes, ReactElement} from 'react' -import {TextInputBaseWrapper} from './_TextInputWrapper' +import {TextInputBaseWrapper} from './private/_TextInputWrapper' import {FormValidationStatus} from './utils/types/FormValidationStatus' import sx, {SxProp} from './sx' diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx index 51b84878408..31c9d90cc3c 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch.tsx @@ -7,7 +7,7 @@ import Text from './Text' import {get} from './constants' import {useProvidedStateOrCreate} from './hooks' import sx, {BetterSystemStyleObject, SxProp} from './sx' -import VisuallyHidden from './_VisuallyHidden' +import VisuallyHidden from './private/_VisuallyHidden' const TRANSITION_DURATION = '80ms' const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)' diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 0e44e0ff776..aac91628f5e 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -16,7 +16,7 @@ import Spinner from '../Spinner' import sx, {SxProp} from '../sx' import Text from '../Text' import createSlots from '../utils/create-slots' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {getAccessibleName} from './shared' import {getFirstChildElement, useRovingTabIndex} from './useRovingTabIndex' import {useTypeahead} from './useTypeahead' diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx index d7efdfec27d..e2b4de1debd 100644 --- a/src/UnderlineNav.tsx +++ b/src/UnderlineNav.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components' import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import getGlobalFocusStyles from './private/_getGlobalFocusStyles' const ITEM_CLASS = 'PRC-UnderlineNav-item' const SELECTED_CLASS = 'PRC-selected' diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 2db11b07916..791d1e845a6 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -6,7 +6,7 @@ import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver import CounterLabel from '../CounterLabel' import {useTheme} from '../ThemeProvider' import {ChildWidthArray, ResponsiveProps, ChildSize} from './types' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, menuStyles, menuItemStyles, GAP} from './styles' import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' diff --git a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx index f08a88c93dd..5650a925884 100644 --- a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx +++ b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx @@ -1,7 +1,7 @@ import React from 'react' import Box from '../Box' import {useSSRSafeId} from '../utils/ssr' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../private/_ValidationAnimationContainer' import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroupCaption' import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroupLabel' import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroupValidation' @@ -9,7 +9,7 @@ import {Slots} from './slots' import styled from 'styled-components' import {get} from '../constants' import CheckboxOrRadioGroupContext from './_CheckboxOrRadioGroupContext' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {SxProp} from '../sx' export type CheckboxOrRadioGroupProps = { diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx index a95b8cac167..1c22c4d3304 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' import Box from '../Box' import {SxProp} from '../sx' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' import {Slot} from './slots' diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx index b4ac8604b94..b4d082d4ca8 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputValidation from '../_InputValidation' +import InputValidation from '../private/_InputValidation' import {SxProp} from '../sx' import {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx index 3496a198091..f4308b300d4 100644 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx @@ -2,8 +2,8 @@ import React from 'react' import {Box, useSSRSafeId} from '../..' import createSlots from '../../utils/create-slots' import {FormValidationStatus} from '../../utils/types/FormValidationStatus' -import ValidationAnimationContainer from '../../_ValidationAnimationContainer' -import InputValidation from '../../_InputValidation' +import ValidationAnimationContainer from '../../private/_ValidationAnimationContainer' +import InputValidation from '../../private/_InputValidation' import ChoiceFieldsetListItem from './ChoiceFieldsetListItem' import ChoiceFieldsetDescription from './ChoiceFieldsetDescription' import ChoiceFieldsetLegend from './ChoiceFieldsetLegend' diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx index ace09f02cb9..d916f2340fb 100644 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Box} from '../..' -import VisuallyHidden from '../../_VisuallyHidden' +import VisuallyHidden from '../../private/_VisuallyHidden' import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' export interface ChoiceFieldsetLegendProps { diff --git a/src/deprecated/InputField/InputField.tsx b/src/deprecated/InputField/InputField.tsx index 60f003a89a6..9d268b5fe90 100644 --- a/src/deprecated/InputField/InputField.tsx +++ b/src/deprecated/InputField/InputField.tsx @@ -1,13 +1,13 @@ import React from 'react' import {Autocomplete, Box, Select, TextInput, TextInputWithTokens, useSSRSafeId} from '../../' -import InputValidation from '../../_InputValidation' +import InputValidation from '../../private/_InputValidation' import {ComponentProps} from '../../utils/types' import {FormValidationStatus} from '../../utils/types/FormValidationStatus' import InputFieldCaption from './_InputFieldCaption' import InputFieldLabel from './_InputFieldLabel' import InputFieldValidation from './_InputFieldValidation' import {Slots} from './slots' -import ValidationAnimationContainer from '../../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../../private/_ValidationAnimationContainer' export interface Props> { children?: React.ReactNode /** diff --git a/src/deprecated/InputField/_InputFieldCaption.tsx b/src/deprecated/InputField/_InputFieldCaption.tsx index 2bdb9951d1b..f3429a87ffd 100644 --- a/src/deprecated/InputField/_InputFieldCaption.tsx +++ b/src/deprecated/InputField/_InputFieldCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputCaption from '../../_InputCaption' +import InputCaption from '../../private/_InputCaption' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/deprecated/InputField/_InputFieldLabel.tsx b/src/deprecated/InputField/_InputFieldLabel.tsx index f63e71135c2..ecf5eb8dfc6 100644 --- a/src/deprecated/InputField/_InputFieldLabel.tsx +++ b/src/deprecated/InputField/_InputFieldLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputLabel from '../../_InputLabel' +import InputLabel from '../../private/_InputLabel' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/drafts/MarkdownEditor/Label.tsx b/src/drafts/MarkdownEditor/Label.tsx index 5cc36a55485..0c9cf282f40 100644 --- a/src/drafts/MarkdownEditor/Label.tsx +++ b/src/drafts/MarkdownEditor/Label.tsx @@ -1,6 +1,6 @@ import React, {FC, useContext} from 'react' import {SxProp} from '../../sx' -import InputLabel from '../../_InputLabel' +import InputLabel from '../../private/_InputLabel' import {MarkdownEditorSlot} from './MarkdownEditor' import {MarkdownEditorContext} from './_MarkdownEditorContext' diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index f077d1a1cb3..c6fecd8827a 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx @@ -17,7 +17,7 @@ import {useSyntheticChange} from '../hooks/useSyntheticChange' import MarkdownViewer from '../MarkdownViewer' import {SxProp} from '../../sx' import createSlots from '../../utils/create-slots' -import VisuallyHidden from '../../_VisuallyHidden' +import VisuallyHidden from '../../private/_VisuallyHidden' import {FormattingTools} from './_FormattingTools' import {MarkdownEditorContext} from './_MarkdownEditorContext' import {CoreToolbar, DefaultToolbarButtons} from './Toolbar' diff --git a/src/_InputCaption.tsx b/src/private/_InputCaption.tsx similarity index 89% rename from src/_InputCaption.tsx rename to src/private/_InputCaption.tsx index 54fab427c9d..9fe70119179 100644 --- a/src/_InputCaption.tsx +++ b/src/private/_InputCaption.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Text from './Text' -import {SxProp} from './sx' +import Text from '../Text' +import {SxProp} from '../sx' type Props = { /** diff --git a/src/_InputLabel.tsx b/src/private/_InputLabel.tsx similarity index 96% rename from src/_InputLabel.tsx rename to src/private/_InputLabel.tsx index 3023b9c29c8..ab59f5a261d 100644 --- a/src/_InputLabel.tsx +++ b/src/private/_InputLabel.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Box from './Box' -import {SxProp} from './sx' +import Box from '../Box' +import {SxProp} from '../sx' import VisuallyHidden from './_VisuallyHidden' type BaseProps = SxProp & { diff --git a/src/_InputValidation.tsx b/src/private/_InputValidation.tsx similarity index 90% rename from src/_InputValidation.tsx rename to src/private/_InputValidation.tsx index 8db0185ccd7..357326f73cd 100644 --- a/src/_InputValidation.tsx +++ b/src/private/_InputValidation.tsx @@ -1,9 +1,9 @@ import {AlertFillIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react' import React from 'react' -import Box from './Box' -import Text from './Text' -import {SxProp} from './sx' -import {FormValidationStatus} from './utils/types/FormValidationStatus' +import Box from '../Box' +import Text from '../Text' +import {SxProp} from '../sx' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' type Props = { id: string diff --git a/src/_TextInputInnerAction.tsx b/src/private/_TextInputInnerAction.tsx similarity index 94% rename from src/_TextInputInnerAction.tsx rename to src/private/_TextInputInnerAction.tsx index fe2834eda8e..ab9b8497608 100644 --- a/src/_TextInputInnerAction.tsx +++ b/src/private/_TextInputInnerAction.tsx @@ -1,9 +1,9 @@ import React, {forwardRef} from 'react' import {IconProps} from '@primer/octicons-react' -import Box from './Box' -import {Button, IconButton, ButtonProps} from './Button' -import Tooltip from './Tooltip' -import {BetterSystemStyleObject, merge, SxProp} from './sx' +import Box from '../Box' +import {Button, IconButton, ButtonProps} from '../Button' +import Tooltip from '../Tooltip' +import {BetterSystemStyleObject, merge, SxProp} from '../sx' type TextInputActionProps = Omit, 'aria-label' | 'size'> & { /** @deprecated Text input action buttons should only use icon buttons */ diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/private/_TextInputInnerVisualSlot.tsx similarity index 92% rename from src/_TextInputInnerVisualSlot.tsx rename to src/private/_TextInputInnerVisualSlot.tsx index 90c6635ac11..89c964c44a0 100644 --- a/src/_TextInputInnerVisualSlot.tsx +++ b/src/private/_TextInputInnerVisualSlot.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from './Box' -import Spinner from './Spinner' -import {TextInputNonPassthroughProps} from './TextInput' +import Box from '../Box' +import Spinner from '../Spinner' +import {TextInputNonPassthroughProps} from '../TextInput' const TextInputInnerVisualSlot: React.FC< React.PropsWithChildren<{ diff --git a/src/_TextInputWrapper.tsx b/src/private/_TextInputWrapper.tsx similarity index 97% rename from src/_TextInputWrapper.tsx rename to src/private/_TextInputWrapper.tsx index 5af6ff7d396..bbeb4195bbe 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/private/_TextInputWrapper.tsx @@ -1,8 +1,8 @@ import styled, {css} from 'styled-components' import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {FormValidationStatus} from './utils/types/FormValidationStatus' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' export type TextInputSizes = 'small' | 'medium' | 'large' diff --git a/src/_UnstyledTextInput.tsx b/src/private/_UnstyledTextInput.tsx similarity index 93% rename from src/_UnstyledTextInput.tsx rename to src/private/_UnstyledTextInput.tsx index f6819e44780..5c818505975 100644 --- a/src/_UnstyledTextInput.tsx +++ b/src/private/_UnstyledTextInput.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx from './sx' +import sx from '../sx' const UnstyledTextInput = styled.input` border: 0; diff --git a/src/_ValidationAnimationContainer.tsx b/src/private/_ValidationAnimationContainer.tsx similarity index 97% rename from src/_ValidationAnimationContainer.tsx rename to src/private/_ValidationAnimationContainer.tsx index c774600a57e..5960601ac74 100644 --- a/src/_ValidationAnimationContainer.tsx +++ b/src/private/_ValidationAnimationContainer.tsx @@ -1,6 +1,6 @@ import React, {HTMLProps, useEffect, useState} from 'react' import styled, {keyframes, css} from 'styled-components' -import Box from './Box' +import Box from '../Box' interface Props extends HTMLProps { show?: boolean diff --git a/src/_VisuallyHidden.tsx b/src/private/_VisuallyHidden.tsx similarity index 93% rename from src/_VisuallyHidden.tsx rename to src/private/_VisuallyHidden.tsx index bc9dd624356..3b450745690 100644 --- a/src/_VisuallyHidden.tsx +++ b/src/private/_VisuallyHidden.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx, {SxProp} from './sx' +import sx, {SxProp} from '../sx' interface Props { isVisible?: boolean diff --git a/src/_getGlobalFocusStyles.ts b/src/private/_getGlobalFocusStyles.ts similarity index 95% rename from src/_getGlobalFocusStyles.ts rename to src/private/_getGlobalFocusStyles.ts index e3969bdd81d..59821b78772 100644 --- a/src/_getGlobalFocusStyles.ts +++ b/src/private/_getGlobalFocusStyles.ts @@ -1,6 +1,6 @@ import {CSSProperties} from 'react' import {css} from 'styled-components' -import {get} from './constants' +import {get} from '../constants' const globalFocusStyle = css` box-shadow: none; diff --git a/src/_sharedCheckboxAndRadioStyles.ts b/src/private/_sharedCheckboxAndRadioStyles.ts similarity index 94% rename from src/_sharedCheckboxAndRadioStyles.ts rename to src/private/_sharedCheckboxAndRadioStyles.ts index e461543a897..8de00e30d04 100644 --- a/src/_sharedCheckboxAndRadioStyles.ts +++ b/src/private/_sharedCheckboxAndRadioStyles.ts @@ -1,5 +1,5 @@ import {css} from 'styled-components' -import {get} from './constants' +import {get} from '../constants' export const sharedCheckboxAndRadioStyles = css` appearance: none; From e11b180fe2743d81021cf660e227ff6294d5fd8d Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 14:13:15 -0500 Subject: [PATCH 06/24] refactor(AvatarStack): consolidate into folder --- src/{ => AvatarStack}/AvatarStack.docs.json | 0 src/{stories => AvatarStack}/AvatarStack.stories.tsx | 2 +- src/{ => AvatarStack}/AvatarStack.tsx | 6 +++--- 3 files changed, 4 insertions(+), 4 deletions(-) rename src/{ => AvatarStack}/AvatarStack.docs.json (100%) rename src/{stories => AvatarStack}/AvatarStack.stories.tsx (96%) rename src/{ => AvatarStack}/AvatarStack.tsx (97%) diff --git a/src/AvatarStack.docs.json b/src/AvatarStack/AvatarStack.docs.json similarity index 100% rename from src/AvatarStack.docs.json rename to src/AvatarStack/AvatarStack.docs.json diff --git a/src/stories/AvatarStack.stories.tsx b/src/AvatarStack/AvatarStack.stories.tsx similarity index 96% rename from src/stories/AvatarStack.stories.tsx rename to src/AvatarStack/AvatarStack.stories.tsx index 143e191fff7..0528a064540 100644 --- a/src/stories/AvatarStack.stories.tsx +++ b/src/AvatarStack/AvatarStack.stories.tsx @@ -1,4 +1,4 @@ -import AvatarStack from '../AvatarStack' +import AvatarStack from './AvatarStack' import Avatar from '../Avatar' import {Meta} from '@storybook/react' import React from 'react' diff --git a/src/AvatarStack.tsx b/src/AvatarStack/AvatarStack.tsx similarity index 97% rename from src/AvatarStack.tsx rename to src/AvatarStack/AvatarStack.tsx index 87ad2571fa9..7733fb8303e 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack/AvatarStack.tsx @@ -1,9 +1,9 @@ import classnames from 'classnames' import React from 'react' import styled from 'styled-components' -import {get} from './constants' -import Box from './Box' -import sx, {SxProp} from './sx' +import {get} from '../constants' +import Box from '../Box' +import sx, {SxProp} from '../sx' type StyledAvatarStackWrapperProps = { count?: number From b440e6c9b1a9d8d314d44e0e39db681be046278b Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 14:20:20 -0500 Subject: [PATCH 07/24] refactor: dangling private refactor --- src/private/_InputLabel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/private/_InputLabel.tsx b/src/private/_InputLabel.tsx index ab59f5a261d..a2306f56a7f 100644 --- a/src/private/_InputLabel.tsx +++ b/src/private/_InputLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' import Box from '../Box' import {SxProp} from '../sx' -import VisuallyHidden from './_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' type BaseProps = SxProp & { disabled?: boolean From 0acc9914e8391f0711637108c0c3fb162239979d Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 14:20:48 -0500 Subject: [PATCH 08/24] refactor(AnchoredOverlay): consolidate in folder --- src/{stories => AnchoredOverlay}/AnchoredOverlay.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/{stories => AnchoredOverlay}/AnchoredOverlay.stories.tsx (98%) diff --git a/src/stories/AnchoredOverlay.stories.tsx b/src/AnchoredOverlay/AnchoredOverlay.stories.tsx similarity index 98% rename from src/stories/AnchoredOverlay.stories.tsx rename to src/AnchoredOverlay/AnchoredOverlay.stories.tsx index 4db58eb21a8..f3c6476d312 100644 --- a/src/stories/AnchoredOverlay.stories.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.stories.tsx @@ -4,7 +4,7 @@ import {Meta} from '@storybook/react' import {BaseStyles, Box, ThemeProvider} from '..' import Heading from '../Heading' import {Button} from '../Button' -import {AnchoredOverlay} from '../AnchoredOverlay' +import {AnchoredOverlay} from '.' import {registerPortalRoot} from '../Portal' export default { From 6ae0a21a48aeb72ee9dd59c55323a8855c0ddd17 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 14:46:13 -0500 Subject: [PATCH 09/24] refactor(ToggleSwitch): consolidated into folder --- src/{ => ToggleSwitch}/ToggleSwitch.docs.json | 0 .../ToggleSwitch.test.tsx | 4 +- src/{ => ToggleSwitch}/ToggleSwitch.tsx | 32 +- .../__snapshots__/ToggleSwitch.test.tsx.snap | 295 ++++++++++++++++++ .../examples.stories.tsx | 4 +- .../fixtures.stories.tsx | 4 +- src/ToggleSwitch/index.ts | 3 + src/index.ts | 2 +- 8 files changed, 321 insertions(+), 23 deletions(-) rename src/{ => ToggleSwitch}/ToggleSwitch.docs.json (100%) rename src/{__tests__ => ToggleSwitch}/ToggleSwitch.test.tsx (97%) rename src/{ => ToggleSwitch}/ToggleSwitch.tsx (92%) create mode 100644 src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap rename src/{stories/Switch => ToggleSwitch}/examples.stories.tsx (95%) rename src/{stories/Switch => ToggleSwitch}/fixtures.stories.tsx (96%) create mode 100644 src/ToggleSwitch/index.ts diff --git a/src/ToggleSwitch.docs.json b/src/ToggleSwitch/ToggleSwitch.docs.json similarity index 100% rename from src/ToggleSwitch.docs.json rename to src/ToggleSwitch/ToggleSwitch.docs.json diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/ToggleSwitch/ToggleSwitch.test.tsx similarity index 97% rename from src/__tests__/ToggleSwitch.test.tsx rename to src/ToggleSwitch/ToggleSwitch.test.tsx index d114c67ca00..4f8eb2e8e81 100644 --- a/src/__tests__/ToggleSwitch.test.tsx +++ b/src/ToggleSwitch/ToggleSwitch.test.tsx @@ -129,5 +129,5 @@ it('calls onChange when the switch is toggled', async () => { expect(handleChange).toHaveBeenCalledWith(true) }) -checkStoriesForAxeViolations('Switch/fixtures') -checkStoriesForAxeViolations('Switch/examples') +checkStoriesForAxeViolations('fixtures', '../ToggleSwitch/') +checkStoriesForAxeViolations('examples', '../ToggleSwitch/') diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx similarity index 92% rename from src/ToggleSwitch.tsx rename to src/ToggleSwitch/ToggleSwitch.tsx index 31c9d90cc3c..8641903a5f2 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -1,18 +1,18 @@ import React, {MouseEventHandler, useCallback, useEffect} from 'react' import styled, {css} from 'styled-components' import {variant} from 'styled-system' -import Box from './Box' -import Spinner from './Spinner' -import Text from './Text' -import {get} from './constants' -import {useProvidedStateOrCreate} from './hooks' -import sx, {BetterSystemStyleObject, SxProp} from './sx' -import VisuallyHidden from './private/_VisuallyHidden' +import Box from '../Box' +import Spinner from '../Spinner' +import Text from '../Text' +import {get} from '../constants' +import {useProvidedStateOrCreate} from '../hooks' +import sx, {BetterSystemStyleObject, SxProp} from '../sx' +import VisuallyHidden from '../private/_VisuallyHidden' const TRANSITION_DURATION = '80ms' const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)' -type SwitchProps = { +type ToggleSwitchProps = { /** The id of the DOM node that describes the switch */ ['aria-describedby']?: string /** The id of the DOM node that labels the switch */ @@ -47,13 +47,13 @@ const sizeVariants = variant({ }, }) -type SwitchButtonProps = { +type ToggleSwitchButtonProps = { disabled?: boolean checked?: boolean - size?: SwitchProps['size'] + size?: ToggleSwitchProps['size'] } & SxProp -type InnerIconProps = {size?: SwitchProps['size']} +type InnerIconProps = {size?: ToggleSwitchProps['size']} const CircleIcon: React.FC> = ({size}) => ( > = ({size}) => ) -const SwitchButton = styled.button` +const ToggleSwitchButton = styled.button` vertical-align: middle; cursor: pointer; user-select: none; @@ -211,7 +211,7 @@ const hiddenTextStyles: BetterSystemStyleObject = { height: 0, } -const Switch: React.FC> = ({ +const ToggleSwitch: React.FC> = ({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, defaultChecked, @@ -265,7 +265,7 @@ const Switch: React.FC> = ({ Off - > = ({ + ) } -export default Switch +export default ToggleSwitch diff --git a/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap new file mode 100644 index 00000000000..91f728c3e4e --- /dev/null +++ b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap @@ -0,0 +1,295 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders consistently 1`] = ` +.c2 { + text-align: right; + visibility: hidden; + height: 0; +} + +.c3 { + text-align: right; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + color: #0969da; + line-height: 0; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c8 { + color: #24292f; + line-height: 0; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c5 { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + white-space: nowrap; + border-width: 0; +} + +.c1 { + font-size: 14px; + color: #24292f; + margin-left: 8px; + margin-right: 8px; + position: relative; +} + +.c4 { + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + padding: 0; + -webkit-transition-property: background-color,border-color; + transition-property: background-color,border-color; + -webkit-transition-duration: 80ms; + transition-duration: 80ms; + -webkit-transition-timing-function: cubic-bezier(0.5,1,0.89,1); + transition-timing-function: cubic-bezier(0.5,1,0.89,1); + border-radius: 6px; + border-style: solid; + border-width: 1px; + display: block; + height: 32px; + width: 64px; + outline-offset: 2px; + position: relative; + overflow: hidden; + background-color: #eaeef2; + border-color: #afb8c1; +} + +.c4:hover .Toggle-knob, +.c4:focus:focus-visible .Toggle-knob { + background-color: #f3f4f6; +} + +.c4:active .Toggle-knob, +.c4:active:focus-visible .Toggle-knob { + background-color: hsla(220,14%,93%,1); +} + +.c9 { + background-color: #f6f8fa; + border-width: 1px; + border-style: solid; + border-color: #afb8c1; + border-radius: calc(6px - 1px); + box-shadow: 0 3px 6px rgba(140,149,159,0.15),inset 0 1px 0 rgba(255,255,255,0.25); + width: 50%; + position: absolute; + top: -1px; + bottom: -1px; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 80ms; + transition-duration: 80ms; + -webkit-transition-timing-function: cubic-bezier(0.5,1,0.89,1); + transition-timing-function: cubic-bezier(0.5,1,0.89,1); + -webkit-transform: translateX(-1px); + -ms-transform: translateX(-1px); + transform: translateX(-1px); + z-index: 1; +} + +@media (pointer:coarse) { + .c4:before { + content: ''; + position: absolute; + left: 0; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + top: 50%; + min-height: 44px; + } +} + +@media (prefers-reduced-motion) { + .c4 { + -webkit-transition: none; + transition: none; + } + + .c4 * { + -webkit-transition: none; + transition: none; + } +} + +@media (prefers-reduced-motion) { + .c9 { + -webkit-transition: none; + transition: none; + } +} + +
+ + +
+`; diff --git a/src/stories/Switch/examples.stories.tsx b/src/ToggleSwitch/examples.stories.tsx similarity index 95% rename from src/stories/Switch/examples.stories.tsx rename to src/ToggleSwitch/examples.stories.tsx index 1a00dadd00b..0096ed29522 100644 --- a/src/stories/Switch/examples.stories.tsx +++ b/src/ToggleSwitch/examples.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '../../' -import {ComponentProps} from '../../utils/types' +import {BaseStyles, Box, Text, ThemeProvider, ToggleSwitch} from '..' +import {ComponentProps} from '../utils/types' import {action} from '@storybook/addon-actions' type Args = ComponentProps diff --git a/src/stories/Switch/fixtures.stories.tsx b/src/ToggleSwitch/fixtures.stories.tsx similarity index 96% rename from src/stories/Switch/fixtures.stories.tsx rename to src/ToggleSwitch/fixtures.stories.tsx index 8ef5ff93918..3ca9f122dab 100644 --- a/src/stories/Switch/fixtures.stories.tsx +++ b/src/ToggleSwitch/fixtures.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '../../' -import {ComponentProps} from '../../utils/types' +import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '..' +import {ComponentProps} from '../utils/types' type Args = ComponentProps diff --git a/src/ToggleSwitch/index.ts b/src/ToggleSwitch/index.ts new file mode 100644 index 00000000000..317ae02efae --- /dev/null +++ b/src/ToggleSwitch/index.ts @@ -0,0 +1,3 @@ +import Switch from './ToggleSwitch' + +export default Switch diff --git a/src/index.ts b/src/index.ts index 4a07cd57b73..8dbe7fce7d4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -147,7 +147,7 @@ export {default as StyledOcticon} from './StyledOcticon' export type {StyledOcticonProps} from './StyledOcticon' export {default as SubNav} from './SubNav' export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav' -export {default as ToggleSwitch} from './ToggleSwitch' +export {default as ToggleSwitch} from './ToggleSwitch/ToggleSwitch' export {default as TabNav} from './TabNav' export type {TabNavProps, TabNavLinkProps} from './TabNav' export {default as TextInput} from './TextInput' From 9e5a5658480373586b5933e8f0288387c9381d9b Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 15:09:30 -0500 Subject: [PATCH 10/24] refactor(RadioGroup): consolidated into folder --- src/Radio.tsx | 2 +- src/{ => RadioGroup}/RadioGroup.docs.json | 0 .../RadioGroup.test.tsx | 6 +- src/{ => RadioGroup}/RadioGroup.tsx | 12 +- .../__snapshots__/RadioGroup.test.tsx.snap | 242 ++++++++++++++++++ .../RadioGroup/examples.stories.tsx | 6 +- .../RadioGroup/fixtures.stories.tsx | 4 +- src/RadioGroup/index.ts | 1 + src/index.ts | 2 +- 9 files changed, 259 insertions(+), 16 deletions(-) rename src/{ => RadioGroup}/RadioGroup.docs.json (100%) rename src/{__tests__ => RadioGroup}/RadioGroup.test.tsx (96%) rename src/{ => RadioGroup}/RadioGroup.tsx (80%) create mode 100644 src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap rename src/{stories => }/RadioGroup/examples.stories.tsx (96%) rename src/{stories => }/RadioGroup/fixtures.stories.tsx (97%) create mode 100644 src/RadioGroup/index.ts diff --git a/src/Radio.tsx b/src/Radio.tsx index 9cfff392209..93b6a95f4cd 100644 --- a/src/Radio.tsx +++ b/src/Radio.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components' import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext} from 'react' import sx, {SxProp} from './sx' import {FormValidationStatus} from './utils/types/FormValidationStatus' -import {RadioGroupContext} from './RadioGroup' +import {RadioGroupContext} from './RadioGroup/RadioGroup' import getGlobalFocusStyles from './private/_getGlobalFocusStyles' import {get} from './constants' import {sharedCheckboxAndRadioStyles} from './private/_sharedCheckboxAndRadioStyles' diff --git a/src/RadioGroup.docs.json b/src/RadioGroup/RadioGroup.docs.json similarity index 100% rename from src/RadioGroup.docs.json rename to src/RadioGroup/RadioGroup.docs.json diff --git a/src/__tests__/RadioGroup.test.tsx b/src/RadioGroup/RadioGroup.test.tsx similarity index 96% rename from src/__tests__/RadioGroup.test.tsx rename to src/RadioGroup/RadioGroup.test.tsx index ad08d558594..fa29ccbff0c 100644 --- a/src/__tests__/RadioGroup.test.tsx +++ b/src/RadioGroup/RadioGroup.test.tsx @@ -3,7 +3,7 @@ import {render} from '@testing-library/react' import {RadioGroup, FormControl, Radio, SSRProvider} from '..' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' import userEvent from '@testing-library/user-event' -import {RadioGroupContext} from '../RadioGroup' +import {RadioGroupContext} from '../RadioGroup/RadioGroup' describe('RadioGroup', () => { const mockWarningFn = jest.fn() @@ -162,5 +162,5 @@ describe('RadioGroup', () => { }) }) -checkStoriesForAxeViolations('RadioGroup/fixtures') -checkStoriesForAxeViolations('RadioGroup/examples') +checkStoriesForAxeViolations('fixtures', '../RadioGroup/') +checkStoriesForAxeViolations('examples', '../RadioGroup/') diff --git a/src/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx similarity index 80% rename from src/RadioGroup.tsx rename to src/RadioGroup/RadioGroup.tsx index 0b04974ee0a..297a4e28b36 100644 --- a/src/RadioGroup.tsx +++ b/src/RadioGroup/RadioGroup.tsx @@ -1,10 +1,10 @@ import React, {ChangeEvent, ChangeEventHandler, createContext, FC} from 'react' -import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup' -import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' -import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' -import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' -import {useRenderForcingRef} from './hooks' -import {SxProp} from './sx' +import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from '../_CheckboxOrRadioGroup' +import CheckboxOrRadioGroupCaption from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' +import CheckboxOrRadioGroupLabel from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' +import CheckboxOrRadioGroupValidation from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' +import {useRenderForcingRef} from '../hooks' +import {SxProp} from '../sx' type RadioGroupProps = { /** diff --git a/src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap b/src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap new file mode 100644 index 00000000000..879d09c3520 --- /dev/null +++ b/src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap @@ -0,0 +1,242 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RadioGroup renders consistently 1`] = ` +.c0 { + margin: 0; + padding: 0; + border: none; +} + +.c1 { + margin-bottom: 8px; + padding: 0; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c5 > input { + margin-left: 0; + margin-right: 0; +} + +.c7 { + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + display: block; + font-size: 16px; +} + +.c8 { + font-weight: 600; + font-size: 14px; + display: block; + color: #24292f; + cursor: pointer; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; +} + +.c3 > * + * { + margin-top: 8px; +} + +.c6 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-color: #6e7781; + border-style: solid; + border-width: 1px; + cursor: pointer; + display: grid; + height: var(--base-size-16,16px); + margin: 0; + margin-top: 0.125rem; + place-content: center; + position: relative; + width: var(--base-size-16,16px); + border-radius: var(--primer-borderRadius-full,100vh); + -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); + transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); +} + +.c6:disabled { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: #d0d7de; +} + +.c6:checked { + border-color: #0969da; + border-width: var(--base-size-4,4px); +} + +.c6:checked:disabled { + cursor: not-allowed; + border-color: #57606a; +} + +.c6:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 2px; +} + +.c6:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c6:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 2px; +} + +@media (forced-colors:active) { + .c6 { + background-color: canvastext; + border-color: canvastext; + } +} + +
+
+ + + Choices + + +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+`; diff --git a/src/stories/RadioGroup/examples.stories.tsx b/src/RadioGroup/examples.stories.tsx similarity index 96% rename from src/stories/RadioGroup/examples.stories.tsx rename to src/RadioGroup/examples.stories.tsx index a841eaa378e..30f5313539e 100644 --- a/src/stories/RadioGroup/examples.stories.tsx +++ b/src/RadioGroup/examples.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, RadioGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' -import Radio from '../../Radio' +import {BaseStyles, RadioGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' +import Radio from '../Radio' export default { title: 'Components/Forms/RadioGroup/examples', diff --git a/src/stories/RadioGroup/fixtures.stories.tsx b/src/RadioGroup/fixtures.stories.tsx similarity index 97% rename from src/stories/RadioGroup/fixtures.stories.tsx rename to src/RadioGroup/fixtures.stories.tsx index 5b0be1c9dbe..9b093e5037a 100644 --- a/src/stories/RadioGroup/fixtures.stories.tsx +++ b/src/RadioGroup/fixtures.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, RadioGroup, FormControl, ThemeProvider, Radio} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Box, RadioGroup, FormControl, ThemeProvider, Radio} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' const excludedControlKeys = ['aria-labelledby', 'id', 'name', 'onChange', 'sx', 'visuallyHidden'] diff --git a/src/RadioGroup/index.ts b/src/RadioGroup/index.ts new file mode 100644 index 00000000000..d29db1c955a --- /dev/null +++ b/src/RadioGroup/index.ts @@ -0,0 +1 @@ +export {default, RadioGroupContext} from './RadioGroup' diff --git a/src/index.ts b/src/index.ts index 8dbe7fce7d4..e6c2044cca1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -129,7 +129,7 @@ export {default as Portal, registerPortalRoot} from './Portal' export type {PortalProps} from './Portal' export {default as ProgressBar} from './ProgressBar' export type {ProgressBarProps} from './ProgressBar' -export {default as RadioGroup} from './RadioGroup' +export {default as RadioGroup} from './RadioGroup/RadioGroup' export type {RelativeTimeProps} from './RelativeTime' export {default as RelativeTime} from './RelativeTime' export {SegmentedControl} from './SegmentedControl' From 3c0415e543487dd9b852e839a3891ba6d0f92e6a Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 15:13:37 -0500 Subject: [PATCH 11/24] refactor(CheckboxGroup): consolidate to folder --- src/Checkbox.tsx | 2 +- .../CheckboxGroup.docs.json | 0 .../CheckboxGroup.test.tsx | 6 +- src/{ => CheckboxGroup}/CheckboxGroup.tsx | 16 +- .../CheckboxGroupContext.ts | 0 .../__snapshots__/CheckboxGroup.test.tsx.snap | 308 ++++++++++++++++++ .../CheckboxGroup/examples.stories.tsx | 4 +- .../CheckboxGroup/fixtures.stories.tsx | 4 +- src/CheckboxGroup/index.ts | 1 + src/index.ts | 2 +- 10 files changed, 326 insertions(+), 17 deletions(-) rename src/{ => CheckboxGroup}/CheckboxGroup.docs.json (100%) rename src/{__tests__ => CheckboxGroup}/CheckboxGroup.test.tsx (96%) rename src/{ => CheckboxGroup}/CheckboxGroup.tsx (83%) rename src/{ => CheckboxGroup}/CheckboxGroupContext.ts (100%) create mode 100644 src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap rename src/{stories => }/CheckboxGroup/examples.stories.tsx (96%) rename src/{stories => }/CheckboxGroup/fixtures.stories.tsx (97%) create mode 100644 src/CheckboxGroup/index.ts diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx index 56078aa0f91..02d3d1391f3 100644 --- a/src/Checkbox.tsx +++ b/src/Checkbox.tsx @@ -4,7 +4,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext import sx, {SxProp} from './sx' import useLayoutEffect from './utils/useIsomorphicLayoutEffect' import {FormValidationStatus} from './utils/types/FormValidationStatus' -import {CheckboxGroupContext} from './CheckboxGroupContext' +import {CheckboxGroupContext} from './CheckboxGroup/CheckboxGroupContext' import getGlobalFocusStyles from './private/_getGlobalFocusStyles' import {get} from './constants' import {sharedCheckboxAndRadioStyles} from './private/_sharedCheckboxAndRadioStyles' diff --git a/src/CheckboxGroup.docs.json b/src/CheckboxGroup/CheckboxGroup.docs.json similarity index 100% rename from src/CheckboxGroup.docs.json rename to src/CheckboxGroup/CheckboxGroup.docs.json diff --git a/src/__tests__/CheckboxGroup.test.tsx b/src/CheckboxGroup/CheckboxGroup.test.tsx similarity index 96% rename from src/__tests__/CheckboxGroup.test.tsx rename to src/CheckboxGroup/CheckboxGroup.test.tsx index 69de58f1d4f..aa546e6d379 100644 --- a/src/__tests__/CheckboxGroup.test.tsx +++ b/src/CheckboxGroup/CheckboxGroup.test.tsx @@ -4,7 +4,7 @@ import {render} from '@testing-library/react' import {Checkbox, CheckboxGroup, FormControl, SSRProvider} from '..' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' import userEvent from '@testing-library/user-event' -import {CheckboxGroupContext} from '../CheckboxGroup' +import {CheckboxGroupContext} from './CheckboxGroup' describe('CheckboxGroup', () => { const mockWarningFn = jest.fn() @@ -172,5 +172,5 @@ describe('CheckboxGroup', () => { }) }) -checkStoriesForAxeViolations('CheckboxGroup/fixtures') -checkStoriesForAxeViolations('CheckboxGroup/examples') +checkStoriesForAxeViolations('fixtures', '../CheckboxGroup/') +checkStoriesForAxeViolations('examples', '../CheckboxGroup/') diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup/CheckboxGroup.tsx similarity index 83% rename from src/CheckboxGroup.tsx rename to src/CheckboxGroup/CheckboxGroup.tsx index 10361a3ba16..d0742054278 100644 --- a/src/CheckboxGroup.tsx +++ b/src/CheckboxGroup/CheckboxGroup.tsx @@ -1,12 +1,12 @@ import React, {ChangeEvent, ChangeEventHandler, FC} from 'react' -import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup' -import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' -import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' -import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' -import {useRenderForcingRef} from './hooks' -import {SxProp} from './sx' -import FormControl from './FormControl' -import Checkbox from './Checkbox' +import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from '../_CheckboxOrRadioGroup' +import CheckboxOrRadioGroupCaption from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' +import CheckboxOrRadioGroupLabel from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' +import CheckboxOrRadioGroupValidation from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' +import {useRenderForcingRef} from '../hooks' +import {SxProp} from '../sx' +import FormControl from '../FormControl' +import Checkbox from '../Checkbox' import {CheckboxGroupContext} from './CheckboxGroupContext' type CheckboxGroupProps = { diff --git a/src/CheckboxGroupContext.ts b/src/CheckboxGroup/CheckboxGroupContext.ts similarity index 100% rename from src/CheckboxGroupContext.ts rename to src/CheckboxGroup/CheckboxGroupContext.ts diff --git a/src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap b/src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap new file mode 100644 index 00000000000..4ba7b14aca6 --- /dev/null +++ b/src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap @@ -0,0 +1,308 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CheckboxGroup renders consistently 1`] = ` +.c0 { + margin: 0; + padding: 0; + border: none; +} + +.c1 { + margin-bottom: 8px; + padding: 0; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c5 > input { + margin-left: 0; + margin-right: 0; +} + +.c7 { + margin-left: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + display: block; + font-size: 16px; +} + +.c8 { + font-weight: 600; + font-size: 14px; + display: block; + color: #24292f; + cursor: pointer; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; +} + +.c3 > * + * { + margin-top: 8px; +} + +.c6 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-color: #6e7781; + border-style: solid; + border-width: 1px; + cursor: pointer; + display: grid; + height: var(--base-size-16,16px); + margin: 0; + margin-top: 0.125rem; + place-content: center; + position: relative; + width: var(--base-size-16,16px); + border-radius: 3px; + -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); + transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); +} + +.c6:disabled { + background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); + border-color: #d0d7de; +} + +.c6::before { + width: var(--base-size-16,16px); + height: var(--base-size-16,16px); + visibility: hidden; + content: ''; + background-color: #ffffff; + -webkit-transition: visibility 0s linear 230ms; + transition: visibility 0s linear 230ms; + -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0); + clip-path: inset(var(--base-size-16,16px) 0 0 0); + -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); + -webkit-mask-size: 75%; + mask-size: 75%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} + +.c6:checked, +.c6:indeterminate { + background: #0969da; + border-color: #0969da; +} + +.c6:checked { + -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; + transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; +} + +.c6:checked::before { + visibility: visible; + -webkit-transition: visibility 0s linear 0s; + transition: visibility 0s linear 0s; +} + +.c6:checked:disabled { + cursor: not-allowed; + background-color: #57606a; + border-color: #57606a; + opacity: 1; +} + +.c6:checked:disabled::before { + background-color: #ffffff; +} + +.c6:indeterminate { + background: #0969da; +} + +.c6:indeterminate::before { + -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); + visibility: visible; +} + +.c6:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 2px; +} + +.c6:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c6:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 2px; +} + +@media screen and (prefers-reduced-motion:no-preference) { + .c6::before { + -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; + animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; + } +} + +@media screen and (prefers-reduced-motion:no-preference) { + .c6:checked::before, + .c6:indeterminate::before { + -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; + animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; + } +} + +@media (forced-colors:active) { + .c6:checked { + background-color: canvastext; + border-color: canvastext; + } +} + +
+
+ + + Choices + + +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+`; diff --git a/src/stories/CheckboxGroup/examples.stories.tsx b/src/CheckboxGroup/examples.stories.tsx similarity index 96% rename from src/stories/CheckboxGroup/examples.stories.tsx rename to src/CheckboxGroup/examples.stories.tsx index d7593416764..d6cafbcb015 100644 --- a/src/stories/CheckboxGroup/examples.stories.tsx +++ b/src/CheckboxGroup/examples.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' export default { title: 'Components/Forms/CheckboxGroup/examples', diff --git a/src/stories/CheckboxGroup/fixtures.stories.tsx b/src/CheckboxGroup/fixtures.stories.tsx similarity index 97% rename from src/stories/CheckboxGroup/fixtures.stories.tsx rename to src/CheckboxGroup/fixtures.stories.tsx index 621a7d3ddfe..cafe85a3d9c 100644 --- a/src/stories/CheckboxGroup/fixtures.stories.tsx +++ b/src/CheckboxGroup/fixtures.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Box, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' const excludedControlKeys = ['aria-labelledby', 'id', 'onChange', 'sx', 'visuallyHidden'] diff --git a/src/CheckboxGroup/index.ts b/src/CheckboxGroup/index.ts new file mode 100644 index 00000000000..4977110e742 --- /dev/null +++ b/src/CheckboxGroup/index.ts @@ -0,0 +1 @@ +export {default, CheckboxGroupContext} from './CheckboxGroup' diff --git a/src/index.ts b/src/index.ts index e6c2044cca1..525e41e3373 100644 --- a/src/index.ts +++ b/src/index.ts @@ -77,7 +77,7 @@ export {default as Caret} from './Caret' export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' export {default as CircleOcticon} from './CircleOcticon' export type {CircleOcticonProps} from './CircleOcticon' -export {default as CheckboxGroup} from './CheckboxGroup' +export {default as CheckboxGroup} from './CheckboxGroup/CheckboxGroup' export type {CaretProps} from './Caret' export {default as CircleBadge} from './CircleBadge' export {default as CounterLabel} from './CounterLabel' From cc97a2fbd4fd152f1bb2aaf351d2938bf0d94703 Mon Sep 17 00:00:00 2001 From: green6erry Date: Wed, 1 Feb 2023 20:16:36 +0000 Subject: [PATCH 12/24] Update generated/components.json --- generated/components.json | 918 +++++++++++++++++++------------------- 1 file changed, 459 insertions(+), 459 deletions(-) diff --git a/generated/components.json b/generated/components.json index add33745532..4c1b198e973 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1,92 +1,6 @@ { "schemaVersion": 1, "components": { - "action_menu": { - "id": "action_menu", - "name": "ActionMenu", - "status": "beta", - "a11yReviewed": true, - "stories": [], - "props": [ - { - "name": "children", - "type": "React.ReactElement[]", - "defaultValue": "", - "required": true, - "description": "Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`" - }, - { - "name": "open", - "type": "boolean", - "defaultValue": "false", - "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`." - }, - { - "name": "onOpenChange", - "type": "(open: boolean) => void", - "defaultValue": "", - "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`." - }, - { - "name": "anchorRef", - "type": "React.RefObject", - "defaultValue": "", - "description": "Useful for defining an external anchor" - } - ], - "subcomponents": [ - { - "name": "ActionMenu.Button", - "props": [ - { - "name": "children", - "type": "React.ReactElement", - "defaultValue": "", - "required": true, - "description": "" - } - ], - "passthrough": { - "element": "Button", - "url": "/react/Button" - } - }, - { - "name": "ActionMenu.Anchor", - "props": [ - { - "name": "children", - "type": "React.ReactElement", - "defaultValue": "", - "required": true, - "description": "Accepts a single child element" - } - ] - }, - { - "name": "ActionMenu.Overlay", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "required": true, - "description": "" - }, - { - "name": "align", - "type": "start | center | end", - "defaultValue": "start", - "description": "" - } - ], - "passthrough": { - "element": "Overlay", - "url": "/react/Overlay" - } - } - ] - }, "avatar": { "id": "avatar", "name": "Avatar", @@ -139,26 +53,6 @@ ], "subcomponents": [] }, - "avatar_stack": { - "id": "avatar_stack", - "name": "AvatarStack", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "alignRight", - "type": "boolean", - "defaultValue": "false", - "description": "Align the avatars to the right" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] - }, "box": { "id": "box", "name": "Box", @@ -337,110 +231,6 @@ ], "subcomponents": [] }, - "checkbox_group": { - "id": "checkbox_group", - "name": "CheckboxGroup", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "aria-labelledby", - "type": "string", - "defaultValue": "", - "description": "Used when associating the input group with a label other than CheckboxGroup.Label" - }, - { - "name": "children", - "type": "CheckboxGroup.Label | CheckboxGroup.Caption | CheckboxGroup.Validation | FormControl", - "defaultValue": "", - "required": true, - "description": "" - }, - { - "name": "disabled", - "type": "boolean", - "defaultValue": "false", - "description": "Whether the input group allows user input" - }, - { - "name": "id", - "type": "string", - "defaultValue": "a generated string", - "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " - }, - { - "name": "onChange", - "type": "(selected: string[], e?: ChangeEvent) => void", - "defaultValue": "", - "description": "An onChange handler that gets called when the selection changes" - }, - { - "name": "required", - "type": "boolean", - "defaultValue": "false", - "description": "If true, the user must make a selection before the owning form can be submitted" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [ - { - "name": "CheckboxGroup.Label", - "props": [ - { - "name": "visuallyHidden", - "type": "boolean", - "defaultValue": "false", - "description": "If true, the fieldset legend will be visually hidden" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - }, - { - "name": "CheckboxGroup.Description", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "description": "The caption content" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - }, - { - "name": "CheckboxGroup.Validation", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "description": "The validation message" - }, - { - "name": "variant", - "type": "'error' | 'success' | 'warning'", - "defaultValue": "", - "required": true, - "description": "Changes the visual style to match the validation status" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - } - ] - }, "circle_badge": { "id": "circle_badge", "name": "CircleBadge", @@ -1136,147 +926,36 @@ ], "subcomponents": [] }, - "radio_group": { - "id": "radio_group", - "name": "RadioGroup", + "select": { + "id": "select", + "name": "Select", "status": "alpha", - "a11yReviewed": false, + "a11yReviewed": true, "stories": [], "props": [ { - "name": "aria-labelledby", - "type": "string", - "defaultValue": "", - "description": "Used when associating the input group with a label other than RadioGroup.Label" - }, - { - "name": "children", - "type": "RadioGroup.Label | RadioGroup.Caption | RadioGroup.Validation | FormControl", - "defaultValue": "", - "required": true, - "description": "" - }, - { - "name": "disabled", + "name": "block", "type": "boolean", "defaultValue": "false", - "description": "Whether the input group allows user input" + "description": "Creates a full width input element" }, { - "name": "id", - "type": "string", - "defaultValue": "A generated string", - "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " + "name": "contrast", + "type": "boolean", + "defaultValue": "false", + "description": "Changes background color to a higher contrast color" }, { - "name": "name", + "name": "placeholder", "type": "string", "defaultValue": "", - "required": true, - "description": "The name used to identify this group of radios" + "description": "Placeholder text to show when no option is selected.
This option is hidden from the dropdown menu when the 'required' prop is set" }, { - "name": "onChange", - "type": "(selected: string | null, e?: ChangeEvent) => void", + "name": "size", + "type": "'small' | 'medium' | 'large'", "defaultValue": "", - "description": "An onChange handler that gets called when the selection changes" - }, - { - "name": "required", - "type": "boolean", - "defaultValue": "false", - "description": "If true, the user must make a selection before the owning form can be submitted" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [ - { - "name": "RadioGroup.Label", - "props": [ - { - "name": "visuallyHidden", - "type": "boolean", - "defaultValue": "false", - "description": "If true, the fieldset legend will be visually hidden" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - }, - { - "name": "RadioGroup.Description", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "description": "The caption content" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - }, - { - "name": "RadioGroup.Validation", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "description": "The validation message" - }, - { - "name": "variant", - "type": "'error' | 'success' | 'warning'", - "defaultValue": "", - "required": true, - "description": "Changes the visual style to match the validation status" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - } - ] - }, - "select": { - "id": "select", - "name": "Select", - "status": "alpha", - "a11yReviewed": true, - "stories": [], - "props": [ - { - "name": "block", - "type": "boolean", - "defaultValue": "false", - "description": "Creates a full width input element" - }, - { - "name": "contrast", - "type": "boolean", - "defaultValue": "false", - "description": "Changes background color to a higher contrast color" - }, - { - "name": "placeholder", - "type": "string", - "defaultValue": "", - "description": "Placeholder text to show when no option is selected.
This option is hidden from the dropdown menu when the 'required' prop is set" - }, - { - "name": "size", - "type": "'small' | 'medium' | 'large'", - "defaultValue": "", - "description": "Creates a smaller or larger input than the default." + "description": "Creates a smaller or larger input than the default." }, { "name": "validationStatus", @@ -1847,77 +1526,6 @@ } ] }, - "toggle_switch": { - "id": "toggle_switch", - "name": "ToggleSwitch", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "aria-describedby", - "type": "string", - "defaultValue": "", - "description": "The id of the DOM node that describes the switch" - }, - { - "name": "aria-labelledby", - "type": "string", - "defaultValue": "", - "required": true, - "description": "The id of the DOM node that labels the switch" - }, - { - "name": "defaultChecked", - "type": "boolean", - "defaultValue": "", - "description": "Uncontrolled - whether the switch is turned on" - }, - { - "name": "disabled", - "type": "boolean", - "defaultValue": "", - "description": "Whether the switch is ready for user input" - }, - { - "name": "loading", - "type": "boolean", - "defaultValue": "", - "description": "Whether the switch's value is being calculated" - }, - { - "name": "checked", - "type": "boolean", - "defaultValue": "", - "description": "Whether the switch is turned on" - }, - { - "name": "onChange", - "type": "(on: boolean) => void", - "defaultValue": "", - "description": "The callback that is called when the switch is toggled on or off" - }, - { - "name": "onClick", - "type": "(e: MouseEvent) => void", - "defaultValue": "", - "description": "The callback that is called when the switch is clicked" - }, - { - "name": "size", - "type": "'small' | 'medium'", - "defaultValue": "'medium'", - "description": "Size of the switch" - }, - { - "name": "statusLabelPosition", - "type": "'start' | 'end'", - "defaultValue": "'start'", - "description": "
Whether the \"on\" and \"off\" labels should appear before or after the switch.
This should only be changed when the switch's alignment needs to be adjusted. For example: It needs to be left-aligned because the label appears above it and the caption appears below it.
" - } - ], - "subcomponents": [] - }, "tooltip": { "id": "tooltip", "name": "Tooltip", @@ -2283,6 +1891,92 @@ } ] }, + "action_menu": { + "id": "action_menu", + "name": "ActionMenu", + "status": "beta", + "a11yReviewed": true, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactElement[]", + "defaultValue": "", + "required": true, + "description": "Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`" + }, + { + "name": "open", + "type": "boolean", + "defaultValue": "false", + "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`." + }, + { + "name": "onOpenChange", + "type": "(open: boolean) => void", + "defaultValue": "", + "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`." + }, + { + "name": "anchorRef", + "type": "React.RefObject", + "defaultValue": "", + "description": "Useful for defining an external anchor" + } + ], + "subcomponents": [ + { + "name": "ActionMenu.Button", + "props": [ + { + "name": "children", + "type": "React.ReactElement", + "defaultValue": "", + "required": true, + "description": "" + } + ], + "passthrough": { + "element": "Button", + "url": "/react/Button" + } + }, + { + "name": "ActionMenu.Anchor", + "props": [ + { + "name": "children", + "type": "React.ReactElement", + "defaultValue": "", + "required": true, + "description": "Accepts a single child element" + } + ] + }, + { + "name": "ActionMenu.Overlay", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "align", + "type": "start | center | end", + "defaultValue": "start", + "description": "" + } + ], + "passthrough": { + "element": "Overlay", + "url": "/react/Overlay" + } + } + ] + }, "anchored_overlay": { "id": "anchored_overlay", "name": "AnchoredOverlay", @@ -2477,6 +2171,26 @@ } ] }, + "avatar_stack": { + "id": "avatar_stack", + "name": "AvatarStack", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "alignRight", + "type": "boolean", + "defaultValue": "false", + "description": "Align the avatars to the right" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, "button": { "id": "button", "name": "Button", @@ -2521,23 +2235,166 @@ "type": "SystemStyleObject" }, { - "name": "ref", - "type": "React.RefObject" - } - ], - "passthrough": { - "element": "button", - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" - }, - "subcomponents": [ - { - "name": "Button.Counter", + "name": "ref", + "type": "React.RefObject" + } + ], + "passthrough": { + "element": "button", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" + }, + "subcomponents": [ + { + "name": "Button.Counter", + "props": [ + { + "name": "children", + "required": true, + "type": "number", + "description": "The counter value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "icon_button": { + "id": "icon_button", + "name": "IconButton", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "This will be the Button description." + }, + { + "name": "variant", + "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", + "defaultValue": "", + "description": "Changes the look and feel of the button which is different for each variant" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Changes the size of the icon button component" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "description": "provide an octicon. It will be placed in the center of the button" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "checkbox_group": { + "id": "checkbox_group", + "name": "CheckboxGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "Used when associating the input group with a label other than CheckboxGroup.Label" + }, + { + "name": "children", + "type": "CheckboxGroup.Label | CheckboxGroup.Caption | CheckboxGroup.Validation | FormControl", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the input group allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "a generated string", + "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " + }, + { + "name": "onChange", + "type": "(selected: string[], e?: ChangeEvent) => void", + "defaultValue": "", + "description": "An onChange handler that gets called when the selection changes" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must make a selection before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "CheckboxGroup.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the fieldset legend will be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "CheckboxGroup.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The caption content" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "CheckboxGroup.Validation", "props": [ { "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The validation message" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", "required": true, - "type": "number", - "description": "The counter value." + "description": "Changes the visual style to match the validation status" }, { "name": "sx", @@ -2547,45 +2404,6 @@ } ] }, - "icon_button": { - "id": "icon_button", - "name": "IconButton", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "defaultValue": "", - "required": true, - "description": "This will be the Button description." - }, - { - "name": "variant", - "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", - "defaultValue": "", - "description": "Changes the look and feel of the button which is different for each variant" - }, - { - "name": "size", - "type": "'small' | 'medium' | 'large'", - "defaultValue": "", - "description": "Changes the size of the icon button component" - }, - { - "name": "icon", - "type": "Component", - "defaultValue": "", - "description": "provide an octicon. It will be placed in the center of the button" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] - }, "drafts_dialog": { "id": "drafts_dialog", "name": "Dialog", @@ -3503,6 +3321,117 @@ ], "subcomponents": [] }, + "radio_group": { + "id": "radio_group", + "name": "RadioGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "Used when associating the input group with a label other than RadioGroup.Label" + }, + { + "name": "children", + "type": "RadioGroup.Label | RadioGroup.Caption | RadioGroup.Validation | FormControl", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the input group allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "A generated string", + "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " + }, + { + "name": "name", + "type": "string", + "defaultValue": "", + "required": true, + "description": "The name used to identify this group of radios" + }, + { + "name": "onChange", + "type": "(selected: string | null, e?: ChangeEvent) => void", + "defaultValue": "", + "description": "An onChange handler that gets called when the selection changes" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must make a selection before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "RadioGroup.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the fieldset legend will be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The caption content" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.Validation", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The validation message" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, "relative_time": { "id": "relative_time", "name": "RelativeTime", @@ -3966,6 +3895,77 @@ } ] }, + "toggle_switch": { + "id": "toggle_switch", + "name": "ToggleSwitch", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-describedby", + "type": "string", + "defaultValue": "", + "description": "The id of the DOM node that describes the switch" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "required": true, + "description": "The id of the DOM node that labels the switch" + }, + { + "name": "defaultChecked", + "type": "boolean", + "defaultValue": "", + "description": "Uncontrolled - whether the switch is turned on" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "", + "description": "Whether the switch is ready for user input" + }, + { + "name": "loading", + "type": "boolean", + "defaultValue": "", + "description": "Whether the switch's value is being calculated" + }, + { + "name": "checked", + "type": "boolean", + "defaultValue": "", + "description": "Whether the switch is turned on" + }, + { + "name": "onChange", + "type": "(on: boolean) => void", + "defaultValue": "", + "description": "The callback that is called when the switch is toggled on or off" + }, + { + "name": "onClick", + "type": "(e: MouseEvent) => void", + "defaultValue": "", + "description": "The callback that is called when the switch is clicked" + }, + { + "name": "size", + "type": "'small' | 'medium'", + "defaultValue": "'medium'", + "description": "Size of the switch" + }, + { + "name": "statusLabelPosition", + "type": "'start' | 'end'", + "defaultValue": "'start'", + "description": "
Whether the \"on\" and \"off\" labels should appear before or after the switch.
This should only be changed when the switch's alignment needs to be adjusted. For example: It needs to be left-aligned because the label appears above it and the caption appears below it.
" + } + ], + "subcomponents": [] + }, "token": { "id": "token", "name": "Token", From c2b7d78d8973ce383542ff4a47c51ff30cbb1da1 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 15:25:19 -0500 Subject: [PATCH 13/24] refactor(Pagination): moved tests --- .../Pagination/Pagination.test.tsx | 4 +- .../Pagination.types.test.tsx | 2 +- .../Pagination/PaginationModel.test.tsx | 2 +- .../__snapshots__/Pagination.test.tsx.snap | 200 ++++++++++++++++++ 4 files changed, 204 insertions(+), 4 deletions(-) rename src/{__tests__ => }/Pagination/Pagination.test.tsx (89%) rename src/{__tests__ => Pagination}/Pagination.types.test.tsx (89%) rename src/{__tests__ => }/Pagination/PaginationModel.test.tsx (98%) create mode 100644 src/Pagination/__snapshots__/Pagination.test.tsx.snap diff --git a/src/__tests__/Pagination/Pagination.test.tsx b/src/Pagination/Pagination.test.tsx similarity index 89% rename from src/__tests__/Pagination/Pagination.test.tsx rename to src/Pagination/Pagination.test.tsx index f71785d165b..f56f80d4385 100644 --- a/src/__tests__/Pagination/Pagination.test.tsx +++ b/src/Pagination/Pagination.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Pagination from '../../Pagination' -import {behavesAsComponent} from '../../utils/testing' +import Pagination from '.' +import {behavesAsComponent} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Pagination.types.test.tsx b/src/Pagination/Pagination.types.test.tsx similarity index 89% rename from src/__tests__/Pagination.types.test.tsx rename to src/Pagination/Pagination.types.test.tsx index fc3228e3c2c..801baca2fd5 100644 --- a/src/__tests__/Pagination.types.test.tsx +++ b/src/Pagination/Pagination.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Pagination from '../Pagination' +import Pagination from '.' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/Pagination/PaginationModel.test.tsx b/src/Pagination/PaginationModel.test.tsx similarity index 98% rename from src/__tests__/Pagination/PaginationModel.test.tsx rename to src/Pagination/PaginationModel.test.tsx index a119873f346..e059ed1fe4b 100644 --- a/src/__tests__/Pagination/PaginationModel.test.tsx +++ b/src/Pagination/PaginationModel.test.tsx @@ -1,4 +1,4 @@ -import {buildPaginationModel} from '../../Pagination/model' +import {buildPaginationModel} from './model' // eslint-disable-next-line @typescript-eslint/no-explicit-any function first(array: Array, count = 1) { diff --git a/src/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/Pagination/__snapshots__/Pagination.test.tsx.snap new file mode 100644 index 00000000000..4d8a364a6d6 --- /dev/null +++ b/src/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -0,0 +1,200 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Pagination renders consistently 1`] = ` +.c1 { + display: inline-block; +} + +.c2 { + display: inline-block; + min-width: 32px; + padding: 5px 10px; + font-style: normal; + line-height: 20px; + color: #24292f; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-text-decoration: none; + text-decoration: none; + margin-right: 4px; + border: 1px solid transparent; + border-radius: 6px; + -webkit-transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1); + transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1); +} + +.c2:last-child { + margin-right: 0; +} + +.c2:hover, +.c2:focus { + -webkit-text-decoration: none; + text-decoration: none; + border-color: #d0d7de; + outline: 0; + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; +} + +.c2:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 0; +} + +.c2:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c2:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: 0; +} + +.c2:active { + border-color: hsla(210,18%,87%,1); +} + +.c2[rel='prev'], +.c2[rel='next'] { + color: #0969da; +} + +.c2[aria-current], +.c2[aria-current]:hover { + color: #ffffff; + background-color: #0969da; + border-color: transparent; +} + +.c2[aria-disabled], +.c2[aria-disabled]:hover { + color: #8c959f; + cursor: default; + border-color: transparent; +} + +.c0 { + margin-top: 20px; + margin-bottom: 15px; + text-align: center; +} + +@supports (-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%)) or (clip-path:polygon(50% 0,100% 50%,50% 100%)) { + .c2[rel='prev']::before, + .c2[rel='next']::after { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: text-bottom; + content: ''; + background-color: currentColor; + } + + .c2[rel='prev']::before { + margin-right: 4px; + -webkit-clip-path: polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px ); + clip-path: polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px ); + } + + .c2[rel='next']::after { + margin-left: 4px; + -webkit-clip-path: polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px ); + clip-path: polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px ); + } +} + + +`; From 9f373d3411e04dc42b680dded49bbbd6a2669b26 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Wed, 1 Feb 2023 15:28:14 -0500 Subject: [PATCH 14/24] refactor(ActionList): move test --- src/{__tests__ => ActionList}/ActionList.test.tsx | 2 +- .../__snapshots__/ActionList.test.tsx.snap | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) rename src/{__tests__ => ActionList}/ActionList.test.tsx (99%) create mode 100644 src/ActionList/__snapshots__/ActionList.test.tsx.snap diff --git a/src/__tests__/ActionList.test.tsx b/src/ActionList/ActionList.test.tsx similarity index 99% rename from src/__tests__/ActionList.test.tsx rename to src/ActionList/ActionList.test.tsx index 02adf1cb11c..92909f8d1e2 100644 --- a/src/__tests__/ActionList.test.tsx +++ b/src/ActionList/ActionList.test.tsx @@ -2,7 +2,7 @@ import {render as HTMLRender, waitFor, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import React from 'react' import theme from '../theme' -import {ActionList} from '../ActionList' +import {ActionList} from '.' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' import {BaseStyles, ThemeProvider, SSRProvider} from '..' expect.extend(toHaveNoViolations) diff --git a/src/ActionList/__snapshots__/ActionList.test.tsx.snap b/src/ActionList/__snapshots__/ActionList.test.tsx.snap new file mode 100644 index 00000000000..5bbbad35875 --- /dev/null +++ b/src/ActionList/__snapshots__/ActionList.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ActionList renders consistently 1`] = ` +.c0 { + margin: 0; + padding-inline-start: 0; + padding-top: 8px; + padding-bottom: 8px; +} + +