From 79e604b340c4a80fcd45ab40a19c8210319bbea5 Mon Sep 17 00:00:00 2001
From: Yuraima Estevez <yuraima.estevez@shopify.com>
Date: Wed, 19 Jul 2023 16:57:52 +0100
Subject: [PATCH] Updated `Breadcrumb` back button styling (#9733)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-summer-editions/issues/947 by
overriding the styles of `Button` when in the Page Header. This follows
the same solution that the other buttons in the page [secondary actions
button groups
use](https://github.com/Shopify/polaris/blob/4d018664742bc3c9e7c4b577d31dcd05d09a2a6f/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss#L8)


<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?


https://github.com/Shopify/polaris/assets/4642404/2ecc28a3-f320-4ea7-aa41-e84f07db33c8


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/fifty-bats-visit.md                |  5 ++++
 .../components/Breadcrumbs/Breadcrumbs.tsx    | 22 +++++++++++++++++-
 .../Page/components/Header/Header.scss        | 23 +++++++++++++++++++
 polaris-react/src/types.ts                    |  2 +-
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fifty-bats-visit.md

diff --git a/.changeset/fifty-bats-visit.md b/.changeset/fifty-bats-visit.md
new file mode 100644
index 00000000000..0e89900f6e9
--- /dev/null
+++ b/.changeset/fifty-bats-visit.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+empty
diff --git a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx
index 39f68a2673e..3a2ed8d1972 100644
--- a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -6,6 +6,8 @@ import {UnstyledLink} from '../UnstyledLink';
 import type {CallbackAction, LinkAction} from '../../types';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 import {Text} from '../Text';
+import {Button} from '../Button';
+import {useFeatures} from '../../utilities/features';
 
 import styles from './Breadcrumbs.scss';
 
@@ -16,6 +18,7 @@ export interface BreadcrumbsProps {
 
 export function Breadcrumbs({backAction}: BreadcrumbsProps) {
   const {content} = backAction;
+  const {polarisSummerEditions2023} = useFeatures();
 
   const contentMarkup = (
     <>
@@ -52,5 +55,22 @@ export function Breadcrumbs({backAction}: BreadcrumbsProps) {
       </button>
     );
 
-  return <nav role="navigation">{breadcrumbMarkup}</nav>;
+  const summerEditionsBreadcrumbMarkup = (
+    <Button
+      key={content}
+      url={'url' in backAction ? backAction.url : undefined}
+      onPointerDown={handleMouseUpByBlurring}
+      aria-label={backAction.accessibilityLabel}
+      icon={ArrowLeftMinor}
+      accessibilityLabel={content}
+    />
+  );
+
+  return (
+    <nav role="navigation">
+      {polarisSummerEditions2023
+        ? summerEditionsBreadcrumbMarkup
+        : breadcrumbMarkup}
+    </nav>
+  );
 }
diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
index c21e752d16a..ddc8a93a966 100644
--- a/polaris-react/src/components/Page/components/Header/Header.scss
+++ b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -15,6 +15,29 @@ $action-menu-rollup-computed-width: 40px;
 
 .BreadcrumbWrapper {
   grid-area: breadcrumbs;
+
+  #{$se23} & {
+    /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
+    a,
+    button {
+      background-color: transparent;
+      border-radius: var(--p-border-radius-2);
+      box-shadow: none;
+
+      /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
+      &:hover {
+        box-shadow: none;
+        background-color: var(--p-color-bg-strong-hover);
+      }
+
+      /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
+      &:focus {
+        background-color: var(--p-color-bg-strong-active);
+        /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */
+        box-shadow: var(--p-shadow-inset-md) !important;
+      }
+    }
+  }
 }
 
 .PaginationWrapper {
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index 8c07d2e2832..122b768867a 100644
--- a/polaris-react/src/types.ts
+++ b/polaris-react/src/types.ts
@@ -96,7 +96,7 @@ export interface BaseButton {
   /** Callback when element is touched */
   onTouchStart?(): void;
   /** Callback when pointerdown event is being triggered */
-  onPointerDown?(): void;
+  onPointerDown?(event: React.PointerEvent<HTMLButtonElement>): void;
 }
 
 export interface Action {