From 2bceef8fa3cc1505a4197ffa33d30b1d49a12c96 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 6 Sep 2022 14:13:57 -0500 Subject: [PATCH 1/5] refactor(imports): change circular import references --- src/Autocomplete/AutocompleteMenu.tsx | 4 +++- src/AvatarPair.tsx | 2 +- src/AvatarStack.tsx | 2 +- src/CheckboxGroup.tsx | 3 ++- src/FormControl/FormControl.tsx | 10 +++++++++- src/FormControl/_FormControlLeadingVisual.tsx | 2 +- src/PageLayout/PageLayout.tsx | 2 +- src/SegmentedControl/SegmentedControl.tsx | 4 +++- src/SegmentedControl/SegmentedControlButton.tsx | 2 +- src/Timeline.tsx | 2 +- src/ToggleSwitch.tsx | 4 +++- src/Token/AvatarToken.tsx | 2 +- src/Token/Token.tsx | 2 +- src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx | 3 ++- .../_CheckboxOrRadioGroupCaption.tsx | 2 +- .../_CheckboxOrRadioGroupLabel.tsx | 2 +- src/_InputCaption.tsx | 2 +- src/_InputLabel.tsx | 2 +- src/_InputValidation.tsx | 3 ++- src/_TextInputInnerAction.tsx | 5 +++-- src/_TextInputInnerVisualSlot.tsx | 3 ++- src/_ValidationAnimationContainer.tsx | 2 +- .../InlineAutocomplete/_AutocompleteSuggestions.tsx | 2 +- 23 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/Autocomplete/AutocompleteMenu.tsx b/src/Autocomplete/AutocompleteMenu.tsx index f21a5441bac..f2be474df84 100644 --- a/src/Autocomplete/AutocompleteMenu.tsx +++ b/src/Autocomplete/AutocompleteMenu.tsx @@ -4,7 +4,9 @@ import type {ScrollIntoViewOptions} from '@primer/behaviors' import {ActionList, ItemProps} from '../deprecated/ActionList' import {useFocusZone} from '../hooks/useFocusZone' import {ComponentProps, MandateProps} from '../utils/types' -import {Box, Spinner, useSSRSafeId} from '../' +import Box from '../Box' +import Spinner from '../Spinner' +import {useSSRSafeId} from '../utils/ssr' import {AutocompleteContext} from './AutocompleteContext' import {PlusIcon} from '@primer/octicons-react' import VisuallyHidden from '../_VisuallyHidden' diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx index a4256e57c21..8ebe308e45b 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -2,7 +2,7 @@ import React from 'react' import styled from 'styled-components' import Avatar from './Avatar' import {get} from './constants' -import {Box, BoxProps} from '.' +import Box, {BoxProps} from './Box' const ChildAvatar = styled(Avatar)` position: absolute; diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index a0224062dc1..9cb3271afad 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -2,7 +2,7 @@ import classnames from 'classnames' import React from 'react' import styled from 'styled-components' import {get} from './constants' -import {Box} from '.' +import Box from './Box' import sx, {SxProp} from './sx' type StyledAvatarStackWrapperProps = { diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup.tsx index a37dcbe54b9..16c88f8ca83 100644 --- a/src/CheckboxGroup.tsx +++ b/src/CheckboxGroup.tsx @@ -5,7 +5,8 @@ import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioG import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' import {useRenderForcingRef} from './hooks' import {SxProp} from './sx' -import {Checkbox, FormControl} from '.' +import FormControl from './FormControl' +import Checkbox from './Checkbox' type CheckboxGroupProps = { /** diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index 0193ad47f95..c344ddc5b24 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -1,5 +1,13 @@ import React, {useContext} from 'react' -import {Autocomplete, Box, Checkbox, Radio, Select, Textarea, TextInput, TextInputWithTokens, useSSRSafeId} from '..' +import Autocomplete from '../Autocomplete' +import Box from '../Box' +import Checkbox from '../Checkbox' +import Radio from '../Radio' +import Select from '../Select' +import Textarea from '../Textarea' +import TextInput from '../TextInput' +import TextInputWithTokens from '../TextInputWithTokens' +import {useSSRSafeId} from '../utils/ssr' import FormControlCaption from './_FormControlCaption' import FormControlLabel from './_FormControlLabel' import FormControlValidation from './_FormControlValidation' diff --git a/src/FormControl/_FormControlLeadingVisual.tsx b/src/FormControl/_FormControlLeadingVisual.tsx index 4b5cbc8f63b..f69480831e0 100644 --- a/src/FormControl/_FormControlLeadingVisual.tsx +++ b/src/FormControl/_FormControlLeadingVisual.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Box} from '..' +import Box from '../Box' import {get} from '../constants' import {SxProp} from '../sx' import {FormControlContext} from './FormControl' diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index f613e8a89e1..c03ec999505 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,6 +1,6 @@ import React from 'react' import {useStickyPaneHeight} from './useStickyPaneHeight' -import {Box} from '..' +import Box from '../Box' import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' import {BetterSystemStyleObject, merge, SxProp} from '../sx' diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index 9d07be8b227..58ce5421c00 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -1,7 +1,9 @@ import React, {useRef, useState} from 'react' import Button, {SegmentedControlButtonProps} from './SegmentedControlButton' import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './SegmentedControlIconButton' -import {ActionList, ActionMenu, useTheme} from '..' +import {ActionList} from '../ActionList' +import {ActionMenu} from '../ActionMenu' +import {useTheme} from '../ThemeProvider' import sx, {merge, SxProp} from '../sx' import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' import {ViewportRangeKeys} from '../utils/types/ViewportRangeKeys' diff --git a/src/SegmentedControl/SegmentedControlButton.tsx b/src/SegmentedControl/SegmentedControlButton.tsx index cc89d2e3f37..8c083141d17 100644 --- a/src/SegmentedControl/SegmentedControlButton.tsx +++ b/src/SegmentedControl/SegmentedControlButton.tsx @@ -1,7 +1,7 @@ import React, {HTMLAttributes} from 'react' import {IconProps} from '@primer/octicons-react' import styled from 'styled-components' -import {Box} from '..' +import Box from '../Box' import sx, {merge, SxProp} from '../sx' import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles' diff --git a/src/Timeline.tsx b/src/Timeline.tsx index 9fa3d2ad219..9236456a1b7 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -1,7 +1,7 @@ import classnames from 'classnames' import React from 'react' import styled, {css} from 'styled-components' -import {Box} from '.' +import Box from './Box' import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx index ebf43b993cb..4aca0e59a6b 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch.tsx @@ -1,7 +1,9 @@ import React, {MouseEventHandler, useCallback, useEffect} from 'react' import styled, {css} from 'styled-components' import {variant} from 'styled-system' -import {Box, Spinner, Text} from '.' +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' diff --git a/src/Token/AvatarToken.tsx b/src/Token/AvatarToken.tsx index b9f462505ec..6dd1532922b 100644 --- a/src/Token/AvatarToken.tsx +++ b/src/Token/AvatarToken.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import {get} from '../constants' import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase' import Token from './Token' -import {Avatar} from '..' +import Avatar from '../Avatar' // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change export interface AvatarTokenProps extends TokenBaseProps { diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index f9e67231921..e9866969a3e 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -1,5 +1,5 @@ import React, {forwardRef, MouseEventHandler} from 'react' -import {Box} from '..' +import Box from '../Box' import {merge, SxProp} from '../sx' import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase' import RemoveTokenButton from './_RemoveTokenButton' diff --git a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx index e72ac308101..227cd2cdb75 100644 --- a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx +++ b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx @@ -1,5 +1,6 @@ import React from 'react' -import {Box, useSSRSafeId} from '..' +import Box from '../Box' +import {useSSRSafeId} from '../utils/ssr' import ValidationAnimationContainer from '../_ValidationAnimationContainer' import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroupCaption' import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroupLabel' diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx index 6286098713c..cbae8c9c3ed 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Text} from '..' +import Text from '../Text' import {SxProp} from '../sx' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' import {Slot} from './slots' diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx index 9b4b0a4008f..1c30731056b 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Box} from '..' +import Box from '../Box' import {SxProp} from '../sx' import VisuallyHidden from '../_VisuallyHidden' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' diff --git a/src/_InputCaption.tsx b/src/_InputCaption.tsx index b7a77ae4f1f..54fab427c9d 100644 --- a/src/_InputCaption.tsx +++ b/src/_InputCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Text} from '.' +import Text from './Text' import {SxProp} from './sx' type Props = { diff --git a/src/_InputLabel.tsx b/src/_InputLabel.tsx index 35bc3b584a9..89c2be9c954 100644 --- a/src/_InputLabel.tsx +++ b/src/_InputLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Box} from '.' +import Box from './Box' import {SxProp} from './sx' import VisuallyHidden from './_VisuallyHidden' diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx index 9f147460871..4284c901ab3 100644 --- a/src/_InputValidation.tsx +++ b/src/_InputValidation.tsx @@ -1,6 +1,7 @@ import {AlertFillIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react' import React from 'react' -import {Box, Text} from '.' +import Box from './Box' +import Text from './Text' import {SxProp} from './sx' import {FormValidationStatus} from './utils/types/FormValidationStatus' diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx index 4d2d6eb4fde..63ad6378dd2 100644 --- a/src/_TextInputInnerAction.tsx +++ b/src/_TextInputInnerAction.tsx @@ -1,7 +1,8 @@ import React, {forwardRef} from 'react' import {IconProps} from '@primer/octicons-react' -import {Box, Button, IconButton, Tooltip} from '.' -import {ButtonProps} from './Button' +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'> & { diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx index 2fd86eab436..67524814196 100644 --- a/src/_TextInputInnerVisualSlot.tsx +++ b/src/_TextInputInnerVisualSlot.tsx @@ -1,5 +1,6 @@ import React from 'react' -import {Box, Spinner} from '.' +import Box from './Box' +import Spinner from './Spinner' import {TextInputNonPassthroughProps} from './TextInput' const TextInputInnerVisualSlot: React.FC< diff --git a/src/_ValidationAnimationContainer.tsx b/src/_ValidationAnimationContainer.tsx index a3cb6d9867c..c774600a57e 100644 --- a/src/_ValidationAnimationContainer.tsx +++ b/src/_ValidationAnimationContainer.tsx @@ -1,6 +1,6 @@ import React, {HTMLProps, useEffect, useState} from 'react' import styled, {keyframes, css} from 'styled-components' -import {Box} from '.' +import Box from './Box' interface Props extends HTMLProps { show?: boolean diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx index 181dc6a58a5..defa8fe8c95 100644 --- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx +++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useState} from 'react' -import {Spinner} from '../..' +import Spinner from '../../Spinner' import {ActionList, ActionListItemProps} from '../../ActionList' import Box from '../../Box' import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox' From ee952d5ae9aaae6c35a1629c76bedb95f35da7f5 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 6 Sep 2022 14:23:19 -0500 Subject: [PATCH 2/5] refactor(checkbox): move out shared context into module --- src/Checkbox.tsx | 2 +- src/CheckboxGroup.tsx | 8 +++----- src/CheckboxGroupContext.ts | 6 ++++++ 3 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 src/CheckboxGroupContext.ts diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx index 7607d2dfcb1..5d766deeede 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 './CheckboxGroup' +import {CheckboxGroupContext} from './CheckboxGroupContext' import getGlobalFocusStyles from './_getGlobalFocusStyles' export type CheckboxProps = { diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup.tsx index 16c88f8ca83..d7d73ef981a 100644 --- a/src/CheckboxGroup.tsx +++ b/src/CheckboxGroup.tsx @@ -7,6 +7,7 @@ import {useRenderForcingRef} from './hooks' import {SxProp} from './sx' import FormControl from './FormControl' import Checkbox from './Checkbox' +import {CheckboxGroupContext} from './CheckboxGroupContext' type CheckboxGroupProps = { /** @@ -16,11 +17,6 @@ type CheckboxGroupProps = { } & CheckboxOrRadioGroupProps & SxProp -export const CheckboxGroupContext = createContext<{ - disabled?: boolean - onChange?: ChangeEventHandler -}>({}) - const CheckboxGroup: FC> = ({children, disabled, onChange, ...rest}) => { const formControlComponentChildren = React.Children.toArray(children) .filter(child => React.isValidElement(child) && child.type === FormControl) @@ -70,6 +66,8 @@ const CheckboxGroup: FC> = ({childre ) } +export {CheckboxGroupContext} + export default Object.assign(CheckboxGroup, { Caption: CheckboxOrRadioGroupCaption, Label: CheckboxOrRadioGroupLabel, diff --git a/src/CheckboxGroupContext.ts b/src/CheckboxGroupContext.ts new file mode 100644 index 00000000000..1abd67bf6f9 --- /dev/null +++ b/src/CheckboxGroupContext.ts @@ -0,0 +1,6 @@ +import {ChangeEventHandler, createContext} from 'react' + +export const CheckboxGroupContext = createContext<{ + disabled?: boolean + onChange?: ChangeEventHandler +}>({}) From a259922b3a5798df81538d46c28e824e969f4829 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 6 Sep 2022 14:23:32 -0500 Subject: [PATCH 3/5] refactor(ActionList): move out shared values into module --- src/ActionList/Description.tsx | 2 +- src/ActionList/Item.tsx | 83 +-------------------------------- src/ActionList/LinkItem.tsx | 3 +- src/ActionList/Selection.tsx | 2 +- src/ActionList/Visuals.tsx | 2 +- src/ActionList/index.ts | 2 +- src/ActionList/shared.ts | 85 ++++++++++++++++++++++++++++++++++ 7 files changed, 92 insertions(+), 87 deletions(-) create mode 100644 src/ActionList/shared.ts diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index 20950363b0e..b8a653ba74c 100644 --- a/src/ActionList/Description.tsx +++ b/src/ActionList/Description.tsx @@ -2,7 +2,7 @@ import React from 'react' import Box from '../Box' import {SxProp, merge} from '../sx' import Truncate from '../Truncate' -import {Slot, ItemContext} from './Item' +import {Slot, ItemContext} from './shared' export type ActionListDescriptionProps = { /** diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 9e5bae0ab18..bc5993d42fa 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -5,94 +5,13 @@ import styled from 'styled-components' import Box, {BoxProps} from '../Box' import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' -import createSlots from '../utils/create-slots' -import {AriaRole} from '../utils/types' import {ActionListContainerContext} from './ActionListContainerContext' import {ActionListGroupProps, GroupContext} from './Group' import {ActionListProps, ListContext} from './List' import {Selection} from './Selection' - -export const getVariantStyles = ( - variant: ActionListItemProps['variant'], - disabled: ActionListItemProps['disabled'] -) => { - if (disabled) { - return { - color: 'primer.fg.disabled', - iconColor: 'primer.fg.disabled', - annotationColor: 'primer.fg.disabled' - } - } - - switch (variant) { - case 'danger': - return { - color: 'danger.fg', - iconColor: 'danger.fg', - annotationColor: 'fg.muted', - hoverColor: 'actionListItem.danger.hoverText' - } - default: - return { - color: 'fg.default', - iconColor: 'fg.muted', - annotationColor: 'fg.muted', - hoverColor: 'fg.default' - } - } -} - -export type ActionListItemProps = { - /** - * Primary content for an Item - */ - children?: React.ReactNode - /** - * Callback that will trigger both on click selection and keyboard selection. - */ - onSelect?: (event: React.MouseEvent | React.KeyboardEvent) => void - /** - * Is the `Item` is currently selected? - */ - selected?: boolean - /** - * Indicate whether the item is active. There should never be more than one active item. - */ - active?: boolean - /** - * Style variations associated with various `Item` types. - * - * - `"default"` - An action `Item`. - * - `"danger"` - A destructive action `Item`. - */ - variant?: 'default' | 'danger' - /** - * Items that are disabled can not be clicked, selected, or navigated through. - */ - disabled?: boolean - /** - * The ARIA role describing the function of `Item` component. `option` is a common value. - */ - role?: AriaRole - /** - * id to attach to the root element of the Item - */ - id?: string - /** - * Private API for use internally only. Used by LinkItem to wrap contents in an anchor - */ - _PrivateItemWrapper?: React.FC> -} & SxProp - -const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']) -export {Slot} -export type ItemContext = Pick & { - inlineDescriptionId: string - blockDescriptionId: string -} +import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared' const LiBox = styled.li(sx) -export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale export const Item = React.forwardRef( ( diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index 6ba8f283f8e..6003cc35cb8 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -2,7 +2,8 @@ import React from 'react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import Link from '../Link' import {SxProp, merge} from '../sx' -import {Item, ActionListItemProps} from './Item' +import {Item} from './Item' +import {ActionListItemProps} from './shared' // adopted from React.AnchorHTMLAttributes type LinkProps = { diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx index 40584cf88db..d98599a66f5 100644 --- a/src/ActionList/Selection.tsx +++ b/src/ActionList/Selection.tsx @@ -2,7 +2,7 @@ import React from 'react' import {CheckIcon} from '@primer/octicons-react' import {ListContext, ActionListProps} from './List' import {GroupContext, ActionListGroupProps} from './Group' -import {ActionListItemProps} from './Item' +import {ActionListItemProps} from './shared' import {LeadingVisualContainer} from './Visuals' type SelectionProps = Pick diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx index fcdbbf16206..28cd76fecbd 100644 --- a/src/ActionList/Visuals.tsx +++ b/src/ActionList/Visuals.tsx @@ -2,7 +2,7 @@ import React from 'react' import Box from '../Box' import {SxProp, merge} from '../sx' import {get} from '../constants' -import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item' +import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './shared' type VisualProps = SxProp & React.HTMLAttributes diff --git a/src/ActionList/index.ts b/src/ActionList/index.ts index 1a88a00728b..78479d0a647 100644 --- a/src/ActionList/index.ts +++ b/src/ActionList/index.ts @@ -8,7 +8,7 @@ import {LeadingVisual, TrailingVisual} from './Visuals' export type {ActionListProps} from './List' export type {ActionListGroupProps} from './Group' -export type {ActionListItemProps} from './Item' +export type {ActionListItemProps} from './shared' export type {ActionListLinkItemProps} from './LinkItem' export type {ActionListDividerProps} from './Divider' export type {ActionListDescriptionProps} from './Description' diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts new file mode 100644 index 00000000000..6be1a8b6406 --- /dev/null +++ b/src/ActionList/shared.ts @@ -0,0 +1,85 @@ +import React from 'react' +import {SxProp} from '../sx' +import createSlots from '../utils/create-slots' +import {AriaRole} from '../utils/types' + +export type ActionListItemProps = { + /** + * Primary content for an Item + */ + children?: React.ReactNode + /** + * Callback that will trigger both on click selection and keyboard selection. + */ + onSelect?: (event: React.MouseEvent | React.KeyboardEvent) => void + /** + * Is the `Item` is currently selected? + */ + selected?: boolean + /** + * Indicate whether the item is active. There should never be more than one active item. + */ + active?: boolean + /** + * Style variations associated with various `Item` types. + * + * - `"default"` - An action `Item`. + * - `"danger"` - A destructive action `Item`. + */ + variant?: 'default' | 'danger' + /** + * Items that are disabled can not be clicked, selected, or navigated through. + */ + disabled?: boolean + /** + * The ARIA role describing the function of `Item` component. `option` is a common value. + */ + role?: AriaRole + /** + * id to attach to the root element of the Item + */ + id?: string + /** + * Private API for use internally only. Used by LinkItem to wrap contents in an anchor + */ + _PrivateItemWrapper?: React.FC> +} & SxProp + +export type ItemContext = Pick & { + inlineDescriptionId: string + blockDescriptionId: string +} + +export const getVariantStyles = ( + variant: ActionListItemProps['variant'], + disabled: ActionListItemProps['disabled'] +) => { + if (disabled) { + return { + color: 'primer.fg.disabled', + iconColor: 'primer.fg.disabled', + annotationColor: 'primer.fg.disabled' + } + } + + switch (variant) { + case 'danger': + return { + color: 'danger.fg', + iconColor: 'danger.fg', + annotationColor: 'fg.muted', + hoverColor: 'actionListItem.danger.hoverText' + } + default: + return { + color: 'fg.default', + iconColor: 'fg.muted', + annotationColor: 'fg.muted', + hoverColor: 'fg.default' + } + } +} + +export const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']) + +export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale From ef7446dfc69284baf572b0ab03313923f7cbe536 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 6 Sep 2022 14:38:46 -0500 Subject: [PATCH 4/5] chore(CheckboxGroup): remove unused import --- src/CheckboxGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup.tsx index d7d73ef981a..4be27465d4b 100644 --- a/src/CheckboxGroup.tsx +++ b/src/CheckboxGroup.tsx @@ -1,4 +1,4 @@ -import React, {ChangeEvent, ChangeEventHandler, createContext, FC} from 'react' +import React, {ChangeEvent, ChangeEventHandler, FC} from 'react' import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup' import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' From 36d55048b7691e413ce54a5924be035b20417b2c Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 6 Sep 2022 14:49:45 -0500 Subject: [PATCH 5/5] test: update snapshots --- .../__snapshots__/TextInput.test.tsx.snap | 360 ++++++++--------- .../TextInputWithTokens.test.tsx.snap | 370 +++++++++--------- .../__snapshots__/ToggleSwitch.test.tsx.snap | 16 +- .../ChoiceFieldset.test.tsx.snap | 102 ++--- 4 files changed, 424 insertions(+), 424 deletions(-) diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 032ff5b43be..23bc455ccd4 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -2732,6 +2732,12 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2827,12 +2833,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -2899,6 +2899,18 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2994,18 +3006,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c2 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c4 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3110,6 +3110,12 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3205,12 +3211,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3281,6 +3281,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3376,23 +3393,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c5 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3532,6 +3532,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3627,23 +3644,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c5 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3783,6 +3783,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3878,23 +3895,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c5 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - left: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4034,6 +4034,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4129,17 +4140,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c4 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4241,6 +4241,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c5 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4336,23 +4353,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c2 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c5 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4492,6 +4492,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.c4 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4587,17 +4598,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c4 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4703,6 +4703,28 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4805,28 +4827,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - -.c6 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5002,6 +5002,28 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5097,28 +5119,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - -.c6 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5293,6 +5293,28 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +.c6 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5393,28 +5415,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - left: 0; -} - -.c6 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 14bc0133dec..df7d7a24dd8 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -768,6 +768,11 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` flex-grow: 1; } +.c7 { + font-size: 16px; + color: #57606a; +} + .c0 { font-size: 14px; line-height: 20px; @@ -870,11 +875,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` outline: 0; } -.c7 { - font-size: 16px; - color: #57606a; -} - .c4 { -webkit-align-items: center; -webkit-box-align: center; @@ -6519,6 +6519,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c8 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6621,12 +6627,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c8 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - .c4 { -webkit-align-items: center; -webkit-box-align: center; @@ -7245,6 +7245,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7347,18 +7359,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c2 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c9 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - .c6 { -webkit-align-items: center; -webkit-box-align: center; @@ -8015,6 +8015,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c8 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + .c0 { font-size: 14px; line-height: 20px; @@ -8117,12 +8123,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c8 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - .c4 { -webkit-align-items: center; -webkit-box-align: center; @@ -8745,6 +8745,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -8847,23 +8864,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c10 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -9555,6 +9555,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: hidden; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -9657,23 +9674,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c10 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: hidden; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -10365,6 +10365,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -10467,23 +10484,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c10 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - left: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -11175,6 +11175,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -11277,17 +11288,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c9 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - .c4 { -webkit-align-items: center; -webkit-box-align: center; @@ -11941,6 +11941,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } +.c2 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + visibility: visible; +} + +.c10 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -12043,23 +12060,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c2 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - visibility: visible; -} - -.c10 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - .c6 { -webkit-align-items: center; -webkit-box-align: center; @@ -12751,6 +12751,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } +.c9 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -12853,17 +12864,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c9 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - .c4 { -webkit-align-items: center; -webkit-box-align: center; @@ -13521,6 +13521,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -13630,28 +13652,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - -.c11 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -14378,6 +14378,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -14480,28 +14502,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - left: 0; -} - -.c11 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - right: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -15228,6 +15228,28 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } +.c3 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: hidden; + left: 0; +} + +.c11 { + -webkit-animation: rotate-keyframes 1s linear infinite; + animation: rotate-keyframes 1s linear infinite; + position: absolute; + top: 0; + height: 100%; + max-width: 100%; + visibility: visible; + right: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -15330,28 +15352,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` outline: 0; } -.c3 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: hidden; - left: 0; -} - -.c11 { - -webkit-animation: rotate-keyframes 1s linear infinite; - animation: rotate-keyframes 1s linear infinite; - position: absolute; - top: 0; - height: 100%; - max-width: 100%; - visibility: visible; - right: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap index 91f728c3e4e..e5451fca3ea 100644 --- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap +++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap @@ -85,6 +85,14 @@ exports[`renders consistently 1`] = ` flex-direction: row; } +.c1 { + font-size: 14px; + color: #24292f; + margin-left: 8px; + margin-right: 8px; + position: relative; +} + .c5 { position: absolute; width: 1px; @@ -98,14 +106,6 @@ exports[`renders consistently 1`] = ` border-width: 0; } -.c1 { - font-size: 14px; - color: #24292f; - margin-left: 8px; - margin-right: 8px; - position: relative; -} - .c4 { vertical-align: middle; cursor: pointer; diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index 8583fbeaabb..e9636959eeb 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -217,6 +217,11 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = ` flex-direction: column; } +.c3 { + font-size: 14px; + color: #24292f; +} + .c2 { font-size: 16px; padding: 0; @@ -253,11 +258,6 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = ` outline-offset: 0; } -.c3 { - font-size: 14px; - color: #24292f; -} - .c4 { display: -webkit-box; display: -webkit-flex; @@ -423,6 +423,12 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption fill: currentColor; } +.c10 { + font-size: 12px; + color: #57606a; + display: block; +} + .c2 { font-size: 16px; padding: 0; @@ -459,12 +465,6 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption outline-offset: 0; } -.c10 { - font-size: 12px; - color: #57606a; - display: block; -} - .c3 { display: -webkit-box; display: -webkit-flex; @@ -1651,6 +1651,26 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = ` animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); } +.c12 { + font-size: 12px; + font-weight: bold; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: success.fg; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c12 a { + color: currentColor; + -webkit-text-decoration: underline; + text-decoration: underline; +} + .c2 { font-size: 16px; padding: 0; @@ -1687,26 +1707,6 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = ` outline-offset: 0; } -.c12 { - font-size: 12px; - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: success.fg; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c12 a { - color: currentColor; - -webkit-text-decoration: underline; - text-decoration: underline; -} - .c3 { display: -webkit-box; display: -webkit-flex; @@ -1913,6 +1913,26 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = ` animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); } +.c12 { + font-size: 12px; + font-weight: bold; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: danger.fg; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c12 a { + color: currentColor; + -webkit-text-decoration: underline; + text-decoration: underline; +} + .c2 { font-size: 16px; padding: 0; @@ -1949,26 +1969,6 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = ` outline-offset: 0; } -.c12 { - font-size: 12px; - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: danger.fg; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c12 a { - color: currentColor; - -webkit-text-decoration: underline; - text-decoration: underline; -} - .c3 { display: -webkit-box; display: -webkit-flex;