feat: remove deprecated props of TagInput and Toaster (#5318)

lisalupi · matthprost · commit d25d9d8c71ff · 2025-07-16T11:48:39.000+02:00
* feat: remove deprecated props Toaster and TagInput

* fix: typo in changeset
diff --git a/.changeset/grumpy-hoops-dance.md b/.changeset/grumpy-hoops-dance.md
@@ -0,0 +1,15 @@
+---
+"@ultraviolet/ui": major
+---
+
+
+**BREAKING CHANGES**
+
+Deprecated props removed:
+- `TagInput`: 
+    - props "manualInput" and "onChangeError" removed: the props used to have no effect
+    - prop "variant" removed: only one variant possible now
+    - prop "tags" removed -> use "value" instead
+
+- `Toaster`: variant "info" removed
+
diff --git a/packages/form/src/components/SelectInputField/index.tsx b/packages/form/src/components/SelectInputField/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { SelectInput } from '@ultraviolet/ui'
-import { type ComponentProps, useCallback } from 'react'
+import { useCallback } from 'react'
+import type { ComponentProps } from 'react'
 import type { FieldPath, FieldValues, PathValue } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 import { useErrors } from '../../providers'
diff --git a/packages/illustrations/package.json b/packages/illustrations/package.json
@@ -106,6 +106,7 @@
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
+    "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "@utils/test": "workspace:*",
     "react": "19.1.0",
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -53,7 +53,7 @@
   "peerDependencies": {
     "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.x",
     "react": "18.x || 19.x",
@@ -62,7 +62,7 @@
   "devDependencies": {
     "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.3.4",
     "react": "19.1.0",
diff --git a/packages/plus/src/components/InfoTable/components/Cell.tsx b/packages/plus/src/components/InfoTable/components/Cell.tsx
@@ -2,7 +2,7 @@
 
 import styled from '@emotion/styled'
 import { Stack, Text } from '@ultraviolet/ui'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 export const Term = styled.dt`
   font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
diff --git a/packages/plus/src/components/InfoTable/components/Row.tsx b/packages/plus/src/components/InfoTable/components/Row.tsx
@@ -2,7 +2,7 @@
 
 import styled from '@emotion/styled'
 import { Row } from '@ultraviolet/ui'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 export const StyledRow = styled(Row)`
   border-bottom: 1px ${({ theme }) => theme.colors.neutral.border} solid;
diff --git a/packages/plus/src/components/Plans/__stories__/Playground.stories.tsx b/packages/plus/src/components/Plans/__stories__/Playground.stories.tsx
@@ -1,4 +1,5 @@
-import { Button, type Text } from '@ultraviolet/ui'
+import { Button } from '@ultraviolet/ui'
+import type { Text } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
 import { Template } from './Template.stories'
 import { domain, fees, gb, pipeline, ssl } from './features'
diff --git a/packages/plus/src/components/Plans/__stories__/Selectable.stories.tsx b/packages/plus/src/components/Plans/__stories__/Selectable.stories.tsx
@@ -1,6 +1,8 @@
-import { StoryFn } from '@storybook/react'
-import { Button, type Text } from '@ultraviolet/ui'
-import { type ComponentProps, useState } from 'react'
+import type { StoryFn } from '@storybook/react'
+import { Button } from '@ultraviolet/ui'
+import type { Text } from '@ultraviolet/ui'
+import { useState } from 'react'
+import type { ComponentProps } from 'react'
 import { Plans } from '..'
 import { domain, fees, gb, pipeline, ssl } from './features'
 
diff --git a/packages/plus/src/components/Plans/__stories__/WithIcon.stories.tsx b/packages/plus/src/components/Plans/__stories__/WithIcon.stories.tsx
@@ -3,7 +3,8 @@ import {
   BasicSupportProductIcon,
   EntrepriseSupportProductIcon,
 } from '@ultraviolet/icons/product'
-import { Button, Separator, type Text } from '@ultraviolet/ui'
+import { Button, Separator } from '@ultraviolet/ui'
+import type { Text } from '@ultraviolet/ui'
 import type { ComponentProps, ReactNode } from 'react'
 import { Template } from './Template.stories'
 import { domain, fees, gb, pipeline, ssl } from './features'
diff --git a/packages/plus/src/components/Plans/__tests__/plans.tsx b/packages/plus/src/components/Plans/__tests__/plans.tsx
@@ -1,6 +1,7 @@
 import { EntrepriseSupportProductIcon } from '@ultraviolet/icons/product'
-import { Button, Separator, Text } from '@ultraviolet/ui'
-import { ComponentProps } from 'react'
+import type { Text } from '@ultraviolet/ui'
+import { Button, Separator } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 
 export const planStarter = {
   value: 'starter',
diff --git a/packages/ui/src/components/Avatar/index.tsx b/packages/ui/src/components/Avatar/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { type Theme, css } from '@emotion/react'
+import { css } from '@emotion/react'
+import type { Theme } from '@emotion/react'
 import styled from '@emotion/styled'
 import { UploadIcon } from '@ultraviolet/icons'
 import { UserProductIcon } from '@ultraviolet/icons/product'
diff --git a/packages/ui/src/components/TagInput/index.tsx b/packages/ui/src/components/TagInput/index.tsx
@@ -131,26 +131,10 @@ type TagInputProp = (string | { label: string; index: string })[]
 type TagInputProps = {
   disabled?: boolean
   id?: string
-  /**
-   * @deprecated this prop has no more effect
-   */
-  manualInput?: boolean
   name?: string
   onChange?: (tags: string[]) => void
-  /**
-   * @deprecated this prop has no more effect
-   */
-  onChangeError?: (error: Error | string) => void
   placeholder?: string
-  /**
-   * @deprecated use `value` property instead, both properties work the same way
-   */
-  tags?: TagInputProp
   value?: TagInputProp
-  /**
-   * @deprecated there is only one variant now, this prop has no more effect
-   */
-  variant?: string
   className?: string
   'data-testid'?: string
   label?: string
@@ -178,7 +162,6 @@ export const TagInput = ({
   name,
   onChange,
   placeholder,
-  tags,
   value,
   className,
   'data-testid': dataTestId,
@@ -194,10 +177,8 @@ export const TagInput = ({
   tooltip,
   clearable = false,
 }: TagInputProps) => {
-  const tagsProp = value ?? tags
-
   const [tagInputState, setTagInput] = useState(
-    convertTagArrayToTagStateArray(tagsProp),
+    convertTagArrayToTagStateArray(value),
   )
   const [input, setInput] = useState<string>('')
   const [status, setStatus] = useState<{ [key: string]: StatusValue }>({})
@@ -206,8 +187,8 @@ export const TagInput = ({
   const localId = id ?? uniqueId
 
   useEffect(() => {
-    setTagInput(convertTagArrayToTagStateArray(tagsProp))
-  }, [tagsProp, setTagInput])
+    setTagInput(convertTagArrayToTagStateArray(value))
+  }, [value, setTagInput])
 
   const inputRef = useRef<HTMLInputElement>(null)
 
diff --git a/packages/ui/src/components/TimeInput/index.tsx b/packages/ui/src/components/TimeInput/index.tsx
@@ -249,6 +249,7 @@ export const TimeInput = ({
         setFilled({ h: true, m: true, s: true })
       }
     }
+    // oxlint-disable react-hooks/exhaustive-deps
   }, [value])
 
   const handleChangePeriod = (key: 'a' | 'p') => {
diff --git a/packages/ui/src/components/Toaster/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Toaster/__stories__/Sentiments.stories.tsx
@@ -11,9 +11,6 @@ export const Sentiments: StoryFn<typeof ToastContainer> = args => (
     >
       Success
     </Button>
-    <Button sentiment="info" onClick={() => toast.info('This is info')}>
-      Info
-    </Button>
     <Button sentiment="danger" onClick={() => toast.error('This is error')}>
       Error
     </Button>
@@ -30,7 +27,7 @@ Sentiments.parameters = {
   docs: {
     description: {
       story:
-        'Sentiments defines different colors of you component. Using `toast.success()`, `toast.error()`, `toast.warning()` or `toast.info()` will automatically set the correct sentiment. **⚠️ `toast.info()` is deprecated ⚠️**',
+        'Sentiments defines different colors of you component. Using `toast.success()`, `toast.error()` or `toast.warning()` will automatically set the correct sentiment.',
     },
   },
 }
diff --git a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/packages/ui/src/components/Toaster/__tests__/index.test.tsx b/packages/ui/src/components/Toaster/__tests__/index.test.tsx
diff --git a/packages/ui/src/components/Toaster/index.tsx b/packages/ui/src/components/Toaster/index.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
