Show extended interfaces in docs page (elastic#3941)

* Add all exported types * Add some common interfaces * Add extends to interfaces * Remove comment * Fixed issue when extendedInterfaces is empty * Use sass variables and remove font weight * Include HTMLElement in Props tab if not superseded by another element * Fixed missing key issue * Fix display of extends (including mobile) Co-authored-by: Chandler Prall <[email protected]> Co-authored-by: cchaos <[email protected]>
snide · Aug 20, 2020 · e4833f3 · e4833f3
1 parent 8d39b29
commit e4833f3
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 12 deletions.
diff --git a/scripts/babel/react-docgen-typescript.js b/scripts/babel/react-docgen-typescript.js
@@ -103,7 +103,7 @@ module.exports = function({ types }) {
           if (docgenResults.length !== 0) {
             docgenResults.forEach(function(docgenResult) {
               const exportName = docgenResult.displayName;
-              docgenResult.extends = componentExtends;
+              docgenResult.extendedInterfaces = componentExtends;
               path.node.body.push(
                 template.default.ast(`          
               try{  
@@ -247,11 +247,8 @@ function filterProp(
   if (prop.parent) {
     //Check if props are extended from other node module
     if (whiteListedParent.includes(prop.parent.name)) return true;
-    if (
-      prop.parent.name === 'DOMAttributes' &&
-      !componentExtends.includes('DOMAttributes')
-    ) {
-      componentExtends.push('DOMAttributes');
+    if (!componentExtends.includes(prop.parent.name)) {
+      componentExtends.push(prop.parent.name);
     }
     if (prop.name.includes(whiteListedProps)) {
       return true;

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -19,12 +19,16 @@ import {
   EuiTitle,
   EuiLink,
   EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components';
 
 import { CodeSandboxLink } from '../codesandbox';
 
 import { cleanEuiImports } from '../../services';
 
+import { extendedTypesInfo } from './guide_section_extends';
+
 export const markup = text => {
   const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
   return text.split('\n').map(token => {
@@ -54,7 +58,7 @@ export const markup = text => {
       }
       return token;
     });
-    return [...values, <br />];
+    return [...values, <br key="lineBreak" />];
   });
 };
 
@@ -289,7 +293,7 @@ export class GuideSection extends Component {
     const docgenInfo = Array.isArray(component.__docgenInfo)
       ? component.__docgenInfo[0]
       : component.__docgenInfo;
-    const { description, props } = docgenInfo;
+    const { description, props, extendedInterfaces } = docgenInfo;
 
     if (!props && !description) {
       return;
@@ -360,7 +364,22 @@ export class GuideSection extends Component {
       return <EuiTableRow key={propName}>{cells}</EuiTableRow>;
     });
 
-    const title = <span id={componentName}>{componentName}</span>;
+    const extendedTypes = extendedInterfaces
+      ? extendedInterfaces.filter(type => !!extendedTypesInfo[type])
+      : [];
+    // if there is an HTMLAttributes type present among others, remove HTMLAttributes
+    if (extendedTypes.includes('HTMLAttributes') && extendedTypes.length > 1) {
+      const htmlAttributesIndex = extendedTypes.indexOf('HTMLAttributes');
+      extendedTypes.splice(htmlAttributesIndex, 1);
+    }
+    const extendedTypesElements = extendedTypes.map((type, index) => (
+      <Fragment key={`extendedTypeValue-${extendedTypesInfo[type].name}`}>
+        <EuiLink href={extendedTypesInfo[type].url}>
+          {extendedTypesInfo[type].name}
+        </EuiLink>
+        {index + 1 < extendedTypes.length && ', '}
+      </Fragment>
+    ));
 
     let descriptionElement;
 
@@ -405,9 +424,23 @@ export class GuideSection extends Component {
 
     return [
       <EuiSpacer size="m" key={`propsSpacer-${componentName}-1`} />,
-      <EuiTitle size="s" key={`propsName-${componentName}`}>
-        <h3>{title}</h3>
-      </EuiTitle>,
+      <EuiFlexGroup
+        key={`propsName-${componentName}`}
+        alignItems="baseline"
+        wrap>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h3>{componentName}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        {extendedTypesElements.length > 0 && (
+          <EuiFlexItem>
+            <EuiText size="s">
+              <p>[ extends {extendedTypesElements} ]</p>
+            </EuiText>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>,
       <EuiSpacer size="s" key={`propsSpacer-${componentName}-2`} />,
       descriptionElement,
       table,

diff --git a/src-docs/src/components/guide_section/guide_section_extends.js b/src-docs/src/components/guide_section/guide_section_extends.js
@@ -0,0 +1,27 @@
+export const extendedTypesInfo = {
+  // HTMLAttributes is removed from display if any of the following elements also exist
+  HTMLAttributes: {
+    name: 'HTMLElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement',
+  },
+  SelectHTMLAttributes: {
+    name: 'HTMLSelectElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement',
+  },
+  TextareaHTMLAttributes: {
+    name: 'HTMLTextAreaElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement',
+  },
+  InputHTMLAttributes: {
+    name: 'HTMLInputElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement',
+  },
+  AnchorHTMLAttributes: {
+    name: 'HTMLAnchorElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement',
+  },
+  ButtonHTMLAttributes: {
+    name: 'HTMLButtonElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement',
+  },
+};