Dropdown, Module, Table: use autogen descriptions for subcomponents (#…

…1950)
pinterest · Feb 22, 2022 · 4f840d7 · 4f840d7
1 parent 024bdc7
commit 4f840d7
Show file tree

Hide file tree

Showing 16 changed files with 174 additions and 107 deletions.
diff --git a/docs/pages/dropdown.js b/docs/pages/dropdown.js
@@ -77,7 +77,9 @@ export default function DropdownPage({
         );
       }`}
       />
+
       <GeneratedPropTable generatedDocGen={generatedDocGen.Dropdown} />
+
       <MainSection name="Usage guidelines">
         <MainSection.Subsection columns={2}>
           <MainSection.Card
@@ -102,6 +104,7 @@ export default function DropdownPage({
           />
         </MainSection.Subsection>
       </MainSection>
+
       <MainSection name="Best practices">
         <MainSection.Subsection columns={2}>
           <MainSection.Card
@@ -545,25 +548,43 @@ function TruncationDropdownExample() {
           />
         </MainSection.Subsection>
       </MainSection>
-      <MainSection name="Subcomponents" />
-      <GeneratedPropTable
-        Component={Dropdown?.Item}
-        name="Dropdown.Item"
-        id="Dropdown.Item"
-        generatedDocGen={generatedDocGen.DropdownItem}
-      />
-      <GeneratedPropTable
-        Component={Dropdown?.Link}
-        name="Dropdown.Link"
-        id="Dropdown.Link"
-        generatedDocGen={generatedDocGen.DropdownLink}
-      />
-      <GeneratedPropTable
-        Component={Dropdown?.Section}
-        name="Dropdown.Section"
-        id="Dropdown.Section"
-        generatedDocGen={generatedDocGen.DropdownSection}
-      />
+
+      <MainSection name="Subcomponents">
+        <MainSection.Subsection
+          title={generatedDocGen?.DropdownItem?.displayName}
+          description={generatedDocGen?.DropdownItem?.description}
+        >
+          <GeneratedPropTable
+            Component={Dropdown?.Item}
+            name="Dropdown.Item"
+            id="Dropdown.Item"
+            generatedDocGen={generatedDocGen.DropdownItem}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.DropdownLink?.displayName}
+          description={generatedDocGen?.DropdownLink?.description}
+        >
+          <GeneratedPropTable
+            Component={Dropdown?.Link}
+            name="Dropdown.Link"
+            id="Dropdown.Link"
+            generatedDocGen={generatedDocGen.DropdownLink}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.DropdownSection?.displayName}
+          description={generatedDocGen?.DropdownSection?.description}
+        >
+          <GeneratedPropTable
+            Component={Dropdown?.Section}
+            name="Dropdown.Section"
+            id="Dropdown.Section"
+            generatedDocGen={generatedDocGen.DropdownSection}
+          />
+        </MainSection.Subsection>
+      </MainSection>
+
       <MainSection name="Variants">
         <MainSection.Subsection title="Types of items" columns={2}>
           <MainSection.Card

diff --git a/docs/pages/module.js b/docs/pages/module.js
@@ -1,6 +1,5 @@
 // @flow strict
 import { type Node } from 'react';
-import { Module } from 'gestalt';
 import GeneratedPropTable from '../components/GeneratedPropTable.js';
 import MainSection from '../components/MainSection.js';
 import Page from '../components/Page.js';
@@ -45,12 +44,16 @@ export default function DocsPage({
       </MainSection>
 
       <MainSection name="Subcomponents">
-        <GeneratedPropTable
-          Component={Module.Expandable}
-          name="Module.Expandable"
-          id="Module.Expandable"
-          generatedDocGen={generatedDocGen.ModuleExpandable}
-        />
+        <MainSection.Subsection
+          title={generatedDocGen?.ModuleExpandable?.displayName}
+          description={generatedDocGen?.ModuleExpandable?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.ModuleExpandable}
+            id="Module.Expandable"
+            name="Module.Expandable"
+          />
+        </MainSection.Subsection>
       </MainSection>
 
       <MainSection name="Variants">

diff --git a/docs/pages/table.js b/docs/pages/table.js
@@ -1,6 +1,5 @@
 // @flow strict
 import { type Node } from 'react';
-import { Table } from 'gestalt';
 import PageHeader from '../components/PageHeader.js';
 import MainSection from '../components/MainSection.js';
 import Page from '../components/Page.js';
@@ -81,7 +80,9 @@ export default function TablePage({
 </Table>
 `}
       />
+
       <GeneratedPropTable generatedDocGen={generatedDocGen.Table} />
+
       <MainSection name="Usage guidelines">
         <MainSection.Subsection columns={2}>
           <MainSection.Card
@@ -105,6 +106,7 @@ export default function TablePage({
           />
         </MainSection.Subsection>
       </MainSection>
+
       <MainSection name="Best practices">
         <MainSection.Subsection title="Style" columns={2}>
           <MainSection.Card
@@ -1508,60 +1510,94 @@ function Example() {
           />
         </MainSection.Subsection>
       </MainSection>
+
       <MainSection name="Subcomponents">
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableHeader}
-          Component={Table?.Header}
-          name="Table.Header"
-          id="Table.Header"
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableBody}
-          Component={Table?.Body}
-          name="Table.Body"
-          id="Table.Body"
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableFooter}
-          Component={Table?.Footer}
-          name="Table.Footer"
-          id="Table.Footer"
-        />
+        <MainSection.Subsection
+          title={generatedDocGen?.TableHeader?.displayName}
+          description={generatedDocGen?.TableHeader?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableHeader}
+            name="Table.Header"
+            id="Table.Header"
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableBody?.displayName}
+          description={generatedDocGen?.TableBody?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableBody}
+            name="Table.Body"
+            id="Table.Body"
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableFooter?.displayName}
+          description={generatedDocGen?.TableFooter?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableFooter}
+            name="Table.Footer"
+            id="Table.Footer"
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableCell?.displayName}
+          description={generatedDocGen?.TableCell?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableCell}
+            name="Table.Cell"
+            id="Table.Cell"
+            excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableHeaderCell?.displayName}
+          description={generatedDocGen?.TableHeaderCell?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableHeaderCell}
+            name="Table.HeaderCell"
+            id="Table.HeaderCell"
+            excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableSortableHeaderCell?.displayName}
+          description={generatedDocGen?.TableSortableHeaderCell?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableSortableHeaderCell}
+            name="Table.SortableHeaderCell"
+            id="Table.SortableHeaderCell"
+            excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection
+          title={generatedDocGen?.TableRow?.displayName}
+          description={generatedDocGen?.TableRow?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableRow}
+            name="Table.Row"
+            id="Table.Row"
+          />
+        </MainSection.Subsection>
 
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableCell}
-          Component={Table?.Cell}
-          name="Table.Cell"
-          id="Table.Cell"
-          excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableHeaderCell}
-          Component={Table?.HeaderCell}
-          name="Table.HeaderCell"
-          id="Table.HeaderCell"
-          excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableSortableHeaderCell}
-          Component={Table?.SortableHeaderCell}
-          name="Table.SortableHeaderCell"
-          id="Table.SortableHeaderCell"
-          excludeProps={['shouldBeSticky', 'previousTotalWidth', 'shouldHaveShadow']}
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableRow}
-          Component={Table?.Row}
-          name="Table.Row"
-          id="Table.Row"
-        />
-        <GeneratedPropTable
-          generatedDocGen={generatedDocGen.TableRowExpandable}
-          Component={Table?.RowExpandable}
-          name="Table.RowExpandable"
-          id="Table.RowExpandable"
-        />
+        <MainSection.Subsection
+          title={generatedDocGen?.TableRowExpandable?.displayName}
+          description={generatedDocGen?.TableRowExpandable?.description}
+        >
+          <GeneratedPropTable
+            generatedDocGen={generatedDocGen.TableRowExpandable}
+            name="Table.RowExpandable"
+            id="Table.RowExpandable"
+          />
+        </MainSection.Subsection>
       </MainSection>
+
       <MainSection name="Variants">
         <MainSection.Subsection title="Sticky header">
           <MainSection.Card

diff --git a/packages/gestalt/src/Dropdown.js b/packages/gestalt/src/Dropdown.js
@@ -17,7 +17,7 @@ const KEYS = {
   ENTER: 0,
 };
 
-const dropdownItemDisplayNames = ['DropdownItem', 'DropdownLink'];
+const dropdownItemDisplayNames = ['Dropdown.Item', 'Dropdown.Link'];
 
 function getChildrenOptions(childrenArray) {
   return childrenArray.reduce((accumulatedChildren, currentChild) => {
@@ -26,7 +26,7 @@ function getChildrenOptions(childrenArray) {
       type: { displayName },
     } = currentChild;
 
-    if (currentItemChildren && displayName === 'DropdownSection') {
+    if (currentItemChildren && displayName === 'Dropdown.Section') {
       return [
         ...accumulatedChildren,
         ...(Array.isArray(currentItemChildren) ? currentItemChildren : [currentItemChildren]),
@@ -39,7 +39,7 @@ function getChildrenOptions(childrenArray) {
 
     // eslint-disable-next-line no-console
     console.error(
-      'Only children of type DropdownItem, DropdownLink, or DropdownSection are allowed.',
+      'Only children of type Dropdown.Item, Dropdown.Link, or Dropdown.Section are allowed.',
     );
 
     return [...accumulatedChildren];
@@ -66,7 +66,7 @@ const renderChildrenWithIndex = (childrenArray) => {
     const subSectionChildren = child.props.children;
     const childDisplayName = child.type.displayName;
 
-    if (subSectionChildren && childDisplayName === 'DropdownSection') {
+    if (subSectionChildren && childDisplayName === 'Dropdown.Section') {
       const sectionChildrenArray = Children.toArray(subSectionChildren);
       const childWithIndex = cloneElement(child, {
         children: renderDropdownItemsWithIndex(sectionChildrenArray, numItemsRendered),

diff --git a/packages/gestalt/src/DropdownItem.js b/packages/gestalt/src/DropdownItem.js
@@ -58,8 +58,7 @@ type Props = {|
 |};
 
 /**
- * Subcomponent of [Dropdown](https://gestalt.pinterest.systems/dropdown).
-  Use [Dropdown.Item](https://gestalt.pinterest.systems/dropdown#Types-of-items) for action & selection, when the Dropdown item triggers an action or makes a selection.
+ * Use [Dropdown.Item](https://gestalt.pinterest.systems/dropdown#Dropdown.Item) for action & selection, when the Dropdown item triggers an action or selects an option.
  */
 export default function DropdownItem({
   badgeText,
@@ -96,4 +95,4 @@ export default function DropdownItem({
 }
 
 // displayName is necessary for children identification in Dropdown
-DropdownItem.displayName = 'DropdownItem';
+DropdownItem.displayName = 'Dropdown.Item';
diff --git a/packages/gestalt/src/DropdownLink.js b/packages/gestalt/src/DropdownLink.js
@@ -48,8 +48,7 @@ type Props = {|
 |};
 
 /**
- * Subcomponent of [Dropdown](https://gestalt.pinterest.systems/dropdown).
-   Use [Dropdown.Link](https://gestalt.pinterest.systems/dropdown#Types-of-items) for navigation, when the Dropdown item navigates to a new page.
+ * Use [Dropdown.Link](https://gestalt.pinterest.systems/dropdownDropdown.Link) for navigation, when the Dropdown item navigates to a new page.
  */
 export default function DropdownLink({
   badgeText,
@@ -88,4 +87,4 @@ export default function DropdownLink({
 }
 
 // displayName is necessary for children identification in Dropdown
-DropdownLink.displayName = 'DropdownLink';
+DropdownLink.displayName = 'Dropdown.Link';
diff --git a/packages/gestalt/src/DropdownSection.js b/packages/gestalt/src/DropdownSection.js
@@ -16,8 +16,7 @@ type Props = {|
 |};
 
 /**
- * Subcomponent of [Dropdown](https://gestalt.pinterest.systems/dropdown).
-  Use [Dropdown.Section](https://gestalt.pinterest.systems/dropdown#Sections) to create hierarchy within a single Dropdown.
+ * Use [Dropdown.Section](https://gestalt.pinterest.systems/dropdown#Dropdown.Section) to create hierarchy within a single Dropdown.
  */
 export default function DropdownSection({ label, children }: Props): Node {
   return (
@@ -31,4 +30,4 @@ export default function DropdownSection({ label, children }: Props): Node {
 }
 
 // displayName is necessary for children identification in Dropdown
-DropdownSection.displayName = 'DropdownSection';
+DropdownSection.displayName = 'Dropdown.Section';
diff --git a/packages/gestalt/src/ModuleExpandable.js b/packages/gestalt/src/ModuleExpandable.js
@@ -48,7 +48,6 @@ type Props = {|
 |};
 
 /**
- * Standalone subcomponent of [Module](https://gestalt.pinterest.systems/module).
  * Use [Module.Expandable](https://gestalt.pinterest.systems/module) if your module requires expanding and collapsing content.
  */
 export default function ModuleExpandable({
@@ -106,3 +105,5 @@ export default function ModuleExpandable({
     </Box>
   );
 }
+
+ModuleExpandable.displayName = 'Module.Expandable';
diff --git a/packages/gestalt/src/TableBody.js b/packages/gestalt/src/TableBody.js
@@ -10,9 +10,10 @@ type Props = {|
 |};
 
 /**
- * Subcomponent of [Table](https://gestalt.pinterest.systems/table).
- * Use [Table.Body](https://gestalt.pinterest.systems/table#Table.BodyProps) to group the body content in Table.
+ * Use [Table.Body](https://gestalt.pinterest.systems/table#Table.Body) to group the body content in Table.
  */
 export default function TableBody({ children }: Props): Node {
   return <tbody className={styles.tbody}>{children}</tbody>;
 }
+
+TableBody.displayName = 'Table.Body';