diff --git a/.changeset/yellow-ghosts-tease.md b/.changeset/yellow-ghosts-tease.md new file mode 100644 index 0000000000..d52ad98e61 --- /dev/null +++ b/.changeset/yellow-ghosts-tease.md @@ -0,0 +1,13 @@ +--- +"@ultraviolet/plus": major +"@ultraviolet/icons": major +"@ultraviolet/ui": major +--- + +**BREAKING CHANGES** + +Deprecated props removed: +- `CodeEditor`: prop "title" removed -> use "label" instead +- `Icon`: prop "color" removed -> use "sentiment" instead +- `Icon`: prop "size" can only be "xsmall", "small", "medium", "large", "xlarge" or "xxlarge" +- `Bullet`: prop "text" removed -> use "children" instead \ No newline at end of file diff --git a/packages/icons/src/components/Icon/Icon.tsx b/packages/icons/src/components/Icon/Icon.tsx index 6d997afd7d..fd95e83d6f 100644 --- a/packages/icons/src/components/Icon/Icon.tsx +++ b/packages/icons/src/components/Icon/Icon.tsx @@ -17,6 +17,8 @@ const SIZES = { xxlarge: '700', } as const +type SizesProps = keyof typeof SIZES + type Color = Extract< keyof typeof theme.colors, | 'primary' @@ -32,28 +34,14 @@ const sizeStyles = ({ size, theme, }: { - size: keyof typeof SIZES | number | string + size: SizesProps theme: Theme -}) => { - if (typeof size === 'string' && size in SIZES) { - return css` - height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]}; - width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]}; - min-width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]}; - min-height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]}; +}) => css` + height: ${theme.sizing[SIZES[size]]}; + width: ${theme.sizing[SIZES[size]]}; + min-width: ${theme.sizing[SIZES[size]]}; + min-height: ${theme.sizing[SIZES[size]]}; ` - } - - const pxSize = - typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size - - return css` - height: ${pxSize}; - width: ${pxSize}; - min-width: ${pxSize}; - min-height: ${pxSize}; - ` -} const PROMINENCES = { default: '', @@ -68,8 +56,8 @@ const StyledIcon = styled('svg', { shouldForwardProp: prop => !['size', 'sentiment', 'prominence', 'disabled'].includes(prop), })<{ - sentiment: Color | string - size: number | string + sentiment?: Color + size: SizesProps prominence: ProminenceProps disabled?: boolean }>` @@ -82,12 +70,16 @@ const StyledIcon = styled('svg', { ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]) - const themeColor = theme.colors[sentiment as Color] - const icon = `icon${definedProminence}${ - disabled ? 'Disabled' : '' - }` as keyof typeof themeColor + if (sentiment) { + const themeColor = theme.colors[sentiment] + const icon = `icon${definedProminence}${ + disabled ? 'Disabled' : '' + }` as keyof typeof themeColor + + return theme.colors?.[sentiment]?.[icon] || sentiment + } - return theme.colors?.[sentiment as Color]?.[icon] || sentiment + return 'currentColor' }}; .fillStroke { @@ -98,12 +90,16 @@ const StyledIcon = styled('svg', { ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]) - const themeColor = theme.colors[sentiment as Color] - const icon = `icon${definedProminence}${ - disabled ? 'Disabled' : '' - }` as keyof typeof themeColor + if (sentiment) { + const themeColor = theme.colors[sentiment] + const icon = `icon${definedProminence}${ + disabled ? 'Disabled' : '' + }` as keyof typeof themeColor + + return theme.colors?.[sentiment]?.[icon] || sentiment + } - return theme.colors?.[sentiment as Color]?.[icon] || sentiment + return 'currentColor' }}; fill: none; } @@ -111,12 +107,8 @@ const StyledIcon = styled('svg', { ` export type IconProps = { - size?: keyof typeof SIZES + size?: SizesProps prominence?: ProminenceProps - /** - * @deprecated use `sentiment` property instead - */ - color?: Color sentiment?: Color 'data-testid'?: string disabled?: boolean @@ -127,13 +119,12 @@ export type IconProps = { > /** - * IconV2 component is our set of system icons in the design system. All of them are SVGs. + * Icon component is our set of system icons in the design system. All of them are SVGs. */ export const Icon = forwardRef( ( { - color = 'currentColor', sentiment, size = 'small', prominence = 'default', @@ -147,30 +138,26 @@ export const Icon = forwardRef( children, }, ref, - ) => { - const computedSentiment = sentiment ?? color - - return ( - - {children} - - ) - }, + ) => ( + + {children} + + ), ) diff --git a/packages/plus/src/components/CodeEditor/CodeEditor.tsx b/packages/plus/src/components/CodeEditor/CodeEditor.tsx index 95f03db3b8..0716958c5d 100644 --- a/packages/plus/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/plus/src/components/CodeEditor/CodeEditor.tsx @@ -51,7 +51,9 @@ const EditorContainer = styled.div` user-select: none; .cm-editor { - background-color: ${consoleDarkTheme.colors.neutral.backgroundWeakDisabled}; + background-color: ${ + consoleDarkTheme.colors.neutral.backgroundWeakDisabled + }; color: ${consoleDarkTheme.colors.neutral.textDisabled}; } @@ -103,10 +105,6 @@ const StyledCopyButton = styled(CopyButton)` ` type CodeEditorProps = { - /** - * @deprecated use prop `label` instead - */ - title?: string value: string onChange: ComponentProps['onChange'] extensions: keyof typeof langs @@ -130,7 +128,6 @@ type CodeEditorProps = { } export const CodeEditor = ({ - title, value, onChange, extensions = 'javascript', @@ -149,9 +146,7 @@ export const CodeEditor = ({ className, }: CodeEditorProps) => ( - {label || title ? ( - - ) : null} + {label ? : null} { />, )) - it('should render correctly with title', () => + it('should render correctly with label', () => shouldMatchEmotionSnapshot( { height="600px" onChange={newValue => newValue} helper="Helper text" - title="title" + label="title" />, )) diff --git a/packages/plus/src/components/FAQ/index.tsx b/packages/plus/src/components/FAQ/index.tsx index a7c51f49be..809ae5536e 100644 --- a/packages/plus/src/components/FAQ/index.tsx +++ b/packages/plus/src/components/FAQ/index.tsx @@ -41,7 +41,7 @@ export const FAQ = ({
{!productIconName && illustrationText ? ( - + {illustrationText.toString()} ) : null} {ProductIconUsed ? : null}
diff --git a/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx index 7015568004..d1f8ad6fb9 100644 --- a/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx @@ -7,7 +7,7 @@ Text.parameters = { docs: { description: { story: - 'Set `text` using text property. Sentiment and size props affect text.', + 'Set `text` using children. Sentiment and size props affect children.', }, }, } diff --git a/packages/ui/src/components/Bullet/__tests__/index.test.tsx b/packages/ui/src/components/Bullet/__tests__/index.test.tsx index bcd817f5ab..d8844e3a4f 100644 --- a/packages/ui/src/components/Bullet/__tests__/index.test.tsx +++ b/packages/ui/src/components/Bullet/__tests__/index.test.tsx @@ -6,7 +6,7 @@ import { SENTIMENTS } from '../../../theme' describe('Bullet', () => { test('renders correctly with a text', () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot(1)) test('renders correctly with an icon', () => shouldMatchEmotionSnapshot( @@ -25,14 +25,14 @@ describe('Bullet', () => { describe('sentiment', () => { ;['disabled', ...SENTIMENTS].forEach(sentiment => { test(`render ${sentiment}`, () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot(1)) }) }) describe('size', () => { ;(['medium', 'small', 'xsmall', 'xxsmall'] as const).forEach(size => { test(`render ${size}`, () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot(1)) }) }) }) diff --git a/packages/ui/src/components/Bullet/index.tsx b/packages/ui/src/components/Bullet/index.tsx index 54056c53cc..b79eccc5e2 100644 --- a/packages/ui/src/components/Bullet/index.tsx +++ b/packages/ui/src/components/Bullet/index.tsx @@ -93,7 +93,8 @@ const StyledContainer = styled('div')` align-items: center; width: ${({ size, theme }) => theme.sizing[SIZES[size]]}; height: ${({ size, theme }) => theme.sizing[SIZES[size]]}; - font-size: ${({ size, theme }) => theme.typography[TEXT_VARIANT[size]].fontSize}; + font-size: ${({ size, theme }) => + theme.typography[TEXT_VARIANT[size]].fontSize}; ${({ theme, prominence, sentiment }) => (sentimentStyles({ theme, prominence }) as Record)[ sentiment @@ -109,8 +110,6 @@ type BulletProps = { 'data-testid'?: string prominence?: ProminenceType children?: ReactNode - /** @deprecated Use children instead */ - text?: string } /** @@ -120,7 +119,6 @@ export const Bullet = ({ className, sentiment = 'neutral', size = 'medium', - text, tooltip, tooltipBaseId, 'data-testid': dataTestId, @@ -135,7 +133,6 @@ export const Bullet = ({ data-testid={dataTestId} prominence={prominence} > - {text} {children} diff --git a/packages/ui/src/components/NumberInput/__stories__/LabelDescription.stories.tsx b/packages/ui/src/components/NumberInput/__stories__/LabelDescription.stories.tsx index bff6f4f1fb..038e07cfdd 100644 --- a/packages/ui/src/components/NumberInput/__stories__/LabelDescription.stories.tsx +++ b/packages/ui/src/components/NumberInput/__stories__/LabelDescription.stories.tsx @@ -21,7 +21,7 @@ export const LabelDescription: StoryFn = ( label="Advanced Label" labelDescription={ - + } required