Copilot suggestions

BodyPortal never uses style, so remove the style parameter from where ToastContainer calls it.
Have Tabs merge style parameters

Address Copilot code review comments

1. Fix Tabs style prop merge order
   - Changed from {...style, ...additionalStyle} to {...additionalStyle, ...style}
   - Allows consumers to override CSS variables via the style prop

2. Add style prop support to BodyPortal
   - Added style to BodyPortalProps type
   - Apply style to portal element in useLayoutEffect
   - Clean up styles on unmount
   - Pass style from BodyPortalToastContainer to BodyPortal
   - Fixes z-index CSS variable binding for toast containers

3. Remove unused icon prop from Tooltip
   - The icon prop is only used in TooltipGroup, not in Tooltip itself
   - Removed from Tooltip destructuring to avoid unused variable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Fix BodyPortal to avoid teardown/reinsert on style changes

Split the useLayoutEffect into two separate effects:
1. One for portal creation/destruction and non-style props (doesn't depend on style)
2. One for style updates only (depends on style but doesn't remove/reinsert the portal)

This prevents unnecessary DOM churn when only CSS variables/styles change,
which could cause focus loss or UI flicker in portal-based components like
ToastContainer.

Also added comprehensive tests for:
- CSS variable application
- Regular CSS property application
- Style updates without portal removal
- Style cleanup on unmount
- Handling of null/undefined style values

Addresses code review comments about performance and test coverage.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Address Copilot review comments for style handling and prop forwarding

Fix three issues identified in code review:

1. BodyPortal: Convert camelCase to kebab-case for style cleanup
   - React style objects use camelCase (e.g., backgroundColor)
   - CSS removeProperty expects kebab-case (e.g., background-color)
   - Added conversion to prevent style property leaks on unmount

2. BodyPortalToastContainer: Memoize style object
   - Fresh style object on each render caused unnecessary portal remounts
   - Wrapped style object in useMemo to prevent BodyPortal useLayoutEffect
     from triggering on every toast list change

3. Tooltip: Prevent invalid props from reaching AriaTooltip
   - icon and ariaLabel are trigger-only props (used by TooltipGroup)
   - Now explicitly destructured to avoid spreading them to AriaTooltip
   - Prevents invalid DOM attributes and unexpected react-aria behavior

All fixes maintain backward compatibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Handle CSS custom property copying

Update ToastContainer.spec.tsx.snap

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/components/BodyPortal.spec.tsx

@@ -261,4 +261,105 @@ describe('BodyPortal', () => {
 </body>
 `);
   });
+
+  it('applies CSS variables from style prop', () => {
+    render(
+      <BodyPortal
+        slot='modal'
+        style={{ '--my-variable': 'red', '--another-var': '10px' } as React.CSSProperties}
+      >
+        Modal content
+      </BodyPortal>,
+      { container: root }
+    );
+
+    const portal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(portal).toBeTruthy();
+    expect(portal.style.getPropertyValue('--my-variable')).toBe('red');
+    expect(portal.style.getPropertyValue('--another-var')).toBe('10px');
+  });
+
+  it('applies regular CSS properties from style prop', () => {
+    render(
+      <BodyPortal
+        slot='modal'
+        style={{ backgroundColor: 'blue', fontSize: '16px' }}
+      >
+        Modal content
+      </BodyPortal>,
+      { container: root }
+    );
+
+    const portal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(portal).toBeTruthy();
+    expect(portal.style.backgroundColor).toBe('blue');
+    expect(portal.style.fontSize).toBe('16px');
+  });
+
+  it('updates styles when style prop changes without removing portal element', () => {
+    const TestComponent = ({ color }: { color: string }) => (
+      <BodyPortal
+        slot='modal'
+        style={{ '--color': color } as React.CSSProperties}
+      >
+        Modal content
+      </BodyPortal>
+    );
+
+    const { rerender } = render(<TestComponent color='red' />, { container: root });
+
+    const portal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(portal).toBeTruthy();
+    expect(portal.style.getPropertyValue('--color')).toBe('red');
+
+    // Store reference to verify it's the same element after update
+    const portalRef = portal;
+
+    rerender(<TestComponent color='blue' />);
+
+    const updatedPortal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(updatedPortal).toBe(portalRef); // Should be the same element
+    expect(updatedPortal.style.getPropertyValue('--color')).toBe('blue');
+  });
+
+  it('removes styles on unmount', () => {
+    const { unmount } = render(
+      <BodyPortal
+        slot='modal'
+        style={{ '--my-variable': 'red', backgroundColor: 'blue' } as React.CSSProperties}
+      >
+        Modal content
+      </BodyPortal>,
+      { container: root }
+    );
+
+    const portal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(portal).toBeTruthy();
+    expect(portal.style.getPropertyValue('--my-variable')).toBe('red');
+    expect(portal.style.backgroundColor).toBe('blue');
+
+    unmount();
+
+    // Portal element should be removed from DOM
+    expect(document.body.querySelector('[data-portal-slot="modal"]')).toBeNull();
+  });
+
+  it('handles null and undefined style values gracefully', () => {
+    render(
+      <BodyPortal
+        slot='modal'
+        style={{ '--defined': 'red', '--null': null, '--undefined': undefined } as React.CSSProperties}
+      >
+        Modal content
+      </BodyPortal>,
+      { container: root }
+    );
+
+    const portal = document.body.querySelector('[data-portal-slot="modal"]') as HTMLElement;
+    expect(portal).toBeTruthy();
+    expect(portal.style.getPropertyValue('--defined')).toBe('red');
+    // null and undefined values should not be set
+    expect(portal.style.getPropertyValue('--null')).toBe('');
+    expect(portal.style.getPropertyValue('--undefined')).toBe('');
+  });
 });

src/components/BodyPortal.tsx

@@ -33,7 +33,7 @@ export type BodyPortalProps = React.PropsWithChildren<{
 }>;
 
 export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
-  { children, className, role, slot, tagName, id, ariaLabel, ...props }, ref?: React.ForwardedRef<HTMLElement>
+  { children, className, role, slot, tagName, id, ariaLabel, style, ...props }, ref?: React.ForwardedRef<HTMLElement>
 ) => {
   const tag = tagName?.toUpperCase() ?? 'DIV';
   const internalRef = React.useRef<HTMLElement | null>(
@@ -53,6 +53,7 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
   const bodyPortalOrderedRefs = React.useContext(BodyPortalSlotsContext);
   const testId = props['data-testid'];
 
+  // Effect for creating/destroying the portal element and setting non-style props
   React.useLayoutEffect(() => {
     const element = internalRef.current;
     if (!element) { return; }
@@ -90,6 +91,28 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
     };
   }, [bodyPortalOrderedRefs, className, id, role, slot, ariaLabel, tag, testId]);
 
+  // Separate effect for updating styles without removing/reinserting the portal
+  React.useLayoutEffect(() => {
+    const element = internalRef.current;
+    if (!element || !style) { return; }
+
+    // Apply styles
+    Object.entries(style).forEach(([key, value]) => {
+      if (value == null) return;
+      const cssKey = key.startsWith('--') ? key : key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      element.style.setProperty(cssKey, String(value));
+    });
+
+    // Cleanup: remove styles on unmount or when style prop changes
+    return () => {
+      Object.keys(style).forEach(key => {
+        // Convert camelCase to kebab-case for CSS property names
+        const cssKey = key.startsWith('--') ? key : key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        element.style.removeProperty(cssKey);
+      });
+    };
+  }, [style]);
+
   if (!internalRef.current) { return null; }
 
   return createPortal(children, internalRef.current);

src/components/Tabs.css

@@ -33,7 +33,7 @@
 }
 
 /* Default tabs variant (horizontal with underline) */
-.tabs[data-orientation="horizontal"] [role="tablist"] {
+.tabs:not(.tabs-button-bar)[data-orientation="horizontal"] [role="tablist"] {
   border-bottom: 0.1rem solid var(--tabs-border-color, #d5d5d5);
 }
 

src/components/Tabs.tsx

@@ -9,13 +9,15 @@ export type TabsProps = {
   size?: "large" | "medium" | "small";
   className?: string;
   children?: React.ReactNode;
+  style?: React.CSSProperties;
 } & RAC.TabsProps;
 
 export const Tabs = ({
   variant,
   size = "medium",
   className,
   children,
+  style,
   ...restProps
 }: TabsProps) => {
   const tabsClass = classNames('tabs', {
@@ -25,7 +27,7 @@ export const Tabs = ({
     'tabs-large': size === 'large',
   }, className);
 
-  const style = {
+  const additionalStyle = {
     '--tabs-border-color': palette.pale,
     '--tabs-active-border-color': palette.darkGreen,
     '--tabs-button-selected-bg': palette.neutralLight,
@@ -35,7 +37,7 @@ export const Tabs = ({
   return (
     <RAC.Tabs
       className={tabsClass}
-      style={style}
+      style={{...additionalStyle, ...style}}
       {...restProps}
     >
       {children}

src/components/Toast.tsx

@@ -63,7 +63,7 @@ export const Toast = ({
   });
 
   const style = {
-    '--toast-success-title-color': palette.darkerGreen,
+    '--toast-success-title-color': palette.darkerGreen.startsWith('#') ? palette.darkerGreen : `#${palette.darkerGreen}`,
     '--toast-success-bg': palette.paleGreen,
     '--toast-neutral-title-color': palette.neutralDarker,
     '--toast-neutral-bg': palette.neutralLighter,

src/components/ToastContainer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BodyPortal } from './BodyPortal';
 import { Toast } from './Toast';
 import { zIndex } from '../theme';
@@ -46,9 +47,9 @@ export const BodyPortalToastContainer: ToastContainerComponent = ({ toasts, onDi
     'toast-container-inline': inline,
   }, className);
 
-  const style = {
+  const style = React.useMemo(() => ({
     '--toast-container-z-index': zIndex.toasts,
-  } as React.CSSProperties;
+  } as React.CSSProperties), []);
 
   return (
     <BodyPortal className={containerClass} aria-live='polite' slot='toast' style={style}>

src/components/ToggleButtonGroup/styles.ts

@@ -3,7 +3,7 @@ import { ToggleButtonGroup, ToggleButton } from "react-aria-components";
 import { colors } from "../../theme";
 
 export const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
-  // formerly {tabListBaseCss}
+  /* formerly tabListBaseCss */
   overflow-x: auto;
   overscroll-behavior: contain;
   display: flex;

src/components/Tooltip.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button, OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
 import { Info } from './svgs/Info';
 import {mergeProps, Placement, useTooltip} from 'react-aria';
@@ -11,7 +12,7 @@ type TooltipProps = {
   ariaLabel?: string;
 };
 
-export const Tooltip = ({children, placement, icon, ...props}: React.PropsWithChildren<TooltipProps>) => {
+export const Tooltip = ({children, placement, icon, ariaLabel, ...props}: React.PropsWithChildren<TooltipProps>) => {
   const style = {
     '--tooltip-bg': palette.white,
     '--tooltip-color': palette.neutralThin,

src/components/__snapshots__/ToastContainer.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`BodyPortalToastContainer matches snapshot 1`] = `
   <div
     class="toast-container"
     data-portal-slot="toast"
+    style="--toast-container-z-index: 40;"
   >
     <div
       class="toast"
@@ -78,6 +79,7 @@ exports[`BodyPortalToastContainer uses inline prop 1`] = `
   <div
     class="toast-container toast-container-inline"
     data-portal-slot="toast"
+    style="--toast-container-z-index: 40;"
   >
     <div
       class="toast toast-inline"