Adding props to Checkbox component

.changeset/empty-rockets-try.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Checkbox: `className` and `style` will now always be applied on the checkbox input element. Added new `wrapperProps` and `labelProps` to allow for styling of wrapper and label elements.

packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { Checkbox } from './Checkbox.js';
@@ -19,7 +18,7 @@ it('renders correctly with label', () => {
 
   assertBaseElements(container);
   expect(container.querySelector('label')).toHaveClass('iui-checkbox-wrapper');
-  expect(screen.getByText('Some checkbox')).toHaveClass('iui-checkbox-label');
+  expect(container.querySelector('label')).toHaveTextContent('Some checkbox');
 });
 
 it('renders correctly indeterminate state', () => {
@@ -109,35 +108,6 @@ it('renders negative component', () => {
   ).toBeTruthy();
 });
 
-it.each(['label', 'input'] as const)(
-  'should isomorphically apply style on %s',
-  (el) => {
-    const { container } = render(
-      <Checkbox
-        label={el === 'label' ? 'Some label' : undefined}
-        style={{ color: 'blue' }}
-      />,
-    );
-
-    assertBaseElements(container);
-    expect(container.querySelector(el)).toHaveStyle('color: blue;');
-  },
-);
-it.each(['label', 'input'] as const)(
-  'should isomorphically apply class on %s',
-  (el) => {
-    const { container } = render(
-      <Checkbox
-        label={el === 'label' ? 'Some label' : undefined}
-        className='customClass'
-      />,
-    );
-
-    assertBaseElements(container);
-    expect(container.querySelector(el)).toHaveClass('customClass');
-  },
-);
-
 it('should set focus', () => {
   let element: HTMLInputElement | null = null;
   const onRef = (ref: HTMLInputElement) => {
@@ -187,31 +157,40 @@ it('renders correctly with visibility checkbox', () => {
   expect(container.querySelector('.iui-checkbox-visibility')).toBeTruthy();
 });
 
-it.each(['', 'not'] as const)(
-  'should %s stop propagation correctly if %s used with label',
-  async (labelPresent) => {
-    const wrapperOnClick = jest.fn();
-    const checkboxOnChange = jest.fn();
-    const { container } = render(
-      <div onClick={wrapperOnClick}>
-        <Checkbox
-          label={labelPresent && 'label'}
-          className='my-checkbox'
-          onClick={(e) => e.stopPropagation()}
-          onChange={checkboxOnChange}
-        />
-      </div>,
-    );
-    const checkboxComponent = container.querySelector(
-      '.my-checkbox',
-    ) as HTMLElement;
-    await userEvent.click(checkboxComponent);
-
-    expect(checkboxOnChange).toBeCalled();
-    if (labelPresent) {
-      expect(wrapperOnClick).toBeCalled();
-    } else {
-      expect(wrapperOnClick).not.toBeCalled();
-    }
-  },
-);
+it('correctly passes className through wrapperProps and labelProps', () => {
+  const { container } = render(
+    <Checkbox
+      label='some label'
+      wrapperProps={{ className: 'some-wrapper' }}
+      labelProps={{ className: 'some-label' }}
+      className='some-input'
+    />,
+  );
+
+  assertBaseElements(container);
+  expect(container.querySelector('label')).toHaveClass(
+    'iui-checkbox-wrapper some-wrapper',
+  );
+  expect(container.querySelector('span')).toHaveClass(
+    'iui-checkbox-label some-label',
+  );
+  expect(container.querySelector('.iui-checkbox')).toHaveClass(
+    'iui-checkbox some-input',
+  );
+});
+
+it('correctly passes style through wrapperProps and labelProps', () => {
+  const { container } = render(
+    <Checkbox
+      label='some label'
+      wrapperProps={{ style: { color: 'blue' } }}
+      labelProps={{ style: { color: 'orange' } }}
+      style={{ color: 'yellow' }}
+    />,
+  );
+
+  assertBaseElements(container);
+  expect(container.querySelector('label')).toHaveStyle('color: blue');
+  expect(container.querySelector('span')).toHaveStyle('color: orange');
+  expect(container.querySelector('.iui-checkbox')).toHaveStyle('color: yellow');
+});

packages/itwinui-react/src/core/Checkbox/Checkbox.tsx

@@ -36,6 +36,14 @@ type CheckboxProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Passes properties for checkbox wrapper.
+   */
+  wrapperProps?: React.ComponentProps<'label'>;
+  /**
+   * Passes properties for checkbox label.
+   */
+  labelProps?: React.ComponentProps<'span'>;
 };
 
 /**
@@ -60,6 +68,8 @@ export const Checkbox = React.forwardRef((props, ref) => {
     variant = 'default',
     setFocus,
     isLoading = false,
+    wrapperProps = {},
+    labelProps = {},
     style,
     ...rest
   } = props;
@@ -92,9 +102,9 @@ export const Checkbox = React.forwardRef((props, ref) => {
             'iui-checkbox-visibility': variant === 'eyeball',
             'iui-loading': isLoading,
           },
-          className && { [className]: !label },
+          className,
         )}
-        style={!label ? style : undefined}
+        style={style}
         disabled={disabled || isLoading}
         type='checkbox'
         ref={refs}
@@ -104,6 +114,10 @@ export const Checkbox = React.forwardRef((props, ref) => {
     </>
   );
 
+  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+
+  const { className: labelClassName, ...restLabelProps } = labelProps;
+
   return !label ? (
     checkbox
   ) : (
@@ -116,13 +130,17 @@ export const Checkbox = React.forwardRef((props, ref) => {
           [`iui-${status}`]: !!status,
           'iui-loading': isLoading,
         },
-        className,
+        wrapperClassName,
       )}
-      style={style}
+      {...restWrapperProps}
     >
       {checkbox}
       {label && (
-        <Box as='span' className='iui-checkbox-label'>
+        <Box
+          as='span'
+          className={cx('iui-checkbox-label', labelClassName)}
+          {...restLabelProps}
+        >
           {label}
         </Box>
       )}