Skip to content

gestalt: Update type definitions to 46.4 #59359

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.

Sign up for GitHub

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

Merged
typescript-bot merged 3 commits into from
Mar 31, 2022
Merged

gestalt: Update type definitions to 46.4 #59359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1d8075
[gestalt] Update type definitions to 46.4
Mar 20, 2022
04b7535
Update/add some tests
Mar 20, 2022
5549e69
Run prettier
Mar 20, 2022
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
18 changes: 15 additions & 3 deletions types/gestalt/gestalt-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,13 @@ const CheckUseReducedMotion = () => {
</Flex>;
<Heading />;
<Icon accessibilityLabel="icon" />;
<IconButton accessibilityLabel="icon" />;
<IconButton
accessibilityLabel="icon"
tooltip={{
text: 'foo',
idealDirection: 'down',
}}
/>;
<Image alt="image" color="#ffff" naturalHeight={1} naturalWidth={1} src="http" />;
<Label htmlFor="id" />;
<Layer>
Expand All @@ -226,15 +232,21 @@ const CheckUseReducedMotion = () => {
expandedIndex={1}
onExpandedChange={index => {}}
></Module.Expandable>;
<NumberField id="number" onChange={({ value }) => value} step={1}/>;
<NumberField id="number" onChange={({ value }) => value} step={1} />;
<OnLinkNavigationProvider
onNavigation={() => {
return undefined;
}}
/>;
<PageHeader title="Home" />;
<Pog />;
<Popover onDismiss={() => {}} anchor={React.useRef<HTMLAnchorElement>().current!} />;
<Popover
onDismiss={() => {}}
anchor={React.useRef<HTMLAnchorElement>().current!}
onKeyDown={({ event }) => {
event.preventDefault();
}}
/>;

<Pulsar />;
<RadioButton id="id" onChange={() => {}} />;
Expand Down
54 changes: 46 additions & 8 deletions types/gestalt/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Type definitions for gestalt 41.0
// Type definitions for gestalt 46.4
// Project: https://github.com/pinterest/gestalt, https://pinterest.github.io/gestalt
// Definitions by: Nicolás Serrano Arévalo <https://github.com/serranoarevalo>
// Josh Gachnang <https://github.com/joshgachnang>
Expand Down Expand Up @@ -39,6 +39,11 @@ export type OnNavigationType = (args: OnNavigationArgs) => EventHandlerType | nu
export type UnsignedUpTo12 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export type SignedUpTo12 = -12 | -11 | -10 | -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | UnsignedUpTo12;

export interface BadgeObject {
text: string;
type?: 'info' | 'error' | 'warning' | 'success' | 'neutral' | 'darkWash' | 'lightWash' | undefined;
}

/**
* ActivationCard Props Interface
* https://gestalt.netlify.app/ActivationCard
Expand Down Expand Up @@ -124,6 +129,7 @@ export interface AvatarPairProps {
export interface BadgeProps {
text: string;
position?: 'middle' | 'top' | undefined;
type?: 'info' | 'error' | 'warning' | 'success' | 'neutral' | 'darkWash' | 'lightWash' | undefined;
}

export type BoxPassthroughProps = Omit<React.ComponentProps<'div'>, 'onClick' | 'className' | 'style' | 'ref'> &
Expand Down Expand Up @@ -181,6 +187,23 @@ export interface BoxProps extends BoxPassthroughProps {
| 'transparentDarkGray'
| 'watermelon'
| 'white'
| 'infoBase'
| 'infoWeak'
| 'errorBase'
| 'errorWeak'
| 'warningBase'
| 'warningWeak'
| 'successBase'
| 'successWeak'
| 'shopping'
| 'primary'
| 'secondary'
| 'tertiary'
| 'selected'
| 'inverse'
| 'brand'
| 'education'
| 'elevationAccent'
| undefined;
column?: UnsignedUpTo12 | undefined;
smColumn?: UnsignedUpTo12 | undefined;
Expand Down Expand Up @@ -466,6 +489,7 @@ export interface DatapointProps {
tooltipText?: string | undefined;
trend?: { accesibilityLabel: string; value: number } | undefined;
trendSentiment?: 'good' | 'bad' | 'neutral' | 'auto' | undefined;
badge?: BadgeObject | undefined;
}

/**
Expand Down Expand Up @@ -530,7 +554,7 @@ export interface DropdownItemProps {
/**
* When supplied, will display a Badge next to the item's label.
*/
badgeText?: string | undefined;
badge?: BadgeObject | undefined;

/**
* When supplied, will add a data-test-id prop to the dom element.
Expand All @@ -553,7 +577,7 @@ export interface DropdownLinkProps {
/**
* When supplied, will display a Badge next to the item's label.
*/
badgeText?: string | undefined;
badge?: BadgeObject | undefined;
children?: React.ReactNode;
/**
* When supplied, will add a data-test-id prop to the dom element.
Expand Down Expand Up @@ -896,6 +920,8 @@ export interface IconButtonProps {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
tabIndex?: -1 | 0 | undefined;
target?: null | 'self' | 'blank' | undefined;
tooltip?: Pick<TooltipProps, 'accessibilityLabel' | 'inline' | 'idealDirection' | 'text' | 'zIndex'> | undefined;
type?: 'submit' | 'button' | undefined;
}

/**
Expand Down Expand Up @@ -1037,7 +1063,7 @@ export interface ModalProps {
footer?: React.ReactNode | undefined;
heading?: React.ReactNode | undefined;
role?: 'alertdialog' | 'dialog' | undefined;
size?: 'sm' | 'md' | 'lg' | number | undefined;
size?: 'sm' | 'md' | 'lg' | '100' | '200' | '300' | '400' | '500' | '600' | undefined;
/**
* Only renders with `heading` strings
*/
Expand All @@ -1050,7 +1076,7 @@ export interface ModalProps {
*/
export interface ModuleProps {
id: string;
badgeText?: string | undefined;
badge?: BadgeObject | undefined;
icon?: Icons | undefined;
iconAccessibilityLabel?: string | undefined;
iconButton?: React.ReactElement<typeof IconButton> | undefined;
Expand All @@ -1073,6 +1099,7 @@ export interface ModuleExpandableProps {
type?: 'info' | 'error' | undefined;
iconAccessibilityLabel?: string | undefined;
children?: React.ReactNode | undefined;
badge?: BadgeObject | undefined;
}>;
expandedIndex?: number | null | undefined;
onExpandedChange?: ((expandedIndex: number | null) => void) | undefined;
Expand Down Expand Up @@ -1225,6 +1252,7 @@ export interface PopoverProps {
shouldFocus?: boolean | undefined;
showCaret?: boolean | undefined;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'flexible' | number | undefined;
onKeyDown?: AbstractEventHandler<React.KeyboardEvent<HTMLElement>>;
}

/**
Expand Down Expand Up @@ -1304,7 +1332,6 @@ export interface SegmentedControlProps {
onChange: (args: { event: React.SyntheticEvent<React.MouseEvent>; activeIndex: number }) => void;
selectedItemIndex: number;
responsive?: boolean | undefined;
size?: 'md' | 'lg' | undefined;
}

/**
Expand Down Expand Up @@ -1596,14 +1623,24 @@ export interface TextProps {
| 'red'
| 'watermelon'
| 'white'
| 'default'
| 'subtle'
| 'success'
| 'error'
| 'warning'
| 'shopping'
| 'inverse'
| 'light'
| 'dark'
| undefined;
inline?: boolean | undefined;
italic?: boolean | undefined;
overflow?: 'normal' | 'breakWord' | 'noWrap' | undefined;
size?: 'sm' | 'md' | 'lg' | undefined;
size?: 'sm' | 'md' | 'lg' | '100' | '200' | '300' | '400' | '500' | '600' | undefined;
lineClamp?: number;
underline?: boolean | undefined;
weight?: 'bold' | 'normal' | undefined;
title?: string | undefined;
}

/**
Expand Down Expand Up @@ -1676,7 +1713,7 @@ export interface TextFieldProps {
/**
* @default "text"
*/
type?: 'date' | 'email' | 'number' | 'password' | 'text' | 'url' | 'tel' | undefined;
type?: 'date' | 'email' | 'password' | 'text' | 'url' | 'tel' | undefined;
value?: string | undefined;
}

Expand All @@ -1703,6 +1740,7 @@ export interface TooltipProps {
inline?: boolean | undefined;
link?: React.ReactNode | undefined;
zIndex?: Indexable | undefined;
accessibilityLabel?: string | undefined;
}

/**
Expand Down