From acd3496378b76c9653e9b4be5ef232ea5fa4f30d Mon Sep 17 00:00:00 2001
From: Temitayo Oyelowo <temitayo.oyelowo@shopify.com>
Date: Sun, 14 Nov 2021 22:08:10 -0500
Subject: [PATCH 1/5] fix destructive secondary action not visible

---
 playground/Playground.tsx                           | 13 +++++++++++--
 .../components/SecondaryAction/SecondaryAction.scss |  5 +++++
 .../components/SecondaryAction/SecondaryAction.tsx  |  9 ++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/playground/Playground.tsx b/playground/Playground.tsx
index 355f6b984f2..7fcd898707f 100644
--- a/playground/Playground.tsx
+++ b/playground/Playground.tsx
@@ -4,8 +4,17 @@ import {Page} from '../src';
 
 export function Playground() {
   return (
-    <Page title="Playground">
-      {/* Add the code you want to test in here */}
+    // <Page title="Playground">
+    //   {/* Add the code you want to test in here */}
+    // </Page>
+    <Page
+      title="My Page"
+      primaryAction={{content: 'Edit', url: '#Edit'}}
+      secondaryActions={[
+        {content: 'Delete', destructive: true, url: '#Delete'},
+      ]}
+    >
+      Some page content
     </Page>
   );
 }
diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 1c74b74eae7..22e5023784d 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -26,5 +26,10 @@ $button-spacing: rem(12px);
       border: none !important;
       @include focus-ring($border-width: rem(0));
     }
+
+    &.destructive {
+      // --p-button-color: var(--p-action-critical);
+      background: var(--p-text-on-critical);
+    }
   }
 }
diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx
index c56adc68fe5..db1bea04b2e 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx
+++ b/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';
 
@@ -25,7 +26,13 @@ export function SecondaryAction({
   }, [getOffsetWidth]);
 
   return (
-    <span className={styles.SecondaryAction} ref={secondaryActionsRef}>
+    <span
+      className={classNames(
+        styles.SecondaryAction,
+        rest?.destructive && styles.destructive,
+      )}
+      ref={secondaryActionsRef}
+    >
       <Button onClick={onAction} {...rest}>
         {children}
       </Button>

From c78523726049eee3db853ec49269ca9c70bab161 Mon Sep 17 00:00:00 2001
From: Temitayo Oyelowo <temitayo.oyelowo@shopify.com>
Date: Wed, 17 Nov 2021 10:09:28 -0500
Subject: [PATCH 2/5] change text color for destructive secondary action

---
 .../components/SecondaryAction/SecondaryAction.scss       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 22e5023784d..179fd0b6c1b 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -26,10 +26,12 @@ $button-spacing: rem(12px);
       border: none !important;
       @include focus-ring($border-width: rem(0));
     }
+  }
 
-    &.destructive {
-      // --p-button-color: var(--p-action-critical);
-      background: var(--p-text-on-critical);
+  &.destructive {
+    a,
+    button {
+      color: var(--p-text-critical);
     }
   }
 }

From ed5df48b8f8248aecde9b715fd5e73308b291c58 Mon Sep 17 00:00:00 2001
From: Temitayo Oyelowo <temitayo.oyelowo@shopify.com>
Date: Wed, 17 Nov 2021 10:12:34 -0500
Subject: [PATCH 3/5] reset Playground.tsx

---
 playground/Playground.tsx | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/playground/Playground.tsx b/playground/Playground.tsx
index 7fcd898707f..355f6b984f2 100644
--- a/playground/Playground.tsx
+++ b/playground/Playground.tsx
@@ -4,17 +4,8 @@ import {Page} from '../src';
 
 export function Playground() {
   return (
-    // <Page title="Playground">
-    //   {/* Add the code you want to test in here */}
-    // </Page>
-    <Page
-      title="My Page"
-      primaryAction={{content: 'Edit', url: '#Edit'}}
-      secondaryActions={[
-        {content: 'Delete', destructive: true, url: '#Delete'},
-      ]}
-    >
-      Some page content
+    <Page title="Playground">
+      {/* Add the code you want to test in here */}
     </Page>
   );
 }

From 0613e0b4c0cf655d2eaf726754f36bca4d0ee3ce Mon Sep 17 00:00:00 2001
From: Temitayo Oyelowo <temitayo.oyelowo@shopify.com>
Date: Fri, 21 Jan 2022 16:07:41 -0500
Subject: [PATCH 4/5] destructure destructive, add hover state to destructive
 action & add a destructive example to readme

---
 .../SecondaryAction/SecondaryAction.scss          | 13 ++++++++++++-
 .../SecondaryAction/SecondaryAction.tsx           |  3 ++-
 src/components/Page/README.md                     | 15 +++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 179fd0b6c1b..10723d2dc9c 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -31,7 +31,18 @@ $button-spacing: rem(12px);
   &.destructive {
     a,
     button {
-      color: var(--p-text-critical);
+      @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;
+      }
     }
   }
 }
diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx
index db1bea04b2e..d935d13fe5e 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx
+++ b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx
@@ -13,6 +13,7 @@ interface SecondaryAction extends ButtonProps {
 
 export function SecondaryAction({
   children,
+  destructive,
   onAction,
   getOffsetWidth,
   ...rest
@@ -29,7 +30,7 @@ export function SecondaryAction({
     <span
       className={classNames(
         styles.SecondaryAction,
-        rest?.destructive && styles.destructive,
+        destructive && styles.destructive,
       )}
       ref={secondaryActionsRef}
     >
diff --git a/src/components/Page/README.md b/src/components/Page/README.md
index 354e23474ca..37d40eefd7f 100644
--- a/src/components/Page/README.md
+++ b/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 -->

From 07691562f164d2f13bcaf5adc474885c7889d602 Mon Sep 17 00:00:00 2001
From: Temitayo Oyelowo <temitayo.oyelowo@shopify.com>
Date: Mon, 24 Jan 2022 12:31:54 -0500
Subject: [PATCH 5/5] update UNRELEASED.md

---
 UNRELEASED.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 0f83c986059..0b8f4c99e1f 100644
--- a/UNRELEASED.md
+++ b/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