From 923d44ef40a966f8137403a8384c3da4fa10738c Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 29 Apr 2021 07:37:41 -0700
Subject: [PATCH] Some mental model explanation on grow / scrollable props

Summary: ^

Reviewed By: jknoxville

Differential Revision: D28059213

fbshipit-source-id: d4bc09d5765ac667e73a9d8c97aaa7f266d77f84
---
 .../app/src/sandy-chrome/SandyDesignSystem.tsx    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx
index 3f06c9d90..f28da20d8 100644
--- a/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx
+++ b/desktop/app/src/sandy-chrome/SandyDesignSystem.tsx
@@ -55,6 +55,21 @@ export default function SandyDesignSystem() {
               Avoid using <code>width / height: 100%</code>, use{' '}
               <code>Layout.Container</code> instead.
             </li>
+            <li>
+              In general, components that have a <code>grow</code> property will
+              grow to use the full height of their <em>parents</em> if{' '}
+              <code>true</code>. In contrast, if grow is set to{' '}
+              <code>false</code> components will use their natural size, based
+              on their <em>children</em>.
+            </li>
+            <li>
+              The other important property here is <em>scrollable</em>. If an
+              element supports this property, setting it will imply{' '}
+              <code>grow</code>, and the element will show a scrollbar if
+              needed. Setting <code>scrollabe</code> to <code>false</code>{' '}
+              causes the element to always use its natural size, growing or
+              shrinking based on the contents rather than the parent.
+            </li>
           </ul>
         </Card>
         <Card title="Colors" bordered={false}>