[polaris.shopify.com] Add ability to collapse types in props table. (#7254)

### WHY are these changes introduced?

Hot on the heels of #6757 being
merged, this change introduces the ability to collapse props after being
expanded. This allows users to expand ("explore") and then collapse
("focus") props as needed depending on the types they want to see.

**Before**


https://user-images.githubusercontent.com/49090/191797340-233d321e-121e-4029-8ae2-7b4ddcb21f93.mp4


**After**



https://user-images.githubusercontent.com/49090/191797509-5674e76a-caf4-4615-97ef-4f483325a7c2.mp4




### WHAT is this pull request doing?

- Adds an additional function to collapse props within the props table.
- Wraps the `TypeTable` in `<AnimatePresence>` per [Framer's
instruction](https://www.framer.com/docs/animate-presence/##exit-animations)
when using exit animations on `div.motion` as well as a `key`.
- Updated `hasBenExpanded` to `hasBeenExpanded` -- think this was a
typo.
- I also introduced a subtle hover state on the clickable types, since
it wasn't immediately obvious to me that they were interactable.

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

Run the Polaris docs:

1. `dev up`
2. `cd polaris.shopify.com && yarn run dev`
3. Open up a component page - e.g.
http://localhost:3000/components/option-list

### 🎩 checklist

- 🚫 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)
- 🚫 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

Co-authored-by: Marten Bjork <[email protected]>

Author: nickpresta

.changeset/forty-cobras-lay.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added ability to collapse props that have been expanded.

polaris.shopify.com/src/components/PropsTable/PropsTable.module.scss

@@ -34,12 +34,25 @@
   }
 
   .TypeTableHeader {
+    display: flex;
+    align-items: center;
     width: 100%;
     text-align: left;
     color: var(--code-keyword);
     font-family: var(--font-family-mono);
     padding: 0.66em 1em;
     background: rgba(0, 0, 0, 0.02);
+
+    button {
+      margin-left: auto;
+      background: transparent;
+      color: var(--text-subdued);
+
+      &:hover {
+        color: var(--text-strong);
+      }
+    }
+
     @include dark-mode {
       background: rgba(255, 255, 255, 0.05);
     }
@@ -66,7 +79,6 @@
 
   .Key {
     display: flex;
-    flex-direction: column;
     gap: 0.6rem;
 
     @media screen and (max-width: $breakpointMobile) {

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

@@ -59,7 +59,9 @@ function PropsTable({types, componentName}: Props) {
           </div>
         )}
 
-        <TypeTable types={types} type={propsForComponent} />
+        <AnimatePresence initial={false}>
+          <TypeTable types={types} type={propsForComponent} />
+        </AnimatePresence>
       </div>
     </TypeContext.Provider>
   );
@@ -70,58 +72,80 @@ type ExpandedTypeInfo = {memberName: string | null; typeName: string};
 const ExpandedTypesContext = createContext<{
   expandedTypes: ExpandedTypeInfo[];
   expandType: (typeName: string) => void;
+  collapseType: (typeName: string) => void;
   currentMember: string | null;
-}>({expandType: () => undefined, expandedTypes: [], currentMember: null});
+}>({
+  expandType: () => undefined,
+  collapseType: () => undefined,
+  expandedTypes: [],
+  currentMember: null,
+});
 
 function TypeTable({
   types,
   type,
+  level = 0,
 }: {
   types: FilteredTypes;
   type: Type;
   level?: number;
 }) {
   const [expandedTypes, setExpandedTypes] = useState<ExpandedTypeInfo[]>([]);
+  const {collapseType} = useContext(ExpandedTypesContext);
 
   return (
     <motion.div
+      key={type.name}
       className={styles.TypeTable}
       initial={{opacity: 0, scale: 0.7, height: 0}}
-      animate={{opacity: 1, scale: 1, height: 'auto'}}
+      animate={{
+        opacity: 1,
+        scale: 1,
+        height: 'auto',
+        transition: {ease: 'backOut'},
+      }}
+      exit={{opacity: 0, scale: 0, height: 0, transition: {ease: 'backIn'}}}
     >
       <div className={styles.TypeTableHeader}>
-        {syntaxKindToDeveloperFriendlyString(type.syntaxKind)} {type.name}
+        {syntaxKindToDeveloperFriendlyString(type.syntaxKind)} {type.name}{' '}
+        {typeof level === 'number' && level > 0 && (
+          <button onClick={() => collapseType(type.name)} aria-label="Collapse">
+            &times;
+          </button>
+        )}
       </div>
 
       {!type.members && (
         <ExpandedTypesContext.Provider
           value={{
             expandedTypes,
-            expandType: (typeName: string) => {
+            expandType: (typeName: string) =>
               setExpandedTypes([
                 {typeName, memberName: null},
                 ...expandedTypes,
-              ]);
-            },
+              ]),
+            collapseType: () => undefined,
             currentMember: null,
           }}
         >
           <div className={styles.RawInterfaceValue}>
             <Highlighter type={type.value.toString()} />
 
-            {expandedTypes
-              .filter((expanded) => expanded.memberName === null)
-              .map((expanded) => {
-                const typeForExpandedType = types[expanded.typeName];
-                if (!typeForExpandedType) return null;
-                return (
-                  <TypeTable
-                    key={expanded.typeName}
-                    types={types}
-                    type={typeForExpandedType}
-                  />
-                );
-              })}
+            <AnimatePresence initial={false}>
+              {expandedTypes
+                .filter((expanded) => expanded.memberName === null)
+                .map((expanded) => {
+                  const typeForExpandedType = types[expanded.typeName];
+                  if (!typeForExpandedType) return null;
+                  return (
+                    <TypeTable
+                      key={expanded.typeName}
+                      types={types}
+                      type={typeForExpandedType}
+                    />
+                  );
+                })}
+            </AnimatePresence>
           </div>
         </ExpandedTypesContext.Provider>
       )}
@@ -137,16 +161,33 @@ function TypeTable({
               value,
               deprecationMessage,
             }) => {
-              const expandType = (typeName: string) =>
+              const expandType = (typeName: string) => {
                 setExpandedTypes([
                   {typeName, memberName: name},
                   ...expandedTypes,
                 ]);
+              };
+
+              const collapseType = (typeName: string) =>
+                setExpandedTypes((types) =>
+                  types.filter(
+                    (typeInfo) =>
+                      !(
+                        typeInfo.typeName === typeName &&
+                        typeInfo.memberName === name
+                      ),
+                  ),
+                );
 
               return (
                 <ExpandedTypesContext.Provider
                   key={name}
-                  value={{expandedTypes, expandType, currentMember: name}}
+                  value={{
+                    expandedTypes,
+                    expandType,
+                    collapseType,
+                    currentMember: name,
+                  }}
                 >
                   <span className={styles.Row}>
                     <dt className={styles.Key}>
@@ -200,6 +241,7 @@ function TypeTable({
                                 key={expanded.typeName}
                                 types={types}
                                 type={typeForExpandedType}
+                                level={level + 1}
                               />
                             );
                           })}
@@ -226,7 +268,7 @@ function Highlighter({
   const {expandType, expandedTypes, currentMember} =
     useContext(ExpandedTypesContext);
   const {types} = useContext(TypeContext);
-  const hasBenExpanded = expandedTypes.some(
+  const hasBeenExpanded = expandedTypes.some(
     (expandedType) =>
       expandedType.typeName === type &&
       expandedType.memberName === currentMember,
@@ -275,8 +317,8 @@ function Highlighter({
           <button
             className={styles.ExpandableType}
             onClick={() => expandType(type)}
-            disabled={hasBenExpanded}
-            aria-expanded={hasBenExpanded}
+            disabled={hasBeenExpanded}
+            aria-expanded={hasBeenExpanded}
           >
             {type}
           </button>