feat: remove deprecated props in Icon CodeEditor and Bullet (#5297)

* feat: remove deprecated props Icon, CodeEditor and Bullet

* fix: use current color by default on icon

Author: lisalupi

.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

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,25 +90,25 @@ 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;
   }
   ${sizeStyles}
 `
 
 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<SVGSVGElement, IconProps>(
   (
     {
-      color = 'currentColor',
       sentiment,
       size = 'small',
       prominence = 'default',
@@ -147,30 +138,26 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(
       children,
     },
     ref,
-  ) => {
-    const computedSentiment = sentiment ?? color
-
-    return (
-      <StyledIcon
-        ref={ref}
-        sentiment={computedSentiment}
-        prominence={prominence}
-        size={size}
-        viewBox={
-          typeof size === 'string' && ['xsmall', 'small'].includes(size)
-            ? '0 0 16 16'
-            : '0 0 20 20'
-        }
-        className={className}
-        data-testid={dataTestId}
-        stroke={stroke}
-        cursor={cursor}
-        strokeWidth={strokeWidth}
-        disabled={disabled}
-        aria-label={ariaLabel}
-      >
-        {children}
-      </StyledIcon>
-    )
-  },
+  ) => (
+    <StyledIcon
+      ref={ref}
+      sentiment={sentiment}
+      prominence={prominence}
+      size={size}
+      viewBox={
+        typeof size === 'string' && ['xsmall', 'small'].includes(size)
+          ? '0 0 16 16'
+          : '0 0 20 20'
+      }
+      className={className}
+      data-testid={dataTestId}
+      stroke={stroke}
+      cursor={cursor}
+      strokeWidth={strokeWidth}
+      disabled={disabled}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </StyledIcon>
+  ),
 )

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<typeof CodeMirror>['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) => (
   <StyledStack gap={0.5} data-disabled={disabled}>
-    {label || title ? (
-      <Label labelDescription={labelDescription}>{label ?? title}</Label>
-    ) : null}
+    {label ? <Label labelDescription={labelDescription}>{label}</Label> : null}
     <EditorContainer data-disabled={disabled}>
       <CodeMirror
         readOnly={readOnly || disabled}

packages/plus/src/components/CodeEditor/__tests__/index.test.tsx

@@ -20,15 +20,15 @@ describe.skip('CodeEditor', () => {
       />,
     ))
 
-  it('should render correctly with title', () =>
+  it('should render correctly with label', () =>
     shouldMatchEmotionSnapshot(
       <CodeEditor
         value="configuration: 1/ntest: 'ok'"
         extensions="yaml"
         height="600px"
         onChange={newValue => newValue}
         helper="Helper text"
-        title="title"
+        label="title"
       />,
     ))
 

packages/plus/src/components/FAQ/index.tsx

@@ -41,7 +41,7 @@ export const FAQ = ({
       <Stack gap={2} direction="row">
         <div>
           {!productIconName && illustrationText ? (
-            <Bullet sentiment="primary" text={illustrationText.toString()} />
+            <Bullet sentiment="primary">{illustrationText.toString()}</Bullet>
           ) : null}
           {ProductIconUsed ? <ProductIconUsed size="xlarge" /> : null}
         </div>

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.',
     },
   },
 }

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(<Bullet text="1" />))
+    shouldMatchEmotionSnapshot(<Bullet>1</Bullet>))
 
   test('renders correctly with an icon', () =>
     shouldMatchEmotionSnapshot(
@@ -25,14 +25,14 @@ describe('Bullet', () => {
   describe('sentiment', () => {
     ;['disabled', ...SENTIMENTS].forEach(sentiment => {
       test(`render ${sentiment}`, () =>
-        shouldMatchEmotionSnapshot(<Bullet sentiment={sentiment} text="1" />))
+        shouldMatchEmotionSnapshot(<Bullet sentiment={sentiment}>1</Bullet>))
     })
   })
 
   describe('size', () => {
     ;(['medium', 'small', 'xsmall', 'xxsmall'] as const).forEach(size => {
       test(`render ${size}`, () =>
-        shouldMatchEmotionSnapshot(<Bullet size={size} text="1" />))
+        shouldMatchEmotionSnapshot(<Bullet size={size}>1</Bullet>))
     })
   })
 })

packages/ui/src/components/Bullet/index.tsx

@@ -93,7 +93,8 @@ const StyledContainer = styled('div')<StyledContainerType>`
   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<BulletSentiment, string>)[
       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}
     </StyledContainer>
   </Tooltip>

packages/ui/src/components/NumberInput/__stories__/LabelDescription.stories.tsx

@@ -21,7 +21,7 @@ export const LabelDescription: StoryFn = (
       label="Advanced Label"
       labelDescription={
         <Tooltip text="Tooltip message">
-          <AlertCircleOutlineIcon color="neutral" />
+          <AlertCircleOutlineIcon sentiment="neutral" />
         </Tooltip>
       }
       required