From ad6315845f4a511bbaeba2c256b01b8f497e8bda Mon Sep 17 00:00:00 2001
From: Max Kazemi <32557358+SMAKSS@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:02:45 +0330
Subject: [PATCH] [BlockStack] Add `id` prop to the returned component (#11592)
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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #11196 <!-- link to issue if one exists -->

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

### WHAT is this pull request doing?
It seems we missed returning the `id` prop when we created the final
element with the React `createElement` API.

```js
export const BlockStack = ({
  as = 'div',
  children,
  align,
  inlineAlign,
  gap,
  id,
  reverseOrder = false,
  ...restProps
}: BlockStackProps) => {
  ...

  return React.createElement(
    as,
    {
      className,
      // Missed the id prop in the final return component
      style: sanitizeCustomProperties(style),
      ...restProps,
    },
    children,
  );
};
```

### 🎩 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)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/wild-planets-confess.md                     | 5 +++++
 polaris-react/src/components/BlockStack/BlockStack.tsx | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/wild-planets-confess.md

diff --git a/.changeset/wild-planets-confess.md b/.changeset/wild-planets-confess.md
new file mode 100644
index 00000000000..4006c276d79
--- /dev/null
+++ b/.changeset/wild-planets-confess.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Passed missing `id` prop to the root element of `BlockStack`
diff --git a/polaris-react/src/components/BlockStack/BlockStack.tsx b/polaris-react/src/components/BlockStack/BlockStack.tsx
index 6663ce28749..135060eb39a 100644
--- a/polaris-react/src/components/BlockStack/BlockStack.tsx
+++ b/polaris-react/src/components/BlockStack/BlockStack.tsx
@@ -76,6 +76,7 @@ export const BlockStack = ({
     as,
     {
       className,
+      id,
       style: sanitizeCustomProperties(style),
       ...restProps,
     },