fix(components): span Tabs to full width

beta
sumup-oss · Jul 29, 2020 · 59085bc · 59085bc
1 parent 18270eb
commit 59085bc
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 21 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -11621,17 +11621,24 @@ exports[`Storyshots Components/Table/TableHeader Base 1`] = `
 
 exports[`Storyshots Components/Tabs Base 1`] = `
 .circuit-12 {
-  max-width: 100vw;
+  width: 100vw;
+}
+
+@media (min-width:480px) {
+  .circuit-12 {
+    width: auto;
+    max-width: 100vw;
+  }
 }
 
 .circuit-10 {
-  background: #FFFFFF;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   -ms-overflow-style: none;
   -webkit-scrollbar-width: none;
   -moz-scrollbar-width: none;
   -ms-scrollbar-width: none;
   scrollbar-width: none;
+  background: #FFFFFF;
   height: 80px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -11862,17 +11869,24 @@ exports[`Storyshots Components/Tabs Base 1`] = `
 
 exports[`Storyshots Components/Tabs Controlled State 1`] = `
 .circuit-12 {
-  max-width: 100vw;
+  width: 100vw;
+}
+
+@media (min-width:480px) {
+  .circuit-12 {
+    width: auto;
+    max-width: 100vw;
+  }
 }
 
 .circuit-10 {
-  background: #FFFFFF;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   -ms-overflow-style: none;
   -webkit-scrollbar-width: none;
   -moz-scrollbar-width: none;
   -ms-scrollbar-width: none;
   scrollbar-width: none;
+  background: #FFFFFF;
   height: 80px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -12056,17 +12070,24 @@ exports[`Storyshots Components/Tabs Controlled State 1`] = `
 
 exports[`Storyshots Components/Tabs Links 1`] = `
 .circuit-10 {
-  max-width: 100vw;
+  width: 100vw;
+}
+
+@media (min-width:480px) {
+  .circuit-10 {
+    width: auto;
+    max-width: 100vw;
+  }
 }
 
 .circuit-8 {
-  background: #FFFFFF;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   -ms-overflow-style: none;
   -webkit-scrollbar-width: none;
   -moz-scrollbar-width: none;
   -ms-scrollbar-width: none;
   scrollbar-width: none;
+  background: #FFFFFF;
   height: 80px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -12199,6 +12220,10 @@ exports[`Storyshots Components/Tabs Links 1`] = `
 }
 
 @media (max-width:479px) {
+  .circuit-6 {
+    width: 100%;
+  }
+
   .circuit-6 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;

diff --git a/src/components/Tabs/Tabs.story.js b/src/components/Tabs/Tabs.story.js
@@ -37,7 +37,12 @@ const tabs = [
 ];
 
 const Wrapper = styled.div`
-  max-width: 100vw;
+  width: 100vw;
+
+  ${(p) => p.theme.mq.kilo} {
+    width: auto;
+    max-width: 100vw;
+  }
 `;
 
 const TabsWithState = (props) => {

diff --git a/src/components/Tabs/__snapshots__/Tabs.spec.js.snap b/src/components/Tabs/__snapshots__/Tabs.spec.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Tabs styles should render with default styles 1`] = `
 .circuit-6 {
-  background: #FFFFFF;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   -ms-overflow-style: none;
   -webkit-scrollbar-width: none;
   -moz-scrollbar-width: none;
   -ms-scrollbar-width: none;
   scrollbar-width: none;
+  background: #FFFFFF;
   height: 80px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -32,6 +32,10 @@ exports[`Tabs styles should render with default styles 1`] = `
 }
 
 @media (max-width:479px) {
+  .circuit-4 {
+    width: 100%;
+  }
+
   .circuit-4 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
@@ -180,13 +184,13 @@ exports[`Tabs styles should render with default styles 1`] = `
 
 exports[`Tabs styles should render with stretched styles 1`] = `
 .circuit-6 {
-  background: #FFFFFF;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 2px 2px 0 rgba(12,15,20,0.07),0 4px 4px 0 rgba(12,15,20,0.07);
   -ms-overflow-style: none;
   -webkit-scrollbar-width: none;
   -moz-scrollbar-width: none;
   -ms-scrollbar-width: none;
   scrollbar-width: none;
+  background: #FFFFFF;
   height: 80px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -316,6 +320,7 @@ exports[`Tabs styles should render with stretched styles 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
+  width: 100%;
 }
 
 .circuit-4 [role='tab'] {
@@ -329,6 +334,10 @@ exports[`Tabs styles should render with stretched styles 1`] = `
 }
 
 @media (max-width:479px) {
+  .circuit-4 {
+    width: 100%;
+  }
+
   .circuit-4 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;

diff --git a/src/components/Tabs/components/Tab/Tab.js b/src/components/Tabs/components/Tab/Tab.js
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
@@ -72,32 +72,31 @@ const selectedTabStyles = ({ theme, selected }) =>
 
 const tabIndex = (selected) => (selected ? undefined : '-1');
 
-/**
- * Tab component that represents a single tab inside a Tabs wrapper
- */
 const StyledTab = styled('button')(defaultTabStyles, selectedTabStyles);
 
-const Tab = ({ selected, ...props }) => (
+const TabComponent = ({ selected = false, ...props }, ref) => (
   <StyledTab
-    {...props}
+    ref={ref}
+    role="tab"
     selected={selected}
     aria-selected={selected}
     tabIndex={tabIndex(selected)}
+    {...props}
   />
 );
 
+/**
+ * Tab component that represents a single tab inside a Tabs wrapper
+ */
+const Tab = forwardRef(TabComponent);
+
 Tab.propTypes = {
   /**
    * Triggers selected styles of the component
    */
   selected: PropTypes.bool,
 };
 
-Tab.defaultProps = {
-  selected: false,
-  role: 'tab',
-};
-
 /**
  * @component
  */

diff --git a/src/components/Tabs/components/Tab/Tab.spec.js b/src/components/Tabs/components/Tab/Tab.spec.js
@@ -29,4 +29,13 @@ describe('Tab', () => {
       expect(actual).toMatchSnapshot();
     });
   });
+
+  describe('business logic', () => {
+    it('should accept a working ref', () => {
+      const tref = React.createRef();
+      const { container } = render(<Tab ref={tref} />);
+      const button = container.querySelector('button');
+      expect(tref.current).toBe(button);
+    });
+  });
 });
diff --git a/src/components/Tabs/components/TabList/TabList.js b/src/components/Tabs/components/TabList/TabList.js
@@ -25,9 +25,9 @@ const DEFAULT_HEIGHT = '80px';
 
 const Wrapper = styled.div(
   ({ theme }) => css`
-    background: ${theme.colors.white};
     ${shadowDouble({ theme })};
     ${hideScrollbar()}
+    background: ${theme.colors.white};
     height: ${DEFAULT_HEIGHT};
     display: flex;
     overflow-x: auto;
@@ -41,6 +41,8 @@ const navigationBaseStyles = css`
 `;
 
 const stretchedStyles = ({ children, theme }) => css`
+  width: 100%;
+
   & [role='tab'] {
     flex: 1 1 auto;
     padding: 0 ${theme.spacings.kilo};