feat(menu): add design qa requested changes

packages/components/package.json

@@ -64,6 +64,7 @@
     "@vtex/shoreline-icons": "^0.2.2",
     "@vtex/shoreline-utils": "^0.5.1",
     "react-hot-toast": "2.4.1",
-    "react-virtual": "^2.10.4"
+    "react-virtual": "^2.10.4",
+    "tiny-invariant": "1.3.1"
   }
 }

packages/components/src/button/button.css

@@ -19,7 +19,7 @@
     & > [data-sl-button-content] {
       font: inherit;
       letter-spacing: inherit;
-      gap: var(--sl-space-05);
+      gap: var(--sl-space-1);
       width: 100%;
       display: flex;
       flex-direction: row;

packages/components/src/menu/menu-trigger.css

@@ -0,0 +1,23 @@
+@layer sl-components {
+  [data-sl-menu-trigger] {
+    &[data-variant='critical'][data-active='true'] {
+      background: var(--sl-bg-critical-strong-pressed);
+    }
+
+    &[data-variant='criticalTertiary'][data-active='true'] {
+      background: var(--sl-bg-critical-plain-pressed);
+    }
+
+    &[data-variant='primary'][data-active='true'] {
+      background: var(--sl-bg-accent-strong-pressed);
+    }
+
+    &[data-variant='secondary'][data-active='true'] {
+      background: var(--sl-bg-muted-pressed);
+    }
+
+    &[data-variant='tertiary'][data-active='true'] {
+      background: var(--sl-bg-muted-plain-pressed);
+    }
+  }
+}

packages/components/src/menu/menu-trigger.tsx

@@ -1,16 +1,26 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
-import { MenuButton } from '@ariakit/react'
+import { MenuButton, useMenuContext } from '@ariakit/react'
+import invariant from 'tiny-invariant'
+
+import './menu-trigger.css'
 
 export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
   function MenuTrigger(props, ref) {
     const { children, asChild = false, ...otherProps } = props
 
+    const store = useMenuContext()
+
+    invariant(store, 'You must use MenuTrigger under the MenuProvider context.')
+
+    const open = store.useState('open')
+
     return (
       <MenuButton
         ref={ref}
         data-sl-menu-trigger
         render={asChild && (children as any)}
+        data-active={open}
         {...otherProps}
       >
         {children}