Docs update CodeVisibilityProvider to properly inherit from parent …

…context (Shopify#10467)

<!--
  ☝️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 Shopify#10400  <!-- link to issue if one exists -->

### WHAT is this pull request doing?

Change the type signature of CodeVisibilityContext values 
```diff
- [bool, (arg: bool) => void]
+ { showCode?: bool, setShowCode?: (arg: bool) => void }
```
This is to ensure that we don't end up always inheriting the default
values set by our createContext invocation for `CodeVisibilityContext`

Changed the value instantiation for the CodeVisiblityProvider in
Markdown.tsx
```diff
-[
- codeVisibleFromContext ?? showCode,
- setShowCodeFromContext ?? setShowCode
-]
+{
+     showCode: typeof codeVisibleFromContext !== undefined ?? showCode,
+       setShowCode: setShowCodeFromContext ?? setShowCode,
+}
```
To ensure that we also respect and inherit explicit `false` values when
set in the parent context.


### 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

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

@@ -30,10 +30,12 @@ import {FeaturedCardGrid} from '../FeaturedCardGrid';
 import {useCopyToClipboard} from '../../utils/hooks';
 import {Colors} from './components/Colors';
 
-const CodeVisibilityContext = createContext<[boolean, (arg: boolean) => void]>([
-  false,
-  () => {},
-]);
+const CodeVisibilityContext = createContext<
+  [
+    boolean | undefined,
+    React.Dispatch<React.SetStateAction<boolean>> | undefined,
+  ]
+>([undefined, undefined]);
 
 const useCodeVisibility = () => useContext(CodeVisibilityContext);
 
@@ -46,16 +48,17 @@ export const CodeVisibilityProvider: ComponentType<
     /**
      * This value will be overwritten by the outer-most context provider
      */
-    setShowCode: (arg: boolean) => void;
+    setShowCode: React.Dispatch<React.SetStateAction<boolean>>;
   }>
 > = ({children, showCode, setShowCode}) => {
   // Attempt to inherit from parent context if it's set
   const [codeVisibleFromContext, setShowCodeFromContext] = useCodeVisibility();
-
   return (
     <CodeVisibilityContext.Provider
       value={[
-        codeVisibleFromContext ?? showCode,
+        typeof codeVisibleFromContext !== 'undefined'
+          ? codeVisibleFromContext
+          : showCode,
         setShowCodeFromContext ?? setShowCode,
       ]}
     >
@@ -84,7 +87,6 @@ const FencedCodeWithVisibilityToggle: ComponentType<
   meta: {title, type, previewContext, sandboxContext, isActionsVisible} = {},
 }) => {
   const [showCode, setShowCode] = useCodeVisibility();
-
   if (type === 'livePreview') {
     return (
       <PatternsExample
@@ -95,7 +97,9 @@ const FencedCodeWithVisibilityToggle: ComponentType<
         }}
         isCodeVisible={showCode}
         isActionsVisible={isActionsVisible}
-        onCodeVisibilityToggle={() => setShowCode(!showCode)}
+        onCodeVisibilityToggle={() => {
+          setShowCode?.(!showCode);
+        }}
         title={title ?? 'Pattern Name'}
       />
     );

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

@@ -107,7 +107,6 @@ export const Variants = ({
 };
 
 const BaseMarkdown = (props: ComponentProps<typeof Markdown>) => {
-  // console.log('IN MARKDOWN', JSON.stringify(patternData, null, 2));
   return (
     <Markdown
       {...props}
@@ -193,9 +192,6 @@ export default function PatternPage({pattern}: Props) {
     toggleCode(true);
   }, [pattern.frontmatter]);
 
-  // props.data.variants = {...JSON.parse(props.data.variants)};
-  // console.log('PROPS', JSON.stringify(props, null, 2));
-
   return (
     <>
       <PageMeta
@@ -221,7 +217,12 @@ export default function PatternPage({pattern}: Props) {
               </p>
             ) : null}
           </Stack>
-          <CodeVisibilityProvider showCode={showCode} setShowCode={toggleCode}>
+          <CodeVisibilityProvider
+            showCode={showCode}
+            setShowCode={(...args) => {
+              toggleCode(...args);
+            }}
+          >
             <PatternMarkdown {...pattern} />
           </CodeVisibilityProvider>
         </Stack>