diff --git a/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts b/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts index dd53a39e1..000f45e8c 100644 --- a/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts +++ b/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts @@ -1,26 +1,18 @@ -declare module '@mui/material/Chip' { - export interface ChipPropsColorOverrides { - // used both for badges and chips - active: true +import '@mui/material/Chip' - // colors usually for badges - alert: true - default: true - highlight: true - warning: true - accent: true +export type ChipColors = 'active' | 'alert' | 'default' | 'highlight' | 'warning' | 'accent' | 'inactive' +type DisabledChipColors = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' - // colors usually for chips - inactive: true - } +type NewChipColorOverrides = { [key in ChipColors]: true } +type DisabledChipColorsOverrides = { [key in DisabledChipColors]: false } - export interface ChipPropsSizeOverrides { - extraSmall: true - small: true - medium: true - large: true - extraLarge: true - } +type ChipSizes = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' +type ChipSizeOverrides = { [key in ChipSizes]: true } + +declare module '@mui/material/Chip' { + export interface ChipPropsColorOverrides extends NewChipColorOverrides, DisabledChipColorsOverrides {} + + export interface ChipPropsSizeOverrides extends ChipSizeOverrides {} export interface ChipPropsVariantOverrides { filled: false diff --git a/packages/curve-ui-kit/src/themes/chip/mui-chip.ts b/packages/curve-ui-kit/src/themes/chip/mui-chip.ts index 90f2d12e3..4c1512265 100644 --- a/packages/curve-ui-kit/src/themes/chip/mui-chip.ts +++ b/packages/curve-ui-kit/src/themes/chip/mui-chip.ts @@ -1,5 +1,5 @@ import type { Components } from '@mui/material' -import type { ChipProps } from '@mui/material/Chip' +import type { ChipProps } from '@mui/material/Chip/Chip' import { DesignSystem } from '@ui-kit/themes/design' import { Grays } from '@ui-kit/themes/design/0_primitives' import { TypographyVariantKey } from '@ui-kit/themes/typography' @@ -13,7 +13,9 @@ const { Sizing, IconSize } = SizesAndSpaces type ChipSizeDefinition = { font: TypographyVariantKey; height: Responsive } -const chipSizes: Record<ChipProps['size'], ChipSizeDefinition> = { +type ChipSizes = NonNullable<ChipProps['size']> + +const chipSizes: Record<ChipSizes, ChipSizeDefinition> = { extraSmall: { font: 'bodyXsBold', height: IconSize.md }, small: { font: 'buttonXs', height: IconSize.md }, medium: { font: 'buttonXs', height: Sizing.md }, @@ -22,7 +24,7 @@ const chipSizes: Record<ChipProps['size'], ChipSizeDefinition> = { } // overrides for clickable chips -const chipSizeClickable: Record<ChipProps['size'], Partial<ChipSizeDefinition>> = { +const chipSizeClickable: Record<ChipSizes, Partial<ChipSizeDefinition>> = { extraSmall: {}, small: { height: Sizing.md }, medium: { font: 'buttonS' }, @@ -100,14 +102,14 @@ export const defineMuiChip = ( }, ...Object.entries(chipSizes).map(([size, { font, height }]) => ({ - props: { size: size as ChipProps['size'] }, + props: { size: size as ChipSizes }, style: { ...typography[font], ...handleBreakpoints({ height }), }, })), ...Object.entries(chipSizeClickable).map(([size, { font, height }]) => ({ - props: { size: size as ChipProps['size'], clickable: true }, + props: { size: size as ChipSizes, clickable: true }, style: { ...(font && typography[font]), ...(height && handleBreakpoints({ height })), diff --git a/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx b/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx index 8db9d5e3f..07968eb06 100644 --- a/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx +++ b/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx @@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack' import Typography from '@mui/material/Typography' import Box from '@mui/material/Box' import { fn } from '@storybook/test' -import { ChipProps } from '@mui/material/Chip' +import type { ChipProps } from '@mui/material/Chip' type ChipStoryProps = { color: ChipProps['color']