feat(community-tabs): add support for wrapping labels

telus · Feb 3, 2021 · 680fb74 · 680fb74
1 parent 6091bea
commit 680fb74
Show file tree

Hide file tree

Showing 4 changed files with 562 additions and 451 deletions.
diff --git a/packages/Tabs/Tabs.jsx b/packages/Tabs/Tabs.jsx
@@ -9,6 +9,7 @@ import DimpleDivider from '@tds/core-dimple-divider'
 import {
   TabsContainer,
   TabBorder,
+  TabListOuterContainer,
   TabListContainer,
   TabLabel,
   TabArrows,
@@ -45,7 +46,7 @@ const Tabs = props => {
   const [isRightArrowVisible, setRightArrowVisible] = useState(false)
   const [current, setCurrent] = useState(0)
   const [currentFocus, setCurrentFocus] = useState(0)
-  const { children, leftArrowLabel, rightArrowLabel, ...rest } = props
+  const { children, leftArrowLabel, rightArrowLabel, wrapLabels, ...rest } = props
 
   useEffect(() => {
     // if open is null or undefined it is uncontrolled
@@ -250,49 +251,51 @@ const Tabs = props => {
   }, [])
 
   return (
-    <TabsContainer {...safeRest(rest)} ref={tabsRoot}>
+    <TabsContainer {...safeRest(rest)} wrapLabels={wrapLabels} ref={tabsRoot}>
       <FlexGrid gutter={false}>
         <FlexGrid.Row>
           <FlexGrid.Col xs={12}>
-            {isLeftArrowVisible && (
-              <TabArrows
-                tabIndex="0"
-                direction="left"
-                aria-label={leftArrowLabel}
-                onKeyUp={e => handleArrowKeyUp(e, 'left')}
-                onClick={() => scrollTabs('left')}
-              >
-                <ArrowInner direction="left">
-                  <ChevronLeft variant="basic" />
-                </ArrowInner>
-              </TabArrows>
-            )}
             <ReactTabs
               selectedIndex={props.open && current}
               onSelect={props.onOpen && handleSelect}
             >
               <TabBorder>
-                <TabListContainer ref={tabRef} positionToMove={tabsTranslatePosition}>
-                  <TabList style={{ width: tabsContainerWidth }}>{mapTabs()}</TabList>
-                </TabListContainer>
+                {isLeftArrowVisible && (
+                  <TabArrows
+                    tabIndex="0"
+                    direction="left"
+                    aria-label={leftArrowLabel}
+                    onKeyUp={e => handleArrowKeyUp(e, 'left')}
+                    onClick={() => scrollTabs('left')}
+                  >
+                    <ArrowInner direction="left">
+                      <ChevronLeft variant="basic" />
+                    </ArrowInner>
+                  </TabArrows>
+                )}
+                <TabListOuterContainer>
+                  <TabListContainer ref={tabRef} positionToMove={tabsTranslatePosition}>
+                    <TabList style={{ width: tabsContainerWidth }}>{mapTabs()}</TabList>
+                  </TabListContainer>
+                </TabListOuterContainer>
+                {isRightArrowVisible && (
+                  <TabArrows
+                    tabIndex="0"
+                    direction="right"
+                    onKeyUp={e => handleArrowKeyUp(e, 'right')}
+                    aria-label={rightArrowLabel}
+                    onClick={() => scrollTabs('right')}
+                  >
+                    <ArrowInner direction="right">
+                      <ChevronRight variant="basic" />
+                    </ArrowInner>
+                  </TabArrows>
+                )}
               </TabBorder>
               <HairlineDivider />
               <DimpleDivider />
               {mapTabContent()}
             </ReactTabs>
-            {isRightArrowVisible && (
-              <TabArrows
-                tabIndex="0"
-                direction="right"
-                onKeyUp={e => handleArrowKeyUp(e, 'right')}
-                aria-label={rightArrowLabel}
-                onClick={() => scrollTabs('right')}
-              >
-                <ArrowInner direction="right">
-                  <ChevronRight variant="basic" />
-                </ArrowInner>
-              </TabArrows>
-            )}
           </FlexGrid.Col>
         </FlexGrid.Row>
       </FlexGrid>
@@ -307,6 +310,10 @@ Tabs.propTypes = {
   children: PropTypes.node.isRequired,
   leftArrowLabel: PropTypes.string,
   rightArrowLabel: PropTypes.string,
+  /**
+   * Allow tab labels to wrap to multiple lines
+   */
+  wrapLabels: PropTypes.bool,
   /**
    * Set the selected tab by id
    */
@@ -320,6 +327,7 @@ Tabs.propTypes = {
 Tabs.defaultProps = {
   leftArrowLabel: 'Move menu to the left',
   rightArrowLabel: 'Move menu to the right',
+  wrapLabels: false,
   open: null,
   onOpen: null,
 }

diff --git a/packages/Tabs/__tests__/Tabs.spec.jsx b/packages/Tabs/__tests__/Tabs.spec.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
+import 'jest-styled-components'
 
 import Tabs from '../Tabs'
 
@@ -47,4 +48,10 @@ describe('Tabs', () => {
     expect(tabs.text()).toContain('Content 2')
     expect(onOpen).toHaveBeenCalledWith('2')
   })
+
+  it('renders with multiline labels', () => {
+    const tabs = doMount({ wrapLabels: true })
+    const tab = tabs.find('.react-tabs__tab').first()
+    expect(tab).toHaveStyleRule({ 'max-width': '180px' })
+  })
 })