From 68a57d6546d1bbb784f1c0cec4875d09bbe03d24 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 29 Oct 2024 13:05:15 -0500 Subject: [PATCH] chore: format files --- .../adrs/adr-002-behavior-isolation.md | 2 + packages/react/src/ActionList/Group.tsx | 2 +- packages/react/src/ActionList/List.tsx | 2 +- packages/react/src/Button/ButtonBase.tsx | 27 +++++++----- .../react/src/DataTable/DataTable.stories.tsx | 4 +- packages/react/src/DataTable/useTable.ts | 4 +- packages/react/src/DataTable/utils.ts | 44 +++++++++---------- packages/react/src/PageLayout/PageLayout.tsx | 4 +- .../react/src/SelectPanel/SelectPanel.tsx | 4 +- packages/react/src/hooks/useSlots.ts | 12 ++--- .../components/TextInputInnerAction.tsx | 8 ++-- packages/react/src/sx.ts | 8 ++-- packages/react/src/utils/polymorphic.ts | 8 ++-- .../react/src/utils/types/ComponentProps.ts | 7 +-- 14 files changed, 70 insertions(+), 66 deletions(-) diff --git a/contributor-docs/adrs/adr-002-behavior-isolation.md b/contributor-docs/adrs/adr-002-behavior-isolation.md index 072099e985c..575468dadc1 100644 --- a/contributor-docs/adrs/adr-002-behavior-isolation.md +++ b/contributor-docs/adrs/adr-002-behavior-isolation.md @@ -108,5 +108,7 @@ Some behaviors can be implemented as vanilla JavaScript without introducing addi In general, _portions of behaviors_ that affect or rely on **user interactions and events**, **shared state**, or **CSS styles** should be kept in React Hooks. Parts of the behavior that can be implemented in isolation of these concepts should be built with no dependency on React or other libraries. [^1]: https://codesandbox.io/s/demo-styling-custom-element-g973d?file=/src/index.tsx + [^2]: https://github.com/github/details-dialog-element/blob/main/src/index.ts#L195 + [^3]: https://github.com/github/details-dialog-element#details-dialog-close diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index 1e29f5be58d..d0db9a77ff2 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -97,7 +97,7 @@ export const Group: React.FC> = ({ // because the heading is hidden from the accessibility tree and only used for presentation role. // We will instead use aria-label to label the list. See a line below. aria-labelledby={listRole ? undefined : groupHeadingId} - aria-label={listRole ? title ?? (slots.groupHeading?.props.children as string) : undefined} + aria-label={listRole ? (title ?? (slots.groupHeading?.props.children as string)) : undefined} role={role || (listRole && 'group')} > {slots.groupHeading ? childrenWithoutSlots : props.children} diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx index 7786f392682..874ce8195ef 100644 --- a/packages/react/src/ActionList/List.tsx +++ b/packages/react/src/ActionList/List.tsx @@ -39,7 +39,7 @@ export const List = React.forwardRef( enableFocusZone: enableFocusZoneFromContainer, } = React.useContext(ActionListContainerContext) - const ariaLabelledBy = slots.heading ? slots.heading.props.id ?? headingId : listLabelledBy + const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy const listRole = role || listRoleFromContainer const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index dc4ffdcfad1..f64137b8433 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -198,13 +198,13 @@ const ButtonBase = forwardRef( true, ) : TrailingVisual - ? renderModuleVisual( - TrailingVisual, - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - false, - ) - : null + ? renderModuleVisual( + TrailingVisual, + Boolean(loading) && !LeadingVisual, + 'trailingVisual', + false, + ) + : null } { @@ -314,8 +314,13 @@ const ButtonBase = forwardRef( true, ) : TrailingVisual - ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) - : null + ? renderModuleVisual( + TrailingVisual, + Boolean(loading) && !LeadingVisual, + 'trailingVisual', + false, + ) + : null } { @@ -420,8 +425,8 @@ const ButtonBase = forwardRef( 'trailingVisual', ) : TrailingVisual - ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual') - : null + ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual') + : null } { diff --git a/packages/react/src/DataTable/DataTable.stories.tsx b/packages/react/src/DataTable/DataTable.stories.tsx index 7726463411d..610b33dfcb0 100644 --- a/packages/react/src/DataTable/DataTable.stories.tsx +++ b/packages/react/src/DataTable/DataTable.stories.tsx @@ -189,8 +189,8 @@ export const Playground = (args: DataTableProps & ColWidthArgTypes) = return args[`colWidth${colIndex}`] !== 'explicit width' ? args[`colWidth${colIndex}`] : args[`explicitColWidth${colIndex}`] - ? args[`explicitColWidth${colIndex}`] - : 'grow' + ? args[`explicitColWidth${colIndex}`] + : 'grow' } const align = args.align as CellAlignment diff --git a/packages/react/src/DataTable/useTable.ts b/packages/react/src/DataTable/useTable.ts index c5a9140744c..28fd042b2a4 100644 --- a/packages/react/src/DataTable/useTable.ts +++ b/packages/react/src/DataTable/useTable.ts @@ -135,8 +135,8 @@ export function useTable({ header.column.sortBy === true ? strategies.basic : typeof header.column.sortBy === 'string' - ? strategies[header.column.sortBy] - : header.column.sortBy + ? strategies[header.column.sortBy] + : header.column.sortBy setRowOrder(rowOrder => { return rowOrder.slice().sort((a, b) => { diff --git a/packages/react/src/DataTable/utils.ts b/packages/react/src/DataTable/utils.ts index e28c1d362aa..779a4598468 100644 --- a/packages/react/src/DataTable/utils.ts +++ b/packages/react/src/DataTable/utils.ts @@ -12,9 +12,9 @@ type MaxLength = ArrayOfLength<10>[number] type ArrayIndex, Keys extends number = never> = A extends readonly [] ? Keys : // eslint-disable-next-line @typescript-eslint/no-unused-vars - A extends readonly [infer _, ...infer Tail] - ? ArrayIndex - : Keys + A extends readonly [infer _, ...infer Tail] + ? ArrayIndex + : Keys // Check if the given type is within the bounds set by `MaxLength` // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -30,25 +30,25 @@ type ArrayWithinBounds = T extends ReadonlyArray & {length: infer Length export type ObjectPaths = T extends readonly any[] & ArrayWithinBounds ? `${ArrayIndex}` | PrefixPath> : // eslint-disable-next-line @typescript-eslint/no-explicit-any - T extends any[] - ? never & 'Unable to determine keys of potentially boundless array' - : T extends Date - ? never - : T extends object - ? Extract | PrefixPath> - : never + T extends any[] + ? never & 'Unable to determine keys of potentially boundless array' + : T extends Date + ? never + : T extends object + ? Extract | PrefixPath> + : never -type PrefixPath = Prefix extends Extract - ? `${Prefix}.${ObjectPaths}` - : never +type PrefixPath = + Prefix extends Extract ? `${Prefix}.${ObjectPaths}` : never // Get the value of a given path within an object -export type ObjectPathValue = ObjectType extends Record< - string | number, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - any -> - ? Path extends `${infer Key}.${infer NestedPath}` - ? ObjectPathValue - : ObjectType[Path] - : never +export type ObjectPathValue = + ObjectType extends Record< + string | number, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + any + > + ? Path extends `${infer Key}.${infer NestedPath}` + ? ObjectPathValue + : ObjectType[Path] + : never diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx index 994f3d007a6..dee02530fcc 100644 --- a/packages/react/src/PageLayout/PageLayout.tsx +++ b/packages/react/src/PageLayout/PageLayout.tsx @@ -788,8 +788,8 @@ const Pane = React.forwardRef )} diff --git a/packages/react/src/hooks/useSlots.ts b/packages/react/src/hooks/useSlots.ts index 29aaed481af..9fb3d824b29 100644 --- a/packages/react/src/hooks/useSlots.ts +++ b/packages/react/src/hooks/useSlots.ts @@ -20,12 +20,12 @@ type SlotElements = { type SlotValue = Config[Property] extends React.ElementType // config option 1 ? React.ReactElement, Config[Property]> : Config[Property] extends readonly [ - infer ElementType extends React.ElementType, // config option 2, infer array[0] as component - // eslint-disable-next-line @typescript-eslint/no-unused-vars - infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props - ] - ? React.ReactElement, ElementType> - : never // useful for narrowing types, third option is not possible + infer ElementType extends React.ElementType, // config option 2, infer array[0] as component + // eslint-disable-next-line @typescript-eslint/no-unused-vars + infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props + ] + ? React.ReactElement, ElementType> + : never // useful for narrowing types, third option is not possible /** * Extract components from `children` so we can render them in different places, diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx index ec9b6100828..75fcb22349f 100644 --- a/packages/react/src/internal/components/TextInputInnerAction.tsx +++ b/packages/react/src/internal/components/TextInputInnerAction.tsx @@ -107,10 +107,10 @@ const TextInputAction = forwardRef( const accessibleLabel = ariaLabel ? {'aria-label': ariaLabel} : ariaLabelledBy - ? {'aria-labelledby': ariaLabelledBy} - : { - 'aria-label': '', - } + ? {'aria-labelledby': ariaLabelledBy} + : { + 'aria-label': '', + } return ( diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts index de25c93e0c0..5b9a20fc011 100644 --- a/packages/react/src/sx.ts +++ b/packages/react/src/sx.ts @@ -8,10 +8,10 @@ export type BetterCssProperties = { [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof BorderColorProps - ? ThemeColorPaths | SystemCssProperties[K] - : K extends keyof ShadowProps - ? ThemeShadowPaths | SystemCssProperties[K] - : SystemCssProperties[K] + ? ThemeColorPaths | SystemCssProperties[K] + : K extends keyof ShadowProps + ? ThemeShadowPaths | SystemCssProperties[K] + : SystemCssProperties[K] } // Support CSS custom properties in the `sx` prop diff --git a/packages/react/src/utils/polymorphic.ts b/packages/react/src/utils/polymorphic.ts index 9e017eb33ae..1dd2314cd53 100644 --- a/packages/react/src/utils/polymorphic.ts +++ b/packages/react/src/utils/polymorphic.ts @@ -50,10 +50,10 @@ interface ForwardRefComponent< props: As extends '' ? {as: keyof JSX.IntrinsicElements} : As extends React.ComponentType - ? Merge - : As extends keyof JSX.IntrinsicElements - ? Merge - : never, + ? Merge + : As extends keyof JSX.IntrinsicElements + ? Merge + : never, ): React.ReactElement | null } diff --git a/packages/react/src/utils/types/ComponentProps.ts b/packages/react/src/utils/types/ComponentProps.ts index 83256126a04..4ddc3c7cf95 100644 --- a/packages/react/src/utils/types/ComponentProps.ts +++ b/packages/react/src/utils/types/ComponentProps.ts @@ -5,8 +5,5 @@ * * @example ComponentProps */ -export type ComponentProps = T extends React.ComponentType> - ? Props extends object - ? Props - : never - : never +export type ComponentProps = + T extends React.ComponentType> ? (Props extends object ? Props : never) : never