Implement ADR 012: Replace unguarded console.warn calls with warning() helper

packages/react/src/DataTable/useTable.ts

@@ -3,6 +3,7 @@ import type {Column} from './column'
 import type {UniqueRow} from './row'
 import {DEFAULT_SORT_DIRECTION, SortDirection, transition, strategies} from './sorting'
 import type {ObjectPathValue} from './utils'
+import {warning} from '../utils/warning'
 
 interface TableConfig<Data extends UniqueRow> {
   columns: Array<Column<Data>>
@@ -231,22 +232,18 @@ function getInitialSortState<Data extends UniqueRow>(
     })
 
     if (column === undefined) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Warning: Unable to find a column with id or field set to: ${initialSortColumn}. Please provide a value to \`initialSortColumn\` which corresponds to a \`id\` or \`field\` value in a column.`,
-        )
-      }
+      warning(
+        true,
+        `Warning: Unable to find a column with id or field set to: ${initialSortColumn}. Please provide a value to \`initialSortColumn\` which corresponds to a \`id\` or \`field\` value in a column.`,
+      )
       return null
     }
 
     if (column.sortBy === false || column.sortBy === undefined) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Warning: The column specified by initialSortColumn={${initialSortColumn}} is not sortable. Please set \`sortBy\` to true or provide a sort strategy.`,
-        )
-      }
+      warning(
+        true,
+        `Warning: The column specified by initialSortColumn={${initialSortColumn}} is not sortable. Please set \`sortBy\` to true or provide a sort strategy.`,
+      )
       return null
     }
 
@@ -262,23 +259,19 @@ function getInitialSortState<Data extends UniqueRow>(
     })
 
     if (!column) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Warning: An initialSortDirection value was provided but no columns are sortable. Please set \`sortBy\` to true or provide a sort strategy to a column.`,
-        )
-      }
+      warning(
+        true,
+        `Warning: An initialSortDirection value was provided but no columns are sortable. Please set \`sortBy\` to true or provide a sort strategy to a column.`,
+      )
       return null
     }
 
     const id = column.id ?? column.field
     if (id === undefined) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Warning: Unable to find an \`id\` or \`field\` for the column: ${column}. Please set one of these properties on the column.`,
-        )
-      }
+      warning(
+        true,
+        `Warning: Unable to find an \`id\` or \`field\` for the column: ${column}. Please set one of these properties on the column.`,
+      )
       return null
     }
 

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -22,6 +22,7 @@ import {isValidElementType} from 'react-is'
 import {useAnnouncements} from './useAnnouncements'
 import {clsx} from 'clsx'
 import {useVirtualizer} from '@tanstack/react-virtual'
+import {warning} from '../utils/warning'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -162,15 +163,11 @@ export function FilteredActionList({
   virtualized = false,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
-  if (__DEV__) {
-    if (virtualized && groupMetadata?.length) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'FilteredActionList: `virtualized` has no effect when `groupMetadata` is provided. ' +
-          'Grouped lists are rendered without virtualization.',
-      )
-    }
-  }
+  warning(
+    virtualized && Boolean(groupMetadata?.length),
+    'FilteredActionList: `virtualized` has no effect when `groupMetadata` is provided. ' +
+      'Grouped lists are rendered without virtualization.',
+  )
 
   // Virtualization is disabled when groups are present — grouped lists render
   // normally regardless of the `virtualized` prop.

packages/react/src/Heading/Heading.tsx

@@ -4,6 +4,7 @@ import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './Heading.module.css'
+import {warning} from '../utils/warning'
 
 type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -16,21 +17,12 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
   const innerRef = React.useRef<HTMLHeadingElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-  if (__DEV__) {
-    /**
-     * The Linter yells because it thinks this conditionally calls an effect,
-     * but since this is a compile-time flag and not a runtime conditional
-     * this is safe, and ensures the entire effect is kept out of prod builds
-     * shaving precious bytes from the output, and avoiding mounting a noop effect
-     */
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
-        // eslint-disable-next-line no-console
-        console.warn('This Heading component should be an instanceof of h1-h6')
-      }
-    }, [innerRef])
-  }
+  useEffect(() => {
+    warning(
+      innerRef.current != null && !(innerRef.current instanceof HTMLHeadingElement),
+      'This Heading component should be an instanceof of h1-h6',
+    )
+  }, [innerRef])
 
   return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
 }) as PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>

packages/react/src/Radio/Radio.tsx

@@ -5,6 +5,7 @@ import {clsx} from 'clsx'
 import sharedClasses from '../Checkbox/shared.module.css'
 import classes from './Radio.module.css'
 import type {WithSlotMarker} from '../utils/types'
+import {warning} from '../utils/warning'
 
 export type RadioProps = {
   /**
@@ -60,12 +61,10 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     }
     const name = nameProp || radioGroupContext?.name
 
-    if (!name && !ariaHidden) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop',
-      )
-    }
+    warning(
+      !name && !ariaHidden,
+      'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop',
+    )
 
     return (
       <input

packages/react/src/SegmentedControl/SegmentedControl.tsx

@@ -12,6 +12,7 @@ import {isElement} from 'react-is'
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
 import {isSlot} from '../utils/is-slot'
+import {warning} from '../utils/warning'
 
 export type SegmentedControlProps = {
   'aria-label'?: string
@@ -103,12 +104,10 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
     return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props['aria-label'] : null
   }
 
-  if (!ariaLabel && !ariaLabelledby) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies',
-    )
-  }
+  warning(
+    !ariaLabel && !ariaLabelledby,
+    'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies',
+  )
 
   // Check if dropdown variant is used at any breakpoint
   const responsiveVariant = typeof variant === 'object' ? variant : undefined

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx

@@ -10,6 +10,7 @@ import {useSlots} from '../../../hooks/useSlots'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {clsx} from 'clsx'
 import {isSlot} from '../../../utils/is-slot'
+import {warning} from '../../../utils/warning'
 
 export type CheckboxOrRadioGroupProps = {
   /** Class name for custom styling */
@@ -67,12 +68,10 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
   const validationMessageId = validationChild ? `${id}-validationMessage` : undefined
   const captionId = captionChild ? `${id}-caption` : undefined
 
-  if (!labelChild && !ariaLabelledby) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.',
-    )
-  }
+  warning(
+    !labelChild && !ariaLabelledby,
+    'A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.',
+  )
 
   const isLegendVisible = React.isValidElement(labelChild) && !labelChild.props.visuallyHidden
 

packages/react/src/internal/components/TextInputInnerAction.tsx

@@ -5,6 +5,7 @@ import {Button, IconButton} from '../../Button'
 import {Tooltip} from '../../TooltipV2'
 import type {ButtonProps} from '../../Button'
 import {clsx} from 'clsx'
+import {warning} from '../../utils/warning'
 
 import styles from './TextInputInnerAction.module.css'
 
@@ -61,10 +62,10 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
   ) => {
     const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className)}
 
-    if ((icon && !ariaLabel) || (!children && !ariaLabel)) {
-      // eslint-disable-next-line no-console
-      console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
-    }
+    warning(
+      (icon && !ariaLabel) || (!children && !ariaLabel),
+      'Use the `aria-label` prop to provide an accessible label for assistive technology',
+    )
 
     const accessibleLabel = ariaLabel
       ? {'aria-label': ariaLabel}

packages/react/src/utils/deprecate.tsx

@@ -1,4 +1,5 @@
 import {useRef, useCallback} from 'react'
+import {warn} from './warning'
 
 type DeprecationType = {name: string; message: string; version: string}
 
@@ -55,8 +56,7 @@ export class Deprecations {
 
   static deprecate({name, message, version}: DeprecationType) {
     const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`
-    // eslint-disable-next-line no-console
-    console.warn(msg)
+    warn(msg)
 
     this.get().deprecations.push({name, message, version})
   }