Skip to content

Commit cee1e79

Browse files
authored
LG-5514: Migrate HTMLElementProps to React.ComponentProps (#3127)
* replace html element props * update to follow pattern * with changesets * fix bug * runs fix
1 parent 3471b94 commit cee1e79

File tree

110 files changed

+418
-285
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+418
-285
lines changed

.changeset/mighty-pens-bathe.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
'@leafygreen-ui/gallery-indicator': patch
3+
'@leafygreen-ui/loading-indicator': patch
4+
'@leafygreen-ui/segmented-control': patch
5+
'@leafygreen-ui/expandable-card': patch
6+
'@leafygreen-ui/radio-box-group': patch
7+
'@leafygreen-ui/skeleton-loader': patch
8+
'@leafygreen-ui/context-drawer': patch
9+
'@lg-chat/fixed-chat-window': patch
10+
'@lg-chat/message-feedback': patch
11+
'@leafygreen-ui/ordered-list': patch
12+
'@leafygreen-ui/preview-card': patch
13+
'@leafygreen-ui/progress-bar': patch
14+
'@leafygreen-ui/search-input': patch
15+
'@lg-chat/chat-disclaimer': patch
16+
'@lg-chat/message-actions': patch
17+
'@lg-chat/message-prompts': patch
18+
'@leafygreen-ui/date-picker': patch
19+
'@leafygreen-ui/form-footer': patch
20+
'@leafygreen-ui/icon-button': patch
21+
'@leafygreen-ui/radio-group': patch
22+
'@leafygreen-ui/section-nav': patch
23+
'@lg-chat/message-rating': patch
24+
'@leafygreen-ui/form-field': patch
25+
'@leafygreen-ui/pagination': patch
26+
'@leafygreen-ui/text-input': patch
27+
'@leafygreen-ui/typography': patch
28+
'@leafygreen-ui/text-area': patch
29+
'@lg-charts/chart-card': patch
30+
'@lg-chat/message-feed': patch
31+
'@leafygreen-ui/checkbox': patch
32+
'@leafygreen-ui/combobox': patch
33+
'@leafygreen-ui/copyable': patch
34+
'@leafygreen-ui/pipeline': patch
35+
'@leafygreen-ui/side-nav': patch
36+
'@lg-chat/chat-window': patch
37+
'@lg-chat/suggestions': patch
38+
'@leafygreen-ui/callout': patch
39+
'@leafygreen-ui/emotion': patch
40+
'@leafygreen-ui/popover': patch
41+
'@leafygreen-ui/stepper': patch
42+
'@leafygreen-ui/toolbar': patch
43+
'@leafygreen-ui/tooltip': patch
44+
'@lg-chat/rich-links': patch
45+
'@leafygreen-ui/banner': patch
46+
'@leafygreen-ui/drawer': patch
47+
'@leafygreen-ui/select': patch
48+
'@leafygreen-ui/toggle': patch
49+
'@lg-chat/input-bar': patch
50+
'@lg-chat/title-bar': patch
51+
'@leafygreen-ui/badge': patch
52+
'@leafygreen-ui/modal': patch
53+
'@leafygreen-ui/table': patch
54+
'@lg-charts/legend': patch
55+
'@leafygreen-ui/a11y': patch
56+
'@leafygreen-ui/chip': patch
57+
'@leafygreen-ui/logo': patch
58+
'@leafygreen-ui/menu': patch
59+
'@leafygreen-ui/tabs': patch
60+
'@lg-chat/message': patch
61+
'@leafygreen-ui/lib': patch
62+
'@lg-charts/core': patch
63+
---
64+
65+
Interfaces now extend built-in `React.ComponentType` rather than custom `HTMLElementProps` for compatability with React 19

charts/chart-card/src/ChartCard/ChartCard.types.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { MouseEventHandler } from 'react';
2-
3-
import { HTMLElementProps } from '@leafygreen-ui/lib';
1+
import React, { MouseEventHandler } from 'react';
42

53
export const ChartCardStates = {
64
Unset: 'unset',
@@ -10,7 +8,8 @@ export const ChartCardStates = {
108
export type ChartCardStates =
119
(typeof ChartCardStates)[keyof typeof ChartCardStates];
1210

13-
export interface ChartCardProps extends Omit<HTMLElementProps<'div'>, 'title'> {
11+
export interface ChartCardProps
12+
extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
1413
/**
1514
* The title of the card
1615
*/

charts/core/src/Chart/Chart.types.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { PropsWithChildren } from 'react';
1+
import React, { PropsWithChildren } from 'react';
22

3-
import { DarkModeProps, type HTMLElementProps } from '@leafygreen-ui/lib';
3+
import { DarkModeProps } from '@leafygreen-ui/lib';
44

55
import {
66
EChartOptions,
@@ -22,7 +22,7 @@ export const ChartStates = {
2222
} as const;
2323
export type ChartStates = (typeof ChartStates)[keyof typeof ChartStates];
2424

25-
export type ChartProps = HTMLElementProps<'div'> &
25+
export type ChartProps = React.ComponentPropsWithoutRef<'div'> &
2626
DarkModeProps &
2727
PropsWithChildren<{
2828
/**

charts/core/src/ChartHeader/ChartHeader.types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { HTMLElementProps } from '@leafygreen-ui/lib';
1+
import React from 'react';
22

33
export interface ChartHeaderProps
4-
extends Omit<HTMLElementProps<'div'>, 'title'> {
4+
extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
55
/**
66
* The title of the chart
77
*/

charts/legend/src/Legend/Legend.types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import { SeriesName } from '@lg-charts/series-provider';
33

4-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
4+
import { DarkModeProps } from '@leafygreen-ui/lib';
55

66
export interface LegendProps
77
extends DarkModeProps,
8-
Omit<HTMLElementProps<'div'>, 'title'> {
8+
Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
99
/**
1010
* An array of series names representing the data series to be displayed in the legend.
1111
*/

chat/chat-disclaimer/src/DisclaimerText/DisclaimerText.types.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
1+
import React from 'react';
2+
3+
import { DarkModeProps } from '@leafygreen-ui/lib';
24

35
export interface DisclaimerTextProps
46
extends DarkModeProps,
5-
HTMLElementProps<'div'> {
7+
React.ComponentPropsWithoutRef<'div'> {
68
/**
79
* Heading text
810
*/
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import React from 'react';
12
import { TitleBarProps } from '@lg-chat/title-bar';
23

3-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
4+
import { DarkModeProps } from '@leafygreen-ui/lib';
45

56
export interface ChatWindowProps
6-
extends Omit<HTMLElementProps<'div'>, 'title'>,
7+
extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'>,
78
DarkModeProps,
89
Partial<TitleBarProps> {}
Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
1+
import React from 'react';
22

3-
export type ChatTriggerProps = DarkModeProps & HTMLElementProps<'button'> & {};
3+
import { DarkModeProps } from '@leafygreen-ui/lib';
4+
5+
export type ChatTriggerProps = DarkModeProps &
6+
React.ComponentProps<'button'> & {};

chat/input-bar/src/InputBar/InputBar.types.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { FormEvent, ReactElement, RefObject } from 'react';
1+
import React, { FormEvent, ReactElement, RefObject } from 'react';
22
import { TextareaAutosizeProps } from 'react-textarea-autosize';
33

4-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
4+
import { DarkModeProps } from '@leafygreen-ui/lib';
55
import { PopoverRenderModeProps } from '@leafygreen-ui/popover';
66

77
import { SharedInputBarProps } from './shared.types';
88

9-
export type InputBarProps = HTMLElementProps<'form'> &
9+
export type InputBarProps = React.ComponentPropsWithoutRef<'form'> &
1010
DarkModeProps &
1111
SharedInputBarProps & {
1212
/**
Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
1+
import React from 'react';
2+
3+
import { DarkModeProps } from '@leafygreen-ui/lib';
24

35
import { SharedInputBarProps } from './shared.types';
46

57
export interface InputBarFeedbackProps
68
extends DarkModeProps,
7-
HTMLElementProps<'div'>,
9+
React.ComponentProps<'div'>,
810
SharedInputBarProps {}

0 commit comments

Comments
 (0)