diff --git a/.changeset/brave-terms-obey.md b/.changeset/brave-terms-obey.md new file mode 100644 index 00000000000..c3dbd243387 --- /dev/null +++ b/.changeset/brave-terms-obey.md @@ -0,0 +1,5 @@ +--- +"@itwin/itwinui-react": minor +--- + +ToggleSwitch: Added new `labelProps` to allow for customization of label element. diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx index 5818a81249e..44027ac72c8 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx +++ b/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(); expect(container.querySelector('.iui-toggle-switch-icon')).toBeNull(); }); + +it('should correctly pass labelProps', () => { + const { container } = render( + , + ); + + 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'); +}); diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx index d9cd96a21f8..8ce4a4fe170 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx +++ b/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) => { )} {label && ( - + {label} )}