diff --git a/packages/manager/.changeset/pr-11075-fixed-1728498752415.md b/packages/manager/.changeset/pr-11075-fixed-1728498752415.md new file mode 100644 index 00000000000..61c3bbf12e1 --- /dev/null +++ b/packages/manager/.changeset/pr-11075-fixed-1728498752415.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Fix TypeScript performance of `DismissibleBanner.tsx` ([#11075](https://github.com/linode/manager/pull/11075)) diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx index d9634fe5a38..2f1781f9125 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx @@ -1,31 +1,20 @@ import Close from '@mui/icons-material/Close'; import Grid from '@mui/material/Unstable_Grid2'; -import { SxProps } from '@mui/system'; import * as React from 'react'; import { Box } from 'src/components/Box'; -import { - DismissibleNotificationOptions, - useDismissibleNotifications, -} from 'src/hooks/useDismissibleNotifications'; +import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotifications'; import { StyledButton, StyledNotice } from './DismissibleBanner.styles'; import type { NoticeProps } from 'src/components/Notice/Notice'; +import type { DismissibleNotificationOptions } from 'src/hooks/useDismissibleNotifications'; -interface Props { +interface Props extends NoticeProps { /** * Optional element to pass to the banner to trigger actions */ actionButton?: JSX.Element; - /** - * Child element to pass to the banner - */ - children: JSX.Element; - /** - * Additional classes to the root element - */ - className?: string; /** * Additional controls to pass to the Dismissible Banner */ @@ -34,16 +23,8 @@ interface Props { * Used to check if this banner has already been dismissed */ preferenceKey: string; - /** - * Additional styles to apply to the root element - */ - sx?: SxProps; } -interface DismissibleBannerProps - extends Omit, 'children'>, - Props {} - /** * ## Usage * @@ -60,7 +41,7 @@ interface DismissibleBannerProps * - Warning: Informs users of an impending change that will have an impact on their service(s). * - Call to action: Primary Button or text link allows a user to take action directly from the banner. */ -export const DismissibleBanner = (props: DismissibleBannerProps) => { +export const DismissibleBanner = (props: Props) => { const { actionButton, children, diff --git a/packages/manager/src/components/Notice/Notice.tsx b/packages/manager/src/components/Notice/Notice.tsx index 200998d0a60..55d7950def6 100644 --- a/packages/manager/src/components/Notice/Notice.tsx +++ b/packages/manager/src/components/Notice/Notice.tsx @@ -1,14 +1,16 @@ -import Grid, { Grid2Props } from '@mui/material/Unstable_Grid2'; -import { SxProps } from '@mui/system'; +import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import Error from 'src/assets/icons/alert.svg'; import Check from 'src/assets/icons/check.svg'; import Warning from 'src/assets/icons/warning.svg'; -import { Typography, TypographyProps } from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; import { useStyles } from './Notice.styles'; +import type { Grid2Props } from '@mui/material/Unstable_Grid2'; +import type { TypographyProps } from 'src/components/Typography'; + export type NoticeVariant = | 'error' | 'info' @@ -23,10 +25,6 @@ export interface NoticeProps extends Grid2Props { * **Note:** This only applies to notice variants of "error". */ bypassValidation?: boolean; - /** - * Additional classes to be applied to the root element. - */ - className?: string; /** * The data-qa attribute to apply to the root element. */ @@ -39,10 +37,6 @@ export interface NoticeProps extends Grid2Props { * If true, an icon will be displayed to the left of the error, reflecting the variant of the error. */ important?: boolean; - /** - * The function to execute when/if the error is clicked. - */ - onClick?: (e: React.MouseEvent) => void; /** * The amount of spacing to apply to the bottom of the error. */ @@ -55,10 +49,6 @@ export interface NoticeProps extends Grid2Props { * The amount of spacing to apply to the top of the error. */ spacingTop?: 0 | 4 | 8 | 12 | 16 | 24 | 32; - /** - * Additional styles to apply to the root element. - */ - sx?: SxProps; /** * The text to display in the error. If this is not provided, props.children will be used. */