Deprecate Body variant prop

.changeset/brown-cobras-invite.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a new `weight` prop to the Body component. Choose between the `regular` and `bold` font weights.

.changeset/soft-drinks-accept.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Deprecated the Body component's `variant` prop. Use the new `weight` prop instead of the `highlight` variant and use custom CSS to replace the other variants.

packages/circuit-ui/components/Body/Body.mdx

@@ -30,6 +30,8 @@ The Body component comes in three weights. Use the default `regular` weight in m
 
 ### Variants
 
+<Status variant="deprecated" />
+
 The Body component accepts five different variants—`highlight`, `quote`, `confirm`, `alert` and `subtle`—to tailor it according to the content we are presenting.
 
 Different variants will render different HTML elements by default:

packages/circuit-ui/components/Body/Body.stories.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+import { BodyLarge } from '../BodyLarge/BodyLarge.js';
+
 import type { BodyProps } from './Body.js';
 
 import { Body } from './index.js';
@@ -23,6 +25,7 @@ const content =
 export default {
   title: 'Typography/Body',
   component: Body,
+  subcomponents: { BodyLarge },
   argTypes: {
     as: { control: 'text' },
   },

packages/circuit-ui/components/Body/Body.tsx

@@ -44,7 +44,8 @@ export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
    */
   weight?: 'regular' | 'bold';
   /**
-   * Choose from style variants.
+   * @deprecated Use the `weight` prop instead of the `highlight` variant and
+   * use custom CSS to replace the other variants.
    */
   variant?: Variant;
   /**
@@ -75,6 +76,20 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
     const Element = as || getHTMLElement(variant);
 
     if (process.env.NODE_ENV !== 'production') {
+      if (variant) {
+        if (variant === 'highlight') {
+          deprecate(
+            'Body',
+            'The "highlight" variant has been deprecated. Use the "weight" prop instead.',
+          );
+        } else {
+          deprecate(
+            'Body',
+            `The "${variant}" variant has been deprecated. Use custom CSS instead.`,
+          );
+        }
+      }
+
       const deprecatedSizeMap: Record<string, string> = {
         'one': 'm',
         'two': 's',

packages/circuit-ui/components/BodyLarge/BodyLarge.tsx

@@ -13,61 +13,25 @@
  * limitations under the License.
  */
 
-import { forwardRef, type HTMLAttributes, type Ref } from 'react';
+import { forwardRef } from 'react';
 
-import type { AsPropType } from '../../types/prop-types.js';
-import { clsx } from '../../styles/clsx.js';
 import { deprecate } from '../../util/logger.js';
+import { Body, type BodyProps } from '../Body/Body.js';
 
-import classes from './BodyLarge.module.css';
-
-type Variant = 'highlight' | 'quote' | 'confirm' | 'alert' | 'subtle';
-
-export interface BodyLargeProps extends HTMLAttributes<HTMLParagraphElement> {
-  /**
-   * Choose from style variants.
-   */
-  variant?: Variant;
-  /**
-   * Render the text using any HTML element.
-   */
-  as?: AsPropType;
-  /**
-   * The ref to the HTML DOM element.
-   */
-  ref?: Ref<any>;
-}
-
-function getHTMLElement(variant?: Variant): AsPropType {
-  if (variant === 'highlight') {
-    return 'strong';
-  }
-  if (variant === 'quote') {
-    return 'blockquote';
-  }
-  return 'p';
-}
-
+export type BodyLargeProps = Omit<BodyProps, 'size'>;
 /**
  * @deprecated Use the Body component in size `l` instead.
  */
 export const BodyLarge = forwardRef<HTMLParagraphElement, BodyLargeProps>(
-  ({ className, as, variant, ...props }, ref) => {
+  (props, ref) => {
     if (process.env.NODE_ENV !== 'production') {
       deprecate(
         'BodyLarge',
         'The BodyLarge component has been deprecated. Use the Body component in size `l` instead.',
       );
     }
 
-    const Element = as || getHTMLElement(variant);
-    return (
-      <Element
-        {...props}
-        ref={ref}
-        className={clsx(classes.base, variant && classes[variant], className)}
-      />
-    );
+    return <Body {...props} ref={ref} size="l" />;
   },
 );
 

packages/eslint-plugin-circuit-ui/no-deprecated-props/index.ts

@@ -65,6 +65,12 @@ const mappings: Config[] = [
     props: ['variant'],
     alternative: '',
   },
+  {
+    components: ['Body'],
+    props: ['variant'],
+    alternative:
+      'Use the `weight` prop instead of the `highlight` variant and use custom CSS to replace the other variants.',
+  },
 ];
 
 export const noDeprecatedProps = createRule({