Convert EuiDescribedFormGroup to typeScript (#2810)

* Convert described form group to typeScript * Removing unnecessary title prop * Improving code based on review * Update src/components/form/described_form_group/described_form_group.tsx Co-Authored-By: Greg Thompson <[email protected]> * Update src/components/form/described_form_group/described_form_group.tsx Co-Authored-By: Greg Thompson <[email protected]> * Update src/components/form/described_form_group/described_form_group.tsx Co-Authored-By: Greg Thompson <[email protected]> Co-authored-by: Greg Thompson <[email protected]>
elastic · Feb 3, 2020 · a83c853 · a83c853
1 parent 52a8fc3
commit a83c853
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 167 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `cheer` glyph to `EuiIcon` ([#2814](https://github.com/elastic/eui/pull/2814))
 - Added `tableCaption` prop to `EuiBasicTable` and improved the default one ([#2782](https://github.com/elastic/eui/pull/2782))
+- Converted `EuiDescribedFormGroup` to TypeScript ([#2810](https://github.com/elastic/eui/pull/2810))
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))

diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx
@@ -28,6 +28,7 @@ const gutterSizeToClassNameMap = {
 };
 
 export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+export type EuiFlexGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
 
 const alignItemsToClassNameMap = {
   stretch: null,

diff --git a/src/components/flex/index.ts b/src/components/flex/index.ts
@@ -1,4 +1,4 @@
-export { EuiFlexGroup } from './flex_group';
+export { EuiFlexGroup, EuiFlexGroupGutterSize } from './flex_group';
 
 export { EuiFlexGrid } from './flex_grid';
 

diff --git a/...shots__/described_form_group.test.js.snap → ...hots__/described_form_group.test.tsx.snap b/...shots__/described_form_group.test.js.snap → ...hots__/described_form_group.test.tsx.snap
@@ -6,14 +6,11 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -38,9 +35,7 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -119,14 +114,11 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
   aria-label="aria-label"
   className="testClass1 testClass2"
   data-test-subj="test subject string"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -151,9 +143,7 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -214,13 +204,11 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
   data-test-subj="test subject string"
   description="Test description"
   fullWidth={true}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -245,9 +233,7 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -327,14 +313,12 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
   gutterSize="s"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -359,9 +343,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -441,8 +423,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
@@ -473,9 +453,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"
@@ -555,14 +533,11 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
   className="testClass1 testClass2"
   data-test-subj="test subject string"
   description="Test description"
-  fullWidth={false}
-  gutterSize="l"
   title={
     <h3>
       Title
     </h3>
   }
-  titleSize="xs"
 >
   <EuiInnerText>
     <fieldset
@@ -587,9 +562,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
             <div
               className="euiFlexItem"
             >
-              <span
-                title="Title"
-              >
+              <span>
                 <EuiTitle
                   aria-hidden="true"
                   className="euiDescribedFormGroup__title"

diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js
diff --git a/...d_form_group/described_form_group.test.js → ..._form_group/described_form_group.test.tsx b/...d_form_group/described_form_group.test.js → ..._form_group/described_form_group.test.tsx
@@ -65,15 +65,8 @@ describe('EuiDescribedFormGroup', () => {
     });
 
     test('gutterSize is rendered', () => {
-      const describedFormGroupProps = {
-        gutterSize: 's',
-      };
-
       const component = mount(
-        <EuiDescribedFormGroup
-          {...requiredProps}
-          {...props}
-          {...describedFormGroupProps}>
+        <EuiDescribedFormGroup gutterSize="s" {...requiredProps} {...props}>
           <EuiFormRow>
             <input />
           </EuiFormRow>
@@ -84,15 +77,8 @@ describe('EuiDescribedFormGroup', () => {
     });
 
     test('titleSize is rendered', () => {
-      const describedFormGroupProps = {
-        titleSize: 'l',
-      };
-
       const component = mount(
-        <EuiDescribedFormGroup
-          {...requiredProps}
-          {...props}
-          {...describedFormGroupProps}>
+        <EuiDescribedFormGroup titleSize="l" {...requiredProps} {...props}>
           <EuiFormRow>
             <input />
           </EuiFormRow>