Added DynamicSizeList API page

website/src/App.js

@@ -5,6 +5,7 @@ import { SubMenu } from './components/SubMenu';
 
 // Routes
 import DynamicSizeListExample from './routes/examples/DynamicSizeList';
+import DynamicSizeListApi from './routes/api/DynamicSizeList';
 import FixedSizeGridApi from './routes/api/FixedSizeGrid';
 import FixedSizeGridExample from './routes/examples/FixedSizeGrid';
 import FixedSizeListApi from './routes/api/FixedSizeList';
@@ -105,6 +106,11 @@ const API_ROUTES = [
     title: 'VariableSizeList',
     component: VariableSizeListApi,
   },
+  {
+    path: '/api/DynamicSizeList',
+    title: 'DynamicSizeList',
+    component: DynamicSizeListApi,
+  },
   {
     path: '/api/FixedSizeGrid',
     title: 'FixedSizeGrid',

website/src/components/ComponentApi.js

@@ -71,6 +71,11 @@ export default class ComponentApi extends Component<Props, State> {
             {props.filter(prop => showAll || prop.isRequired).map(prop => (
               <Fragment key={prop.name}>
                 <dt className={styles.ComponentApiPropType}>
+                  {prop.showWarning ? (
+                    <svg className={styles.WarningIcon} viewBox="0 0 24 24">
+                      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                  ) : null}
                   {prop.name}: {prop.type}{' '}
                   {prop.defaultValue !== undefined
                     ? ` = ${prop.defaultValue}`
@@ -90,6 +95,11 @@ export default class ComponentApi extends Component<Props, State> {
             {methods.map(method => (
               <Fragment key={method.signature}>
                 <dt className={styles.ComponentApiPropType}>
+                  {method.showWarning ? (
+                    <svg className={styles.WarningIcon} viewBox="0 0 24 24">
+                      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                  ) : null}
                   {method.signature}
                 </dt>
                 <dd className={styles.ComponentApiPropDefinition}>

website/src/components/ComponentApi.module.css

@@ -37,6 +37,8 @@
 }
 
 .ComponentApiPropType {
+  display: flex;
+  align-items: center;
   line-height: 2rem;
 }
 
@@ -49,3 +51,10 @@
   margin-left: 1rem;
   margin-bottom: 1.5rem;
 }
+
+.WarningIcon {
+  width: 2rem;
+  height: 2rem;
+  margin-right: 0.5rem;
+  fill: #ff5370;
+}

website/src/routes/api/DynamicSizeList.js

@@ -0,0 +1,66 @@
+import React, { Fragment } from 'react';
+import { NavHashLink as Link } from 'react-router-hash-link';
+import ComponentApi from '../../components/ComponentApi';
+
+export default () => (
+  <ComponentApi
+    methods={METHODS}
+    methodsIntro={
+      <p>
+        This component has the same methods as{' '}
+        <Link to="/api/FixedSizeList#methods">
+          <code>FixedSizeList</code>
+        </Link>, but with the following exceptions:
+      </p>
+    }
+    name="DynamicSizeList"
+    props={PROPS}
+    propsIntro={
+      <p>
+        This component has the same props as{' '}
+        <Link to="/api/FixedSizeList#props">
+          <code>FixedSizeList</code>
+        </Link>, but with the following exceptions:
+      </p>
+    }
+  />
+);
+
+const PROPS = [
+  {
+    description: (
+      <Fragment>
+        <p>
+          Items within a dynamic list are automatically measured after
+          rendering. This means that no <code>itemSize</code> prop is required.
+        </p>
+        <p>
+          <strong>The list will error if you accidentally supply one.</strong>
+        </p>
+      </Fragment>
+    ),
+    name: 'itemSize',
+    showWarning: true,
+    type: 'number',
+  },
+];
+
+const METHODS = [
+  {
+    description: (
+      <Fragment>
+        <p>
+          Dynamic lists do not support scrolling to items that have not yet been
+          rendered.
+        </p>
+        <p>
+          <strong>
+            Attempting to scroll to such an item will log a console warning.
+          </strong>
+        </p>
+      </Fragment>
+    ),
+    signature: 'scrollToItem(index: number, align: string = "auto"): void',
+    showWarning: true,
+  },
+];

website/src/routes/examples/shared.module.css

@@ -48,7 +48,6 @@
   font-size: 1.15rem;
   margin: 0 2rem 2rem 0;
   border-radius: 0.25rem;
-  background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.5) 0px 0.5rem 1.5rem;
   color: #fff;
   background-color: #ff5370;