fix(components): replace Tab component selector (#616)

Since Circuit UI is no longer transpiled with Babel and the Emotion Babel plugin is no longer applied, we can't use component selectors anymore. Closes #613
sumup-oss · Jun 11, 2020 · 045b297 · 045b297
1 parent 36a4bb5
commit 045b297
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 11 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -13400,7 +13400,7 @@ exports[`Storyshots Components/Tabs Links 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-6 > .circuit-1 {
+  .circuit-6 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;

diff --git a/src/components/Tabs/__snapshots__/Tabs.spec.js.snap b/src/components/Tabs/__snapshots__/Tabs.spec.js.snap
@@ -24,7 +24,7 @@ exports[`Tabs styles should render with default styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-4 > .circuit-1 {
+  .circuit-4 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;
@@ -302,7 +302,7 @@ exports[`Tabs styles should render with stretched styles 1`] = `
   flex-wrap: nowrap;
 }
 
-.circuit-4 > .circuit-1 {
+.circuit-4 [role='tab'] {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -313,7 +313,7 @@ exports[`Tabs styles should render with stretched styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-4 > .circuit-1 {
+  .circuit-4 [role='tab'] {
     -webkit-flex: 1 1 auto;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;

diff --git a/src/components/Tabs/components/Tab/Tab.js b/src/components/Tabs/components/Tab/Tab.js
@@ -98,8 +98,6 @@ Tab.defaultProps = {
   role: 'tab'
 };
 
-export { StyledTab };
-
 /**
  * @component
  */

diff --git a/src/components/Tabs/components/Tab/index.js b/src/components/Tabs/components/Tab/index.js
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import Tab, { StyledTab } from './Tab';
+import Tab from './Tab';
 
-export { StyledTab };
 export default Tab;
diff --git a/src/components/Tabs/components/TabList/TabList.js b/src/components/Tabs/components/TabList/TabList.js
@@ -20,8 +20,6 @@ import { css } from '@emotion/core';
 
 import { shadowDouble } from '../../../../styles/style-helpers';
 
-import { StyledTab } from '../Tab';
-
 const MOBILE_AUTOSTRETCH_ITEMS_MAX = 3;
 const DEFAULT_HEIGHT = '80px';
 
@@ -43,7 +41,7 @@ const navigationBaseStyles = css`
 `;
 
 const stretchedStyles = ({ children, theme }) => css`
-  & > ${StyledTab} {
+  & [role='tab'] {
     flex: 1 1 auto;
     padding: 0 ${theme.spacings.kilo};
     width: ${Math.floor(100 / children.length)}%;