[Button] Add expanded styling

.changeset/ninety-weeks-greet.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added expanded styling to Button

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss

@@ -19,7 +19,9 @@
       background-color: var(--p-color-bg-fill-tertiary-hover) !important;
     }
 
-    &:active {
+    /* stylelint-disable-next-line selector-no-qualifying-type -- add expanded styling */
+    &:active,
+    &[aria-expanded='true'] {
       background-color: var(--p-color-bg-fill-tertiary-active) !important;
       box-shadow: var(--p-shadow-inset-200) !important;
     }

polaris-react/src/components/Button/Button.scss

@@ -962,6 +962,25 @@
     text-decoration: underline;
   }
 }
+// Overrides for popover active / expanded states on default buttons
+.Button:is([aria-expanded='true']):is([aria-owns]):not(.variantPlain):not(.variantMonochromePlain):not(.variantTertiary):not(.variantPrimary) {
+  // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property
+  --pc-button-shadow: var(--p-shadow-inset-200);
+  background: var(--p-color-bg-fill-active);
+
+  .Content {
+    transform: translateY(1px);
+  }
+
+  &:hover {
+    // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- reset custom property for expaned button
+    box-shadow: var(--pc-button-shadow);
+  }
+}
+// Overrides for popover active / expanded states on plain, monochromePlain, tertiary buttons
+.Button:is([aria-expanded='true']):is([aria-owns]):is(.variantTertiary) {
+  background: var(--p-color-bg-fill-transparent-active);
+}
 
 [data-buttongroup-variant='segmented'] {
   .Button,

polaris-react/src/components/Popover/Popover.tsx

@@ -33,7 +33,10 @@ export interface PopoverProps {
   preferredAlignment?: PopoverOverlayProps['preferredAlignment'];
   /** Show or hide the Popover */
   active: boolean;
-  /** The element to activate the Popover */
+  /** The element to activate the Popover.
+   * If using a button, use the default or tertiary variant
+   * which will show an active state when popover is active
+   */
   activator: React.ReactElement;
   /**
    * Use the activator's input element to calculate the Popover position

polaris.shopify.com/content/components/overlays/popover.mdx

@@ -59,6 +59,7 @@ Popovers should:
 - Be used for secondary or less important information and actions since they’re hidden until merchants hit the trigger
 - Contain navigation or actions that share a relationships to each other
 - Be triggered by a clearly labeled button
+- Use a default or tertiary button as the activator
 
 ---