Merge pull request #242 from PrestaShopCorp/improve_tab-nav

feat: improve tab nav responsivity
PrestaShopCorp · Nov 8, 2023 · c3af2d4 · c3af2d4
2 parents 9b814a1 + 594de12
commit c3af2d4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 21 deletions.
diff --git a/packages/components/tab-navigation/src/tab-navigation-title.ts b/packages/components/tab-navigation/src/tab-navigation-title.ts
@@ -3,15 +3,15 @@ import type { ExtractPropTypes } from 'vue'
 import type TabNavigationTitle from './tab-navigation-title.vue'
 
 export const tabNavigationTitleProps = buildProps({
+  position: {
+    type: Number,
+    required: true,
+  },
   disabled: {
     type: Boolean,
     required: false,
     default: false,
   },
-  position: {
-    type: Number,
-    required: true,
-  },
 } as const)
 
 export type TabNavigationTitleProps = ExtractPropTypes<

diff --git a/packages/theme/src/tab-navigation-group-titles.scss b/packages/theme/src/tab-navigation-group-titles.scss
@@ -1,3 +1,3 @@
 .puik-tab-navigation__group-titles {
-  @apply flex  min-h-[48px] overflow-x-auto;
+  @apply flex flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
 }
diff --git a/packages/theme/src/tab-navigation-title.scss b/packages/theme/src/tab-navigation-title.scss
@@ -1,29 +1,19 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @apply relative  min-h-full p-2 flex items-center cursor-pointer puik-body-default-bold;
-  flex: 0 1 135px;
-  gap: 8px;
-  white-space: nowrap;
-  border-bottom: 1px solid #dce1e3;
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold sm:w-[135px];
+
   &:focus:not(:hover) {
-    @apply bg-primary-400;
-    outline: none;
+    @apply bg-primary-400 outline-none;
   }
+
   &:hover {
     @apply bg-primary-300;
   }
+
   &--selected {
     &::before {
-      @apply bg-black;
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      border-radius: 4px 4px 0 0;
+      @apply bg-primary content-[''] block absolute bottom-0 left-0 w-full h-[3px] rounded-t-[4px];
     }
   }
   &--disabled {