fix(tabs): height styles (#810)

* fix(tabs): height styles * chore(tabs): update screen and snapshots
core-ds · Aug 26, 2021 · b3b96e7 · b3b96e7
1 parent 2c290b6
commit b3b96e7
Show file tree

Hide file tree

Showing 21 changed files with 36 additions and 40 deletions.
diff --git a/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-0-2-snap.png b/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-0-2-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-1-2-snap.png b/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-1-2-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-2-2-snap.png b/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-2-2-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-3-2-snap.png b/...s/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-0-size-3-2-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-0-4-snap.png b/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-0-4-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-1-4-snap.png b/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-1-4-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-2-4-snap.png b/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-2-4-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-3-4-snap.png b/...es/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-0-size-3-4-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-0-snap.png b/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-0-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-1-snap.png b/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-1-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-2-snap.png b/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-2-snap.png
diff --git a/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-3-snap.png b/...s/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-0-size-3-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-0-3-snap.png b/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-0-3-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-1-3-snap.png b/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-1-3-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-2-3-snap.png b/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-2-3-snap.png
diff --git a/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-3-3-snap.png b/...es/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-0-size-3-3-snap.png
diff --git a/packages/tabs/src/components/primary-tablist/index.module.css b/packages/tabs/src/components/primary-tablist/index.module.css
@@ -18,7 +18,6 @@
 .container {
     position: relative;
     display: flex;
-    height: 100%;
 }
 
 .title {

diff --git a/packages/tabs/src/components/scrollable-container/index.module.css b/packages/tabs/src/components/scrollable-container/index.module.css
@@ -3,7 +3,6 @@
 
 .component {
     overflow: hidden;
-    height: 100%;
 
     &:after {
         content: '';
@@ -16,7 +15,6 @@
     position: relative;
     display: flex;
     align-items: center;
-    height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: var(--tablist-hidden-scrollbar-height);

diff --git a/packages/tabs/src/components/secondary-tablist/Component.tsx b/packages/tabs/src/components/secondary-tablist/Component.tsx
@@ -41,9 +41,7 @@ export const SecondaryTabList = ({
         <div
             role='tablist'
             data-test-id={dataTestId}
-            className={cn(styles.component, className, size && styles[size], {
-                [styles.scrollable]: scrollable,
-            })}
+            className={cn(styles.component, className, size && styles[size])}
         >
             {scrollable ? (
                 <ScrollableContainer

diff --git a/packages/tabs/src/components/secondary-tablist/index.module.css b/packages/tabs/src/components/secondary-tablist/index.module.css
@@ -3,10 +3,11 @@
 
 .component {
     position: relative;
+    display: flex;
+    align-items: center;
 }
 
 .container {
-    height: 100%;
     display: flex;
     align-items: center;
 }

diff --git a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap
@@ -262,7 +262,7 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = `
 <div>
   <div>
     <div
-      class="undefined"
+      class=""
       role="tablist"
     >
       <div