Update pill to be active when a menu is open (#4225)

.changeset/stale-jeans-sniff.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Pill will now go into an active state when it's a menu trigger and has the menu is open. This aligns Pill with Button.

packages/core/src/pill/Pill.css

@@ -18,6 +18,7 @@
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   overflow: hidden;
   white-space: nowrap;
 }
@@ -49,6 +50,13 @@
   outline: var(--salt-focused-outline);
 }
 
+/* Styles applied when the pill triggers a menu */
+.saltPill[aria-expanded="true"][aria-haspopup="menu"] {
+  --pill-color: var(--salt-actionable-bold-foreground-active);
+  --pill-background: var(--salt-actionable-bold-background-active);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);
+}
+
 /* Style applied to Pill when disabled */
 .saltPill:disabled,
 .saltPill:disabled:hover {

packages/core/stories/pill/pill.qa.stories.tsx

@@ -1,10 +1,10 @@
-import { Pill } from "@salt-ds/core";
+import { Menu, MenuItem, MenuPanel, MenuTrigger, Pill } from "@salt-ds/core";
 import { FavoriteIcon } from "@salt-ds/icons";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Pill/QA",
+  title: "Core/Pill/Pill QA",
   component: Pill,
 } as Meta<typeof Pill>;
 
@@ -13,7 +13,14 @@ const noop = () => undefined;
 export const ExamplesGrid: StoryFn<QAContainerProps> = (props) => {
   const { className, ...rest } = props;
   return (
-    <QAContainer cols={3} height={300} itemPadding={3} width={1300} {...rest}>
+    <QAContainer
+      itemWidthAuto
+      cols={4}
+      height={300}
+      itemPadding={21}
+      width={1300}
+      {...rest}
+    >
       <Pill className={className} onClick={noop}>
         Default Pill
       </Pill>
@@ -23,6 +30,14 @@ export const ExamplesGrid: StoryFn<QAContainerProps> = (props) => {
       <Pill className={className} onClick={noop}>
         <FavoriteIcon /> With Icon Pill
       </Pill>
+      <Menu open>
+        <MenuTrigger>
+          <Pill>Menu Pill</Pill>
+        </MenuTrigger>
+        <MenuPanel>
+          <MenuItem>Copy</MenuItem>
+        </MenuPanel>
+      </Menu>
     </QAContainer>
   );
 };