feat: remove deprecated props in Icon CodeEditor and Bullet

.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/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap

@@ -359,15 +359,15 @@ exports[`DateField > should clear field 1`] = `
 
 .emotion-25 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-25 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.test.tsx.snap

@@ -126,15 +126,15 @@ exports[`KeyValueField > should render with default props & max size 1`] = `
 
 .emotion-10 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-10 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 
@@ -307,15 +307,15 @@ exports[`KeyValueField > should render with default props 1`] = `
 
 .emotion-10 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-10 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 
@@ -479,15 +479,15 @@ exports[`KeyValueField > should render with default props in readonly mode 1`] =
 
 .emotion-10 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-10 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -191,15 +191,15 @@ exports[`NumberInputField > should render correctly 1`] = `
 
 .emotion-10 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-10 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 
@@ -579,15 +579,15 @@ exports[`NumberInputField > should render correctly disabled 1`] = `
 
 .emotion-10 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-10 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

packages/form/src/components/TagInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -379,15 +379,15 @@ exports[`TagInputField > should render correctly with regex 1`] = `
 
 .emotion-19 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-19 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 
@@ -856,15 +856,15 @@ exports[`TagInputField > should works with defaultValues 1`] = `
 
 .emotion-19 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-19 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

packages/form/src/components/TextAreaField/__tests__/__snapshots__/index.test.tsx.snap

@@ -431,15 +431,15 @@ exports[`TextAreaField > should render correctly generated 1`] = `
 
 .emotion-19 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-19 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

packages/form/src/components/TextInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -439,15 +439,15 @@ exports[`TextInputField > should render correctly generated 1`] = `
 
 .emotion-19 {
   vertical-align: middle;
-  fill: currentColor;
+  fill: #3f4250;
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
   min-height: 1rem;
 }
 
 .emotion-19 .fillStroke {
-  stroke: currentColor;
+  stroke: #3f4250;
   fill: none;
 }
 

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,12 @@ const StyledIcon = styled('svg', {
         ? capitalize(PROMINENCES.default)
         : capitalize(PROMINENCES[prominence])
 
-    const themeColor = theme.colors[sentiment as Color]
+    const themeColor = theme.colors[sentiment]
     const icon = `icon${definedProminence}${
       disabled ? 'Disabled' : ''
     }` as keyof typeof themeColor
 
-    return theme.colors?.[sentiment as Color]?.[icon] || sentiment
+    return theme.colors?.[sentiment]?.[icon] || sentiment
   }};
 
   .fillStroke {
@@ -98,25 +86,21 @@ const StyledIcon = styled('svg', {
           ? capitalize(PROMINENCES.default)
           : capitalize(PROMINENCES[prominence])
 
-      const themeColor = theme.colors[sentiment as Color]
+      const themeColor = theme.colors[sentiment]
       const icon = `icon${definedProminence}${
         disabled ? 'Disabled' : ''
       }` as keyof typeof themeColor
 
-      return theme.colors?.[sentiment as Color]?.[icon] || sentiment
+      return theme.colors?.[sentiment]?.[icon] || sentiment
     }};
     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,14 +111,13 @@ 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,
+      sentiment = 'neutral',
       size = 'small',
       prominence = 'default',
       className,
@@ -147,30 +130,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>
+  ),
 )