From df2092e455b882b8ddcdbdc870a8ba06276222f1 Mon Sep 17 00:00:00 2001
From: alexpaxton <thealexpaxton@gmail.com>
Date: Tue, 19 Nov 2019 17:11:41 -0800
Subject: [PATCH] Allow FlexBox to have its element type specified

---
 .../FlexBox/Documentation/FlexBox.stories.tsx |  3 ++-
 src/Components/FlexBox/FlexBox.tsx            | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/Components/FlexBox/Documentation/FlexBox.stories.tsx b/src/Components/FlexBox/Documentation/FlexBox.stories.tsx
index ae4b5125..56a23924 100644
--- a/src/Components/FlexBox/Documentation/FlexBox.stories.tsx
+++ b/src/Components/FlexBox/Documentation/FlexBox.stories.tsx
@@ -4,7 +4,7 @@ import marked from 'marked'
 
 // Storybook
 import {storiesOf} from '@storybook/react'
-import {withKnobs, select, boolean, number} from '@storybook/addon-knobs'
+import {withKnobs, select, boolean, number, text} from '@storybook/addon-knobs'
 import {mapEnumKeys} from '../../../Utils/storybook'
 
 // Components
@@ -41,6 +41,7 @@ componentSpacerStories.add(
       <div className="story--example">
         <FlexBox.FlexBox
           ref={flexBoxRef}
+          element={text('element', 'div')}
           direction={
             FlexDirection[
               select('direction', mapEnumKeys(FlexDirection), 'Row')
diff --git a/src/Components/FlexBox/FlexBox.tsx b/src/Components/FlexBox/FlexBox.tsx
index b27b27b5..c8e2798b 100644
--- a/src/Components/FlexBox/FlexBox.tsx
+++ b/src/Components/FlexBox/FlexBox.tsx
@@ -27,9 +27,11 @@ export interface FlexBoxProps extends StandardFunctionProps {
   stretchToFitWidth?: boolean
   /** stretches component spacer to fit parent height */
   stretchToFitHeight?: boolean
+  /** HTML element type, must pass in a valid type  */
+  element?: string
 }
 
-export type FlexBoxRef = HTMLDivElement
+export type FlexBoxRef = HTMLElement
 
 export const FlexBoxRoot = forwardRef<FlexBoxRef, FlexBoxProps>(
   (
@@ -38,6 +40,7 @@ export const FlexBoxRoot = forwardRef<FlexBoxRef, FlexBoxProps>(
       style,
       testID = 'flex-box',
       margin,
+      element = 'div',
       children,
       direction = FlexDirection.Row,
       className,
@@ -58,16 +61,10 @@ export const FlexBoxRoot = forwardRef<FlexBoxRef, FlexBoxProps>(
       [`${className}`]: className,
     })
 
-    return (
-      <div
-        id={id}
-        ref={ref}
-        style={style}
-        data-testid={testID}
-        className={flexBoxClass}
-      >
-        {children}
-      </div>
+    return React.createElement(
+      element,
+      {id: id, ref, style, className: flexBoxClass, 'data-testid': testID},
+      children
     )
   }
 )