docs(autoalign): clarify reliance on react v17+ (#19943)

tay1orjones · web-flow · commit 8c28861c4a04 · 2025-07-17T05:39:40.000Z
diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx
@@ -291,7 +291,9 @@ AILabel.propTypes = {
   'aria-label': PropTypes.string,
 
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is
+   * subject to future changes. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -245,7 +245,9 @@ const Button: ButtonComponent = React.forwardRef(
   ]),
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.tsx b/packages/react/src/components/CodeSnippet/CodeSnippet.tsx
@@ -50,7 +50,8 @@ export interface CodeSnippetProps {
   align?: CodeSnippetAlignment;
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -486,7 +487,9 @@ CodeSnippet.propTypes = {
   ),
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -200,7 +200,8 @@ export interface ComboBoxProps<ItemType>
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -1229,7 +1230,8 @@ ComboBox.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/ComboBox/Combobox.DynamicStyles.featureflag.mdx b/packages/react/src/components/ComboBox/Combobox.DynamicStyles.featureflag.mdx
@@ -21,6 +21,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
@@ -45,7 +48,8 @@ includes both the dynamic positioning styles and collision detection.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ComboBoxFeatureflagStories.FloatingStyles),
+      onClick: () =>
+        stackblitzPrefillConfig(ComboBoxFeatureflagStories.FloatingStyles),
     },
   ]}
-/>
+/>
diff --git a/packages/react/src/components/ComboButton/ComboButton.DynamicStyles.featureflag.mdx b/packages/react/src/components/ComboButton/ComboButton.DynamicStyles.featureflag.mdx
@@ -21,6 +21,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
@@ -41,7 +44,8 @@ includes both the dynamic positioning styles and collision detection.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ComboButtonFeatureflagStories.FloatingStyles),
+      onClick: () =>
+        stackblitzPrefillConfig(ComboButtonFeatureflagStories.FloatingStyles),
     },
   ]}
-/>
+/>
diff --git a/packages/react/src/components/Copy/Copy.tsx b/packages/react/src/components/Copy/Copy.tsx
@@ -42,7 +42,8 @@ export interface CopyProps
   align?: CopyAlignment;
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -191,7 +192,9 @@ Copy.propTypes = {
   ),
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/CopyButton/CopyButton.tsx b/packages/react/src/components/CopyButton/CopyButton.tsx
@@ -35,7 +35,8 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
   align?: CopyButtonAlignment;
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -145,7 +146,9 @@ CopyButton.propTypes = {
   ),
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.DynamicStyles.featureflag.mdx b/packages/react/src/components/Dropdown/Dropdown.DynamicStyles.featureflag.mdx
@@ -21,6 +21,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
@@ -40,12 +43,14 @@ includes both the dynamic positioning styles and collision detection.
   />
 </FeatureFlags>
 ```
+
 <Canvas
   of={DropdownFeatureflagStories.FloatingStyles}
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(DropdownFeatureflagStories.FloatingStyles),
+      onClick: () =>
+        stackblitzPrefillConfig(DropdownFeatureflagStories.FloatingStyles),
     },
   ]}
-/>
+/>
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -104,7 +104,10 @@ export interface DropdownProps<ItemType>
   ariaLabel?: string;
 
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -745,7 +748,10 @@ Dropdown.propTypes = {
   ),
 
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
@@ -45,7 +45,8 @@ export interface IconButtonProps
   align?: IconButtonAlignment;
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -265,7 +266,9 @@ IconButton.propTypes = {
   ),
 
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/MenuButton/MenuButton.DynamicStyles.featureflag.mdx b/packages/react/src/components/MenuButton/MenuButton.DynamicStyles.featureflag.mdx
@@ -19,6 +19,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -121,7 +121,8 @@ export interface FilterableMultiSelectProps<ItemType>
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -1072,7 +1073,8 @@ FilterableMultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.DynamicStyles.featureflag.mdx b/packages/react/src/components/MultiSelect/MultiSelect.DynamicStyles.featureflag.mdx
@@ -19,6 +19,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -112,7 +112,8 @@ export interface MultiSelectProps<ItemType>
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -931,7 +932,8 @@ MultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx
@@ -77,6 +77,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx
@@ -27,7 +27,10 @@ const defaultSize = 'md';
 
 interface OverflowMenuProps {
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -222,7 +225,10 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
 );
 OverflowMenu.propTypes = {
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**
diff --git a/packages/react/src/components/Popover/Popover.DynamicStyles.featureflag.mdx b/packages/react/src/components/Popover/Popover.DynamicStyles.featureflag.mdx
@@ -19,6 +19,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -83,7 +83,10 @@ export interface PopoverBaseProps {
   align?: PopoverAlignment;
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover on first render if it is not visible. This prop
+   * is currently experimental and is subject to future changes. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -534,7 +537,10 @@ Popover.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover on first render if it is not visible. This prop
+   * is currently experimental and is subject to future changes. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/Toggletip/Toggletip.DynamicStyles.featureflag.mdx b/packages/react/src/components/Toggletip/Toggletip.DynamicStyles.featureflag.mdx
@@ -19,6 +19,9 @@ without the collision detection.
 **Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
 includes both the dynamic positioning styles and collision detection.
 
+To use `autoAlign` your project needs to be using React v17+, see
+https://github.com/carbon-design-system/carbon/issues/18714.
+
 ## Enable dynamic setting of floating styles
 
 ```js
diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
@@ -243,7 +243,10 @@ Toggletip.propTypes = {
   as: PropTypes.elementType,
 
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover on first render if it is not visible. This prop
+   * is currently experimental and is subject to future changes. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.tsx b/packages/react/src/components/Tooltip/DefinitionTooltip.tsx
@@ -25,7 +25,9 @@ export interface DefinitionTooltipProps
   align?: PopoverAlignment;
 
   /**
-   * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+   * Will auto-align Definition Tooltip. This prop is currently experimental
+   * and is subject to future changes. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign?: boolean;
 
@@ -175,7 +177,9 @@ DefinitionTooltip.propTypes = {
   ]),
 
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is
+   * subject to future changes. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
 
diff --git a/packages/react/src/components/Tooltip/Tooltip.DynamicStyles.featureflag.mdx b/packages/react/src/components/Tooltip/Tooltip.DynamicStyles.featureflag.mdx
diff --git a/packages/react/src/components/TreeView/TreeNode.tsx b/packages/react/src/components/TreeView/TreeNode.tsx
