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.
-
-
-
-
+
+
+
+
>
);