feat(community-tabs): match layout to designs

telus · Feb 3, 2021 · 027bec6 · 027bec6
1 parent 680fb74
commit 027bec6
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 201 deletions.
diff --git a/packages/Tabs/Tabs.jsx b/packages/Tabs/Tabs.jsx
@@ -215,8 +215,8 @@ const Tabs = props => {
             onKeyUp={e => handleTabsKeyUp(e)}
             ref={tabNavRef}
           >
-            <TabLabelContainer tabIndex={isActive && '-1'} isActive={isActive}>
-              <TabLabel>{tab.props.heading}</TabLabel>
+            <TabLabelContainer tabIndex={isActive && '-1'}>
+              <TabLabel wrapLabel={wrapLabels}>{tab.props.heading}</TabLabel>
             </TabLabelContainer>
           </Tab>
         )

diff --git a/packages/Tabs/__tests__/Tabs.spec.jsx b/packages/Tabs/__tests__/Tabs.spec.jsx
@@ -3,6 +3,7 @@ import { mount } from 'enzyme'
 import 'jest-styled-components'
 
 import Tabs from '../Tabs'
+import { TabLabel } from '../styles'
 
 describe('Tabs', () => {
   const doMount = (props = {}) =>
@@ -51,7 +52,8 @@ describe('Tabs', () => {
 
   it('renders with multiline labels', () => {
     const tabs = doMount({ wrapLabels: true })
-    const tab = tabs.find('.react-tabs__tab').first()
-    expect(tab).toHaveStyleRule({ 'max-width': '180px' })
+    const tabLabel = tabs.find(TabLabel).first()
+    expect(tabs).toHaveProp('wrapLabels', true)
+    expect(tabLabel).toHaveStyleRule('max-width', '144px')
   })
 })