From 34e5e3a11af5fa0abb243a4ba59d40851f84ac22 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 27 Apr 2021 08:12:19 -0700
Subject: [PATCH] Fine tuning and docs for Panel

Summary: Better documentation for Panel. Fixes styling issue for uncollapsible panels

Reviewed By: passy

Differential Revision: D28025557

fbshipit-source-id: db0f9fd44f501fa36be3fc31ebbe7917d7c0a88c
---
 .../src/sandy-chrome/DesignComponentDemos.tsx | 43 ++++++++++++++++++-
 desktop/flipper-plugin/src/ui/Panel.tsx       | 19 +++++---
 docs/extending/flipper-plugin.mdx             | 14 +++++-
 3 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
index 17f2203c4..9612fe198 100644
--- a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
+++ b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import {Typography, Card, Table, Collapse, Button, Tabs} from 'antd';
 import {Layout, Link} from '../ui';
-import {NUX, theme, Tracked, TrackingScope} from 'flipper-plugin';
+import {NUX, Panel, theme, Tracked, TrackingScope} from 'flipper-plugin';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {CodeOutlined} from '@ant-design/icons';
 
@@ -300,6 +300,47 @@ const demos: PreviewProps[] = [
       ),
     },
   },
+  {
+    title: 'Panel',
+    description:
+      'A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.',
+    props: [
+      ['title', 'string', 'Title of the pane'],
+      [
+        'collapsible',
+        'boolean (true)',
+        "If set to false it won't be possible to collapse the panel",
+      ],
+      [
+        'collapsed',
+        'boolean (false)',
+        'The initial collapsed state of the panel.',
+      ],
+      [
+        'pad / gap',
+        'boolean / number (false)',
+        'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.',
+      ],
+    ],
+    demos: {
+      'Two panels in a fixed height container': (
+        <Layout.Container>
+          <Panel title="Panel 1">Some content</Panel>
+          <Panel title="Panel 2 (collapsed)" collapsed>
+            {aFixedHeightBox}
+          </Panel>
+          <Panel
+            title="Panel 3 (not collapsible, pad, gap)"
+            collapsible={false}
+            pad
+            gap>
+            {aFixedHeightBox}
+            {aFixedHeightBox}
+          </Panel>
+        </Layout.Container>
+      ),
+    },
+  },
   {
     title: 'NUX',
     description:
diff --git a/desktop/flipper-plugin/src/ui/Panel.tsx b/desktop/flipper-plugin/src/ui/Panel.tsx
index cf14b9c4d..1ad40a4af 100644
--- a/desktop/flipper-plugin/src/ui/Panel.tsx
+++ b/desktop/flipper-plugin/src/ui/Panel.tsx
@@ -26,17 +26,20 @@ export const Panel: React.FC<{
    * Initial state for panel if it is collapsable
    */
   collapsed?: boolean;
-  pad: Spacing;
+  pad?: Spacing;
+  gap?: Spacing;
 }> = (props) => {
   const [collapsed, setCollapsed] = useLocalStorageState(
     `panel:${props.title}:collapsed`,
-    props.collapsed,
+    props.collapsible === false ? false : props.collapsed,
   );
 
   const toggle = useCallback(() => {
-    console.log('click');
+    if (props.collapsible === false) {
+      return;
+    }
     setCollapsed((c) => !c);
-  }, [setCollapsed]);
+  }, [setCollapsed, props.collapsible]);
 
   return (
     <TrackingScope scope={props.title}>
@@ -46,9 +49,11 @@ export const Panel: React.FC<{
         onChange={toggle}>
         <Collapse.Panel
           key={props.title}
-          collapsible={props.collapsible ? undefined : 'disabled'}
-          header={props.title}>
-          <Layout.Container pad={props.pad}>{props.children}</Layout.Container>
+          header={props.title}
+          showArrow={props.collapsible !== false}>
+          <Layout.Container pad={props.pad} gap={props.pad}>
+            {props.children}
+          </Layout.Container>
         </Collapse.Panel>
       </StyledCollapse>
     </TrackingScope>
diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx
index dc4c66fc6..f6f06c716 100644
--- a/docs/extending/flipper-plugin.mdx
+++ b/docs/extending/flipper-plugin.mdx
@@ -810,9 +810,21 @@ See `View > Flipper Style Guide` inside the Flipper application for more details
 ### ElementSearchResultSet
 ### ElementsInspectorElement
 ### ElementsInspectorProps
+
 ### Panel
 
-Coming soon.
+A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.
+
+For demos and property documentation see the 'Flipper style guide'.
+
+### Tabs
+### Tab
+
+The `Tabs` and `Tab` component re-expose the TabControl as provided by Antd, and support the same properties. See [official docs](https://ant.design/components/tabs/).
+
+The following additional properties are supported:
+
+* `grow`. If set, the tab control will use all available vertical space. By default `false`.
 
 ### DataList