Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update prettier #676

Merged
merged 4 commits into from
Oct 17, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion design-system/pkg/src/badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const Badge: ForwardRefExoticComponent<
({
icon: { color: fg },
text: { trim: false, color: fg, weight: 'medium' },
} as const),
}) as const,
[fg]
);

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function Checkbox(props: CheckboxProps) {
({
text: { color: 'inherit' },
description: { color: 'neutralTertiary' },
} as const),
}) as const,
[]
);

Expand Down
29 changes: 14 additions & 15 deletions design-system/pkg/src/core/globals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,23 @@ export const documentElementClasses = (args: {
* Deactivate auto-enlargement of small text in Safari. Remove the default touch
* highlight in Safari. Reset the body element to sane defaults.
*/
const documentReset = (background: StrictBackground = 'canvas') =>
css`
const documentReset = (background: StrictBackground = 'canvas') => css`
html& {
scroll-behavior: smooth;
text-size-adjust: none;
-webkit-tap-highlight-color: #0000;
}
@media (prefers-reduced-motion: reduce) {
html& {
scroll-behavior: smooth;
text-size-adjust: none;
-webkit-tap-highlight-color: #0000;
}
@media (prefers-reduced-motion: reduce) {
html& {
scroll-behavior: auto;
}
scroll-behavior: auto;
}
}

html& body {
background-color: ${tokenSchema.color.background[background]};
margin: 0;
}
`;
html& body {
background-color: ${tokenSchema.color.background[background]};
margin: 0;
}
`;

function flatString(str: string) {
return str.replace(/\n|\s{2,}/g, '');
Expand Down
78 changes: 41 additions & 37 deletions design-system/pkg/src/date-time/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,50 +20,54 @@ type InputProps = {
validationState?: 'valid' | 'invalid';
};

export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
props,
forwardedRef
) {
let inputRef = useObjectRef(forwardedRef);
let { children, disableFocusRing, fieldProps, isDisabled, validationState } =
props;
export const Input = forwardRef<HTMLDivElement, InputProps>(
function Input(props, forwardedRef) {
let inputRef = useObjectRef(forwardedRef);
let {
children,
disableFocusRing,
fieldProps,
isDisabled,
validationState,
} = props;

let { focusProps, isFocusVisible, isFocused } = useFocusRing({
isTextInput: true,
within: true,
});
let { focusProps, isFocusVisible, isFocused } = useFocusRing({
isTextInput: true,
within: true,
});

let isInvalid = validationState === 'invalid' && !isDisabled;
let styleProps = useInputStyles(props, {
isDisabled,
isInvalid,
isFocused,
isFocusVisible: isFocusVisible && !disableFocusRing,
});
let isInvalid = validationState === 'invalid' && !isDisabled;
let styleProps = useInputStyles(props, {
isDisabled,
isInvalid,
isFocused,
isFocusVisible: isFocusVisible && !disableFocusRing,
});

return (
<div
role="presentation"
{...mergeProps(fieldProps, focusProps)}
{...styleProps}
>
return (
<div
role="presentation"
className={css({
alignItems: 'center',
display: 'inline-flex',
height: '100%',
overflowX: 'auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none',
})}
ref={inputRef}
{...mergeProps(fieldProps, focusProps)}
{...styleProps}
>
{children}
<div
role="presentation"
className={css({
alignItems: 'center',
display: 'inline-flex',
height: '100%',
overflowX: 'auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none',
})}
ref={inputRef}
>
{children}
</div>
</div>
</div>
);
});
);
}
);

type InputState = {
isDisabled?: boolean;
Expand Down
163 changes: 81 additions & 82 deletions design-system/pkg/src/field/FieldPrimitive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,92 +21,91 @@ import { SlotProvider } from '../slots';
*/
export const FieldPrimitive: ForwardRefExoticComponent<
FieldPrimitiveProps & { ref?: Ref<HTMLDivElement> }
> = forwardRef<HTMLDivElement, FieldPrimitiveProps>(function FieldPrimitive(
props,
forwardedRef
) {
const {
children,
contextualHelp,
isRequired,
label,
labelElementType,
labelProps,
description,
descriptionProps,
errorMessage,
errorMessageProps,
supplementRequiredState,
} = props;
const styleProps = useStyleProps(props);
const contextualHelpId = useId();
> = forwardRef<HTMLDivElement, FieldPrimitiveProps>(
function FieldPrimitive(props, forwardedRef) {
const {
children,
contextualHelp,
isRequired,
label,
labelElementType,
labelProps,
description,
descriptionProps,
errorMessage,
errorMessageProps,
supplementRequiredState,
} = props;
const styleProps = useStyleProps(props);
const contextualHelpId = useId();

const contextualHelpSlots = useMemo(() => {
return {
// match capsize styles from the label text. stops the contextual help button
// from pushing elements above/below it
button: {
UNSAFE_className: css({
marginBottom: tokenSchema.typography.text.regular.capheightTrim,
marginTop: tokenSchema.typography.text.regular.baselineTrim,
}),
id: contextualHelpId,
'aria-labelledby': labelProps?.id
? `${labelProps.id} ${contextualHelpId}`
: undefined,
},
};
}, [contextualHelpId, labelProps?.id]);
const contextualHelpSlots = useMemo(() => {
return {
// match capsize styles from the label text. stops the contextual help button
// from pushing elements above/below it
button: {
UNSAFE_className: css({
marginBottom: tokenSchema.typography.text.regular.capheightTrim,
marginTop: tokenSchema.typography.text.regular.baselineTrim,
}),
id: contextualHelpId,
'aria-labelledby': labelProps?.id
? `${labelProps.id} ${contextualHelpId}`
: undefined,
},
};
}, [contextualHelpId, labelProps?.id]);

return (
<Flex
ref={forwardedRef}
direction="column"
gap="medium"
minWidth={0}
UNSAFE_className={styleProps.className}
UNSAFE_style={styleProps.style}
>
{(() => {
if (!label) {
return null;
}
const labelUI = (
<FieldLabel
elementType={labelElementType}
isRequired={isRequired}
supplementRequiredState={supplementRequiredState}
{...labelProps}
>
{label}
</FieldLabel>
);

if (contextualHelp) {
return (
<Flex gap="small" alignItems="center">
{labelUI}
<SlotProvider slots={contextualHelpSlots}>
{contextualHelp}
</SlotProvider>
</Flex>
return (
<Flex
ref={forwardedRef}
direction="column"
gap="medium"
minWidth={0}
UNSAFE_className={styleProps.className}
UNSAFE_style={styleProps.style}
>
{(() => {
if (!label) {
return null;
}
const labelUI = (
<FieldLabel
elementType={labelElementType}
isRequired={isRequired}
supplementRequiredState={supplementRequiredState}
{...labelProps}
>
{label}
</FieldLabel>
);
}

return labelUI;
})()}
if (contextualHelp) {
return (
<Flex gap="small" alignItems="center">
{labelUI}
<SlotProvider slots={contextualHelpSlots}>
{contextualHelp}
</SlotProvider>
</Flex>
);
}

return labelUI;
})()}

{description && (
<Text {...descriptionProps} size="small" color="neutralSecondary">
{description}
</Text>
)}
{description && (
<Text {...descriptionProps} size="small" color="neutralSecondary">
{description}
</Text>
)}

{children}
{children}

{errorMessage && (
<FieldMessage {...errorMessageProps}>{errorMessage}</FieldMessage>
)}
</Flex>
);
});
{errorMessage && (
<FieldMessage {...errorMessageProps}>{errorMessage}</FieldMessage>
)}
</Flex>
);
}
);
2 changes: 1 addition & 1 deletion design-system/pkg/src/link/linkContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface LinkComponentProps

export const makeLinkComponent = (
render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>
) => ({ __forwardRef__: forwardRef(render) } as const);
) => ({ __forwardRef__: forwardRef(render) }) as const;

export type LinkComponent =
| ReturnType<typeof makeLinkComponent>
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/nav-list/NavList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const NavList: ForwardRefExoticComponent<
size: 'medium',
UNSAFE_className: dividerStyles,
},
} as const),
}) as const,
[dividerStyles]
);

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/notice/Notice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function Notice(props: NoticeProps) {
size: 'small',
},
text: { color: coercedTone, weight: 'medium' },
} as const),
}) as const,
[
coercedTone,
contentId,
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/radio/Radio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function Radio(props: RadioProps) {
({
text: { color: 'inherit' },
description: { color: 'neutralTertiary' },
} as const),
}) as const,
[]
);

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/style/animation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { AnimationDuration, AnimationEasing } from './types';

type Kebab<
T extends string,
A extends string = ''
A extends string = '',
> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/style/toDataAttributes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
export function toDataAttributes<
T extends {
[key: string]: string | number | boolean | null | undefined;
}
},
>(
data: T,
options: {
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/style/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export type VoussoirTheme = typeof tokenSchema;
type ColorAliases = `color.alias.${keyof VoussoirTheme['color']['alias']}`;
type KeysStartingWith<
Keys,
Prefix extends string
Prefix extends string,
> = Keys extends `${Prefix}${string}` ? Keys : never;

type BackgroundAliases = KeysStartingWith<
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/switch/Switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const Switch: ForwardRefExoticComponent<SwitchProps> = forwardRef(
({
text: { color: 'inherit' },
description: { color: 'neutralTertiary' },
} as const),
}) as const,
[]
);

Expand Down
Loading