From 2febd60f155ece49ce0e48c074ae20c3de8961bb Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Wed, 17 Jan 2024 21:23:41 -0500
Subject: [PATCH] Lower z-index of Filters container to be below Card shadow
 bevel (#11462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1343

### WHAT is this pull request doing?

Lower `Filter` container z-index (currently `100`) to be below `Card`'s
shadow bevel z-index which is `32`. This is a similar bug/fix as [this
issue](https://github.com/Shopify/polaris/pull/11411).

|Before|After|
|-|-|
|<img width="503" alt="Screenshot 2024-01-17 at 3 53 30 PM"
src="https://github.com/Shopify/polaris/assets/20652326/88edab7c-aed8-44b8-9f5c-b9bd319405dc">|<img
width="382" alt="Screenshot 2024-01-17 at 4 48 45 PM"
src="https://github.com/Shopify/polaris/assets/20652326/7dc33fc8-333b-4e1d-afa7-f3efed5ad7a1">|

### How to 🎩


https://admin.web.web-kkgf.sophie-schneider.us.spin.dev/store/shop1/orders
1. Press search button on index table

or

verify shadow bevel is on the filter search bar in this story
https://5d559397bae39100201eedc1-vszwcambil.chromatic.com/?path=/story/all-components-indexfilters--with-filtering-by-default
(vs.[ on
prod](https://storybook.polaris.shopify.com/?path=/story/all-components-indexfilters--with-filtering-by-default))


### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)

---------

Co-authored-by: Laura Griffee <laura@mailzone.com>
---
 .changeset/selfish-ads-reflect.md                        | 5 +++++
 polaris-react/src/components/Filters/Filters.module.scss | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/selfish-ads-reflect.md

diff --git a/.changeset/selfish-ads-reflect.md b/.changeset/selfish-ads-reflect.md
new file mode 100644
index 00000000000..44a2f5fa8fa
--- /dev/null
+++ b/.changeset/selfish-ads-reflect.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Lowered the z-index of `Filter`s container to be below `Card` shadow bevel
diff --git a/polaris-react/src/components/Filters/Filters.module.scss b/polaris-react/src/components/Filters/Filters.module.scss
index 3bd2f632a14..0fb9335fe0b 100644
--- a/polaris-react/src/components/Filters/Filters.module.scss
+++ b/polaris-react/src/components/Filters/Filters.module.scss
@@ -2,7 +2,8 @@
 
 .Container {
   position: relative;
-  z-index: var(--p-z-index-1);
+  // stylelint-disable-next-line -- z-index below Card shadow bevel (32)
+  z-index: 30;
   border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   border-top-left-radius: var(--p-border-radius-200);
   border-top-right-radius: var(--p-border-radius-200);