From 35b46088056e3deb767147b71b00039d02a14353 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 15 Aug 2024 14:07:35 +0200
Subject: [PATCH] :lipstick: - style: improve presentation of Tabs compononent

---
 src/components/tabs/tabs.scss | 18 ++++--------------
 src/components/tabs/tabs.tsx  |  7 +++----
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 67d3955e..df2ab624 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -4,15 +4,13 @@
   width: 100%;
 
   &__tablist {
+    align-items: center;
+    background-color: var(--typography-color-background);
+    box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
     gap: var(--spacing-v);
-    box-sizing: border-box;
-    border: 1px solid var(--typography-color-border);
-    border-radius: var(--border-radius-l);
-    background-color: var(--typography-color-background);
-    padding: var(--spacing-v) var(--spacing-h);
+    padding-block: var(--spacing-h);
     width: 100%;
   }
 
@@ -21,17 +19,9 @@
     user-select: none;
   }
 
-  &__content {
-    margin-block-start: var(--spacing-h);
-  }
-
   @media screen and (max-width: constants.$breakpoint-desktop) {
     &__tablist {
       justify-content: center;
     }
-
-    .mykn-p {
-      display: none;
-    }
   }
 }
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index a5ede49b..3eb3b34c 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -3,7 +3,6 @@ import React, { Children, ReactElement, isValidElement, useState } from "react";
 
 import { slugify } from "../../lib/format/string";
 import { Button } from "../button";
-import { P } from "../typography";
 import "./tabs.scss";
 
 export type TabsProps = React.PropsWithChildren<{
@@ -42,16 +41,16 @@ export const Tabs: React.FC<TabsProps> = ({
           <React.Fragment key={tab.props.id || slugify(tab.props.label)}>
             <Button
               active={activeTab === index}
+              aria-controls={`tab-content-${tab.props.id || slugify(tab.props.label)}`}
+              aria-selected={activeTab === index ? "true" : "false"}
               id={`tab-${tab.props.id || slugify(tab.props.label)}`}
+              pad="h"
               role="tab"
               variant="transparent"
-              aria-controls={`tab-content-${tab.props.id || slugify(tab.props.label)}`}
-              aria-selected={activeTab === index ? "true" : "false"}
               onClick={() => handleTabClick(index)}
             >
               {tab.props.label}
             </Button>
-            {index < tabs.length - 1 && <P aria-hidden="true">|</P>}
           </React.Fragment>
         ))}
       </nav>