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

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:

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>

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