Merge pull request #435 from Automattic/feat/add-responsiveness-to-ra…

…diobox-group RadioBoxGroup: Make it responsive
Automattic · Aug 26, 2024 · 73dd514 · 73dd514
2 parents 0c28006 + 295652c
commit 73dd514
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/system/Form/RadioBoxGroup.js b/src/system/Form/RadioBoxGroup.js
@@ -39,6 +39,7 @@ const RadioOption = ( {
 				cursor: 'pointer',
 				borderRadius: 2,
 				minWidth: 220,
+				flexGrow: 1,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',
@@ -262,6 +263,7 @@ const RadioBoxGroup = React.forwardRef(
 					<div
 						sx={ {
 							display: 'flex',
+							flexWrap: 'wrap',
 							gap: variant === 'chip' ? 1 : 2,
 						} }
 					>

diff --git a/src/system/Form/RadioBoxGroup.stories.jsx b/src/system/Form/RadioBoxGroup.stories.jsx
@@ -63,7 +63,7 @@ export const Default = () => {
 			defaultValue={ value }
 			onChange={ e => setValue( e.target.value ) }
 			options={ options }
-			optionWidth="350px"
+			optionWidth="300px"
 		/>
 	);
 };