Add tests for context button

.changeset/spotty-singers-notice.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Open the context menu when pressing space or enter

.github/workflows/visual-tests.yml

@@ -18,9 +18,6 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: write
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -46,21 +43,21 @@ jobs:
         run: pnpm dlx [email protected] install
 
       - name: Build storybook
-        run: pnpx turbo run build:storybook --filter=@shopware-ag/meteor-component-library -- --test
+        run: pnpm --filter @shopware-ag/meteor-component-library run build:storybook --test
 
       - name: Run Tests
         if: ${{ github.event_name != 'workflow_dispatch' }}
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library"
+          "wait-on http://127.0.0.1:6006 && pnpm --filter=@shopware-ag/meteor-component-library run test:storybook"
 
       - name: Run tests and update snapshots
         if: ${{ github.event_name == 'workflow_dispatch' }}
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library -- -u"
+          "wait-on http://127.0.0.1:6006 && pnpm --filter=@shopware-ag/meteor-component-library run test:storybook -u"
 
       - name: Archive visual test diffs
         uses: actions/upload-artifact@v4

packages/component-library/src/components/context-menu/mt-context-button/mt-context-button.vue

@@ -3,12 +3,10 @@
     <template #trigger="{ toggleFloatingUi }">
       <slot name="button">
         <button
-          role="button"
           aria-haspopup="menu"
           aria-label="Context menu"
           class="mt-context-button__button"
           @click="toggleFloatingUi"
-          @keyup.enter="toggleFloatingUi"
         >
           <mt-icon :name="icon" small decorative />
 
@@ -23,164 +21,53 @@
   </mt-popover>
 </template>
 
-<script lang="ts">
-import type { PropType } from "vue";
-
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import type { View } from "../../overlay/mt-popover/mt-popover.interfaces";
 import MtPopover from "../../overlay/mt-popover/mt-popover.vue";
 
-export default defineComponent({
-  name: "MtContextButtonVue",
-
-  components: {
-    "mt-icon": MtIcon,
-    "mt-popover": MtPopover,
-  },
-
-  props: {
-    menuWidth: {
-      type: Number,
-      required: false,
-      default: 220,
-    },
-
-    menuHorizontalAlign: {
-      type: String as PropType<"right" | "left">,
-      required: false,
-      default: "right",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["right", "left"].includes(value);
-      },
-    },
-
-    menuVerticalAlign: {
-      type: String,
-      required: false,
-      default: "bottom",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["bottom", "top"].includes(value);
-      },
-    },
-
-    icon: {
-      type: String,
-      required: false,
-      default: "solid-ellipsis-h-s",
-    },
-
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    hasError: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    autoClose: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-
-    title: {
-      type: String,
-      required: false,
-      default: "",
-    },
-
-    childViews: {
-      type: Array as PropType<View[]>,
-      required: false,
-      default: () => [],
-    },
-  },
-
-  data() {
-    return {};
+withDefaults(
+  defineProps<{
+    menuWidth?: number;
+    menuHorizontalAlign?: "right" | "left";
+    menuVerticalAlign?: "bottom" | "top";
+    icon?: string;
+    title?: string;
+    childViews?: View[];
+  }>(),
+  {
+    menuWidth: 220,
+    menuHorizontalAlign: "right",
+    menuVerticalAlign: "bottom",
+    icon: "solid-ellipsis-h-s",
+    title: "",
+    default: [],
   },
-
-  computed: {
-    contextClass(): {
-      "is--disabled": boolean;
-      "has--error": boolean;
-    } {
-      return {
-        "is--disabled": this.disabled,
-        "has--error": this.hasError,
-      };
-    },
-  },
-
-  methods: {},
-});
+);
 </script>
 
-<style lang="scss">
-$mt-context-button-color-text: var(--color-icon-primary-default);
-$mt-context-button-border-radius: var(--border-radius-xs);
-$mt-context-button-color-border: var(--color-border-primary-default);
-$mt-context-button-color-disabled: var(--color-icon-primary-disabled);
-
-.mt-context-button {
-  &.is--disabled {
-    .mt-context-button__button {
-      color: var(--color-icon-primary-disabled);
-      cursor: initial;
-
-      &:hover {
-        border: none;
-      }
-    }
-  }
-
-  &.is--disabled.is--open {
-    .mt-context-button__button {
-      border: none;
-    }
+<style scoped>
+.mt-context-button__button {
+  color: var(--color-icon-primary-default);
+  display: flex;
+  align-items: center;
+  border-radius: var(--border-radius-xs);
+  height: var(--scale-size-24);
+  gap: var(--scale-size-8);
+  padding-inline: var(--scale-size-10);
+  line-height: var(--font-line-height-xs);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-body);
+  transition: background-color 0.15s ease-out;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-brand-selected);
+    outline-offset: 2px;
   }
 
-  &.is--open .mt-context-button__button {
-    border-color: $mt-context-button-color-border;
-  }
-
-  .mt-context-button__button {
-    position: relative;
-    color: $mt-context-button-color-text;
-    background: 0 none;
-    border: 1px solid transparent;
-    border-radius: $mt-context-button-border-radius;
-    cursor: pointer;
-    height: var(--scale-size-24);
-    line-height: 20px;
-    padding: 0 var(--scale-size-8);
-    outline: none;
-    font-family: var(--font-family-body);
-
-    &:hover {
-      border-color: $mt-context-button-color-border;
-    }
-  }
-
-  &.has--error {
-    .mt-context-button__button {
-      color: $color-crimson-300;
-
-      .mt-icon {
-        color: $mt-context-button-color-text;
-      }
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-interaction-secondary-hover);
   }
 }
 </style>

packages/component-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue

@@ -4,68 +4,35 @@
     :label="label"
     :icon="icon"
     :disabled="disabled"
-    :on-label-click="handleLableClick"
+    :on-label-click="
+      () => {
+        if (disabled) return;
+
+        $emit('click');
+      }
+    "
     :type="type"
     :role="role"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import MtPopoverItem from "../../overlay/mt-popover-item/mt-popover-item.vue";
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
 import { type TranslateResult } from "vue-i18n";
 
-export default defineComponent({
-  name: "MtContextMenuItem",
-
-  components: {
-    "mt-popover-item": MtPopoverItem,
-  },
-
-  props: {
-    label: {
-      type: String as PropType<string | TranslateResult>,
-      required: true,
-    },
-
-    icon: {
-      type: String,
-      required: false,
-      default: null,
-    },
-
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    type: {
-      type: String as PropType<"default" | "active" | "critical">,
-      required: false,
-      default: "default",
-    },
-
-    role: {
-      type: String,
-      required: false,
-      default: "menuitem",
-    },
+withDefaults(
+  defineProps<{
+    label: string | TranslateResult;
+    icon?: string;
+    disabled?: boolean;
+    type?: "default" | "active" | "critical";
+    role?: string;
+  }>(),
+  {
+    type: "default",
+    role: "menuitem",
   },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const handleLableClick = () => {
-      if (props.disabled) {
-        return;
-      }
-
-      emit("click");
-    };
+);
 
-    return {
-      handleLableClick,
-    };
-  },
-});
+defineEmits<{ click: [] }>();
 </script>