[patch][v16.20.2]Toniq Top Tabs Click Boundary Fix (#132)

Toniq-Labs · Jul 9, 2024 · 3699ce3 · 3699ce3
1 parent 09fde28
commit 3699ce3
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts b/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts
@@ -75,18 +75,17 @@ export const ToniqTopTabs = defineToniqElement<{
                 border-bottom-width ${toniqDurations.interaction},
                 border-color ${toniqDurations.interaction},
                 padding-bottom ${toniqDurations.interaction};
-            padding: 4px 4px ${cssVars['toniq-top-tabs-tab-vertical-padding'].value} 12px;
         }
 
         ${hostClasses['toniq-top-tabs-minimal'].selector} li:not(.selected) {
             border-color: transparent;
         }
 
-        li:first-child {
+        li:first-child .tab {
             padding-left: 4px;
         }
 
-        li:has(+ li.selected) {
+        li:has(+ li.selected) .tab {
             padding-right: 12px;
         }
 
@@ -97,6 +96,7 @@ export const ToniqTopTabs = defineToniqElement<{
             display: inline-block;
             ${toniqFontStyles.paragraphFont};
             max-width: 300px;
+            padding: 4px 4px ${cssVars['toniq-top-tabs-tab-vertical-padding'].value} 12px;
         }
 
         .tab-content {
@@ -120,13 +120,13 @@ export const ToniqTopTabs = defineToniqElement<{
             ${toniqFontStyles.boldFont};
             color: ${toniqColors.pageInteraction.foregroundColor};
             cursor: default;
+            padding-left: 4px;
+            padding-right: 4px;
         }
 
         li.selected {
             border-color: ${toniqColors.pageInteraction.foregroundColor};
             border-bottom-width: ${cssVars['toniq-top-tabs-selected-border-width'].value};
-            padding-left: 4px;
-            padding-right: 4px;
         }
 
         li:last-child {

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",