[Page] fix destructive secondary action not visible

UNRELEASED.md

@@ -11,6 +11,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 ### Bug fixes
 
 - Fixed `segmented` `ButtonGroup` misaligning icon only buttons when grouped with text only buttons ([#4079](https://github.com/Shopify/polaris-react/issues/4079))
+- Added missing styles for `destructive` `Page` `secondaryActions` ([#4647](https://github.com/Shopify/polaris-react/pull/4647))
 
 ### Documentation
 

src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss

@@ -27,4 +27,22 @@ $button-spacing: rem(12px);
       @include focus-ring($border-width: rem(0));
     }
   }
+
+  &.destructive {
+    a,
+    button {
+      @include recolor-icon(var(--p-icon-critical));
+      color: var(--p-interactive-critical);
+
+      // stylelint-disable-next-line selector-max-specificity
+      &:hover {
+        background-color: var(--p-surface-critical-subdued-hovered) !important;
+      }
+
+      // stylelint-disable selector-max-specificity
+      &:active {
+        background-color: var(--p-surface-critical-subdued-pressed) !important;
+      }
+    }
+  }
 }

src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useRef} from 'react';
 
+import {classNames} from '../../../../utilities/css';
 import {Button} from '../../../Button';
 import type {ButtonProps} from '../../../Button';
 
@@ -12,6 +13,7 @@ interface SecondaryAction extends ButtonProps {
 
 export function SecondaryAction({
   children,
+  destructive,
   onAction,
   getOffsetWidth,
   ...rest
@@ -25,7 +27,13 @@ export function SecondaryAction({
   }, [getOffsetWidth]);
 
   return (
-    <span className={styles.SecondaryAction} ref={secondaryActionsRef}>
+    <span
+      className={classNames(
+        styles.SecondaryAction,
+        destructive && styles.destructive,
+      )}
+      ref={secondaryActionsRef}
+    >
       <Button onClick={onAction} {...rest}>
         {children}
       </Button>

src/components/Page/README.md

@@ -258,6 +258,21 @@ Use when a primary action functions better as part of the page content instead o
 </Page>
 ```
 
+### Page with destructive secondary action
+
+<!-- example-for: web -->
+
+Used to visually indicate that the secondary page action is destructive.
+
+```jsx
+<Page
+  title="General"
+  secondaryActions={[{content: 'Delete', destructive: true}]}
+>
+  <p>Page content</p>
+</Page>
+```
+
 ### Page with subtitle
 
 <!-- example-for: web -->