Improving Button DOM Node customization

.changeset/plenty-eels-sort.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Improving customization of Button with new props: labelProps, startIconProps, and endIconProps.
+Improving customization of IconButton with iconProps.

.changeset/slimy-ladybugs-draw.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Improving customization of SplitButton with wrapperProps and menuButtonProps. ClassName now passed to the button instead of the component wrapper.

packages/itwinui-react/src/core/Buttons/Button/Button.test.tsx

@@ -182,3 +182,36 @@ it('should support polymorphic `as` prop', () => {
   expect(button).toHaveTextContent('label');
   expect(button.href).toEqual('https://example.com/');
 });
+
+it('should render [x]Props correctly', () => {
+  const { container } = render(
+    <Button
+      startIcon={<SvgPlaceholder />}
+      endIcon={<SvgPlaceholder />}
+      startIconProps={{ className: 'start-icon-class', style: { width: 80 } }}
+      endIconProps={{ className: 'end-icon-class', style: { width: 80 } }}
+      labelProps={{ className: 'label-class', style: { width: 80 } }}
+    >
+      label
+    </Button>,
+  );
+
+  // Test for Button startIcon
+  const startIconElement = container.querySelector(
+    '.iui-button-icon.start-icon-class',
+  ) as HTMLElement;
+  expect(startIconElement).toBeTruthy();
+  expect(startIconElement.style.width).toBe('80px');
+
+  // Test for Button endIcon
+  const endIconElement = container.querySelector(
+    '.iui-button-icon.end-icon-class',
+  ) as HTMLElement;
+  expect(endIconElement).toBeTruthy();
+  expect(endIconElement.style.width).toBe('80px');
+
+  // Test for Button Label
+  const labelElement = container.querySelector('.label-class') as HTMLElement;
+  expect(labelElement).toBeTruthy();
+  expect(labelElement.style.width).toBe('80px');
+});

packages/itwinui-react/src/core/Buttons/Button/Button.tsx

@@ -27,6 +27,18 @@ export type ButtonProps = {
    * Icon shown after the main button content.
    */
   endIcon?: JSX.Element;
+  /**
+   * Passes props to the button label.
+   */
+  labelProps?: React.ComponentProps<'span'>;
+  /**
+   * Passes props to the start icon.
+   */
+  startIconProps?: React.ComponentProps<'span'>;
+  /**
+   * Passes props to the end icon.
+   */
+  endIconProps?: React.ComponentProps<'span'>;
 } & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 
 /**
@@ -46,6 +58,9 @@ export const Button = React.forwardRef((props, ref) => {
     styleType = 'default',
     startIcon,
     endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
     ...rest
   } = props;
 
@@ -58,15 +73,25 @@ export const Button = React.forwardRef((props, ref) => {
       {...rest}
     >
       {startIcon && (
-        <Box as='span' className='iui-button-icon' aria-hidden>
+        <Box
+          as='span'
+          aria-hidden
+          {...startIconProps}
+          className={cx('iui-button-icon', startIconProps?.className)}
+        >
           {startIcon}
         </Box>
       )}
 
-      {children && <span>{children}</span>}
+      {children && <span {...labelProps}>{children}</span>}
 
       {endIcon && (
-        <Box as='span' className='iui-button-icon' aria-hidden>
+        <Box
+          as='span'
+          aria-hidden
+          {...endIconProps}
+          className={cx('iui-button-icon', endIconProps?.className)}
+        >
           {endIcon}
         </Box>
       )}

packages/itwinui-react/src/core/Buttons/IconButton/IconButton.test.tsx

@@ -86,3 +86,19 @@ it('should support polymorphic `as` prop', () => {
   const button = container.querySelector('a.iui-button') as HTMLAnchorElement;
   expect(button.href).toEqual('https://example.com/');
 });
+
+it('should pass props to IconButton parts', () => {
+  const { container } = render(
+    <IconButton
+      iconProps={{ className: 'custom-icon-class', style: { width: 80 } }}
+    >
+      <SvgMore />
+    </IconButton>,
+  );
+
+  const icon = container.querySelector(
+    '.iui-button-icon.custom-icon-class',
+  ) as HTMLElement;
+  expect(icon).toBeTruthy;
+  expect(icon.style.width).toBe('80px');
+});

packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx

@@ -18,7 +18,14 @@ export type IconButtonProps = {
    * Name of the button, shown in a tooltip and exposed to assistive technologies.
    */
   label?: React.ReactNode;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
+  /**
+   * Passes props to IconButton icon.
+   */
+  iconProps?: React.ComponentProps<'span'>;
+} & Omit<
+  ButtonProps,
+  'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'
+>;
 
 /**
  * Icon button
@@ -35,6 +42,7 @@ export const IconButton = React.forwardRef((props, ref) => {
     size,
     className,
     label,
+    iconProps,
     ...rest
   } = props;
 
@@ -49,7 +57,12 @@ export const IconButton = React.forwardRef((props, ref) => {
         aria-pressed={isActive}
         {...rest}
       >
-        <Box as='span' className='iui-button-icon' aria-hidden>
+        <Box
+          as='span'
+          aria-hidden
+          {...iconProps}
+          className={cx('iui-button-icon', iconProps?.className)}
+        >
           {children}
         </Box>
         {label ? <VisuallyHidden>{label}</VisuallyHidden> : null}

packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.test.tsx

@@ -148,3 +148,37 @@ it('should support polymorphic `as` prop', async () => {
   await userEvent.click(dropdownButton);
   expect(document.querySelector('.iui-menu')).toBeVisible();
 });
+
+it('passes custom props to subcomponents', () => {
+  const { container } = render(
+    <SplitButton
+      wrapperProps={{
+        className: 'custom-wrapper-class',
+        style: { fontSize: 12 },
+      }}
+      menuButtonProps={{
+        className: 'custom-menu-button-class',
+        style: { fontSize: 14 },
+      }}
+      menuItems={(close) => [
+        <MenuItem key={0} onClick={close}>
+          Test0
+        </MenuItem>,
+      ]}
+    >
+      Example
+    </SplitButton>,
+  );
+
+  const wrapperElement = container.querySelector(
+    '.custom-wrapper-class',
+  ) as HTMLElement;
+  expect(wrapperElement).toBeTruthy();
+  expect(wrapperElement.style.fontSize).toBe('12px');
+
+  const menuButtonElement = container.querySelector(
+    '.iui-button.custom-menu-button-class',
+  ) as HTMLElement;
+  expect(menuButtonElement).toBeTruthy();
+  expect(menuButtonElement.style.fontSize).toBe('14px');
+});

packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx

@@ -28,6 +28,14 @@ export type SplitButtonProps = ButtonProps & {
    * Content of primary button.
    */
   children: React.ReactNode;
+  /**
+   * Passes props to SplitButton wrapper.
+   */
+  wrapperProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props to SplitButton menu button.
+   */
+  menuButtonProps?: React.ComponentProps<typeof IconButton>;
 };
 
 /**
@@ -53,32 +61,36 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     styleType = 'default',
     size,
     children,
-    style,
-    title,
+    wrapperProps,
+    menuButtonProps,
     ...rest
   } = props;
 
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
   const [menuWidth, setMenuWidth] = React.useState(0);
-  const ref = React.useRef<HTMLDivElement>(null);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    if (ref.current) {
-      setMenuWidth(ref.current.offsetWidth);
+    if (wrapperRef.current) {
+      setMenuWidth(wrapperRef.current.offsetWidth);
     }
   }, [children, size]);
 
   return (
     <Box
-      className={cx(className, 'iui-button-split', {
-        'iui-disabled': props.disabled,
-      })}
-      style={style}
-      title={title}
-      ref={ref}
+      {...wrapperProps}
+      className={cx(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      )}
+      ref={wrapperRef}
     >
       <Button
+        className={className}
         styleType={styleType}
         size={size}
         onClick={onClick}
@@ -94,7 +106,12 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         onShow={React.useCallback(() => setIsMenuOpen(true), [])}
         onHide={React.useCallback(() => setIsMenuOpen(false), [])}
       >
-        <IconButton styleType={styleType} size={size} disabled={props.disabled}>
+        <IconButton
+          styleType={styleType}
+          size={size}
+          disabled={props.disabled}
+          {...menuButtonProps}
+        >
           {isMenuOpen ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}
         </IconButton>
       </DropdownMenu>