Deprecate the RadioButton and Selector components

sumup-oss · May 12, 2023 · 3df00f9 · 3df00f9
1 parent 014e3df
commit 3df00f9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/.changeset/five-onions-confess.md b/.changeset/five-onions-confess.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Deprecated the RadioButton component. Use the RadioButtonGroup component instead.
diff --git a/.changeset/mighty-apples-do.md b/.changeset/mighty-apples-do.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Deprecated the Selector component. Use the SelectorGroup component instead.
diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.tsx
@@ -21,6 +21,7 @@ import { hideVisually, focusOutline } from '../../styles/style-mixins';
 import { uniqueId } from '../../util/id';
 import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
 import { AccessibilityError } from '../../util/errors';
+import { deprecate } from '../../util/logger';
 
 export interface RadioButtonProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -186,7 +187,7 @@ const RadioButtonInput = styled('input')<InputElProps>(
 );
 
 /**
- * RadioButton component for forms.
+ * @deprecated Use the {@link RadioButtonGroup} component instead.
  */
 export const RadioButton = forwardRef(
   (
@@ -206,6 +207,13 @@ export const RadioButton = forwardRef(
     }: RadioButtonProps,
     ref: RadioButtonProps['ref'],
   ) => {
+    if (process.env.NODE_ENV !== 'production') {
+      deprecate(
+        'RadioButton',
+        'The RadioButton component has been deprecated. Use the RadioButtonGroup component instead.',
+      );
+    }
+
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&

diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -206,8 +206,7 @@ const inputStyles = ({ theme }: StyleProps) => css`
 const SelectorInput = styled('input')(inputStyles);
 
 /**
- * A selector allows users to choose between several mutually-exclusive choices
- * accompanied by descriptions, possibly with tabular data.
+ * @deprecated Use the {@link SelectorGroup} component instead.
  */
 export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
   (
@@ -238,6 +237,13 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
     const type = multiple ? 'checkbox' : 'radio';
     const handleChange = useClickEvent(onChange, tracking, 'selector');
 
+    if (process.env.NODE_ENV !== 'production') {
+      deprecate(
+        'Selector',
+        'The Selector component has been deprecated. Use the SelectorGroup component instead.',
+      );
+    }
+
     if (process.env.NODE_ENV !== 'production' && children) {
       deprecate(
         'Selector',