[terra-tabs]Tabs doc site issue fix

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed the `terra-tabs` icon-only examples keyboard navigation issue.
+
 ## 1.42.0 - (October 20, 2023)
 
 * Added

packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/IconOnlyTabs.jsx

@@ -3,14 +3,17 @@ import classNames from 'classnames/bind';
 import IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';
 import IconSearch from 'terra-icon/lib/icon/IconSearch';
 import IconBookmark from 'terra-icon/lib/icon/IconBookmark';
+import PropTypes from 'prop-types';
 import IconCalendar from 'terra-icon/lib/icon/IconCalendar';
 import Tabs from 'terra-tabs';
 import TabContent from './TabContentTemplate';
 import styles from './common/TabExample.module.scss';
 
 const cx = classNames.bind(styles);
-
-const IconOnlyTabs = () => {
+const propTypes = {
+  id: PropTypes.string,
+};
+const IconOnlyTabs = (props) => {
   const searchTab = (
     <Tabs.Pane label="Search" icon={<IconSearch />} isIconOnly key="Search">
       <TabContent label="Search" />
@@ -37,7 +40,7 @@ const IconOnlyTabs = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs id="IconOnly" setFocusOnContent>
+      <Tabs id={props.id} setFocusOnContent>
         {searchTab}
         {briefcaseTab}
         {bookmarkTab}
@@ -46,5 +49,5 @@ const IconOnlyTabs = () => {
     </div>
   );
 };
-
+IconOnlyTabs.propTypes = propTypes;
 export default IconOnlyTabs;

packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/ResponsiveTabsVariant.jsx

@@ -10,7 +10,7 @@ const TabsColorVariants = ({
   ...props
 }) => {
   if (props.renderIconTabs) {
-    return (<IconOnlyTabs {...props} />);
+    return (<IconOnlyTabs {...props} id="iconOnlyTabsId" />);
   }
 
   return (<TabsTemplate {...props} id="responsive" />);

packages/terra-tabs/CHANGELOG.md

@@ -1,11 +1,10 @@
 # Changelog
 
-* Fixed
-  * Fixed keyboard navigation after mouse click for draggable tabs.
-
 ## Unreleased
 
 * Fixed
+  * Fixed the dropdown options are being cut off on smaller viewports.
+  * Fixed keyboard navigation after mouse click for draggable tabs.
   * Fixed screen reader response when active tabs are closed.
 
 ## 7.11.0 - (October 20, 2023)

packages/terra-tabs/src/common-tabs/_Tabs.jsx

@@ -403,6 +403,10 @@ class Tabs extends React.Component {
     }
 
     this.dropdownRef.current.style.left = `${offset}px`;
+    // Dropdown menu gets truncated when the left edge is less than or equal to zero. setting min-width will help to fix this issue.
+    if (!leftEdge) {
+      this.dropdownRef.current.style.minWidth = `${moreRect.width}px`;
+    }
   }
 
   wrapOnSelect(onSelect) {