Toolbar: apply responsive width styles via setBreakpointCssVars; keep flexGrow via formatBreakpointMods; update ToolbarItem tests; remove extra demo

Author: khadesamrudhi

packages/react-core/src/components/Toolbar/ToolbarItem.tsx

@@ -1,6 +1,14 @@
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { formatBreakpointMods, toCamel } from '../../helpers/util';
+import { formatBreakpointMods, setBreakpointCssVars, toCamel } from '../../helpers/util';
+import c_toolbar__item_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
+import c_toolbar__item_m_w_sm_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_sm_Width';
+import c_toolbar__item_m_w_md_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_md_Width';
+import c_toolbar__item_m_w_lg_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_lg_Width';
+import c_toolbar__item_m_w_xl_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_xl_Width';
+import c_toolbar__item_m_w_2xl_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_2xl_Width';
+import c_toolbar__item_m_w_3xl_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_3xl_Width';
+import c_toolbar__item_m_w_4xl_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_m_w_4xl_Width';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
 
@@ -206,6 +214,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   widths,
   flexGrow,
   role,
+  style,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -243,27 +252,38 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
             className,
-            widths &&
-              Object.entries(widths).reduce(
-                (acc, [bp, size]) => ({
-                  ...acc,
-                  [`pf-m-w-${size}${bp !== 'default' ? `-on-${bp}` : ''}`]: true
-                }),
-                {}
-              ),
-            flexGrow &&
-              Object.entries(flexGrow).reduce(
-                (acc, [bp]) => ({
-                  ...acc,
-                  [`pf-m-flex-grow${bp !== 'default' ? `-on-${bp}` : ''}`]: true
-                }),
-                {}
-              )
+            formatBreakpointMods(flexGrow, styles, '', getBreakpoint(width))
           )}
+          style={{
+            ...style,
+            ...(widths
+              ? setBreakpointCssVars(
+                  Object.entries(widths).reduce(
+                    (acc, [bp, size]) => {
+                      if (!size) {
+                        return acc;
+                      }
+                      const valueMap: Record<string, string> = {
+                        sm: (c_toolbar__item_m_w_sm_Width as any)?.value,
+                        md: (c_toolbar__item_m_w_md_Width as any)?.value,
+                        lg: (c_toolbar__item_m_w_lg_Width as any)?.value,
+                        xl: (c_toolbar__item_m_w_xl_Width as any)?.value,
+                        '2xl': (c_toolbar__item_m_w_2xl_Width as any)?.value,
+                        '3xl': (c_toolbar__item_m_w_3xl_Width as any)?.value,
+                        '4xl': (c_toolbar__item_m_w_4xl_Width as any)?.value
+                      };
+                      const tokenValue = valueMap[size as keyof typeof valueMap];
+                      return tokenValue ? { ...acc, [bp]: tokenValue } : acc;
+                    },
+                    {} as Record<string, string>
+                  ),
+                  (c_toolbar__item_Width as any).name
+                )
+              : undefined)
+          }}
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           role={role}
-          data-testid="toolbaritem"
           {...props}
         >
           {children}

packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
+import c_toolbar__item_Width from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 describe('ToolbarItem', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
@@ -43,14 +44,15 @@ describe('ToolbarItem', () => {
     const sizes = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
 
     describe.each(bps)('widths at various breakpoints', (bp) => {
-      it.each(sizes)(`should render with pf-m-w-%s when widths is set to %s at ${bp}`, (size) => {
+      it.each(sizes)(`applies width CSS var when widths is set to %s at ${bp}`, (size) => {
         render(
           <ToolbarItem data-testid="toolbaritem" widths={{ [bp]: size }}>
             Test
           </ToolbarItem>
         );
-        const bpWidthClass = bp === 'default' ? `pf-m-w-${size}` : `pf-m-w-${size}-on-${bp}`;
-        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpWidthClass);
+        const styleAttr = screen.getByTestId('toolbaritem').getAttribute('style') || '';
+        const cssVarName = `${(c_toolbar__item_Width as any).name}${bp === 'default' ? '' : `-on-${bp}`}`;
+        expect(styleAttr).toContain(cssVarName);
       });
     });
   });