diff --git a/packages/terra-arrange/CHANGELOG.md b/packages/terra-arrange/CHANGELOG.md index 1a8a975f6ed..b77d0eb5664 100644 --- a/packages/terra-arrange/CHANGELOG.md +++ b/packages/terra-arrange/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Unreleased +* Fixed + * Fixed reflow issue when the viewport is resized to 320x256 px. ## 3.53.0 - (August 23, 2023) diff --git a/packages/terra-arrange/src/Arrange.module.scss b/packages/terra-arrange/src/Arrange.module.scss index fc33a6fa8fc..7fd7fa3e7ef 100644 --- a/packages/terra-arrange/src/Arrange.module.scss +++ b/packages/terra-arrange/src/Arrange.module.scss @@ -38,4 +38,10 @@ .default { align-self: flex-start; } + + @media (max-width: 320px), (max-height: 256px) { + .fit { + flex: 0 0; + } + } } diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 674d2240f1c..683af6ee26d 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Unreleased +* Updated + * Updated `terra-arrange` examples to use `terra-form-radio`. ## 1.45.0 - (October 16, 2023) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx index a59228a4471..8adc163c930 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx @@ -1,16 +1,14 @@ import React from 'react'; import Button from 'terra-button'; import classNames from 'classnames/bind'; -import uniqueid from 'lodash.uniqueid'; // eslint-disable-next-line import/no-extraneous-dependencies -import { - KEY_SPACE, VALUE_UP, VALUE_DOWN, VALUE_RIGHT, VALUE_LEFT, -} from 'keycode-js'; +import { KEY_SPACE } from 'keycode-js'; +import Radio from 'terra-form-radio'; +import RadioField from 'terra-form-radio/lib/RadioField'; import styles from './examplesetup.scss'; const cx = classNames.bind(styles); -const feildSetId = `terra-radio-group-${uniqueid()}`; const handleHealthSolutionsClick = () => { // eslint-disable-next-line no-alert alert('Health solutions button has been clicked'); @@ -46,29 +44,6 @@ const handleBacktotopClick = () => { alert('Back to top button has been clicked'); }; -const handleKeyDown = (event) => { - const radioGroup = document.getElementById(feildSetId); - const radioItems = radioGroup.querySelectorAll('[type=radio]'); - const itemIndex = Array.from(radioItems).indexOf(event.currentTarget); - if (event.key === VALUE_DOWN || event.key === VALUE_RIGHT) { - if (itemIndex === radioItems.length - 1) { - radioItems[0].focus(); - radioItems[0].checked = true; - } else { - radioItems[itemIndex + 1].focus(); - radioItems[itemIndex + 1].checked = true; - } - } else if (event.key === VALUE_UP || event.key === VALUE_LEFT) { - if (itemIndex === 0) { - radioItems[radioItems.length - 1].focus(); - radioItems[radioItems.length - 1].checked = true; - } else { - radioItems[itemIndex - 1].focus(); - radioItems[itemIndex - 1].checked = true; - } - } -}; - // Prevent scrolling when press space bar key on anchor tag const handlePreventScroll = (event) => { if (event.keyCode === KEY_SPACE) { @@ -95,17 +70,10 @@ const healthSolutionsData = ( const consentFormData = ( <> - A telemedicine consent form is used to confirm that a patient agrees to telemedicine services, which are medical services done remotely over the phone or computer. - - - - + + + + );