fix(XI-7052): Support text wrapping in vertical TabList

Author: bsmiley1

packages/@adobe/spectrum-css-temp/components/tabs/index.css

@@ -238,6 +238,19 @@ governing permissions and limitations under the License.
     }
   }
 
+  /*
+    Allow tab labels to wrap when TabList component has minWidth set.
+  */
+  &.spectrum-Tabs--verticalWrap:not(.spectrum-Tabs--compact) .spectrum-Tabs-item {
+    display: flex;
+    align-items: center;  
+    white-space: normal;
+    line-height: normal;
+    word-break: break-word;
+    block-size: auto;
+    min-height: var(--spectrum-tabs-vertical-item-height);
+  }
+
   &.spectrum-Tabs--compact {
     .spectrum-Tabs-item {
       block-size: var(--spectrum-tabs-compact-vertical-item-height);

packages/@react-spectrum/tabs/src/Tabs.tsx

@@ -261,7 +261,7 @@ function TabLine(props: TabLineProps) {
  * A TabList is used within Tabs to group tabs that a user can switch between.
  * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
  */
-export function TabList<T>(props: SpectrumTabListProps<T>): ReactNode {
+export function TabList<T>(props: SpectrumTabListProps<T> & {wrap?: boolean}): ReactNode {
   const tabContext = useContext(TabContext)!;
   const {refs, tabState, tabProps, tabPanelProps} = tabContext;
   const {isQuiet, density, isEmphasized, orientation} = tabProps;
@@ -288,6 +288,8 @@ export function TabList<T>(props: SpectrumTabListProps<T>): ReactNode {
 
   let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
 
+  const verticalWrap = props.wrap && orientation === 'vertical';
+
   const tabContent = (
     <div
       {...stylePropsFinal}
@@ -301,7 +303,8 @@ export function TabList<T>(props: SpectrumTabListProps<T>): ReactNode {
         {
           'spectrum-Tabs--quiet': isQuiet,
           'spectrum-Tabs--emphasized': isEmphasized,
-          ['spectrum-Tabs--compact']: density === 'compact'
+          ['spectrum-Tabs--compact']: density === 'compact',
+          'spectrum-Tabs--verticalWrap': verticalWrap
         },
         orientation === 'vertical' && styleProps.className
       )

packages/@react-types/tabs/src/index.d.ts

@@ -78,7 +78,12 @@ export interface SpectrumTabsProps<T> extends AriaTabListBase, Omit<SingleSelect
 
 export interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
   /** The tab items to display. Item keys should match the key of the corresponding `<Item>` within the `<TabPanels>` element. */
-  children: CollectionChildren<T>
+  children: CollectionChildren<T>,
+  /**
+   * When `true`, tab labels will wrap if they exceed the TabList's width. Only supported in vertical orientation with `regular` density. For proper wrapping, set a `minWidth` on TabList.
+   * @default false
+   */
+  wrap?: boolean
 }
 
 export interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {