[Terra-Arrange] Reflow issue when port is resized to 320x256 & Radio …

…Button issue (#3945)

Co-authored-by: gt106551 <[email protected]>

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)
 

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;
+    }
+  }
 }

packages/terra-core-docs/CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ## Unreleased
+* Updated
+ * Updated `terra-arrange` examples to use `terra-form-radio`.
 
 * Updated
   * Removed `terra-table` as a dependency as the docs have now moved to `terra-framework-docs`.

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 = (
   <>
-    <span>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.</span>
-    <span className={cx('space-around', 'radio-buttons')} id={feildSetId}>
-      <label htmlFor="yes">
-        <input type="radio" id="yes" name="inline-example" value="yes" onKeyDown={handleKeyDown} />
-        <span className={cx('label')}>Yes</span>
-      </label>
-      <label htmlFor="no">
-        <input type="radio" id="no" name="inline-example" value="no" onKeyDown={handleKeyDown} />
-        <span className={cx('label')}>No</span>
-      </label>
-    </span>
+    <RadioField legend="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.">
+      <Radio id="yes" name="inline-example" labelText="Yes" value="yes" isInline />
+      <Radio id="no" name="inline-example" labelText="No" value="no" isInline />
+    </RadioField>
   </>
 );