[polaris.shopify.com] Update browser url when copying url (#10573)

Had a bit of time so decided to slightly improve the copy url button to
also change the browser url. This behavior is more similar to how other
sites, like github, do this


https://github.com/Shopify/polaris/assets/6844391/7990d44a-fe30-4a73-8735-c0d08fcc9e19

I initially did this with window.location.replace but that jumps the
page around and scrolls to the anchor which messed with the tooltip
messaging too much and felt janky

Author: kyledurand

.changeset/ten-snakes-play.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated copy url to change browser url

polaris.shopify.com/src/components/Markdown/Markdown.tsx

@@ -155,7 +155,8 @@ function HeadingWithCopyButton({
       ? window.location.origin
       : 'https://polaris.shopify.com';
   const path = typeof window !== 'undefined' ? window.location.pathname : '';
-  const [copy, didJustCopy] = useCopyToClipboard(`${origin}${path}#${id}`);
+  const url = `${origin}${path}#${id}`;
+  const [copy, didJustCopy] = useCopyToClipboard(url);
 
   return (
     <Element id={id} className={styles.MarkdownHeading}>
@@ -164,7 +165,15 @@ function HeadingWithCopyButton({
         ariaLabel="Copy to clipboard"
         renderContent={() => <p>{didJustCopy ? 'Copied' : 'Copy'}</p>}
       >
-        <button className={styles.MarkdownCopyButton} onClick={copy}>
+        <button
+          className={styles.MarkdownCopyButton}
+          onClick={() => {
+            copy();
+            if (typeof window !== 'undefined') {
+              window.history.pushState(id, '', url);
+            }
+          }}
+        >
           <Icon source={ClipboardMinor} width={16} height={16} />
         </button>
       </Tooltip>