[Terra-Tabs] Vertical Orientation for Tabs.

packages/terra-framework-docs/CHANGELOG.md

@@ -17,6 +17,9 @@
   * Updates examples for `terra-data-grid` to cover scenarios for focusable elements prevented from receiving focus.
   * Updated focusable cell test for `terra-data-grid` to account for focusable elements in a hidden container.
 
+* Added
+ * Added example for vertical orientation functionality for `terra-tabs`.
+
 ## 1.40.0 - (October 11, 2023)
 
 * Added

packages/terra-framework-docs/src/terra-dev-site/doc/tabs/Tabs.1.doc.mdx

@@ -14,6 +14,7 @@ import AddTab from './example/AddTab?dev-site-example'
 import ClosableTab from './example/ClosableTab?dev-site-example'
 import AddCloseTab from './example/AddCloseTab?dev-site-example'
 import AddCloseTabInteractive from './example/AddCloseTabInteractive?dev-site-example'
+import VerticalTabs from './example/VerticalTabs?dev-site-example'
 
 <Badge />
 
@@ -93,6 +94,7 @@ import Tabs from 'terra-tabs';
 <ClosableTab title='Closable Tabs'/>
 <AddCloseTab title='Add and Close Tab'/>
 <AddCloseTabInteractive title='Add and Close with Interactive Content'/>
+<VerticalTabs title='Vertical Tabs'/>
 
 ## Tabs Props Table 
 <TabsPropsTable />

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

@@ -100,7 +100,7 @@ const AddCloseTab = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs onChange={handleSelection} activeKey={activeKey} setFocusOnContent isClosable onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
+      <Tabs id="Addclose" onChange={handleSelection} activeKey={activeKey} setFocusOnContent isClosable onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
         { tabs.map((tab) => (
           <Tabs.Pane label={tab.label} isIconOnly={tab.isIconOnly} customDisplay={tab.customDisplay} isDisabled={tab.isDisabled} icon={tab.icon} key={tab.key} id={tab.key}>
             <TabContentTemplate label={tab.content} />

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

@@ -136,7 +136,7 @@ const AddCloseTabInteractive = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs onChange={handleSelection} activeKey={activeKey} isClosable onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
+      <Tabs id="AddcloseInteractive" onChange={handleSelection} activeKey={activeKey} isClosable onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
         { tabs.map((tab) => (
           <Tabs.Pane label={tab.label} isIconOnly={tab.isIconOnly} customDisplay={tab.customDisplay} isDisabled={tab.isDisabled} icon={tab.icon} key={tab.key} id={tab.key}>
             <TabContentTemplate label={tab.content}>

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

@@ -90,7 +90,7 @@ const AddTab = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs onChange={handleSelection} isDraggable setFocusOnContent activeKey={activeKey} onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab">
+      <Tabs id="AddTab" onChange={handleSelection} isDraggable setFocusOnContent activeKey={activeKey} onSelectAddButton={addMoreTabPanes} ariaLabelAddTab="Add Tab">
         { tabs.map((tab) => (
           <Tabs.Pane label={tab.label} isIconOnly={tab.isIconOnly} customDisplay={tab.customDisplay} isDisabled={tab.isDisabled} icon={tab.icon} key={tab.key} id={tab.key}>
             <TabContentTemplate label={tab.content} />

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

@@ -75,7 +75,7 @@ const ClosableTab = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs setFocusOnContent isClosable ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
+      <Tabs id="Closabletab" setFocusOnContent isClosable ariaLabelAddTab="Add Tab" onTabClose={handleTabClose}>
         { tabs.map((tab) => (
           <Tabs.Pane label={tab.label} isIconOnly={tab.isIconOnly} customDisplay={tab.customDisplay} isDisabled={tab.isDisabled} icon={tab.icon} key={tab.key} id={tab.key}>
             <TabContentTemplate label={tab.content} />

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

@@ -37,7 +37,7 @@ const IconOnlyTabs = () => {
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs setFocusOnContent>
+      <Tabs id="IconOnly" setFocusOnContent>
         {searchTab}
         {briefcaseTab}
         {bookmarkTab}

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

@@ -14,45 +14,45 @@ const cx = classNames.bind(styles);
 
 const IconsOnlyAndInMenuTabs = () => {
   const searchTab = (
-    <Tabs.Pane label="Search" icon={<IconSearch />} showIcon key="Search">
-      <TabContent label="Search" />
+    <Tabs.Pane label="Search" icon={<IconSearch />} showIcon key="MenuTabSearch">
+      <TabContent label="Search" id="MenuTabSearchContent" />
     </Tabs.Pane>
   );
 
   const briefcaseTab = (
     // eslint-disable-next-line react/forbid-component-props
-    <Tabs.Pane label="Briefcase" icon={<IconBriefcase />} showIcon key="Briefcase">
-      <TabContent label="Briefcase" />
+    <Tabs.Pane label="Briefcase" icon={<IconBriefcase />} showIcon key="MenuTabBriefcase">
+      <TabContent label="Briefcase" id="MenuTabBriefcaseContent" />
     </Tabs.Pane>
   );
 
   const bookmarkTab = (
-    <Tabs.Pane label="Bookmark" icon={<IconBookmark />} showIcon key="Bookmark">
-      <TabContent label="Bookmark" />
+    <Tabs.Pane label="Bookmark" icon={<IconBookmark />} showIcon key="MenuTabBookmark">
+      <TabContent label="Bookmark" id="MenuTabBookmarkContent" />
     </Tabs.Pane>
   );
 
   const calendarTab = (
-    <Tabs.Pane label="Calendar" icon={<IconCalendar />} showIcon key="Calendar">
-      <TabContent label="Calendar" />
+    <Tabs.Pane label="Calendar" icon={<IconCalendar />} showIcon key="MenuTabCalendar">
+      <TabContent label="Calendar" id="MenuTabCalendarContent" />
     </Tabs.Pane>
   );
 
   const envelopeTab = (
-    <Tabs.Pane label="Envelope" icon={<IconEnvelope />} showIcon key="Envelope">
-      <TabContent label="Envelope" />
+    <Tabs.Pane label="Envelope" icon={<IconEnvelope />} showIcon key="MenuTabEnvelope">
+      <TabContent label="Envelope" id="MenuTabEnvelopeContent" />
     </Tabs.Pane>
   );
 
   const printerTab = (
-    <Tabs.Pane label="Printer" icon={<IconPrinter />} showIcon key="Printer">
-      <TabContent label="Printer" />
+    <Tabs.Pane label="Printer" icon={<IconPrinter />} showIcon key="MenuTabPrinter">
+      <TabContent label="Printer" id="MenuTabPrinterContent" />
     </Tabs.Pane>
   );
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs setFocusOnContent id="icons-only">
+      <Tabs setFocusOnContent id="icons-only-menu">
         {searchTab}
         {briefcaseTab}
         {bookmarkTab}

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

@@ -9,10 +9,13 @@ const propTypes = {
   isLabelHidden: PropTypes.bool,
   label: PropTypes.string,
   children: PropTypes.node,
+  id: PropTypes.string,
 };
 
-const TabContentTemplate = ({ isLabelHidden, label, children }) => (
-  <div className={cx('tab-content-template')}>
+const TabContentTemplate = ({
+  isLabelHidden, label, id, children,
+}) => (
+  <div className={cx('tab-content-template')} id={id}>
     {isLabelHidden ? <h3>{label}</h3> : null}
     {children || (
       <div>

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

@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 import IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';
-import IconSearch from 'terra-icon/lib/icon/IconSearch';
 import Tabs from 'terra-tabs';
 import TabContentTemplate from './TabContentTemplate';
 import styles from './common/TabExample.module.scss';
@@ -14,59 +13,23 @@ const propTypes = {
 };
 
 const TabsTemplate = (props) => {
+  const tabKey = props.id ? props.id : 'compact';
   const labelTab = (
-    <Tabs.Pane label="Tab with label" key="LabelTab">
-      <TabContentTemplate label="Tab with label" />
+    <Tabs.Pane label="Tab with label" key={`${tabKey}LabelTab`} id={`${tabKey}LabelTab`}>
+      <TabContentTemplate label="Tab with label" id={`${tabKey}LabelTabContent`} />
     </Tabs.Pane>
   );
 
   const iconTab = (
-    <Tabs.Pane label="Tab with icon" icon={<IconBriefcase />} key="IconTab">
-      <TabContentTemplate label="Tab with icon" />
+    <Tabs.Pane label="Tab with icon" icon={<IconBriefcase />} key={`${tabKey}IconTab`} id={`${tabKey}IconTab`}>
+      <TabContentTemplate id={`${tabKey}IconTabContent`} label="Tab with icon" />
     </Tabs.Pane>
   );
-
-  const customTab = (
-    <Tabs.Pane
-      customDisplay={(
-        <div className={cx('custom-display')}>
-          Custom display
-        </div>
-      )}
-      label="Custom display"
-      key="CustomTab"
-    >
-      <TabContentTemplate label="Custom display" />
-    </Tabs.Pane>
-  );
-
-  const longLabel = (
-    <Tabs.Pane
-      label="Longer text tab name with label for application"
-      key="longLabel"
-    >
-      <TabContentTemplate label="Longer text tab name with label for application" />
-    </Tabs.Pane>
-  );
-
-  const lastTab = (
-    <Tabs.Pane label="Last Tab" key="lastTab">
-      <TabContentTemplate label="Last Tab" />
-    </Tabs.Pane>
-  );
-
-  const disabledTab = (
-    <Tabs.Pane label="Disabled Tab" icon={<IconSearch />} isDisabled key="DisabledTab" />
-  );
   return (
-    <div className={cx('content-wrapper')}>
-      <Tabs setFocusOnContent defaultActiveKey="LabelTab" id={props.id}>
+    <div className={cx('content-wrapper')} id={`${tabKey}content`}>
+      <Tabs setFocusOnContent defaultActiveKey={`${tabKey}LabelTab`} id={tabKey}>
         {labelTab}
         {iconTab}
-        {customTab}
-        {disabledTab}
-        {longLabel}
-        {lastTab}
       </Tabs>
     </div>
   );

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

@@ -15,14 +15,14 @@ const propTypes = {
 
 const TabsTemplate = (props) => {
   const labelTab = (
-    <Tabs.Pane label="Tab with label" key="LabelTab">
-      <TabContentTemplate label="Tab with label" />
+    <Tabs.Pane label="Tab with label" key="ExpandedLabelTab">
+      <TabContentTemplate label="Tab with label" id="ExpandedLabelTab" />
     </Tabs.Pane>
   );
 
   const iconTab = (
-    <Tabs.Pane label="Tab with icon" icon={<IconBriefcase />} key="IconTab">
-      <TabContentTemplate label="Tab with icon" />
+    <Tabs.Pane label="Tab with icon" icon={<IconBriefcase />} key="ExpandedIconTab">
+      <TabContentTemplate label="Tab with icon" id="ExpandedIconTabContent" />
     </Tabs.Pane>
   );
 
@@ -34,34 +34,34 @@ const TabsTemplate = (props) => {
         </div>
       )}
       label="Custom display"
-      key="CustomTab"
+      key="ExpandedCustomTab"
     >
-      <TabContentTemplate label="Custom display" />
+      <TabContentTemplate id="ExpandedCustomTabContent" label="Custom display" />
     </Tabs.Pane>
   );
 
   const longLabel = (
     <Tabs.Pane
       label="Longer text tab name with label for application"
-      key="longLabel"
+      key="ExpandedlongLabel"
     >
-      <TabContentTemplate label="Longer text tab name with label for application" />
+      <TabContentTemplate id="ExpandedlongLabelContent" label="Longer text tab name with label for application" />
     </Tabs.Pane>
   );
 
   const lastTab = (
-    <Tabs.Pane label="Last Tab" key="lastTab">
-      <TabContentTemplate label="Last Tab" />
+    <Tabs.Pane label="Last Tab" key="ExpandedlastTab">
+      <TabContentTemplate id="ExpandedlastTabContent" label="Last Tab" />
     </Tabs.Pane>
   );
 
   const disabledTab = (
-    <Tabs.Pane label="Disabled Tab" icon={<IconSearch />} isDisabled key="DisabledTab" />
+    <Tabs.Pane label="Disabled Tab" icon={<IconSearch />} isDisabled key="ExpandedDisabledTab" />
   );
 
   return (
     <div className={cx('content-wrapper')}>
-      <Tabs setFocusOnContent defaultActiveKey="LabelTab" tabFill={props.tabFill} id="icon-in-menu">
+      <Tabs setFocusOnContent defaultActiveKey="ExpandedLabelTab" tabFill={props.tabFill} id="icon-in-menu">
         {labelTab}
         {iconTab}
         {customTab}
@@ -76,6 +76,6 @@ const TabsTemplate = (props) => {
 TabsTemplate.propTypes = propTypes;
 
 const TabExpanded = () => (
-  <TabsTemplate tabFill />
+  <TabsTemplate tabFill id="expanded" />
 );
 export default TabExpanded;

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

@@ -67,7 +67,7 @@ const TabsWithFilledContent = () => {
 
   return (
     <div className={cx('content-container')}>
-      <Tabs setFocusOnContent fill>
+      <Tabs setFocusOnContent fill id="filledcontent">
         {tab1}
         {tab2}
       </Tabs>

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import IconAdd from 'terra-icon/lib/icon/IconAdd';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import Tabs from 'terra-tabs';
+import TabContent from './TabContentTemplate';
+import styles from './common/TabExample.module.scss';
+
+const cx = classNames.bind(styles);
+
+const VerticalTabs = () => {
+  const labelTab = (
+    <Tabs.Pane label="Medical Department" key="tLabelTab">
+      <TabContent label="Medical Department" />
+    </Tabs.Pane>
+  );
+
+  const onlyiconTab = (
+    <Tabs.Pane label="Pharmacy Deparment" isIconOnly icon={<IconAdd />} key="tonlyIconTab">
+      <TabContent label="Pharmacy Deparment" />
+    </Tabs.Pane>
+  );
+
+  const iconTab = (
+    <Tabs.Pane label="Patient Department" icon={<IconPerson />} key="tIconTab">
+      <TabContent label="Patient Department" />
+    </Tabs.Pane>
+  );
+
+  const customTab = (
+    <Tabs.Pane
+      customDisplay={(
+        <div className={cx('custom-display')}>
+          Surgical Department
+        </div>
+      )}
+      label="Surgical Department"
+      key="tCustomTab"
+    >
+      <TabContent label="Surgical Department" />
+    </Tabs.Pane>
+  );
+
+  const longLabel = (
+    <Tabs.Pane
+      label="Department of Hospital Administration"
+      key="tlongLabel"
+    >
+      <TabContent label="Department of Hospital Administration" />
+    </Tabs.Pane>
+  );
+
+  const lastTab = (
+    <Tabs.Pane label="Academic Department" key="tlastTab">
+      <TabContent label="Academic Department" />
+    </Tabs.Pane>
+  );
+
+  return (
+    <div className={cx('content-container-vertical')}>
+      <Tabs isDraggable fill verticalOrientation setFocusOnContent id="verticaltab">
+        {onlyiconTab}
+        {labelTab}
+        {iconTab}
+        {customTab}
+        {longLabel}
+        {lastTab}
+      </Tabs>
+    </div>
+  );
+};
+
+export default VerticalTabs;

packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/common/TabExample.module.scss

@@ -18,4 +18,8 @@
     height: 400px;
     padding: 25px;
   }
+
+  .content-container-vertical {
+    height: 240px;
+  }
 }

packages/terra-framework-docs/src/terra-dev-site/test/tabs/Tabs/TabsTemplate.module.scss

@@ -16,4 +16,8 @@
     height: 100%;
     padding: 20px;
   }
+
+  .content-container-vertical {
+    height: 240px;
+  }
 }