fix(Aux): remove Aux usage

removing the Aux component to fully support react >=15
treebohotels · Feb 5, 2018 · 931b32b · 931b32b
1 parent 570fa05
commit 931b32b
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 54 deletions.
diff --git a/src/components/Aux/Aux.js b/src/components/Aux/Aux.js
diff --git a/src/components/Aux/index.js b/src/components/Aux/index.js
diff --git a/src/components/Button/Button.story.js b/src/components/Button/Button.story.js
@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, text, select } from '@storybook/addon-knobs';
 import theme from '../../theme';
-import Aux from '../Aux';
 import Button from './Button';
 
 storiesOf('Button', module)
@@ -21,7 +20,7 @@ storiesOf('Button', module)
     </Button>
   ))
   .add('kinds', () => (
-    <Aux>
+    <div>
       <Button kind="solid">
         Solid Button
       </Button>
@@ -33,10 +32,10 @@ storiesOf('Button', module)
       <Button kind="transparent">
         Transparent Button
       </Button>
-    </Aux>
+    </div>
   ))
   .add('shapes', () => (
-    <Aux>
+    <div>
       <Button shape="default">
         Default Button
       </Button>
@@ -52,10 +51,10 @@ storiesOf('Button', module)
       <Button shape="circular">
         CB
       </Button>
-    </Aux>
+    </div>
   ))
   .add('sizes', () => (
-    <Aux>
+    <div>
       <Button size="small">
         Small Button
       </Button>
@@ -67,7 +66,7 @@ storiesOf('Button', module)
       <Button size="large">
         Large Button
       </Button>
-    </Aux>
+    </div>
   ))
   .add('block', () => (
     <Button block>

diff --git a/src/components/Chip/Chip.story.js b/src/components/Chip/Chip.story.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select } from '@storybook/addon-knobs';
 import theme from '../../theme';
-import Aux from '../Aux';
 import Chip from './Chip';
 
 storiesOf('Chip', module)
@@ -16,24 +15,24 @@ storiesOf('Chip', module)
     </Chip>
   ))
   .add('kinds', () => (
-    <Aux>
+    <div>
       <Chip>
         outlined
       </Chip>
       <br /><br />
       <Chip kind="solid">
         solid
       </Chip>
-    </Aux>
+    </div>
   ))
   .add('size', () => (
-    <Aux>
+    <div>
       <Chip>
         regular
       </Chip>
       <br /><br />
       <Chip size="small">
         small
       </Chip>
-    </Aux>
+    </div>
   ));
diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
 import reactChildrenByType from '../../utils/reactChildrenByType';
-import Aux from '../Aux';
+import Flex from '../Flex';
 import DropdownTrigger from './DropdownTrigger';
 import DropdownContent from './DropdownContent';
 
@@ -34,7 +34,7 @@ class Dropdown extends React.Component {
     const dropdownChildrenByType = reactChildrenByType(children);
 
     return (
-      <Aux>
+      <Flex display="inline-block">
         {
           React.cloneElement(dropdownChildrenByType[DropdownTrigger], {
             onClick: this.open,
@@ -47,7 +47,7 @@ class Dropdown extends React.Component {
         >
           {dropdownChildrenByType[DropdownContent]}
         </Overlay>
-      </Aux>
+      </Flex>
     );
   }
 }

diff --git a/src/components/Modal/Modal.story.js b/src/components/Modal/Modal.story.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Aux from '../Aux';
 import Toggle from '../Toggle';
 import Button from '../Button';
 import Text from '../Text';
@@ -11,7 +10,7 @@ storiesOf('Modal', module)
   .add('simple', () => (
     <Toggle
       render={({ on, toggle }) => (
-        <Aux>
+        <div>
           <Button onClick={toggle}>OPEN MODAL</Button>
           <Modal isOpen={on} onClose={toggle}>
             <Modal.Header>
@@ -26,14 +25,14 @@ storiesOf('Modal', module)
               MODAL FOOTER
             </Modal.Footer>
           </Modal>
-        </Aux>
+        </div>
       )}
     />
   ))
   .add('tabbed', () => (
     <Toggle
       render={({ on, toggle }) => (
-        <Aux>
+        <div>
           <Button onClick={toggle}>OPEN MODAL</Button>
           <Modal isOpen={on} onClose={toggle}>
             <Modal.Header dark>
@@ -55,14 +54,14 @@ storiesOf('Modal', module)
               MODAL FOOTER
             </Modal.Footer>
           </Modal>
-        </Aux>
+        </div>
       )}
     />
   ))
   .add('with title and subtitle', () => (
     <Toggle
       render={({ on, toggle }) => (
-        <Aux>
+        <div>
           <Button onClick={toggle}>OPEN MODAL</Button>
           <Modal isOpen={on} onClose={toggle}>
             <Modal.Header>
@@ -78,14 +77,14 @@ storiesOf('Modal', module)
               MODAL FOOTER
             </Modal.Footer>
           </Modal>
-        </Aux>
+        </div>
       )}
     />
   ))
   .add('modal over a modal', () => (
     <Toggle
       render={({ on, toggle }) => (
-        <Aux>
+        <div>
           <Button onClick={toggle}>OPEN MODAL</Button>
           <Modal isOpen={on} onClose={toggle}>
             <Modal.Header>
@@ -94,7 +93,7 @@ storiesOf('Modal', module)
             <Modal.Content>
               <Toggle
                 render={({ on: isInnerModalOpen, toggle: toggleInnerModal }) => (
-                  <Aux>
+                  <div>
                     <Button onClick={toggleInnerModal}>OPEN MODAL</Button>
                     <Modal isOpen={isInnerModalOpen} onClose={toggleInnerModal}>
                       <Modal.Header>
@@ -109,15 +108,15 @@ storiesOf('Modal', module)
                         MODAL FOOTER
                       </Modal.Footer>
                     </Modal>
-                  </Aux>
+                  </div>
                 )}
               />
             </Modal.Content>
             <Modal.Footer>
               MODAL FOOTER
             </Modal.Footer>
           </Modal>
-        </Aux>
+        </div>
       )}
     />
   ));
diff --git a/src/components/Notification/Notification.js b/src/components/Notification/Notification.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Aux from '../Aux';
 import Flex from '../Flex';
 import Text from '../Text';
 import Button from '../Button';
@@ -49,12 +48,12 @@ const Notification = ({
             <Flex flex="1" flexDirection="column">
               {
                 title ? (
-                  <Aux>
+                  <div>
                     <Spacer margin={[0, 0, 1, 0]}>
                       <Text size="m" weight="semibold">{title}</Text>
                     </Spacer>
                     <Text size="xs" color="greyDark">{content}</Text>
-                  </Aux>
+                  </div>
                 ) : (
                   <Text>{content}</Text>
                 )

diff --git a/src/components/RadioButton/RadioButton.story.js b/src/components/RadioButton/RadioButton.story.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Aux from '../Aux';
 import RadioButton from './RadioButton';
 
 storiesOf('RadioButton', module)
   .add('simple', () => (
-    <Aux>
+    <div>
       <RadioButton
         name="leafColor"
         label="Green"
@@ -16,10 +15,10 @@ storiesOf('RadioButton', module)
         label="Brown"
         value="brown"
       />
-    </Aux>
+    </div>
   ))
   .add('disabled', () => (
-    <Aux>
+    <div>
       <RadioButton
         name="leafColor"
         label="Green"
@@ -33,7 +32,7 @@ storiesOf('RadioButton', module)
         value="brown"
         disabled
       />
-    </Aux>
+    </div>
   ))
   .add('with error', () => (
     <RadioButton

diff --git a/src/components/Text/Text.story.js b/src/components/Text/Text.story.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select } from '@storybook/addon-knobs';
 import theme from '../../theme';
-import Aux from '../Aux';
 import Text from './Text';
 
 storiesOf('Text', module)
@@ -17,7 +16,7 @@ storiesOf('Text', module)
     </Text>
   ))
   .add('sizes', () => (
-    <Aux>
+    <div>
       {
         Object.keys(theme.fontSize).map((size) => (
           <Text size={size}>
@@ -26,10 +25,10 @@ storiesOf('Text', module)
           </Text>
         ))
       }
-    </Aux>
+    </div>
   ))
   .add('weights', () => (
-    <Aux>
+    <div>
       {
         Object.keys(theme.fontWeight).map((weight) => (
           <Text weight={weight}>
@@ -38,10 +37,10 @@ storiesOf('Text', module)
           </Text>
         ))
       }
-    </Aux>
+    </div>
   ))
   .add('families', () => (
-    <Aux>
+    <div>
       {
         Object.keys(theme.fontFamily).map((family) => (
           <Text family={family}>
@@ -50,5 +49,5 @@ storiesOf('Text', module)
           </Text>
         ))
       }
-    </Aux>
+    </div>
   ));
diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
 import reactChildrenByType from '../../utils/reactChildrenByType';
-import Aux from '../Aux';
+import Flex from '../Flex';
 import TooltipTrigger from './TooltipTrigger';
 import TooltipContent from './TooltipContent';
 
@@ -24,7 +24,7 @@ class Tooltip extends React.Component {
     const childrenByType = reactChildrenByType(children);
 
     return (
-      <Aux>
+      <Flex display="inline-block">
         {
           React.cloneElement(childrenByType[TooltipTrigger], {
             onMouseEnter: this.open,
@@ -38,7 +38,7 @@ class Tooltip extends React.Component {
         >
           {childrenByType[TooltipContent]}
         </Overlay>
-      </Aux>
+      </Flex>
     );
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-export Aux from './components/Aux';
 export Button from './components/Button';
 export Card from './components/Card';
 export Checkbox from './components/Checkbox';

diff --git a/src/theme/theme.story.js b/src/theme/theme.story.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import theme from '../theme';
-import Aux from '../components/Aux';
 import Flex from '../components/Flex';
 import Card from '../components/Card';
 import Spacer from '../components/Spacer';
@@ -39,15 +38,15 @@ storiesOf('Theme', module)
       margin-bottom: 16px;
     `;
     return (
-      <Aux>
+      <div>
         {
           Object.keys(theme.boxShadow).map((boxShadow, index) => (
             <ShadowCard key={boxShadow} elevation={index}>
               {index}
             </ShadowCard>
           ))
         }
-      </Aux>
+      </div>
     );
   })
   .add('spacing', () => {
@@ -59,7 +58,7 @@ storiesOf('Theme', module)
       margin-bottom: 16px;
     `;
     return (
-      <Aux>
+      <div>
         {
           [1, 2, 3, 4, 5, 6, 7, 8].map((space) => (
             <Spacer key={space} height={`${space * 8}px`} width={`${space * 8}px`}>
@@ -69,6 +68,6 @@ storiesOf('Theme', module)
             </Spacer>
           ))
         }
-      </Aux>
+      </div>
     );
   });