diff --git a/pages/radio-group/common-permutations.tsx b/pages/radio-group/common-permutations.tsx new file mode 100644 index 0000000000..3e9cc0994f --- /dev/null +++ b/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([ + { + 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,{' '} + + google + {' '} + 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{' '} + + learn more + + + ), + }, + { + 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.{' '} + + learn more + {' '} + 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; diff --git a/pages/radio-group/horizontal.permutations.page.tsx b/pages/radio-group/horizontal.permutations.page.tsx new file mode 100644 index 0000000000..2c7f746589 --- /dev/null +++ b/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([ + { + 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 ( + <> +

RadioGroup horizontal permutations

+ + ( + + { + /*empty handler to suppress react controlled property warning*/ + }} + {...permutation} + /> + + )} + /> + + + ); +} diff --git a/pages/radio-group/permutations.page.tsx b/pages/radio-group/permutations.page.tsx index 6646b708be..34be6aef7d 100644 --- a/pages/radio-group/permutations.page.tsx +++ b/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([ - { - 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,{' '} - - google - {' '} - 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{' '} - - learn more - - - ), - }, - { - 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.{' '} - - learn more - {' '} - 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 ( diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index c0c8d4991e..b8c022f0fa 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/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 diff --git a/src/radio-group/index.tsx b/src/radio-group/index.tsx index 13f0762a3c..cb91d71e38 100644 --- a/src/radio-group/index.tsx +++ b/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) => { - const baseComponentProps = useBaseComponent('RadioGroup', { props: { readOnly: props.readOnly } }); + const baseComponentProps = useBaseComponent('RadioGroup', { + props: { readOnly: props.readOnly, direction: props.direction ?? 'vertical' }, + }); return ( @@ -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} diff --git a/src/radio-group/styles.scss b/src/radio-group/styles.scss index 8d970f6558..5a0e629af6 100644 --- a/src/radio-group/styles.scss +++ b/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}); +}