Remove deprecated props (#2063)

sumup-oss · Apr 25, 2023 · fef5b95 · fef5b95
1 parent 496d8c9
commit fef5b95
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 1,543 deletions.
diff --git a/.changeset/loud-pots-act.md b/.changeset/loud-pots-act.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Removed the deprecated `children` prop from the Checkbox component. Use the `label` prop instead.
diff --git a/.changeset/serious-schools-look.md b/.changeset/serious-schools-look.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Removed the deprecated `confirm`, `notify`, and `alert` variants from the Badge, NotificationInline, and NotificationToast components. Use the `success`, `warning`, and `danger` variants instead.
diff --git a/packages/circuit-ui/components/Badge/Badge.spec.tsx b/packages/circuit-ui/components/Badge/Badge.spec.tsx
@@ -35,9 +35,6 @@ describe('Badge', () => {
     'warning',
     'danger',
     'promo',
-    'confirm',
-    'notify',
-    'alert',
   ] as const;
 
   it.each(variants)('should render with %s styles', (variant) => {

diff --git a/packages/circuit-ui/components/Badge/Badge.tsx b/packages/circuit-ui/components/Badge/Badge.tsx
@@ -18,30 +18,12 @@ import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../styles/styled';
 import { typography } from '../../styles/style-mixins';
-import { withDeprecation } from '../../util/logger';
 
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Choose the style variant. Default: 'neutral'.
    */
-  variant?:
-    | 'neutral'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'promo'
-    /**
-     * @deprecated
-     */
-    | 'confirm'
-    /**
-     * @deprecated
-     */
-    | 'notify'
-    /**
-     * @deprecated
-     */
-    | 'alert';
+  variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'promo';
   /**
    * Use the circular badge to indicate a count of items related to an element.
    */
@@ -63,22 +45,19 @@ const baseStyles = ({ theme }: StyleProps) => css`
 
 const variantStyles = ({ variant = 'neutral' }: BadgeProps) => {
   switch (variant) {
-    case 'success':
-    case 'confirm': {
+    case 'success': {
       return css`
         background-color: var(--cui-bg-success-strong);
         color: var(--cui-fg-on-strong);
       `;
     }
-    case 'warning':
-    case 'notify': {
+    case 'warning': {
       return css`
         background-color: var(--cui-bg-warning-strong);
         color: var(--cui-fg-on-strong);
       `;
     }
-    case 'danger':
-    case 'alert': {
+    case 'danger': {
       return css`
         background-color: var(--cui-bg-danger-strong);
         color: var(--cui-fg-on-strong);
@@ -124,28 +103,11 @@ const circleStyles = ({ circle = false, children }: BadgeProps) =>
  * A badge communicates the status of an element or the count of items
  * related to an element.
  */
-const StyledBadge = styled('div')<BadgeProps>(
+export const Badge = styled('div')<BadgeProps>(
   typography('two'),
   baseStyles,
   variantStyles,
   circleStyles,
 );
 
-StyledBadge.displayName = 'Badge';
-
-export const Badge =
-  process.env.NODE_ENV === 'production'
-    ? StyledBadge
-    : withDeprecation(StyledBadge, ({ variant }) => {
-        const deprecatedMap: Record<string, string> = {
-          confirm: 'success',
-          notify: 'warning',
-          alert: 'danger',
-        };
-
-        if (variant && deprecatedMap[variant]) {
-          return `The "${variant}" variant has been deprecated. Use "${deprecatedMap[variant]}" instead.`;
-        }
-
-        return null;
-      });
+Badge.displayName = 'Badge';
diff --git a/packages/circuit-ui/components/Badge/__snapshots__/Badge.spec.tsx.snap b/packages/circuit-ui/components/Badge/__snapshots__/Badge.spec.tsx.snap
@@ -36,48 +36,6 @@ exports[`Badge > should have the correct circle styles 1`] = `
 </div>
 `;
 
-exports[`Badge > should render with alert styles 1`] = `
-.circuit-0 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: var(--cui-bg-danger-strong);
-  color: var(--cui-fg-on-strong);
-}
-
-<div>
-  <div
-    class="circuit-0"
-  />
-</div>
-`;
-
-exports[`Badge > should render with confirm styles 1`] = `
-.circuit-0 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: var(--cui-bg-success-strong);
-  color: var(--cui-fg-on-strong);
-}
-
-<div>
-  <div
-    class="circuit-0"
-  />
-</div>
-`;
-
 exports[`Badge > should render with danger styles 1`] = `
 .circuit-0 {
   font-size: 0.875rem;
@@ -141,27 +99,6 @@ exports[`Badge > should render with neutral styles 1`] = `
 </div>
 `;
 
-exports[`Badge > should render with notify styles 1`] = `
-.circuit-0 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: var(--cui-bg-warning-strong);
-  color: var(--cui-fg-on-strong);
-}
-
-<div>
-  <div
-    class="circuit-0"
-  />
-</div>
-`;
-
 exports[`Badge > should render with promo styles 1`] = `
 .circuit-0 {
   font-size: 0.875rem;

diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx
@@ -30,7 +30,7 @@ export default {
 
 const CheckboxWithState = ({
   checked: initial = false,
-  children,
+  label,
   ...props
 }: CheckboxProps) => {
   const [checked, setChecked] = useState(initial);
@@ -39,9 +39,12 @@ const CheckboxWithState = ({
     setChecked((prev) => !prev);
   };
   return (
-    <Checkbox {...props} checked={checked} onChange={handleChange}>
-      {children || (checked ? 'Checked' : 'Unchecked')}
-    </Checkbox>
+    <Checkbox
+      {...props}
+      label={label || (checked ? 'Checked' : 'Unchecked')}
+      checked={checked}
+      onChange={handleChange}
+    />
   );
 };
 
@@ -74,14 +77,18 @@ Disabled.args = {
 
 export const Multiple = (args: CheckboxProps) => (
   <>
-    <CheckboxWithState {...args} value="apples" name="fruits">
-      Apples
-    </CheckboxWithState>
-    <CheckboxWithState {...args} value="bananas" name="fruits">
-      Bananas
-    </CheckboxWithState>
-    <CheckboxWithState {...args} value="oranges" name="fruits">
-      Oranges
-    </CheckboxWithState>
+    <CheckboxWithState {...args} value="apples" name="fruits" label="Apples" />
+    <CheckboxWithState
+      {...args}
+      value="bananas"
+      name="fruits"
+      label="Bananas"
+    />
+    <CheckboxWithState
+      {...args}
+      value="oranges"
+      name="fruits"
+      label="Oranges"
+    />
   </>
 );
diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx
@@ -20,7 +20,6 @@ import { Checkmark } from '@sumup/icons';
 import styled, { StyleProps } from '../../styles/styled';
 import { hideVisually, focusOutline } from '../../styles/style-mixins';
 import { FieldValidationHint, FieldWrapper } from '../FieldAtoms';
-import { deprecate } from '../../util/logger';
 import { AccessibilityError } from '../../util/errors';
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -40,12 +39,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
    * The ref to the HTML DOM element.
    */
   ref?: Ref<HTMLInputElement>;
-  /**
-   * @deprecated
-   *
-   * Use the `label` prop instead.
-   */
-  children?: InputHTMLAttributes<HTMLInputElement>['children'];
+  children?: never;
 }
 
 const labelBaseStyles = css`
@@ -58,11 +52,13 @@ const labelBaseStyles = css`
 
 const CheckboxLabel = styled('label')(labelBaseStyles);
 
+type WrapperElProps = Pick<CheckboxProps, 'className' | 'style' | 'disabled'>;
+
 const wrapperBaseStyles = () => css`
   position: relative;
 `;
 
-const CheckboxWrapper = styled(FieldWrapper)<CheckboxProps>(wrapperBaseStyles);
+const CheckboxWrapper = styled(FieldWrapper)<WrapperElProps>(wrapperBaseStyles);
 
 type InputElProps = Pick<CheckboxProps, 'invalid' | 'disabled'>;
 
@@ -179,7 +175,6 @@ export const Checkbox = forwardRef(
   (
     {
       label,
-      children,
       value,
       'id': customId,
       name,
@@ -193,18 +188,10 @@ export const Checkbox = forwardRef(
     }: CheckboxProps,
     ref: CheckboxProps['ref'],
   ) => {
-    if (process.env.NODE_ENV !== 'production' && children) {
-      deprecate(
-        'Checkbox',
-        'The `children` prop has been deprecated. Use the `label` prop instead.',
-      );
-    }
-
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
-      !label &&
-      !children
+      !label
     ) {
       throw new AccessibilityError('Checkbox', 'The `label` prop is missing.');
     }
@@ -230,7 +217,7 @@ export const Checkbox = forwardRef(
           aria-describedby={descriptionIds}
         />
         <CheckboxLabel htmlFor={checkboxId}>
-          {label || children}
+          {label}
           <Checkmark aria-hidden="true" />
         </CheckboxLabel>
         <FieldValidationHint

diff --git a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx
@@ -65,7 +65,7 @@ describe('ListItem', () => {
       const wrapper = renderListItem(create, {
         ...baseProps,
         leadingComponent: (
-          <Badge variant="alert" circle>
+          <Badge variant="danger" circle>
             3
           </Badge>
         ),

diff --git a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx
@@ -52,7 +52,7 @@ const item: Item = {
 };
 
 const LeadingBadge = (
-  <Badge variant="alert" circle>
+  <Badge variant="danger" circle>
     3
   </Badge>
 );