fix(prefix): make Sass and React components fully prefix-aware (#21058)

Author: heloiselui

packages/react/src/components/ComposedModal/ComposedModal.tsx

@@ -384,7 +384,7 @@ const ComposedModalDialog = React.forwardRef<
     if (
       shouldCloseOnOutsideClick &&
       target instanceof Node &&
-      !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
+      !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) &&
       innerModal.current &&
       !innerModal.current.contains(target) &&
       !innerModal.current.contains(mouseDownTarget)
@@ -415,6 +415,7 @@ const ComposedModalDialog = React.forwardRef<
         currentActiveNode,
         oldActiveNode,
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+        prefix,
       });
     }
 

packages/react/src/components/DataTableSkeleton/DataTableSkeleton.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -124,7 +124,7 @@ const DataTableSkeleton: FunctionComponent<DataTableSkeletonProps> = ({
             {columnsArray.map((i) => (
               <th key={i}>
                 {headers ? (
-                  <div className="cds--table-header-label">
+                  <div className={`${prefix}--table-header-label`}>
                     {headers[i]?.header}
                   </div>
                 ) : (

packages/react/src/components/Modal/Modal.tsx

@@ -414,7 +414,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(
     if (
       shouldCloseOnOutsideClick &&
       target instanceof Node &&
-      !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
+      !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) &&
       innerModal.current &&
       !innerModal.current.contains(target)
     ) {
@@ -445,6 +445,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(
           currentActiveNode,
           oldActiveNode,
           selectorsFloatingMenus,
+          prefix,
         });
         if (wrapFocusTimeout.current) {
           clearTimeout(wrapFocusTimeout.current);

packages/react/src/components/Notification/Notification.tsx

@@ -974,7 +974,7 @@ export function ActionableNotification({
   useIsomorphicEffect(() => {
     if (hasFocus && role === 'alertdialog') {
       const button = document.querySelector(
-        'button.cds--actionable-notification__action-button'
+        `button.${prefix}--actionable-notification__action-button`
       ) as HTMLButtonElement;
       button?.focus();
     }
@@ -999,6 +999,7 @@ export function ActionableNotification({
         endTrapNode,
         currentActiveNode,
         oldActiveNode,
+        prefix,
       });
     }
   }

packages/react/src/components/Popover/index.tsx

@@ -256,9 +256,11 @@ export const Popover: PopoverComponent & {
       // If a value is not set via a custom property, provide a default value that matches the
       // default values defined in the sass style file
       const getStyle = window.getComputedStyle(popover.current, null);
-      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
+      const offsetProperty = getStyle.getPropertyValue(
+        `--${prefix}-popover-offset`
+      );
       const caretProperty = getStyle.getPropertyValue(
-        '--cds-popover-caret-height'
+        `--${prefix}-popover-caret-height`
       );
 
       // Handle if the property values are in px or rem.

packages/react/src/internal/FloatingMenu.tsx

@@ -476,6 +476,7 @@ export const FloatingMenu = ({
         endTrapNode: endSentinelRef.current,
         currentActiveNode: relatedTarget,
         oldActiveNode: target,
+        prefix,
       });
     }
   };

packages/react/src/internal/__tests__/wrapFocus-test.js

@@ -12,6 +12,7 @@ describe('wrapFocus', () => {
   let spyInnerModal;
   let spyButton0;
   let spyButton2;
+  let tooltip;
 
   beforeEach(() => {
     node = document.createElement('div');
@@ -39,6 +40,7 @@ describe('wrapFocus', () => {
       <div class="cds--tooltip" tabindex="0"></div>
     `;
     document.body.appendChild(node);
+    tooltip = node.querySelector('.cds--tooltip');
     spyInnerModal = jest.spyOn(node.querySelector('#inner-modal'), 'focus');
     spyButton0 = jest.spyOn(node.querySelector('#button-0'), 'focus');
     spyButton2 = jest.spyOn(node.querySelector('#button-2'), 'focus');
@@ -61,6 +63,7 @@ describe('wrapFocus', () => {
       node.parentNode.removeChild(node);
       node = null;
     }
+    tooltip = null;
   });
 
   it('runs forward focus-wrap when following outer node is focused on', () => {
@@ -120,6 +123,21 @@ describe('wrapFocus', () => {
     expect(spyButton2).not.toHaveBeenCalled();
   });
 
+  it('respects prefix overrides when checking floating menus', () => {
+    tooltip.className = 'bx--tooltip';
+    wrapFocus({
+      bodyNode: node.querySelector('#inner-modal'),
+      startSentinelNode: node.querySelector('#start-sentinel'),
+      endSentinelNode: node.querySelector('#end-sentinel'),
+      currentActiveNode: tooltip,
+      oldActiveNode: node.querySelector('#button-2'),
+      prefix: 'bx',
+    });
+    expect(spyInnerModal).not.toHaveBeenCalled();
+    expect(spyButton0).not.toHaveBeenCalled();
+    expect(spyButton2).not.toHaveBeenCalled();
+  });
+
   it('uses inner modal node as a escape hatch for focusing for forward focus-wrap', () => {
     node.querySelector('#inner-modal').innerHTML =
       `<div id="dummy-old-active-node"></div>`;

packages/react/src/internal/wrapFocus.ts

@@ -38,12 +38,13 @@ const DOCUMENT_POSITION_BROAD_FOLLOWING =
  */
 export const elementOrParentIsFloatingMenu = (
   node: Node,
-  selectorsFloatingMenus: string[] = []
+  selectorsFloatingMenus: string[] = [],
+  prefix = 'cds'
 ): boolean => {
   if (node instanceof Element && typeof node.closest === 'function') {
     const allSelectorsFloatingMenus = [
-      '.cds--overflow-menu-options',
-      '.cds--tooltip',
+      `.${prefix}--overflow-menu-options`,
+      `.${prefix}--tooltip`,
       '.flatpickr-calendar',
       ...selectorsFloatingMenus,
     ];
@@ -67,6 +68,7 @@ export const wrapFocus = ({
   currentActiveNode,
   oldActiveNode,
   selectorsFloatingMenus,
+  prefix = 'cds',
 }: {
   /** The DOM node of the container. */
   bodyNode: HTMLElement | null;
@@ -80,13 +82,19 @@ export const wrapFocus = ({
   oldActiveNode: HTMLElement;
   /** CSS selectors for floating menus. */
   selectorsFloatingMenus?: string[];
+  /** Classname prefix for Carbon selectors. */
+  prefix?: string;
 }) => {
   if (
     bodyNode &&
     currentActiveNode &&
     oldActiveNode &&
     !bodyNode.contains(currentActiveNode) &&
-    !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)
+    !elementOrParentIsFloatingMenu(
+      currentActiveNode,
+      selectorsFloatingMenus,
+      prefix
+    )
   ) {
     const comparisonResult =
       oldActiveNode.compareDocumentPosition(currentActiveNode);

packages/styles/scss/components/multiselect/_multiselect.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -90,13 +90,13 @@
 
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
-    .cds--checkbox:indeterminate
-    + .cds--checkbox-label::after {
+    .#{$prefix}--checkbox:indeterminate
+    + .#{$prefix}--checkbox-label::after {
     inset-block-start: convert.to-rem(9px);
   }
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__menu-item__option
-    .cds--checkbox-label::after {
+    .#{$prefix}--checkbox-label::after {
     inset-block-start: convert.to-rem(5px);
   }
   .#{$prefix}--multi-select

packages/styles/scss/components/treeview/_treeview.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -95,7 +95,7 @@
   li a.#{$prefix}--tree-node {
     text-decoration: none;
 
-    &:not(.cds--tree-node--disabled) {
+    &:not(.#{$prefix}--tree-node--disabled) {
       color: $text-secondary;
     }
   }