Add [x]Props to ToggleSwitch

.changeset/brave-terms-obey.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+ToggleSwitch: Added new `labelProps` to allow for customization of label element.

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

@@ -121,3 +121,25 @@ it('should not render an icon if it is set to null', () => {
   const { container } = render(<ToggleSwitch icon={null} />);
   expect(container.querySelector('.iui-toggle-switch-icon')).toBeNull();
 });
+
+it('should correctly pass labelProps', () => {
+  const { container } = render(
+    <ToggleSwitch
+      className='switch-class'
+      style={{ color: 'blue' }}
+      label='some-label'
+      labelProps={{
+        className: 'some-class',
+        style: { color: 'red' },
+      }}
+    />,
+  );
+
+  const label = container.querySelector('.some-class') as HTMLElement;
+
+  expect(label.style.color).toBe('red');
+
+  expect(
+    (container.querySelector('.switch-class') as HTMLElement).style.color,
+  ).toBe('blue');
+});

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

@@ -12,6 +12,10 @@ type ToggleSwitchProps = {
    * Label for the toggle switch.
    */
   label?: React.ReactNode;
+  /**
+   * Passes properties for ToggleSwitch label.
+   */
+  labelProps?: React.ComponentProps<'span'>;
   /**
    * Position of the label.
    * @default 'right'
@@ -63,6 +67,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
     className,
     style,
     size = 'default',
+    labelProps = {},
     icon: iconProp,
     ...rest
   } = props;
@@ -101,7 +106,11 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         </Box>
       )}
       {label && (
-        <Box as='span' className='iui-toggle-switch-label'>
+        <Box
+          as='span'
+          {...labelProps}
+          className={cx('iui-toggle-switch-label', labelProps?.className)}
+        >
           {label}
         </Box>
       )}