feat: Add horizontal direction to radio group

pages/radio-group/common-permutations.tsx

@@ -0,0 +1,108 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Link from '~components/link';
+import { RadioGroupProps } from '~components/radio-group';
+
+import createPermutations from '../utils/permutations';
+
+const permutations = createPermutations<RadioGroupProps>([
+  {
+    value: ['first'],
+    items: [
+      [
+        { value: 'first', label: 'First Button' },
+        { value: 'second', label: 'Second Button' },
+        { value: 'third', label: 'Third Button', disabled: true },
+      ],
+      [
+        {
+          value: 'first',
+          label:
+            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
+        },
+        {
+          value: 'second',
+          label:
+            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
+          description:
+            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
+        },
+      ],
+    ],
+  },
+  {
+    value: ['second'],
+    items: [
+      [
+        { value: 'first', label: 'First Button', description: 'Short description' },
+        { value: 'second', label: 'Second Button', description: 'Short description' },
+        { value: 'third', label: 'Third Button', description: 'Short description' },
+      ],
+      [
+        { value: 'first', label: 'First Button', description: 'Short description', disabled: true },
+        { value: 'second', label: 'Second Button', description: 'Short description' },
+        {
+          value: 'third',
+          label: 'Description with link',
+          description: (
+            <>
+              Long text,{' '}
+              <Link variant="primary" fontSize="body-s" href="https://www.google.com">
+                google
+              </Link>{' '}
+              long enough to wrap. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+              laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+              esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+              qui officia deserunt mollit anim id est laborum. Whatever.
+            </>
+          ),
+        },
+        {
+          value: 'forth',
+          label: 'Description with icon',
+          description: (
+            <>
+              Link at end of description{' '}
+              <Link fontSize="body-s" variant="primary" external={true} externalIconAriaLabel="(External)">
+                learn more
+              </Link>
+            </>
+          ),
+        },
+        {
+          value: 'fifth',
+          label: 'Long description with icon',
+          description: (
+            <>
+              Icon in the middle of long description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
+              <Link fontSize="body-s" variant="primary" external={true} externalIconAriaLabel="(External)">
+                learn more
+              </Link>{' '}
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+              laborum.
+            </>
+          ),
+        },
+      ],
+    ],
+  },
+  {
+    readOnly: [true],
+    value: ['first'],
+    items: [
+      [
+        { value: 'first', label: 'First Button' },
+        { value: 'second', label: 'Second Button' },
+        { value: 'third', label: 'Third Button', disabled: true },
+      ],
+    ],
+  },
+]);
+
+export default permutations;

pages/radio-group/horizontal.permutations.page.tsx

@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import RadioGroup, { RadioGroupProps } from '~components/radio-group';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import permutations from './common-permutations';
+
+const extraPermutations = createPermutations<RadioGroupProps>([
+  {
+    value: ['first'],
+    items: [
+      [
+        { value: 'first', label: 'First Button' },
+        { value: 'second', label: 'Second Button' },
+        { value: 'third', label: 'Third Button' },
+        { value: 'fourth', label: 'Fourth Button' },
+        { value: 'fifth', label: 'Fifth Button' },
+        { value: 'sixth', label: 'Sixth Button' },
+        { value: 'seventh', label: 'Seventh Button' },
+        { value: 'eighth', label: 'Eighth Button' },
+        { value: 'ninth', label: 'Ninth Button' },
+        { value: 'tenth', label: 'Tenth Button' },
+        { value: 'eleventh', label: 'Eleventh Button' },
+        { value: 'twelfth', label: 'Twelfth Button' },
+      ],
+    ],
+  },
+]);
+
+export default function HorizontalRadioGroupPermutations() {
+  return (
+    <>
+      <h1>RadioGroup horizontal permutations</h1>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={[...permutations, ...extraPermutations]}
+          render={permutation => (
+            <Box margin={{ vertical: 'xl' }}>
+              <RadioGroup
+                direction="horizontal"
+                onChange={() => {
+                  /*empty handler to suppress react controlled property warning*/
+                }}
+                {...permutation}
+              />
+            </Box>
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/radio-group/permutations.page.tsx

@@ -2,110 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import Link from '~components/link';
-import RadioGroup, { RadioGroupProps } from '~components/radio-group';
+import RadioGroup from '~components/radio-group';
 
-import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
-
-const permutations = createPermutations<RadioGroupProps>([
-  {
-    value: ['first'],
-    items: [
-      [
-        { value: 'first', label: 'First Button' },
-        { value: 'second', label: 'Second Button' },
-        { value: 'third', label: 'Third Button', disabled: true },
-      ],
-      [
-        {
-          value: 'first',
-          label:
-            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
-        },
-        {
-          value: 'second',
-          label:
-            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
-          description:
-            'Long text, long enough to wrap.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
-        },
-      ],
-    ],
-  },
-  {
-    value: ['second'],
-    items: [
-      [
-        { value: 'first', label: 'First Button', description: 'Short description' },
-        { value: 'second', label: 'Second Button', description: 'Short description' },
-        { value: 'third', label: 'Third Button', description: 'Short description' },
-      ],
-      [
-        { value: 'first', label: 'First Button', description: 'Short description', disabled: true },
-        { value: 'second', label: 'Second Button', description: 'Short description' },
-        {
-          value: 'third',
-          label: 'Description with link',
-          description: (
-            <>
-              Long text,{' '}
-              <Link variant="primary" fontSize="body-s" href="https://www.google.com">
-                google
-              </Link>{' '}
-              long enough to wrap. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-              laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-              esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-              qui officia deserunt mollit anim id est laborum. Whatever.
-            </>
-          ),
-        },
-        {
-          value: 'forth',
-          label: 'Description with icon',
-          description: (
-            <>
-              Link at end of description{' '}
-              <Link fontSize="body-s" variant="primary" external={true} externalIconAriaLabel="(External)">
-                learn more
-              </Link>
-            </>
-          ),
-        },
-        {
-          value: 'fifth',
-          label: 'Long description with icon',
-          description: (
-            <>
-              Icon in the middle of long description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
-              <Link fontSize="body-s" variant="primary" external={true} externalIconAriaLabel="(External)">
-                learn more
-              </Link>{' '}
-              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-              laborum.
-            </>
-          ),
-        },
-      ],
-    ],
-  },
-  {
-    readOnly: [true],
-    value: ['first'],
-    items: [
-      [
-        { value: 'first', label: 'First Button' },
-        { value: 'second', label: 'Second Button' },
-        { value: 'third', label: 'Third Button', disabled: true },
-      ],
-    ],
-  },
-]);
+import permutations from './common-permutations';
 
 export default function RadioGroupPermutations() {
   return (

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -20313,6 +20313,20 @@ is provided by its parent form field component.",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Defines the direction in which the radio buttons are laid out.",
+      "inlineType": {
+        "name": ""horizontal" | "vertical"",
+        "type": "union",
+        "values": [
+          "horizontal",
+          "vertical",
+        ],
+      },
+      "name": "direction",
+      "optional": true,
+      "type": "string",
+    },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
 use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must

src/radio-group/index.tsx

@@ -16,7 +16,9 @@ import analyticsSelectors from './analytics-metadata/styles.css.js';
 export { RadioGroupProps };
 
 const RadioGroup = React.forwardRef((props: RadioGroupProps, ref: React.Ref<RadioGroupProps.Ref>) => {
-  const baseComponentProps = useBaseComponent('RadioGroup', { props: { readOnly: props.readOnly } });
+  const baseComponentProps = useBaseComponent('RadioGroup', {
+    props: { readOnly: props.readOnly, direction: props.direction ?? 'vertical' },
+  });
   return (
     <InternalRadioGroup
       ref={ref}

src/radio-group/interfaces.ts

@@ -68,6 +68,11 @@ export interface RadioGroupProps extends BaseComponentProps, FormFieldControlPro
    * @awsuiSystem core
    */
   style?: RadioGroupProps.Style;
+
+  /**
+   * Defines the direction in which the radio buttons are laid out.
+   */
+  direction?: 'horizontal' | 'vertical';
 }
 
 export namespace RadioGroupProps {

src/radio-group/internal.tsx

@@ -34,6 +34,7 @@ const InternalRadioGroup = React.forwardRef(
       readOnly,
       __internalRootRef,
       style,
+      direction,
       ...props
     }: InternalRadioGroupProps,
     ref: React.Ref<RadioGroupProps.Ref>
@@ -54,7 +55,12 @@ const InternalRadioGroup = React.forwardRef(
         aria-controls={ariaControls}
         aria-readonly={readOnly ? 'true' : undefined}
         {...baseProps}
-        className={clsx(baseProps.className, testUtilStyles.root, styles['radio-group'])}
+        className={clsx(
+          baseProps.className,
+          testUtilStyles.root,
+          styles['radio-group'],
+          direction === 'horizontal' && styles['horizontal-group']
+        )}
         ref={__internalRootRef}
       >
         {items &&
@@ -65,6 +71,7 @@ const InternalRadioGroup = React.forwardRef(
               className={clsx(
                 styles.radio,
                 item.description && styles['radio--has-description'],
+                direction === 'horizontal' && styles.horizontal,
                 item.value === value && analyticsSelectors.selected
               )}
               checked={item.value === value}

src/radio-group/styles.scss

@@ -8,13 +8,29 @@
 
 .radio-group {
   @include styles.styles-reset;
-  display: block;
+
+  &:not(.horizontal-group) {
+    display: block;
+  }
+
+  &.horizontal-group {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    gap: awsui.$space-scaled-l;
+  }
 }
 
-.radio + .radio {
+.radio + .radio:not(.horizontal) {
   margin-block-start: awsui.$space-scaled-xxs;
 }
 
-.radio--has-description + .radio {
+.radio--has-description + .radio:not(.horizontal) {
   margin-block-start: awsui.$space-scaled-xs;
 }
+
+.radio.horizontal {
+  // Leaves approximately up to 80 characters for the description before wrapping.
+  // This is the usually recommended maximum to keep text columns readable.
+  max-inline-size: calc(16 * #{awsui.$space-scaled-xxl});
+}