remove default margin for tab component

shopware · Sep 18, 2024 · 1d43858 · 1d43858
1 parent cb83cca
commit 1d43858
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 102 deletions.
diff --git a/.changeset/warm-plants-move.md b/.changeset/warm-plants-move.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Remove default margin for tab component when using removeDefaultMargin future flag
diff --git a/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue b/packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <priority-plus ref="priorityPlus" #default="{ mainItems, moreItems }" :list="items">
-    <ul class="mt-tabs" :class="tabClasses" role="tablist">
+    <ul :class="tabClasses" role="tablist">
       <span class="mt-tabs__slider" :class="sliderClasses" :style="sliderStyle" />
 
       <template v-if="!vertical">
@@ -79,12 +79,13 @@
 <script lang="ts">
 import type { PropType } from "vue";
 
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import MtContextButton from "../../context-menu/mt-context-button/mt-context-button.vue";
 import MtContextMenuItem from "../../context-menu/mt-context-menu-item/mt-context-menu-item.vue";
 import MtColorBadge from "../../feedback-indicator/mt-color-badge/mt-color-badge.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import PriorityPlus from "../../_internal/mt-priority-plus-navigation.vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
 
 export interface TabItem {
   label: string;
@@ -149,15 +150,6 @@ export default defineComponent({
   },
 
   computed: {
-    tabClasses(): Record<string, boolean> {
-      this.refreshKey;
-
-      return {
-        "mt-tabs--vertical": this.vertical,
-        "mt-tabs--small": this.small,
-      };
-    },
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     activeDomItem(): any | undefined {
       this.refreshKey;
@@ -257,6 +249,25 @@ export default defineComponent({
     },
   },
 
+  setup(props) {
+    const futureFlags = useFutureFlags();
+
+    const tabClasses = computed(() => {
+      return [
+        "mt-tabs",
+        {
+          "mt-tabs--vertical": props.vertical,
+          "mt-tabs--small": props.small,
+          "mt-tabs--future-remove-default-margin": futureFlags.removeDefaultMargin,
+        },
+      ];
+    });
+
+    return {
+      tabClasses,
+    };
+  },
+
   watch: {
     items: "handleResize",
     vertical: "handleResize",
@@ -346,114 +357,120 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-tabs {
   display: flex;
   position: relative;
   box-shadow: inset 0 -1px 0 var(--color-border-primary-default);
+}
 
-  &.mt-tabs--small {
-    max-width: 800px;
-    margin: 0 auto 15px auto;
-  }
+.mt-tabs--small {
+  max-width: 800px;
+  /* TODO: remove margin when future flag is enabled */
+  margin: 0 auto 15px auto;
+}
 
-  &.mt-tabs--vertical {
-    flex-direction: column;
-    box-shadow: none;
+.mt-tabs--future-remove-default-margin {
+  margin-block-end: 0;
+}
 
-    li {
-      border-bottom: none;
-      border-left: 1px solid var(--color-border-primary-default);
-    }
+.mt-tabs--vertical {
+  flex-direction: column;
+  box-shadow: none;
 
-    .mt-tabs__slider {
-      top: 0;
-      bottom: auto;
-      left: 3px;
-    }
+  & li {
+    border-bottom: none;
+    border-left: 1px solid var(--color-border-primary-default);
   }
 
-  .mt-tabs__item {
-    display: inline-block;
-    border-bottom: 1px solid var(--color-border-primary-default);
-    padding: 10px 16px;
-    white-space: nowrap;
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-xs);
-    line-height: var(--font-line-height-xs);
-    cursor: pointer;
-    color: var(--color-text-primary-default);
+  & .mt-tabs__slider {
+    top: 0;
+    bottom: auto;
+    left: 3px;
+  }
+}
 
-    &--error {
-      color: var(--color-text-critical-default);
+.mt-tabs__item {
+  display: inline-block;
+  border-bottom: 1px solid var(--color-border-primary-default);
+  padding: 10px 16px;
+  white-space: nowrap;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  cursor: pointer;
+  color: var(--color-text-primary-default);
+
+  /* Trick to stop items from jumping when the active item changes
+   * see: https://css-tricks.com/bold-on-hover-without-the-layout-shift/
+   */
+  &::after {
+    content: attr(data-text);
+    content: attr(data-text) / "";
+    height: 0;
+    display: block;
+    visibility: hidden;
+    overflow: hidden;
+    user-select: none;
+    pointer-events: none;
+    font-weight: var(--font-weight-medium);
+
+    @media speech {
+      display: none;
     }
+  }
+}
 
-    &--active {
-      font-weight: var(--font-weight-medium);
-    }
+.mt-tabs__item--error {
+  color: var(--color-text-critical-default);
+}
 
-    // Trick to stop items from jumping when the active item changes
-    // see: https://css-tricks.com/bold-on-hover-without-the-layout-shift/
-    &::after {
-      content: attr(data-text);
-      content: attr(data-text) / "";
-      height: 0;
-      display: block;
-      visibility: hidden;
-      overflow: hidden;
-      user-select: none;
-      pointer-events: none;
-      font-weight: var(--font-weight-medium);
-
-      @media speech {
-        display: none;
-      }
-    }
-  }
+.mt-tabs__item--active {
+  font-weight: var(--font-weight-medium);
+}
 
-  .mt-tabs__slider {
-    transform-origin: top left;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    background-color: var(--color-border-brand-selected);
-    z-index: 1;
-
-    &--error {
-      background-color: var(--color-border-critical-default);
-    }
+.mt-tabs__slider {
+  transform-origin: top left;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: var(--color-border-brand-selected);
+  z-index: 1;
+}
 
-    &--animated {
-      transition: 0.2s all ease-in-out;
-    }
-  }
+.mt-tabs__slider--error {
+  background-color: var(--color-border-critical-default);
+}
+
+.mt-tabs__slider--animated {
+  transition: 0.2s all ease-in-out;
+}
+
+.mt-context-button {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-primary-default);
 
-  .mt-context-button {
+  & button {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid var(--color-border-primary-default);
-
-    button {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      font-size: var(--font-size-s);
-      line-height: var(--font-line-height-s);
-      font-family: var(--font-family-body);
-    }
+    gap: 4px;
+    font-size: var(--font-size-s);
+    line-height: var(--font-line-height-s);
+    font-family: var(--font-family-body);
   }
+}
 
-  .mt-tabs__error-badge {
-    margin-left: 2px;
-    width: 12px;
-    height: 12px;
-    color: var(--color-icon-critical-default);
+.mt-tabs__error-badge {
+  margin-left: 2px;
+  width: 12px;
+  height: 12px;
+  color: var(--color-icon-critical-default);
 
-    > svg {
-      width: 100% !important;
-      height: 100% !important;
-    }
+  > svg {
+    width: 100% !important;
+    height: 100% !important;
   }
 }
 </style>
diff --git a/packages/component-library/src/composables/useFutureFlags.ts b/packages/component-library/src/composables/useFutureFlags.ts
@@ -1,13 +1,12 @@
 import { inject, provide } from "vue";
 
-export type FutureFlags = {
-  removeCardWidth: boolean;
-};
-
-const defaultFutureFlags: FutureFlags = {
+const defaultFutureFlags = {
   removeCardWidth: false,
+  removeDefaultMargin: false,
 };
 
+export type FutureFlags = typeof defaultFutureFlags;
+
 export const futureFlagsInjectionKey = Symbol("mt-future-flags");
 
 export function provideFutureFlags(flags: FutureFlags | undefined) {