Merge branch 'master' into form-row-label-extra

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `numActiveFilters` prop to `EuiFilterButton` ([#1589](https://github.com/elastic/eui/pull/1589))
 - Updated style of `EuiFilterButton` to match `EuiFacetButton` ([#1589](https://github.com/elastic/eui/pull/1589))
 - Added `size` and `color` props to `EuiNotificationBadge` ([#1589](https://github.com/elastic/eui/pull/1589))
+- Allow `EuiDescribedFormGroup` to exist as a description-only row ([#1522](https://github.com/elastic/eui/pull/1522))
 - Added `type` prop for `EuiFormLabel` for the option to make it a `legend` ([#1613](https://github.com/elastic/eui/pull/1613))
 - Added `labelAppend` and `labelType` props to `EuiFormRow` ([#1613](https://github.com/elastic/eui/pull/1613))
 - Aligned text styles of table headers and form labels ([#1613](https://github.com/elastic/eui/pull/1613))
@@ -14,6 +15,9 @@
 
 - `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462))
 - Adds missing `hasActiveFilters` prop for `EuiFilterButton` type and fixes `onChange` signature for `EuiButtonGroup` ([#1603](https://github.com/elastic/eui/pull/1603))
+- Included `react-datepicker` TS types in EUI itself to avoid outside dependency ([#1618](https://github.com/elastic/eui/pull/1618))
+- Prevent `EuiGlobalToastList` from attempting calculations on `null` DOM elements ([#1606](https://github.com/elastic/eui/pull/1606))
+- Fixed `EuiFormRow` errors from the possibility of having duplicate `key` values ([#1522](https://github.com/elastic/eui/pull/1522)) 
 
 **Breaking changes**
 

package.json

@@ -79,7 +79,6 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^24.0.6",
     "@types/react": "^16.8.4",
-    "@types/react-datepicker": "1.8.0",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",

scripts/babel/proptypes-from-ts-props/index.js

@@ -1136,16 +1136,18 @@ module.exports = function propTypesFromTypeScript({ types }) {
               const { left, right } = idTypeAnnotation.typeAnnotation.typeName;
 
               if (left.name === 'React') {
-                if (right.name === 'SFC') {
+                const rightName = right.name;
+                if (rightName === 'SFC' || rightName === 'FunctionComponent') {
                   processComponentDeclaration(idTypeAnnotation.typeAnnotation.typeParameters.params[0], nodePath, state);
                   fileCodeNeedsUpdating = true;
                 } else {
                   // throw new Error(`Cannot process annotation id React.${right.name}`);
                 }
               }
             } else if (idTypeAnnotation.typeAnnotation.typeName.type === 'Identifier') {
-              if (idTypeAnnotation.typeAnnotation.typeName.name === 'SFC') {
-                if (state.get('importsFromReact').has('SFC')) {
+              const typeName = idTypeAnnotation.typeAnnotation.typeName.name;
+              if (typeName === 'SFC' || typeName === 'FunctionComponent') {
+                if (state.get('importsFromReact').has(typeName)) {
                   processComponentDeclaration(idTypeAnnotation.typeAnnotation.typeParameters.params[0], nodePath, state);
                   fileCodeNeedsUpdating = true;
                 }

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -1976,6 +1976,52 @@ const FooComponent = () => {
   return <div>Hello World</div>;
 };
 
+FooComponent.propTypes = {
+  foo: PropTypes.string.isRequired,
+  bar: PropTypes.number
+};`);
+      });
+
+      it('annotates FunctionComponent components', () => {
+        const result = transform(
+          `
+import React, { FunctionComponent } from 'react';
+const FooComponent: FunctionComponent<{foo: string, bar?: number}> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.string.isRequired,
+  bar: PropTypes.number
+};`);
+      });
+
+      it('annotates React.FunctionComponent components', () => {
+        const result = transform(
+          `
+import React from 'react';
+const FooComponent: React.FunctionComponent<{foo: string, bar?: number}> = () => {
+  return (<div>Hello World</div>);
+}`,
+          babelOptions
+        );
+
+        expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
 FooComponent.propTypes = {
   foo: PropTypes.string.isRequired,
   bar: PropTypes.number

scripts/dtsgenerator.js

@@ -54,7 +54,7 @@ const generator = dtsGenerator({
         params.importedModuleId,
         {
           basedir: importFromBaseDir,
-          extensions: ['.ts', '.tsx'],
+          extensions: ['.ts', '.tsx', '.d.ts'],
         }
       );
 

src-docs/src/routes.js

@@ -31,7 +31,7 @@ import SassGuidelines
 import TextScales
   from './views/text_scaling/text_scaling_sandbox';
 
-import ToastGuidelines
+import { ToastGuidelines }
   from './views/guidelines/toasts';
 
 import WritingGuidelines

src-docs/src/views/accordion/accordion_example.js

@@ -43,7 +43,7 @@ export const AccordionExample = {
         <p>
           <EuiCode>EuiFlexGroup</EuiCode>&apos;s negative margins can sometimes
           create scrollbars within <EuiCode>EuiAccordion</EuiCode> because of
-          the overflow tricks the used to hide content. If you run into this issue make
+          the overflow tricks used to hide content. If you run into this issue make
           sure your <EuiCode>paddingSize</EuiCode> prop is large enough to account for
           the <EuiCode>gutterSize</EuiCode> of any nested flex groups.
         </p>
@@ -66,7 +66,7 @@ export const AccordionExample = {
         <p>
           <EuiCode>EuiAccordion</EuiCode> is purposely bare so that you can
           put whatever styling you need on it (see the accordion form example). The only
-          styling we force on you in the caret, which gives the user an understaning
+          styling we force on you is the caret, which gives the user an understanding
           that the content will open up.
         </p>
         <p>
@@ -75,8 +75,8 @@ export const AccordionExample = {
           based on the height of those children.
         </p>
         <p>
-          For styling needs. Classes can be individually applied with
-          <EuiCode>className</EuiCode> (for the accordion entire),
+          For styling needs, classes can be individually applied with
+          <EuiCode>className</EuiCode> (for the entire accordion),
           and <EuiCode>buttonClassName</EuiCode> (for the clickable area).
         </p>
       </div>
@@ -98,7 +98,7 @@ export const AccordionExample = {
         displayed on the right of any accordion. Usually this is a delete or
         button, but can be anything. Note that this action is separate from
         the click state that expands the accordion. This is needed to make
-        it accessibile.
+        it accessible.
       </p>
     ),
     demo: <AccordionExtra />,

src-docs/src/views/guidelines/modals.js

@@ -98,7 +98,7 @@ export default () => (
       heading=""
       description="A modal can gather input necessary for continuing the current workflow.
       This type of modal works best for a short, focused task.
-      Use input modals sparingly—they interrput the user's workflow.
+      Use input modals sparingly—they interrupt the user's workflow.
       "
     >
 
@@ -204,8 +204,8 @@ export default () => (
 
     <GuideRule
       heading=""
-      description="The most common use of modal in the EUI Framework is
-      to cofirm a user action.
+      description="The most common use of modals in the EUI Framework is
+      to confirm a user action.
       This modal should start with a question, give
       users enough information to make a decision,
       and restate the action in the button label."