💄 - style: improve presentation of Tabs compononent

maykinmedia · Aug 15, 2024 · 35b4608 · 35b4608
1 parent 052d81b
commit 35b4608
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git 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
@@ -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>