Added tileContainerProps to RadioTileGroup (#2299)

.changeset/tough-shirts-smile.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added new `tileContainer` prop to `RadioTileGroup` to allow further customizing of inner DOM elements.

packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.test.tsx

@@ -42,3 +42,48 @@ it('should render with label', () => {
   expect(label).toBeTruthy();
   expect(label.textContent).toBe('My tiles');
 });
+
+it('should apply all custom props', () => {
+  const { container } = render(
+    <RadioTileGroup
+      label='My tiles'
+      className='root-props'
+      labelProps={{
+        className: 'label-props',
+      }}
+      innerProps={{
+        className: 'inner-props',
+      }}
+      tileContainerProps={{
+        className: 'tile-container-props',
+      }}
+      messageProps={{
+        contentProps: {
+          className: 'message-content-props',
+        },
+      }}
+      message={'Message'}
+    >
+      <RadioTile />
+      <RadioTile />
+    </RadioTileGroup>,
+  );
+
+  expect(container.querySelector('.iui-input-grid.root-props')).toBeTruthy();
+  expect(
+    container.querySelector('.iui-input-grid > .iui-input-label.label-props'),
+  ).toBeTruthy();
+  expect(
+    container.querySelector('.iui-input-grid > .iui-input-group.inner-props'),
+  ).toBeTruthy();
+  expect(
+    container.querySelector(
+      '.iui-input-grid > .iui-input-group > .iui-radio-tile-container.tile-container-props',
+    ),
+  ).toBeTruthy();
+  expect(
+    container.querySelector(
+      '.iui-input-grid > .iui-status-message > .message-content-props',
+    ),
+  ).toHaveTextContent('Message');
+});

packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx

@@ -6,11 +6,11 @@ import * as React from 'react';
 import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import cx from 'classnames';
 
-type RadioTileGroupProps = Omit<
-  React.ComponentProps<typeof InputGroup>,
-  'displayStyle' | 'disabled'
->;
+type RadioTileGroupProps = {
+  tileContainerProps?: React.ComponentProps<'div'>;
+} & Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 
 /**
  * RadioTileGroup component to group RadioTile components together
@@ -21,11 +21,20 @@ type RadioTileGroupProps = Omit<
  * </RadioTileGroup>
  */
 export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
-  const { children, label, ...rest } = props;
+  const { children, label, tileContainerProps, ...rest } = props;
 
   return (
     <InputGroup label={label} ref={forwardedRef} {...rest}>
-      <Box className='iui-radio-tile-container'>{children}</Box>
+      <Box
+        as='div'
+        {...tileContainerProps}
+        className={cx(
+          'iui-radio-tile-container',
+          tileContainerProps?.className,
+        )}
+      >
+        {children}
+      </Box>
     </InputGroup>
   );
 }) as PolymorphicForwardRefComponent<'div', RadioTileGroupProps>;