fix(components): made sure CodeGroup will render terminal header if no labels prop was passed

Exact behavior of a previous API

Author: Kirill Bolotsky

src/components/shared/code/code-group.js

@@ -10,24 +10,22 @@ const CodeGroup = ({ children, labels, lineNumbers, heightTogglers }) => {
   const randomKey = getRandomKey();
   return (
     <div className={styles.wrapper}>
-      {labels && labels.length ? (
-        <div className={styles.header}>
-          {labels.map((label, i) => (
-            <div
-              key={`lb-${i}`}
-              className={`${styles.codeTab} ${
-                i === currentIndex ? styles.codeTab_active : ''
-              }`}
-              onClick={() => setCurrentIndex(i)}
-              onKeyPress={() => setCurrentIndex(i)}
-              role={'button'}
-              tabIndex={i}
-            >
-              {label}
-            </div>
-          ))}
-        </div>
-      ) : null}
+      <div className={styles.header}>
+        {labels.map((label, i) => (
+          <div
+            key={`lb-${i}`}
+            className={`${styles.codeTab} ${
+              i === currentIndex ? styles.codeTab_active : ''
+            }`}
+            onClick={() => setCurrentIndex(i)}
+            onKeyPress={() => setCurrentIndex(i)}
+            role={'button'}
+            tabIndex={i}
+          >
+            {label}
+          </div>
+        ))}
+      </div>
       <style>
         {`.${styles.itemsContainer}.${randomKey} > div:nth-child(${
           currentIndex + 1

src/components/shared/code/code-group.module.scss

@@ -12,12 +12,13 @@
 
 .header {
   background: $color-secondary;
-  display: inline-flex;
+  display: flex;
   flex-wrap: nowrap;
   color: $color-additional-1;
   overflow: auto;
   width: 100%;
   border-bottom: 1px solid rgba($color-tertiary, 0.05);
+  min-height: 25px;
   @include no-scrollbars;
 }