From 3da9172a5c44b2d60bfe430a962fa748c9d76259 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 30 Jan 2019 20:34:15 +0100
Subject: [PATCH 01/39] initial

---
 .../Types/FlexColumnsExample.shorthand.tsx    |  42 +++++
 .../Flex/Types/FlexExampleInput.shorthand.tsx |  25 +++
 .../Types/FlexExampleNavMenu.shorthand.tsx    |  19 +++
 ...ItemsAlignmentOptionsExample.shorthand.tsx |  40 +++++
 .../Types/FlexMediaCardExample.shorthand.tsx  |  31 ++++
 .../FlexMixedAlignmentExample.shorthand.tsx   |  27 ++++
 .../examples/components/Flex/Types/index.tsx  |  40 +++++
 docs/src/examples/components/Flex/index.tsx   |  10 ++
 src/components/Flex/Flex.tsx                  | 144 ++++++++++++++++++
 src/components/Flex/FlexItem.tsx              | 101 ++++++++++++
 src/index.ts                                  |   3 +
 src/themes/teams/componentStyles.ts           |   3 +
 .../teams/components/Flex/flexItemStyles.ts   |  26 ++++
 .../teams/components/Flex/flexStyles.ts       |  46 ++++++
 src/themes/teams/components/Flex/utils.ts     |  15 ++
 15 files changed, 572 insertions(+)
 create mode 100644 docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/index.tsx
 create mode 100644 docs/src/examples/components/Flex/index.tsx
 create mode 100644 src/components/Flex/Flex.tsx
 create mode 100644 src/components/Flex/FlexItem.tsx
 create mode 100644 src/themes/teams/components/Flex/flexItemStyles.ts
 create mode 100644 src/themes/teams/components/Flex/flexStyles.ts
 create mode 100644 src/themes/teams/components/Flex/utils.ts

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
new file mode 100644
index 0000000000..ef915057d3
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex.Row gap="10px" padding="10px">
+      <Flex.Item size="50%">
+        <Segment content="1/2" />
+      </Flex.Item>
+
+      <Flex.Item size="50%">
+        <Segment content="1/2" />
+      </Flex.Item>
+    </Flex.Row>
+
+    <Flex.Row gap="10px" padding="10px">
+      <Flex.Item size="25%">
+        <Segment content="1/4" />
+      </Flex.Item>
+
+      <Flex.Item size="50%">
+        <Segment content="1/2" />
+      </Flex.Item>
+
+      <Flex.Item size="25%">
+        <Segment content="1/4" />
+      </Flex.Item>
+    </Flex.Row>
+
+    <Flex.Row gap="10px" padding="10px" style={{ minHeight: 200 }}>
+      <Flex.Item size="50%">
+        <Segment content="Full-height, even when my content doesn't fill the space." />
+      </Flex.Item>
+
+      <Flex.Item size="50%">
+        <Segment content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque." />
+      </Flex.Item>
+    </Flex.Row>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
new file mode 100644
index 0000000000..d2ecb00ead
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Flex, Input, Button, Label } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex gap={15} debug>
+      <Flex.Item stretch>
+        <Flex.Row>
+          <Label
+            icon="plane"
+            styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
+          />
+
+          <Flex.Item stretch>
+            <Input placeholder="Enter your flight #" fluid />
+          </Flex.Item>
+        </Flex.Row>
+      </Flex.Item>
+
+      <Button content="Load" />
+    </Flex>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
new file mode 100644
index 0000000000..1223b1d556
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Flex, Button } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex.Row gap="10px" debug>
+      <Button content="Logo" icon="chess rook" />
+
+      <Flex.Item push>
+        <Button content="Page 1" />
+      </Flex.Item>
+
+      <Button content="Page 2" />
+      <Button content="Page 3" />
+    </Flex.Row>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
new file mode 100644
index 0000000000..896402bdb0
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex.Column gap={30} center debug>
+      {[
+        [
+          { hAlign: 'start', vAlign: 'start' },
+          { hAlign: 'start', vAlign: 'center' },
+          { hAlign: 'start', vAlign: 'end' },
+        ],
+        [
+          { hAlign: 'center', vAlign: 'start' },
+          { center: true },
+          { hAlign: 'center', vAlign: 'end' },
+        ],
+        [
+          { hAlign: 'end', vAlign: 'start' },
+          { hAlign: 'end', vAlign: 'center' },
+          { hAlign: 'end', vAlign: 'end' },
+        ],
+      ].map(rowOfAlignmentProps => (
+        <Flex.Row gap={30}>
+          {rowOfAlignmentProps.map((alignmentProps: any) => (
+            <Flex
+              inline
+              {...alignmentProps}
+              style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
+            >
+              <Segment styles={{ width: '30px', height: '30px' }} />
+            </Flex>
+          ))}
+        </Flex.Row>
+      ))}
+    </Flex.Column>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
new file mode 100644
index 0000000000..b228139bed
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { Flex, Image, Text, Header } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex.Row gap={15} debug>
+      <Flex.Item as="div" size="200px">
+        <div style={{ position: 'relative' }}>
+          <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
+        </div>
+      </Flex.Item>
+
+      <Flex.Item stretch>
+        <Flex.Column gap={'10px'} vAlign="stretch">
+          <Flex.Row space="between">
+            <Header as="h3" content="LOREM IPSUM" />
+            <Text as="pre" content="Oct 24th, 00:01" />
+          </Flex.Row>
+
+          <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
+
+          <Flex.Item push>
+            <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
+          </Flex.Item>
+        </Flex.Column>
+      </Flex.Item>
+    </Flex.Row>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
new file mode 100644
index 0000000000..1fa05b5267
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleShorthand = () => (
+  <>
+    <Flex.Row gap="10px" center debug>
+      <Flex.Item align="start">
+        <Segment content="This cell should be top aligned." style={{ maxWidth: '150px' }} />
+      </Flex.Item>
+
+      <Segment
+        content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus."
+        style={{ maxWidth: '150px' }}
+      />
+
+      <Flex.Item align="center">
+        <Segment content="This cell should be center-aligned." style={{ maxWidth: '150px' }} />
+      </Flex.Item>
+
+      <Flex.Item align="end">
+        <Segment content="This cell should be bottom-aligned." style={{ maxWidth: '150px' }} />
+      </Flex.Item>
+    </Flex.Row>
+  </>
+)
+
+export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/index.tsx b/docs/src/examples/components/Flex/Types/index.tsx
new file mode 100644
index 0000000000..024325444d
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Media Card"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexMediaCardExample"
+    />
+    <ComponentExample
+      title="Input"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleInput"
+    />
+    <ComponentExample
+      title="Nav Menu"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexExampleNavMenu"
+    />
+    <ComponentExample
+      title="Items Alignment"
+      description="Flex items alignment options."
+      examplePath="components/Flex/Types/FlexItemsAlignmentOptionsExample"
+    />
+    <ComponentExample
+      title="Mixed Alignment"
+      description="Flex mixed alignment feature."
+      examplePath="components/Flex/Types/FlexMixedAlignmentExample"
+    />
+    <ComponentExample
+      title="Columns (item size)"
+      description="Flex columns example."
+      examplePath="components/Flex/Types/FlexColumnsExample"
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/docs/src/examples/components/Flex/index.tsx b/docs/src/examples/components/Flex/index.tsx
new file mode 100644
index 0000000000..7d07779533
--- /dev/null
+++ b/docs/src/examples/components/Flex/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const FlexExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default FlexExamples
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
new file mode 100644
index 0000000000..bad348fc7b
--- /dev/null
+++ b/src/components/Flex/Flex.tsx
@@ -0,0 +1,144 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import * as _ from 'lodash'
+
+import { UIComponent, commonPropTypes } from '../../lib'
+import { ReactProps } from '../../../types/utils'
+import FlexItem from './FlexItem'
+
+export interface FlexProps {
+  /** Defines if container should be inline element. */
+  inline?: boolean
+
+  /** Sets horizontal flow for the container. */
+  row?: boolean
+
+  /** Sets vertical flow for the container. */
+  column?: boolean
+
+  /** Allows overflow items to wrap on the next container's line. */
+  wrap?: boolean
+
+  /** Centers container's content in both directions. */
+  center?: boolean
+
+  /** Controls items alignment in horizontal direction. */
+  hAlign?: 'start' | 'center' | 'end' | 'stretch'
+
+  /** Controls items alignment in vertical direction. */
+  vAlign?: 'start' | 'center' | 'end' | 'stretch' //  'top' | 'center' | 'bottom' as an alternative
+
+  /** Defines strategy for distributing remaining space between items. */
+  space?: 'around' | 'between' | 'evenly'
+
+  // for now - but it should be a string with limited set of values
+  /** Defines gap between each two adjacent child items. */
+  gap?: number | string
+
+  ////////// EXPERIMENTAL ONES /////////////
+  /** Defines container's padding. */
+  padding?: number | string // but it should be a 'string' with limited set of values
+
+  /** Enables debug mode. */
+  debug?: boolean
+
+  /** Orders container to fill all parent's space available. */
+  fill?: boolean
+}
+
+/**
+ * Arrange group of items aligned towards common direction.
+ */
+class Flex extends UIComponent<ReactProps<FlexProps>, any> {
+  static Item: any
+
+  static Row: any
+  static Column: any
+
+  static Gap: any
+
+  static displayName = 'Flex'
+  static className = 'ui-flex'
+
+  static defaultProps = {
+    as: 'div',
+  }
+
+  public static propTypes = {
+    ...commonPropTypes.createCommon({
+      content: false,
+    }),
+
+    inline: PropTypes.bool,
+
+    row: PropTypes.bool,
+    column: PropTypes.bool,
+
+    wrap: PropTypes.bool,
+
+    center: PropTypes.bool,
+    hAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    vAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+
+    space: PropTypes.oneOf(['around', 'between', 'evenly']),
+
+    gap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // for now - but it should be a string with limited set of values
+
+    ////////// EXPERIMENTAL ONES /////////////
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // but it should be a 'string' with limited set of values
+    debug: PropTypes.bool,
+    fill: PropTypes.bool,
+    ////////////////////////////////////////////
+  }
+
+  renderChildren = () => {
+    const { column, gap, children } = this.props
+
+    let isFirst = true
+    return React.Children.map(children, (child: React.ReactElement<any>) => {
+      const childElement =
+        (child.type as any) && (child.type as any).__isFlexItem
+          ? React.cloneElement(child, {
+              flexDirection: column ? 'column' : 'row',
+            })
+          : child
+
+      return (
+        <>
+          {!isFirst && gap ? <Flex.Gap gap={gap} column={column} /> : void (isFirst = false)}
+          {childElement}
+        </>
+      )
+    })
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
+    return (
+      <ElementType className={classes.root} {...unhandledProps}>
+        {this.renderChildren()}
+      </ElementType>
+    )
+  }
+}
+
+class FlexRow extends Flex {}
+class FlexColumn extends Flex {}
+
+FlexRow.defaultProps = {
+  ...Flex.defaultProps,
+  row: true,
+} as any
+
+FlexColumn.defaultProps = {
+  ...Flex.defaultProps,
+  column: true,
+} as any
+
+Flex.Item = FlexItem
+
+Flex.Row = FlexRow
+Flex.Column = FlexColumn
+
+Flex.Gap = ({ gap, column }) => <div style={column ? { height: gap } : { width: gap }} />
+
+export default Flex
diff --git a/src/components/Flex/FlexItem.tsx b/src/components/Flex/FlexItem.tsx
new file mode 100644
index 0000000000..ab9ae6c91d
--- /dev/null
+++ b/src/components/Flex/FlexItem.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import cx from 'classnames'
+import { UIComponent, commonPropTypes } from '../../lib'
+import { Extendable } from '../../../types/utils'
+import { mergeStyles } from '../../../src/lib/mergeThemes'
+
+export interface FlexItemProps {
+  /** Controls item's alignment. */
+  align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
+
+  /** Defines size of the item. */
+  size?: string
+
+  /**
+   * Item can fill remaining space of the container.
+   * If numeric value is provided, remaining space will be distributed proportionally between all the items.
+   * */
+  stretch?: boolean | number
+
+  /**
+   * Controls item's ability to shrink.
+   * */
+  shrink?: boolean | number
+
+  /**
+   * Item can be pushed towards opposite side in the container's direction.
+   */
+  push?: boolean
+
+  /**
+   * IGNORE (will be refactored and not exposed via API).
+   * Will be automatically set by parent Flex component
+   */
+  flexDirection?: 'row' | 'column'
+}
+
+class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
+  static className = 'ui-flex__item'
+
+  static displayName = 'FlexItem'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      content: false,
+    }),
+    align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
+    size: PropTypes.string,
+
+    stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+
+    push: PropTypes.bool,
+
+    /**
+     * Will be automatically set by parent Flex component
+     */
+    flexDirection: PropTypes.oneOf(['row', 'column']),
+  }
+
+  displayName: 'FlexItem'
+
+  // TODO for now, Symbol-based approach should be used instead
+  static __isFlexItem = true
+
+  static create: Function
+
+  renderComponent({ styles, classes }) {
+    const { children } = this.props
+
+    // pass calculated bits using Render Props pattern
+    if (typeof children === 'function') {
+      return children({
+        styles: styles.root,
+        classes: classes.root,
+      })
+    }
+
+    return withStyles(React.Children.only(children), styles, classes)
+  }
+}
+
+export default FlexItem
+
+const withStyles = (element: React.ReactElement<any>, styles, classes): any => {
+  if (!styles) {
+    return element
+  }
+
+  // if element is DOM element
+  if (typeof element.type === 'string') {
+    return React.cloneElement(element, {
+      className: cx(element.props.className, classes.root),
+    })
+  }
+
+  // assuming element is Stardust element
+  return React.cloneElement(element, {
+    styles: mergeStyles(element.props.styles || {}, styles.root),
+  })
+}
diff --git a/src/index.ts b/src/index.ts
index 13db25101f..d69fa9ad86 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,9 @@ export {
   DropdownSearchInputProps,
 } from './components/Dropdown/DropdownSearchInput'
 
+export { default as Flex } from './components/Flex/Flex'
+export { default as FlexItem } from './components/Flex/FlexItem'
+
 export { default as Form, FormProps } from './components/Form/Form'
 export { default as FormField, FormFieldProps } from './components/Form/FormField'
 
diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts
index b0d43027de..aab3c89b45 100644
--- a/src/themes/teams/componentStyles.ts
+++ b/src/themes/teams/componentStyles.ts
@@ -20,6 +20,9 @@ export { default as DropdownSearchInput } from './components/Dropdown/dropdownSe
 export { default as DropdownSelectedItem } from './components/Dropdown/dropdownSelectedItemStyles'
 export { default as DropdownItem } from './components/Dropdown/dropdownItemStyles'
 
+export { default as Flex } from './components/Flex/flexStyles'
+export { default as FlexItem } from './components/Flex/flexItemStyles'
+
 export { default as Form } from './components/Form/formStyles'
 export { default as FormField } from './components/Form/formFieldStyles'
 
diff --git a/src/themes/teams/components/Flex/flexItemStyles.ts b/src/themes/teams/components/Flex/flexItemStyles.ts
new file mode 100644
index 0000000000..5ef33e3156
--- /dev/null
+++ b/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -0,0 +1,26 @@
+import { ComponentSlotStylesInput } from '../../../types'
+import { FlexItemProps } from '../../../../components/Flex/FlexItem'
+
+import { toFlexAlignment, toFlexItemSizeValues } from './utils'
+
+const flexItemStyles: ComponentSlotStylesInput<FlexItemProps, any> = {
+  root: ({ props: p }) => {
+    return {
+      ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
+
+      ...(p.size && toFlexItemSizeValues(p.size)),
+
+      ...(p.shrink && { flexShrink: p.shrink }),
+      ...(p.shrink === false && { flexShrink: 0 }),
+
+      ...(p.stretch && { flexGrow: p.stretch }),
+      ...(p.stretch === true && { flexGrow: 1 }),
+
+      ...p.itemStyles,
+      ...(p.push &&
+        (p.flexDirection === 'column' ? { marginTop: 'auto' } : { marginLeft: 'auto' })),
+    }
+  },
+}
+
+export default flexItemStyles
diff --git a/src/themes/teams/components/Flex/flexStyles.ts b/src/themes/teams/components/Flex/flexStyles.ts
new file mode 100644
index 0000000000..c6c4be17ff
--- /dev/null
+++ b/src/themes/teams/components/Flex/flexStyles.ts
@@ -0,0 +1,46 @@
+import { ComponentSlotStylesInput } from '../../../types'
+import { FlexProps } from '../../../../components/Flex/Flex'
+
+import { toFlexAlignment } from './utils'
+
+const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
+  root: ({ props: p }) => {
+    return {
+      display: 'flex',
+      ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }),
+
+      ...(p.inline && { display: 'inline-flex' }),
+
+      ...(p.row && { flexDirection: 'row' }),
+      ...(p.column && { flexDirection: 'column' }),
+
+      ...(p.center && {
+        justifyContent: 'center',
+        alignItems: 'center',
+      }),
+
+      // TODO note - too much copypaste!!
+      ...(p.hAlign &&
+        (p.column
+          ? { alignItems: toFlexAlignment(p.hAlign) }
+          : { justifyContent: toFlexAlignment(p.hAlign) })),
+      ...(p.vAlign &&
+        (p.column
+          ? { justifyContent: toFlexAlignment(p.vAlign) }
+          : { alignItems: toFlexAlignment(p.vAlign) })),
+
+      ...(p.space && { justifyContent: `space-${p.space}` }),
+
+      ...(p.wrap && { flexWrap: 'wrap' }),
+
+      // NOTE - EXPERIMENTAL PROPS //
+      ...(p.fill && {
+        height: '100%',
+      }),
+
+      ...(p.padding && { padding: p.padding }),
+    }
+  },
+}
+
+export default flexStyles
diff --git a/src/themes/teams/components/Flex/utils.ts b/src/themes/teams/components/Flex/utils.ts
new file mode 100644
index 0000000000..3a6bfea26c
--- /dev/null
+++ b/src/themes/teams/components/Flex/utils.ts
@@ -0,0 +1,15 @@
+export const toFlexAlignment = propValue => {
+  const trimmedValue = propValue.trim()
+
+  if (trimmedValue === 'start' || trimmedValue === 'end') {
+    return `flex-${trimmedValue}`
+  }
+
+  return trimmedValue
+}
+
+export const toFlexItemSizeValues = sizeValue => {
+  return {
+    flexBasis: sizeValue,
+  }
+}

From 9c93a0f1887bee32af6d6d9c4a62e450134f6066 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 30 Jan 2019 20:47:50 +0100
Subject: [PATCH 02/39] remove support for 'center' prop

---
 src/components/Flex/Flex.tsx                   | 4 ----
 src/themes/teams/components/Flex/flexStyles.ts | 5 -----
 2 files changed, 9 deletions(-)

diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
index bad348fc7b..6a83618a28 100644
--- a/src/components/Flex/Flex.tsx
+++ b/src/components/Flex/Flex.tsx
@@ -19,9 +19,6 @@ export interface FlexProps {
   /** Allows overflow items to wrap on the next container's line. */
   wrap?: boolean
 
-  /** Centers container's content in both directions. */
-  center?: boolean
-
   /** Controls items alignment in horizontal direction. */
   hAlign?: 'start' | 'center' | 'end' | 'stretch'
 
@@ -76,7 +73,6 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
     wrap: PropTypes.bool,
 
-    center: PropTypes.bool,
     hAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
     vAlign: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
 
diff --git a/src/themes/teams/components/Flex/flexStyles.ts b/src/themes/teams/components/Flex/flexStyles.ts
index c6c4be17ff..19055d03b9 100644
--- a/src/themes/teams/components/Flex/flexStyles.ts
+++ b/src/themes/teams/components/Flex/flexStyles.ts
@@ -14,11 +14,6 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
       ...(p.row && { flexDirection: 'row' }),
       ...(p.column && { flexDirection: 'column' }),
 
-      ...(p.center && {
-        justifyContent: 'center',
-        alignItems: 'center',
-      }),
-
       // TODO note - too much copypaste!!
       ...(p.hAlign &&
         (p.column

From 711e5bb40ecf6bb3ef5ad334a231b7db503245e5 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 31 Jan 2019 17:27:36 +0100
Subject: [PATCH 03/39] refactor the API

---
 .../Types/FlexColumnsExample.shorthand.tsx    | 42 +++++++++----------
 .../Flex/Types/FlexExampleInput.shorthand.tsx | 18 ++++----
 .../Types/FlexExampleNavMenu.shorthand.tsx    | 10 ++---
 ...ItemsAlignmentOptionsExample.shorthand.tsx | 16 +++----
 .../Types/FlexMediaCardExample.shorthand.tsx  | 26 ++++++------
 .../FlexMixedAlignmentExample.shorthand.tsx   | 18 ++++----
 src/components/Flex/Flex.tsx                  | 35 +++-------------
 .../teams/components/Flex/flexStyles.ts       |  7 ++--
 8 files changed, 74 insertions(+), 98 deletions(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
index ef915057d3..6e7808d3ca 100644
--- a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
@@ -1,41 +1,41 @@
 import * as React from 'react'
-import { Flex, Segment } from '@stardust-ui/react'
+import { Flex as Row, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex.Row gap="10px" padding="10px">
-      <Flex.Item size="50%">
+    <Row gap="10px" padding="10px">
+      <Row.Item size="50%">
         <Segment content="1/2" />
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item size="50%">
+      <Row.Item size="50%">
         <Segment content="1/2" />
-      </Flex.Item>
-    </Flex.Row>
+      </Row.Item>
+    </Row>
 
-    <Flex.Row gap="10px" padding="10px">
-      <Flex.Item size="25%">
+    <Row gap="10px" padding="10px">
+      <Row.Item size="25%">
         <Segment content="1/4" />
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item size="50%">
+      <Row.Item size="50%">
         <Segment content="1/2" />
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item size="25%">
+      <Row.Item size="25%">
         <Segment content="1/4" />
-      </Flex.Item>
-    </Flex.Row>
+      </Row.Item>
+    </Row>
 
-    <Flex.Row gap="10px" padding="10px" style={{ minHeight: 200 }}>
-      <Flex.Item size="50%">
+    <Row gap="10px" padding="10px" style={{ minHeight: 200 }}>
+      <Row.Item size="50%">
         <Segment content="Full-height, even when my content doesn't fill the space." />
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item size="50%">
+      <Row.Item size="50%">
         <Segment content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque." />
-      </Flex.Item>
-    </Flex.Row>
+      </Row.Item>
+    </Row>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
index d2ecb00ead..42fd59ac0c 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -1,24 +1,24 @@
 import * as React from 'react'
-import { Flex, Input, Button, Label } from '@stardust-ui/react'
+import { Flex as Row, Input, Button, Label } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap={15} debug>
-      <Flex.Item stretch>
-        <Flex.Row>
+    <Row gap={15} debug>
+      <Row.Item stretch>
+        <Row>
           <Label
             icon="plane"
             styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
           />
 
-          <Flex.Item stretch>
+          <Row.Item stretch>
             <Input placeholder="Enter your flight #" fluid />
-          </Flex.Item>
-        </Flex.Row>
-      </Flex.Item>
+          </Row.Item>
+        </Row>
+      </Row.Item>
 
       <Button content="Load" />
-    </Flex>
+    </Row>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
index 1223b1d556..18aa44af4d 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react'
-import { Flex, Button } from '@stardust-ui/react'
+import { Flex as Row, Button } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex.Row gap="10px" debug>
+    <Row gap="10px" debug>
       <Button content="Logo" icon="chess rook" />
 
-      <Flex.Item push>
+      <Row.Item push>
         <Button content="Page 1" />
-      </Flex.Item>
+      </Row.Item>
 
       <Button content="Page 2" />
       <Button content="Page 3" />
-    </Flex.Row>
+    </Row>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
index 896402bdb0..1a54f1cd8f 100644
--- a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Flex, Segment } from '@stardust-ui/react'
+import { Flex as Row, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex.Column gap={30} center debug>
+    <Row vertical gap={30} hAlign="center" vAlign="center" debug>
       {[
         [
           { hAlign: 'start', vAlign: 'start' },
@@ -12,7 +12,7 @@ const FlexExampleShorthand = () => (
         ],
         [
           { hAlign: 'center', vAlign: 'start' },
-          { center: true },
+          { hAlign: 'center', vAlign: 'center' },
           { hAlign: 'center', vAlign: 'end' },
         ],
         [
@@ -21,19 +21,19 @@ const FlexExampleShorthand = () => (
           { hAlign: 'end', vAlign: 'end' },
         ],
       ].map(rowOfAlignmentProps => (
-        <Flex.Row gap={30}>
+        <Row gap={30}>
           {rowOfAlignmentProps.map((alignmentProps: any) => (
-            <Flex
+            <Row
               inline
               {...alignmentProps}
               style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
             >
               <Segment styles={{ width: '30px', height: '30px' }} />
-            </Flex>
+            </Row>
           ))}
-        </Flex.Row>
+        </Row>
       ))}
-    </Flex.Column>
+    </Row>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
index b228139bed..456293544c 100644
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -1,30 +1,30 @@
 import * as React from 'react'
-import { Flex, Image, Text, Header } from '@stardust-ui/react'
+import { Flex as Row, Image, Text, Header } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex.Row gap={15} debug>
-      <Flex.Item as="div" size="200px">
+    <Row gap={15} debug>
+      <Row.Item as="div" size="200px">
         <div style={{ position: 'relative' }}>
           <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
         </div>
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item stretch>
-        <Flex.Column gap={'10px'} vAlign="stretch">
-          <Flex.Row space="between">
+      <Row.Item stretch>
+        <Row vertical gap={'10px'} vAlign="stretch">
+          <Row space="between">
             <Header as="h3" content="LOREM IPSUM" />
             <Text as="pre" content="Oct 24th, 00:01" />
-          </Flex.Row>
+          </Row>
 
           <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
 
-          <Flex.Item push>
+          <Row.Item push>
             <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
-          </Flex.Item>
-        </Flex.Column>
-      </Flex.Item>
-    </Flex.Row>
+          </Row.Item>
+        </Row>
+      </Row.Item>
+    </Row>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
index 1fa05b5267..d94f389190 100644
--- a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
@@ -1,26 +1,26 @@
 import * as React from 'react'
-import { Flex, Segment } from '@stardust-ui/react'
+import { Flex as Row, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex.Row gap="10px" center debug>
-      <Flex.Item align="start">
+    <Row gap="10px" hAlign="center" vAlign="center" debug>
+      <Row.Item align="start">
         <Segment content="This cell should be top aligned." style={{ maxWidth: '150px' }} />
-      </Flex.Item>
+      </Row.Item>
 
       <Segment
         content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus."
         style={{ maxWidth: '150px' }}
       />
 
-      <Flex.Item align="center">
+      <Row.Item align="center">
         <Segment content="This cell should be center-aligned." style={{ maxWidth: '150px' }} />
-      </Flex.Item>
+      </Row.Item>
 
-      <Flex.Item align="end">
+      <Row.Item align="end">
         <Segment content="This cell should be bottom-aligned." style={{ maxWidth: '150px' }} />
-      </Flex.Item>
-    </Flex.Row>
+      </Row.Item>
+    </Row>
   </>
 )
 
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
index 6a83618a28..bd72542c04 100644
--- a/src/components/Flex/Flex.tsx
+++ b/src/components/Flex/Flex.tsx
@@ -10,11 +10,8 @@ export interface FlexProps {
   /** Defines if container should be inline element. */
   inline?: boolean
 
-  /** Sets horizontal flow for the container. */
-  row?: boolean
-
-  /** Sets vertical flow for the container. */
-  column?: boolean
+  /** Sets flow direction to vertical. */
+  vertical?: boolean
 
   /** Allows overflow items to wrap on the next container's line. */
   wrap?: boolean
@@ -49,9 +46,6 @@ export interface FlexProps {
 class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   static Item: any
 
-  static Row: any
-  static Column: any
-
   static Gap: any
 
   static displayName = 'Flex'
@@ -68,8 +62,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
     inline: PropTypes.bool,
 
-    row: PropTypes.bool,
-    column: PropTypes.bool,
+    vertical: PropTypes.bool,
 
     wrap: PropTypes.bool,
 
@@ -88,20 +81,20 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   }
 
   renderChildren = () => {
-    const { column, gap, children } = this.props
+    const { vertical, gap, children } = this.props
 
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
       const childElement =
         (child.type as any) && (child.type as any).__isFlexItem
           ? React.cloneElement(child, {
-              flexDirection: column ? 'column' : 'row',
+              flexDirection: vertical ? 'column' : 'row',
             })
           : child
 
       return (
         <>
-          {!isFirst && gap ? <Flex.Gap gap={gap} column={column} /> : void (isFirst = false)}
+          {!isFirst && gap ? <Flex.Gap gap={gap} column={vertical} /> : void (isFirst = false)}
           {childElement}
         </>
       )
@@ -117,24 +110,8 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   }
 }
 
-class FlexRow extends Flex {}
-class FlexColumn extends Flex {}
-
-FlexRow.defaultProps = {
-  ...Flex.defaultProps,
-  row: true,
-} as any
-
-FlexColumn.defaultProps = {
-  ...Flex.defaultProps,
-  column: true,
-} as any
-
 Flex.Item = FlexItem
 
-Flex.Row = FlexRow
-Flex.Column = FlexColumn
-
 Flex.Gap = ({ gap, column }) => <div style={column ? { height: gap } : { width: gap }} />
 
 export default Flex
diff --git a/src/themes/teams/components/Flex/flexStyles.ts b/src/themes/teams/components/Flex/flexStyles.ts
index 19055d03b9..4cd4d123fd 100644
--- a/src/themes/teams/components/Flex/flexStyles.ts
+++ b/src/themes/teams/components/Flex/flexStyles.ts
@@ -11,16 +11,15 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
 
       ...(p.inline && { display: 'inline-flex' }),
 
-      ...(p.row && { flexDirection: 'row' }),
-      ...(p.column && { flexDirection: 'column' }),
+      ...(p.vertical && { flexDirection: 'column' }),
 
       // TODO note - too much copypaste!!
       ...(p.hAlign &&
-        (p.column
+        (p.vertical
           ? { alignItems: toFlexAlignment(p.hAlign) }
           : { justifyContent: toFlexAlignment(p.hAlign) })),
       ...(p.vAlign &&
-        (p.column
+        (p.vertical
           ? { justifyContent: toFlexAlignment(p.vAlign) }
           : { alignItems: toFlexAlignment(p.vAlign) })),
 

From ab39fc4200ade422fa253d764af48668b488df02 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 11:27:32 +0100
Subject: [PATCH 04/39] rename refactoring

---
 .../Types/FlexColumnsExample.shorthand.tsx    | 42 +++++++++----------
 .../Flex/Types/FlexExampleInput.shorthand.tsx | 18 ++++----
 .../Types/FlexExampleNavMenu.shorthand.tsx    | 10 ++---
 ...ItemsAlignmentOptionsExample.shorthand.tsx | 14 +++----
 .../Types/FlexMediaCardExample.shorthand.tsx  | 26 ++++++------
 .../FlexMixedAlignmentExample.shorthand.tsx   | 31 +++++++-------
 src/components/Flex/Flex.tsx                  |  8 ++--
 src/components/Flex/FlexItem.tsx              |  2 +-
 .../teams/components/Flex/flexItemStyles.ts   |  4 +-
 .../teams/components/Flex/flexStyles.ts       |  6 +--
 10 files changed, 80 insertions(+), 81 deletions(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
index 6e7808d3ca..1e944d9558 100644
--- a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
@@ -1,41 +1,41 @@
 import * as React from 'react'
-import { Flex as Row, Segment } from '@stardust-ui/react'
+import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row gap="10px" padding="10px">
-      <Row.Item size="50%">
+    <Flex gap="10px" padding="10px">
+      <Flex.Item size="50%">
         <Segment content="1/2" />
-      </Row.Item>
+      </Flex.Item>
 
-      <Row.Item size="50%">
+      <Flex.Item size="50%">
         <Segment content="1/2" />
-      </Row.Item>
-    </Row>
+      </Flex.Item>
+    </Flex>
 
-    <Row gap="10px" padding="10px">
-      <Row.Item size="25%">
+    <Flex gap="10px" padding="10px">
+      <Flex.Item size="25%">
         <Segment content="1/4" />
-      </Row.Item>
+      </Flex.Item>
 
-      <Row.Item size="50%">
+      <Flex.Item size="50%">
         <Segment content="1/2" />
-      </Row.Item>
+      </Flex.Item>
 
-      <Row.Item size="25%">
+      <Flex.Item size="25%">
         <Segment content="1/4" />
-      </Row.Item>
-    </Row>
+      </Flex.Item>
+    </Flex>
 
-    <Row gap="10px" padding="10px" style={{ minHeight: 200 }}>
-      <Row.Item size="50%">
+    <Flex gap="10px" padding="10px" style={{ minHeight: 200 }}>
+      <Flex.Item size="50%">
         <Segment content="Full-height, even when my content doesn't fill the space." />
-      </Row.Item>
+      </Flex.Item>
 
-      <Row.Item size="50%">
+      <Flex.Item size="50%">
         <Segment content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque." />
-      </Row.Item>
-    </Row>
+      </Flex.Item>
+    </Flex>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
index 42fd59ac0c..bd4d5081d7 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -1,24 +1,24 @@
 import * as React from 'react'
-import { Flex as Row, Input, Button, Label } from '@stardust-ui/react'
+import { Flex, Input, Button, Label } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row gap={15} debug>
-      <Row.Item stretch>
-        <Row>
+    <Flex gap={15} debug>
+      <Flex.Item grow>
+        <Flex>
           <Label
             icon="plane"
             styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
           />
 
-          <Row.Item stretch>
+          <Flex.Item grow>
             <Input placeholder="Enter your flight #" fluid />
-          </Row.Item>
-        </Row>
-      </Row.Item>
+          </Flex.Item>
+        </Flex>
+      </Flex.Item>
 
       <Button content="Load" />
-    </Row>
+    </Flex>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
index 18aa44af4d..1efb6dd532 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react'
-import { Flex as Row, Button } from '@stardust-ui/react'
+import { Flex, Button } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row gap="10px" debug>
+    <Flex gap="10px" debug>
       <Button content="Logo" icon="chess rook" />
 
-      <Row.Item push>
+      <Flex.Item push>
         <Button content="Page 1" />
-      </Row.Item>
+      </Flex.Item>
 
       <Button content="Page 2" />
       <Button content="Page 3" />
-    </Row>
+    </Flex>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
index 1a54f1cd8f..0072a08c58 100644
--- a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Flex as Row, Segment } from '@stardust-ui/react'
+import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row vertical gap={30} hAlign="center" vAlign="center" debug>
+    <Flex column gap={30} hAlign="center" vAlign="center" debug>
       {[
         [
           { hAlign: 'start', vAlign: 'start' },
@@ -21,19 +21,19 @@ const FlexExampleShorthand = () => (
           { hAlign: 'end', vAlign: 'end' },
         ],
       ].map(rowOfAlignmentProps => (
-        <Row gap={30}>
+        <Flex gap={30}>
           {rowOfAlignmentProps.map((alignmentProps: any) => (
-            <Row
+            <Flex
               inline
               {...alignmentProps}
               style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
             >
               <Segment styles={{ width: '30px', height: '30px' }} />
-            </Row>
+            </Flex>
           ))}
-        </Row>
+        </Flex>
       ))}
-    </Row>
+    </Flex>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
index 456293544c..17f1e661ec 100644
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -1,30 +1,30 @@
 import * as React from 'react'
-import { Flex as Row, Image, Text, Header } from '@stardust-ui/react'
+import { Flex, Image, Text, Header } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row gap={15} debug>
-      <Row.Item as="div" size="200px">
+    <Flex gap={15} debug>
+      <Flex.Item as="div" size="200px">
         <div style={{ position: 'relative' }}>
           <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
         </div>
-      </Row.Item>
+      </Flex.Item>
 
-      <Row.Item stretch>
-        <Row vertical gap={'10px'} vAlign="stretch">
-          <Row space="between">
+      <Flex.Item grow>
+        <Flex column gap={'10px'} vAlign="stretch">
+          <Flex space="between">
             <Header as="h3" content="LOREM IPSUM" />
             <Text as="pre" content="Oct 24th, 00:01" />
-          </Row>
+          </Flex>
 
           <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
 
-          <Row.Item push>
+          <Flex.Item push>
             <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
-          </Row.Item>
-        </Row>
-      </Row.Item>
-    </Row>
+          </Flex.Item>
+        </Flex>
+      </Flex.Item>
+    </Flex>
   </>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
index d94f389190..b15e7f4eac 100644
--- a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
@@ -1,26 +1,25 @@
 import * as React from 'react'
-import { Flex as Row, Segment } from '@stardust-ui/react'
+import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Row gap="10px" hAlign="center" vAlign="center" debug>
-      <Row.Item align="start">
-        <Segment content="This cell should be top aligned." style={{ maxWidth: '150px' }} />
-      </Row.Item>
+    <Flex gap="10px" hAlign="center" vAlign="center" debug>
+      <Flex.Item align="start" size="150px">
+        <Segment content="This cell should be top aligned." />
+      </Flex.Item>
 
-      <Segment
-        content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus."
-        style={{ maxWidth: '150px' }}
-      />
+      <Flex.Item align="stretch" size="150px">
+        <Segment content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus." />
+      </Flex.Item>
 
-      <Row.Item align="center">
-        <Segment content="This cell should be center-aligned." style={{ maxWidth: '150px' }} />
-      </Row.Item>
+      <Flex.Item align="center" size="150px">
+        <Segment content="This cell should be center-aligned." />
+      </Flex.Item>
 
-      <Row.Item align="end">
-        <Segment content="This cell should be bottom-aligned." style={{ maxWidth: '150px' }} />
-      </Row.Item>
-    </Row>
+      <Flex.Item align="end" size="150px">
+        <Segment content="This cell should be bottom-aligned." />
+      </Flex.Item>
+    </Flex>
   </>
 )
 
diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
index bd72542c04..7e16c8c79a 100644
--- a/src/components/Flex/Flex.tsx
+++ b/src/components/Flex/Flex.tsx
@@ -10,8 +10,8 @@ export interface FlexProps {
   /** Defines if container should be inline element. */
   inline?: boolean
 
-  /** Sets flow direction to vertical. */
-  vertical?: boolean
+  /** Sets vertical flow direction. */
+  column?: boolean
 
   /** Allows overflow items to wrap on the next container's line. */
   wrap?: boolean
@@ -20,7 +20,7 @@ export interface FlexProps {
   hAlign?: 'start' | 'center' | 'end' | 'stretch'
 
   /** Controls items alignment in vertical direction. */
-  vAlign?: 'start' | 'center' | 'end' | 'stretch' //  'top' | 'center' | 'bottom' as an alternative
+  vAlign?: 'start' | 'center' | 'end' | 'stretch'
 
   /** Defines strategy for distributing remaining space between items. */
   space?: 'around' | 'between' | 'evenly'
@@ -81,7 +81,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   }
 
   renderChildren = () => {
-    const { vertical, gap, children } = this.props
+    const { column: vertical, gap, children } = this.props
 
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
diff --git a/src/components/Flex/FlexItem.tsx b/src/components/Flex/FlexItem.tsx
index ab9ae6c91d..a31e3101fb 100644
--- a/src/components/Flex/FlexItem.tsx
+++ b/src/components/Flex/FlexItem.tsx
@@ -16,7 +16,7 @@ export interface FlexItemProps {
    * Item can fill remaining space of the container.
    * If numeric value is provided, remaining space will be distributed proportionally between all the items.
    * */
-  stretch?: boolean | number
+  grow?: boolean | number
 
   /**
    * Controls item's ability to shrink.
diff --git a/src/themes/teams/components/Flex/flexItemStyles.ts b/src/themes/teams/components/Flex/flexItemStyles.ts
index 5ef33e3156..2672cee95c 100644
--- a/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -13,8 +13,8 @@ const flexItemStyles: ComponentSlotStylesInput<FlexItemProps, any> = {
       ...(p.shrink && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),
 
-      ...(p.stretch && { flexGrow: p.stretch }),
-      ...(p.stretch === true && { flexGrow: 1 }),
+      ...(p.grow && { flexGrow: p.grow }),
+      ...(p.grow === true && { flexGrow: 1 }),
 
       ...p.itemStyles,
       ...(p.push &&
diff --git a/src/themes/teams/components/Flex/flexStyles.ts b/src/themes/teams/components/Flex/flexStyles.ts
index 4cd4d123fd..a4a58eee7b 100644
--- a/src/themes/teams/components/Flex/flexStyles.ts
+++ b/src/themes/teams/components/Flex/flexStyles.ts
@@ -11,15 +11,15 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
 
       ...(p.inline && { display: 'inline-flex' }),
 
-      ...(p.vertical && { flexDirection: 'column' }),
+      ...(p.column && { flexDirection: 'column' }),
 
       // TODO note - too much copypaste!!
       ...(p.hAlign &&
-        (p.vertical
+        (p.column
           ? { alignItems: toFlexAlignment(p.hAlign) }
           : { justifyContent: toFlexAlignment(p.hAlign) })),
       ...(p.vAlign &&
-        (p.vertical
+        (p.column
           ? { justifyContent: toFlexAlignment(p.vAlign) }
           : { alignItems: toFlexAlignment(p.vAlign) })),
 

From 9a3d81993534b5dc9b45206ca3abb87dda40a890 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 11:42:38 +0100
Subject: [PATCH 05/39] merge master

---
 {src => packages/react/src}/components/Flex/Flex.tsx            | 2 +-
 {src => packages/react/src}/components/Flex/FlexItem.tsx        | 2 +-
 .../react/src}/themes/teams/components/Flex/flexItemStyles.ts   | 0
 .../react/src}/themes/teams/components/Flex/flexStyles.ts       | 0
 .../react/src}/themes/teams/components/Flex/utils.ts            | 0
 5 files changed, 2 insertions(+), 2 deletions(-)
 rename {src => packages/react/src}/components/Flex/Flex.tsx (98%)
 rename {src => packages/react/src}/components/Flex/FlexItem.tsx (98%)
 rename {src => packages/react/src}/themes/teams/components/Flex/flexItemStyles.ts (100%)
 rename {src => packages/react/src}/themes/teams/components/Flex/flexStyles.ts (100%)
 rename {src => packages/react/src}/themes/teams/components/Flex/utils.ts (100%)

diff --git a/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
similarity index 98%
rename from src/components/Flex/Flex.tsx
rename to packages/react/src/components/Flex/Flex.tsx
index 7e16c8c79a..caeca05618 100644
--- a/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import * as _ from 'lodash'
 
 import { UIComponent, commonPropTypes } from '../../lib'
-import { ReactProps } from '../../../types/utils'
+import { ReactProps } from '../../types'
 import FlexItem from './FlexItem'
 
 export interface FlexProps {
diff --git a/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
similarity index 98%
rename from src/components/Flex/FlexItem.tsx
rename to packages/react/src/components/Flex/FlexItem.tsx
index a31e3101fb..dab2485972 100644
--- a/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 import { UIComponent, commonPropTypes } from '../../lib'
-import { Extendable } from '../../../types/utils'
+import { Extendable } from '../../types'
 import { mergeStyles } from '../../../src/lib/mergeThemes'
 
 export interface FlexItemProps {
diff --git a/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
similarity index 100%
rename from src/themes/teams/components/Flex/flexItemStyles.ts
rename to packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
diff --git a/src/themes/teams/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
similarity index 100%
rename from src/themes/teams/components/Flex/flexStyles.ts
rename to packages/react/src/themes/teams/components/Flex/flexStyles.ts
diff --git a/src/themes/teams/components/Flex/utils.ts b/packages/react/src/themes/teams/components/Flex/utils.ts
similarity index 100%
rename from src/themes/teams/components/Flex/utils.ts
rename to packages/react/src/themes/teams/components/Flex/utils.ts

From 6f4b06aacae4b49015d2ebea4ca0f36506563453 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 11:54:45 +0100
Subject: [PATCH 06/39] remove unnecessary type cast

---
 packages/react/src/components/Flex/Flex.tsx     | 3 +--
 packages/react/src/components/Flex/FlexItem.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index caeca05618..b8840fd63c 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -86,7 +86,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
       const childElement =
-        (child.type as any) && (child.type as any).__isFlexItem
+        child.type && (child.type as any).__isFlexItem
           ? React.cloneElement(child, {
               flexDirection: vertical ? 'column' : 'row',
             })
@@ -111,7 +111,6 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 }
 
 Flex.Item = FlexItem
-
 Flex.Gap = ({ gap, column }) => <div style={column ? { height: gap } : { width: gap }} />
 
 export default Flex
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index dab2485972..8531f5f18b 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -2,8 +2,8 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 import { UIComponent, commonPropTypes } from '../../lib'
+import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
-import { mergeStyles } from '../../../src/lib/mergeThemes'
 
 export interface FlexItemProps {
   /** Controls item's alignment. */

From 816f56b885f6539f180baecfbccf513a14c265f3 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 12:06:21 +0100
Subject: [PATCH 07/39] remove prototyping shortcuts

---
 packages/react/src/components/Flex/Flex.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index b8840fd63c..1d0710ea60 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -81,20 +81,23 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   }
 
   renderChildren = () => {
-    const { column: vertical, gap, children } = this.props
+    const { column, gap, children } = this.props
 
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
       const childElement =
-        child.type && (child.type as any).__isFlexItem
+        child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
           ? React.cloneElement(child, {
-              flexDirection: vertical ? 'column' : 'row',
+              flexDirection: column ? 'column' : 'row',
             })
           : child
 
+      const renderGap = !isFirst
+      isFirst = false
+
       return (
         <>
-          {!isFirst && gap ? <Flex.Gap gap={gap} column={vertical} /> : void (isFirst = false)}
+          {renderGap && gap && <Flex.Gap gap={gap} column={column} />}
           {childElement}
         </>
       )

From c36771a266e1c85b80a99711170151b1f81f8072 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 12:53:19 +0100
Subject: [PATCH 08/39] adjust marker strategy for Flex Item

---
 packages/react/src/components/Flex/Flex.tsx     | 2 +-
 packages/react/src/components/Flex/FlexItem.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 1d0710ea60..dcddecd9d5 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -86,7 +86,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
       const childElement =
-        child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
+        child.type && child.type[FlexItem.Marker]
           ? React.cloneElement(child, {
               flexDirection: column ? 'column' : 'row',
             })
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 8531f5f18b..4b128bb3ad 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -60,10 +60,12 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
 
   displayName: 'FlexItem'
 
-  // TODO for now, Symbol-based approach should be used instead
-  static __isFlexItem = true
+  // Boolean flag for now, Symbol-based approach should be used instead
+  // However, there are some concerns related to browser compatibility if Symbols will be used
+  // static __isFlexItem = true
 
   static create: Function
+  static Marker = Symbol(FlexItem.displayName)
 
   renderComponent({ styles, classes }) {
     const { children } = this.props
@@ -80,6 +82,8 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
   }
 }
 
+FlexItem[FlexItem.Marker] = true
+
 export default FlexItem
 
 const withStyles = (element: React.ReactElement<any>, styles, classes): any => {

From ddc2eb7d97f081507250b1b1b3f080335abfe1ad Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 13:00:43 +0100
Subject: [PATCH 09/39] revert marker strategy for flex item

---
 packages/react/src/components/Flex/Flex.tsx     | 2 +-
 packages/react/src/components/Flex/FlexItem.tsx | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index dcddecd9d5..1d0710ea60 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -86,7 +86,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
     let isFirst = true
     return React.Children.map(children, (child: React.ReactElement<any>) => {
       const childElement =
-        child.type && child.type[FlexItem.Marker]
+        child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
           ? React.cloneElement(child, {
               flexDirection: column ? 'column' : 'row',
             })
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 4b128bb3ad..9c46dfc93a 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -65,7 +65,7 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
   // static __isFlexItem = true
 
   static create: Function
-  static Marker = Symbol(FlexItem.displayName)
+  static __isFlexItem = true
 
   renderComponent({ styles, classes }) {
     const { children } = this.props
@@ -82,8 +82,6 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
   }
 }
 
-FlexItem[FlexItem.Marker] = true
-
 export default FlexItem
 
 const withStyles = (element: React.ReactElement<any>, styles, classes): any => {

From f0eb6a39e95ae04e8cd4a3f2440fdcf85cb61181 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 13:51:56 +0100
Subject: [PATCH 10/39] introduce semantic names to size values

---
 .../Types/FlexColumnsExample.shorthand.tsx    | 20 +++++++++---------
 .../Flex/Types/FlexExampleInput.shorthand.tsx |  2 +-
 .../Types/FlexExampleNavMenu.shorthand.tsx    |  2 +-
 ...ItemsAlignmentOptionsExample.shorthand.tsx |  4 ++--
 .../Types/FlexMediaCardExample.shorthand.tsx  |  6 +++---
 .../FlexMixedAlignmentExample.shorthand.tsx   | 10 ++++-----
 packages/react/src/components/Flex/Flex.tsx   | 21 +++++++++++--------
 .../react/src/components/Flex/FlexItem.tsx    |  6 ++++--
 .../src/themes/teams/componentVariables.ts    |  3 +++
 .../components/Flex/flexItemVariables.ts      | 15 +++++++++++++
 .../teams/components/Flex/flexStyles.ts       | 13 +++++++++---
 .../teams/components/Flex/flexVariables.ts    | 17 +++++++++++++++
 12 files changed, 83 insertions(+), 36 deletions(-)
 create mode 100644 packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
 create mode 100644 packages/react/src/themes/teams/components/Flex/flexVariables.ts

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
index 1e944d9558..5aa8efa5d9 100644
--- a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
@@ -3,36 +3,36 @@ import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap="10px" padding="10px">
-      <Flex.Item size="50%">
+    <Flex gap="gap.small" padding="padding.medium">
+      <Flex.Item size="size.half">
         <Segment content="1/2" />
       </Flex.Item>
 
-      <Flex.Item size="50%">
+      <Flex.Item size="size.half">
         <Segment content="1/2" />
       </Flex.Item>
     </Flex>
 
-    <Flex gap="10px" padding="10px">
-      <Flex.Item size="25%">
+    <Flex gap="gap.small" padding="padding.medium">
+      <Flex.Item size="size.quater">
         <Segment content="1/4" />
       </Flex.Item>
 
-      <Flex.Item size="50%">
+      <Flex.Item size="size.half">
         <Segment content="1/2" />
       </Flex.Item>
 
-      <Flex.Item size="25%">
+      <Flex.Item size="size.quater">
         <Segment content="1/4" />
       </Flex.Item>
     </Flex>
 
-    <Flex gap="10px" padding="10px" style={{ minHeight: 200 }}>
-      <Flex.Item size="50%">
+    <Flex gap="gap.small" padding="padding.medium" style={{ minHeight: 200 }}>
+      <Flex.Item size="size.half">
         <Segment content="Full-height, even when my content doesn't fill the space." />
       </Flex.Item>
 
-      <Flex.Item size="50%">
+      <Flex.Item size="size.half">
         <Segment content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque." />
       </Flex.Item>
     </Flex>
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
index bd4d5081d7..76cf0dd35c 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -3,7 +3,7 @@ import { Flex, Input, Button, Label } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap={15} debug>
+    <Flex gap="gap.medium" debug>
       <Flex.Item grow>
         <Flex>
           <Label
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
index 1efb6dd532..712990eaa6 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -3,7 +3,7 @@ import { Flex, Button } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap="10px" debug>
+    <Flex gap="gap.small" debug>
       <Button content="Logo" icon="chess rook" />
 
       <Flex.Item push>
diff --git a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
index 0072a08c58..1d9e9fe668 100644
--- a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
@@ -3,7 +3,7 @@ import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex column gap={30} hAlign="center" vAlign="center" debug>
+    <Flex column gap="gap.large" hAlign="center" vAlign="center" debug>
       {[
         [
           { hAlign: 'start', vAlign: 'start' },
@@ -21,7 +21,7 @@ const FlexExampleShorthand = () => (
           { hAlign: 'end', vAlign: 'end' },
         ],
       ].map(rowOfAlignmentProps => (
-        <Flex gap={30}>
+        <Flex gap="gap.large">
           {rowOfAlignmentProps.map((alignmentProps: any) => (
             <Flex
               inline
diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
index 17f1e661ec..56255a8d41 100644
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -3,15 +3,15 @@ import { Flex, Image, Text, Header } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap={15} debug>
-      <Flex.Item as="div" size="200px">
+    <Flex gap="gap.medium" debug>
+      <Flex.Item as="div" size="size.medium">
         <div style={{ position: 'relative' }}>
           <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
         </div>
       </Flex.Item>
 
       <Flex.Item grow>
-        <Flex column gap={'10px'} vAlign="stretch">
+        <Flex column gap="gap.small" vAlign="stretch">
           <Flex space="between">
             <Header as="h3" content="LOREM IPSUM" />
             <Text as="pre" content="Oct 24th, 00:01" />
diff --git a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
index b15e7f4eac..cbfaaaba6d 100644
--- a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
@@ -3,20 +3,20 @@ import { Flex, Segment } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap="10px" hAlign="center" vAlign="center" debug>
-      <Flex.Item align="start" size="150px">
+    <Flex gap="gap.small" hAlign="center" vAlign="center" debug>
+      <Flex.Item align="start" size="size.small">
         <Segment content="This cell should be top aligned." />
       </Flex.Item>
 
-      <Flex.Item align="stretch" size="150px">
+      <Flex.Item align="stretch" size="size.small">
         <Segment content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus." />
       </Flex.Item>
 
-      <Flex.Item align="center" size="150px">
+      <Flex.Item align="center" size="size.small">
         <Segment content="This cell should be center-aligned." />
       </Flex.Item>
 
-      <Flex.Item align="end" size="150px">
+      <Flex.Item align="end" size="size.small">
         <Segment content="This cell should be bottom-aligned." />
       </Flex.Item>
     </Flex>
diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 1d0710ea60..5bb265117b 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -6,6 +6,9 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { ReactProps } from '../../types'
 import FlexItem from './FlexItem'
 
+export type FlexGap = 'gap.small' | 'gap.medium' | 'gap.large'
+export type FlexPadding = 'padding.medium'
+
 export interface FlexProps {
   /** Defines if container should be inline element. */
   inline?: boolean
@@ -27,11 +30,11 @@ export interface FlexProps {
 
   // for now - but it should be a string with limited set of values
   /** Defines gap between each two adjacent child items. */
-  gap?: number | string
+  gap?: FlexGap
 
   ////////// EXPERIMENTAL ONES /////////////
   /** Defines container's padding. */
-  padding?: number | string // but it should be a 'string' with limited set of values
+  padding?: FlexPadding
 
   /** Enables debug mode. */
   debug?: boolean
@@ -44,7 +47,7 @@ export interface FlexProps {
  * Arrange group of items aligned towards common direction.
  */
 class Flex extends UIComponent<ReactProps<FlexProps>, any> {
-  static Item: any
+  static Item: typeof FlexItem
 
   static Gap: any
 
@@ -71,16 +74,16 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
     space: PropTypes.oneOf(['around', 'between', 'evenly']),
 
-    gap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // for now - but it should be a string with limited set of values
+    gap: PropTypes.string,
 
     ////////// EXPERIMENTAL ONES /////////////
-    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // but it should be a 'string' with limited set of values
+    padding: PropTypes.string,
     debug: PropTypes.bool,
     fill: PropTypes.bool,
     ////////////////////////////////////////////
   }
 
-  renderChildren = () => {
+  renderChildren = gapClasses => {
     const { column, gap, children } = this.props
 
     let isFirst = true
@@ -97,7 +100,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
       return (
         <>
-          {renderGap && gap && <Flex.Gap gap={gap} column={column} />}
+          {renderGap && gap && <Flex.Gap className={gapClasses} />}
           {childElement}
         </>
       )
@@ -107,13 +110,13 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
   renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
     return (
       <ElementType className={classes.root} {...unhandledProps}>
-        {this.renderChildren()}
+        {this.renderChildren(classes.gap)}
       </ElementType>
     )
   }
 }
 
 Flex.Item = FlexItem
-Flex.Gap = ({ gap, column }) => <div style={column ? { height: gap } : { width: gap }} />
+Flex.Gap = ({ className }) => <div className={className} />
 
 export default Flex
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 9c46dfc93a..45f2840c69 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -5,12 +5,14 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
 
+export type FlexItemSize = 'size.half' | 'size.quater' | 'size.small' | 'size.medium'
+
 export interface FlexItemProps {
   /** Controls item's alignment. */
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: string
+  size?: FlexItemSize
 
   /**
    * Item can fill remaining space of the container.
@@ -30,7 +32,7 @@ export interface FlexItemProps {
 
   /**
    * IGNORE (will be refactored and not exposed via API).
-   * Will be automatically set by parent Flex component
+   * Value is automatically set by parent Flex component.
    */
   flexDirection?: 'row' | 'column'
 }
diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts
index 3f2073e6bc..4ef2f8fc2f 100644
--- a/packages/react/src/themes/teams/componentVariables.ts
+++ b/packages/react/src/themes/teams/componentVariables.ts
@@ -15,6 +15,9 @@ export { default as Divider } from './components/Divider/dividerVariables'
 
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 
+export { default as Flex } from './components/Flex/flexVariables'
+export { default as FlexItem } from './components/Flex/flexItemVariables'
+
 export { default as Grid } from './components/Grid/gridVariables'
 
 export { default as Header } from './components/Header/headerVariables'
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
new file mode 100644
index 0000000000..c83d773b7a
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
@@ -0,0 +1,15 @@
+import { pxToRem } from '../../../../lib'
+
+import { FlexItemSize } from '../../../../components/Flex/FlexItem'
+
+type SizeValues = { [Key in FlexItemSize]: string }
+
+export type FlexVariables = SizeValues
+
+export default (): FlexVariables => ({
+  'size.half': '50%',
+  'size.quater': '25%',
+
+  'size.small': pxToRem(150),
+  'size.medium': pxToRem(200),
+})
diff --git a/packages/react/src/themes/teams/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
index a4a58eee7b..ee16a224ec 100644
--- a/packages/react/src/themes/teams/components/Flex/flexStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
@@ -4,7 +4,7 @@ import { FlexProps } from '../../../../components/Flex/Flex'
 import { toFlexAlignment } from './utils'
 
 const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
-  root: ({ props: p }) => {
+  root: ({ props: p, variables: v }) => {
     return {
       display: 'flex',
       ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }),
@@ -13,7 +13,6 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
 
       ...(p.column && { flexDirection: 'column' }),
 
-      // TODO note - too much copypaste!!
       ...(p.hAlign &&
         (p.column
           ? { alignItems: toFlexAlignment(p.hAlign) }
@@ -32,7 +31,15 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
         height: '100%',
       }),
 
-      ...(p.padding && { padding: p.padding }),
+      ...(p.padding && { padding: v[p.padding] }),
+    }
+  },
+
+  gap: ({ props: p, variables: v }) => {
+    const gapValue = v[p.gap]
+
+    return {
+      ...(p.column ? { height: gapValue } : { width: gapValue }),
     }
   },
 }
diff --git a/packages/react/src/themes/teams/components/Flex/flexVariables.ts b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
new file mode 100644
index 0000000000..be7c300b38
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
@@ -0,0 +1,17 @@
+import { pxToRem } from '../../../../lib'
+import { FlexGap, FlexPadding } from '../../../../components/Flex/Flex'
+
+type GapValues = { [Key in FlexGap]: string }
+type PaddingValues = { [Key in FlexPadding]: string }
+
+export type FlexVariables = GapValues & PaddingValues
+
+export default (): FlexVariables => ({
+  // GAP VALUES
+  'gap.small': pxToRem(10),
+  'gap.medium': pxToRem(15),
+  'gap.large': pxToRem(30),
+
+  // PADDING VALUES
+  'padding.medium': pxToRem(10),
+})

From 41d77505347bf256c8314a54e2d905020e94623a Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 13:58:59 +0100
Subject: [PATCH 11/39] apply semantic size values to flex item styles

---
 .../react/src/themes/teams/components/Flex/flexItemStyles.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
index 2672cee95c..1ba98e1949 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -4,11 +4,11 @@ import { FlexItemProps } from '../../../../components/Flex/FlexItem'
 import { toFlexAlignment, toFlexItemSizeValues } from './utils'
 
 const flexItemStyles: ComponentSlotStylesInput<FlexItemProps, any> = {
-  root: ({ props: p }) => {
+  root: ({ props: p, variables: v }) => {
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
 
-      ...(p.size && toFlexItemSizeValues(p.size)),
+      ...(p.size && toFlexItemSizeValues(v[p.size])),
 
       ...(p.shrink && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),

From 86d962599140afc2e8576e0a5a266d64f3aa3260 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 13:59:22 +0100
Subject: [PATCH 12/39] fix prop types of Flex component

---
 packages/react/src/components/Flex/Flex.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 5bb265117b..4fcf9fca2a 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -65,7 +65,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
     inline: PropTypes.bool,
 
-    vertical: PropTypes.bool,
+    column: PropTypes.bool,
 
     wrap: PropTypes.bool,
 

From 9dbd7ea75b314bf474fb6f0da73ba76ef872a1d5 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 14:00:00 +0100
Subject: [PATCH 13/39] remove unnecessary 'as' prop in media card example

---
 .../components/Flex/Types/FlexMediaCardExample.shorthand.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
index 56255a8d41..e904f06038 100644
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -4,7 +4,7 @@ import { Flex, Image, Text, Header } from '@stardust-ui/react'
 const FlexExampleShorthand = () => (
   <>
     <Flex gap="gap.medium" debug>
-      <Flex.Item as="div" size="size.medium">
+      <Flex.Item size="size.medium">
         <div style={{ position: 'relative' }}>
           <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
         </div>

From cad2801a31e812739353e796238927f8648fdc1e Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 14:00:22 +0100
Subject: [PATCH 14/39] rename type of flex item variables

---
 .../src/themes/teams/components/Flex/flexItemVariables.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
index c83d773b7a..8ee1219b6d 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
@@ -4,9 +4,9 @@ import { FlexItemSize } from '../../../../components/Flex/FlexItem'
 
 type SizeValues = { [Key in FlexItemSize]: string }
 
-export type FlexVariables = SizeValues
+export type FlexItemVariables = SizeValues
 
-export default (): FlexVariables => ({
+export default (): FlexItemVariables => ({
   'size.half': '50%',
   'size.quater': '25%',
 

From e1ba1176958ffbf6f13d514dfe7abc8dd612072d Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 14:34:30 +0100
Subject: [PATCH 15/39] fix typo

---
 .../components/Flex/Types/FlexColumnsExample.shorthand.tsx    | 4 ++--
 packages/react/src/components/Flex/FlexItem.tsx               | 2 +-
 .../src/themes/teams/components/Flex/flexItemVariables.ts     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
index 5aa8efa5d9..d6948fdce9 100644
--- a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
@@ -14,7 +14,7 @@ const FlexExampleShorthand = () => (
     </Flex>
 
     <Flex gap="gap.small" padding="padding.medium">
-      <Flex.Item size="size.quater">
+      <Flex.Item size="size.quarter">
         <Segment content="1/4" />
       </Flex.Item>
 
@@ -22,7 +22,7 @@ const FlexExampleShorthand = () => (
         <Segment content="1/2" />
       </Flex.Item>
 
-      <Flex.Item size="size.quater">
+      <Flex.Item size="size.quarter">
         <Segment content="1/4" />
       </Flex.Item>
     </Flex>
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 45f2840c69..b0f33a7220 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -5,7 +5,7 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
 
-export type FlexItemSize = 'size.half' | 'size.quater' | 'size.small' | 'size.medium'
+export type FlexItemSize = 'size.half' | 'size.quarter' | 'size.small' | 'size.medium'
 
 export interface FlexItemProps {
   /** Controls item's alignment. */
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
index 8ee1219b6d..261d85975d 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
@@ -8,7 +8,7 @@ export type FlexItemVariables = SizeValues
 
 export default (): FlexItemVariables => ({
   'size.half': '50%',
-  'size.quater': '25%',
+  'size.quarter': '25%',
 
   'size.small': pxToRem(150),
   'size.medium': pxToRem(200),

From b0d6311f6ce2ddeeb979e0c5c163f3cdaca2be4b Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:03:44 +0100
Subject: [PATCH 16/39] remove unnecessary comments

---
 packages/react/src/components/Flex/Flex.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 4fcf9fca2a..b1dc5ff8eb 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -76,11 +76,10 @@ class Flex extends UIComponent<ReactProps<FlexProps>, any> {
 
     gap: PropTypes.string,
 
-    ////////// EXPERIMENTAL ONES /////////////
     padding: PropTypes.string,
-    debug: PropTypes.bool,
     fill: PropTypes.bool,
-    ////////////////////////////////////////////
+
+    debug: PropTypes.bool,
   }
 
   renderChildren = gapClasses => {

From 0520069564571a99201e5cf1db1530613e8fdb35 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:08:28 +0100
Subject: [PATCH 17/39] update flex item marker comment

---
 packages/react/src/components/Flex/FlexItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index b0f33a7220..511aa9fc79 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -62,11 +62,11 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
 
   displayName: 'FlexItem'
 
-  // Boolean flag for now, Symbol-based approach should be used instead
-  // However, there are some concerns related to browser compatibility if Symbols will be used
-  // static __isFlexItem = true
-
   static create: Function
+
+  // Boolean flag for now, Symbol-based approach may be used instead.
+  // However, there are  concerns related to browser compatibility if Symbols will be used.
+  // Completely alternative approach - check class name of React element (and generalize this logic).
   static __isFlexItem = true
 
   renderComponent({ styles, classes }) {

From 101f03c94765e0e09a8b75e230a5faae1f188018 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:09:29 +0100
Subject: [PATCH 18/39] further remove stale comments

---
 packages/react/src/components/Flex/Flex.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index b1dc5ff8eb..d30043f4f5 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -28,11 +28,9 @@ export interface FlexProps {
   /** Defines strategy for distributing remaining space between items. */
   space?: 'around' | 'between' | 'evenly'
 
-  // for now - but it should be a string with limited set of values
   /** Defines gap between each two adjacent child items. */
   gap?: FlexGap
 
-  ////////// EXPERIMENTAL ONES /////////////
   /** Defines container's padding. */
   padding?: FlexPadding
 

From 3819197c105a7151215fed323dbe5acc9385f4c6 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:14:07 +0100
Subject: [PATCH 19/39] further refactoring

---
 docs/src/examples/components/Flex/index.tsx     | 4 ++--
 packages/react/src/components/Flex/Flex.tsx     | 2 +-
 packages/react/src/components/Flex/FlexItem.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/examples/components/Flex/index.tsx b/docs/src/examples/components/Flex/index.tsx
index 7d07779533..eae87ca08f 100644
--- a/docs/src/examples/components/Flex/index.tsx
+++ b/docs/src/examples/components/Flex/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import Types from './Types'
 
 const FlexExamples = () => (
-  <div>
+  <>
     <Types />
-  </div>
+  </>
 )
 
 export default FlexExamples
diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index d30043f4f5..a59100d84e 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -44,7 +44,7 @@ export interface FlexProps {
 /**
  * Arrange group of items aligned towards common direction.
  */
-class Flex extends UIComponent<ReactProps<FlexProps>, any> {
+class Flex extends UIComponent<ReactProps<FlexProps>> {
   static Item: typeof FlexItem
 
   static Gap: any
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 511aa9fc79..d5500b3ff5 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -86,7 +86,7 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
 
 export default FlexItem
 
-const withStyles = (element: React.ReactElement<any>, styles, classes): any => {
+const withStyles = (element: React.ReactElement<any>, styles, classes): React.ReactElement<any> => {
   if (!styles) {
     return element
   }

From 8115ad2be73e6baf014bd74708891f0bf82dc066 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:29:29 +0100
Subject: [PATCH 20/39] rename refactoring

---
 packages/react/src/components/Flex/FlexItem.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index d5500b3ff5..2e7a837696 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -80,13 +80,17 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
       })
     }
 
-    return withStyles(React.Children.only(children), styles, classes)
+    return applyStyles(React.Children.only(children), styles, classes)
   }
 }
 
 export default FlexItem
 
-const withStyles = (element: React.ReactElement<any>, styles, classes): React.ReactElement<any> => {
+const applyStyles = (
+  element: React.ReactElement<any>,
+  styles,
+  classes,
+): React.ReactElement<any> => {
   if (!styles) {
     return element
   }

From 4bb83c1d7beeffe20eceaf107c7d6e48805e986d Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 15:33:00 +0100
Subject: [PATCH 21/39] add padding to examples

---
 .../components/Flex/Types/FlexMediaCardExample.shorthand.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
index e904f06038..191d54704b 100644
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
@@ -3,7 +3,7 @@ import { Flex, Image, Text, Header } from '@stardust-ui/react'
 
 const FlexExampleShorthand = () => (
   <>
-    <Flex gap="gap.medium" debug>
+    <Flex gap="gap.medium" padding="padding.medium" debug>
       <Flex.Item size="size.medium">
         <div style={{ position: 'relative' }}>
           <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />

From 52c4e3374d7001f5e647c22917525d73c17e8360 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 16:43:00 +0100
Subject: [PATCH 22/39] address review comments

---
 ...d.tsx => FlexExampleColumns.shorthand.tsx} |  4 +-
 .../Flex/Types/FlexExampleInput.shorthand.tsx | 34 ++++++++--------
 .../FlexExampleItemsAlignment.shorthand.tsx   | 38 ++++++++++++++++++
 .../Types/FlexExampleMediaCard.shorthand.tsx  | 29 ++++++++++++++
 .../FlexExampleMixedAlignment.shorthand.tsx   | 24 +++++++++++
 .../Types/FlexExampleNavMenu.shorthand.tsx    | 22 +++++-----
 ...ItemsAlignmentOptionsExample.shorthand.tsx | 40 -------------------
 .../Types/FlexMediaCardExample.shorthand.tsx  | 31 --------------
 .../FlexMixedAlignmentExample.shorthand.tsx   | 26 ------------
 .../examples/components/Flex/Types/index.tsx  |  8 ++--
 10 files changed, 123 insertions(+), 133 deletions(-)
 rename docs/src/examples/components/Flex/Types/{FlexColumnsExample.shorthand.tsx => FlexExampleColumns.shorthand.tsx} (94%)
 create mode 100644 docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
 create mode 100644 docs/src/examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx

diff --git a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleColumns.shorthand.tsx
similarity index 94%
rename from docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
rename to docs/src/examples/components/Flex/Types/FlexExampleColumns.shorthand.tsx
index d6948fdce9..f74c052376 100644
--- a/docs/src/examples/components/Flex/Types/FlexColumnsExample.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleColumns.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Flex, Segment } from '@stardust-ui/react'
 
-const FlexExampleShorthand = () => (
+const FlexExampleColumns = () => (
   <>
     <Flex gap="gap.small" padding="padding.medium">
       <Flex.Item size="size.half">
@@ -39,4 +39,4 @@ const FlexExampleShorthand = () => (
   </>
 )
 
-export default FlexExampleShorthand
+export default FlexExampleColumns
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
index 76cf0dd35c..093d13b00b 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -1,25 +1,23 @@
 import * as React from 'react'
 import { Flex, Input, Button, Label } from '@stardust-ui/react'
 
-const FlexExampleShorthand = () => (
-  <>
-    <Flex gap="gap.medium" debug>
-      <Flex.Item grow>
-        <Flex>
-          <Label
-            icon="plane"
-            styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
-          />
+const FlexExampleInput = () => (
+  <Flex gap="gap.medium" debug>
+    <Flex.Item grow>
+      <Flex>
+        <Label
+          icon="plane"
+          styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
+        />
 
-          <Flex.Item grow>
-            <Input placeholder="Enter your flight #" fluid />
-          </Flex.Item>
-        </Flex>
-      </Flex.Item>
+        <Flex.Item grow>
+          <Input placeholder="Enter your flight #" fluid />
+        </Flex.Item>
+      </Flex>
+    </Flex.Item>
 
-      <Button content="Load" />
-    </Flex>
-  </>
+    <Button content="Load" />
+  </Flex>
 )
 
-export default FlexExampleShorthand
+export default FlexExampleInput
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
new file mode 100644
index 0000000000..46a2707ccc
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleItemsAlignment = () => (
+  <Flex column gap="gap.large" hAlign="center" vAlign="center" debug>
+    {[
+      [
+        { hAlign: 'start', vAlign: 'start' },
+        { hAlign: 'start', vAlign: 'center' },
+        { hAlign: 'start', vAlign: 'end' },
+      ],
+      [
+        { hAlign: 'center', vAlign: 'start' },
+        { hAlign: 'center', vAlign: 'center' },
+        { hAlign: 'center', vAlign: 'end' },
+      ],
+      [
+        { hAlign: 'end', vAlign: 'start' },
+        { hAlign: 'end', vAlign: 'center' },
+        { hAlign: 'end', vAlign: 'end' },
+      ],
+    ].map(rowOfAlignmentProps => (
+      <Flex gap="gap.large">
+        {rowOfAlignmentProps.map((alignmentProps: any) => (
+          <Flex
+            inline
+            {...alignmentProps}
+            style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
+          >
+            <Segment styles={{ width: '30px', height: '30px' }} />
+          </Flex>
+        ))}
+      </Flex>
+    ))}
+  </Flex>
+)
+
+export default FlexExampleItemsAlignment
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
new file mode 100644
index 0000000000..227010fb4e
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Flex, Image, Text, Header } from '@stardust-ui/react'
+
+const FlexExampleMediaCard = () => (
+  <Flex gap="gap.medium" padding="padding.medium" debug>
+    <Flex.Item size="size.medium">
+      <div style={{ position: 'relative' }}>
+        <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
+      </div>
+    </Flex.Item>
+
+    <Flex.Item grow>
+      <Flex column gap="gap.small" vAlign="stretch">
+        <Flex space="between">
+          <Header as="h3" content="LOREM IPSUM" />
+          <Text as="pre" content="Oct 24th, 00:01" />
+        </Flex>
+
+        <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
+
+        <Flex.Item push>
+          <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
+        </Flex.Item>
+      </Flex>
+    </Flex.Item>
+  </Flex>
+)
+
+export default FlexExampleMediaCard
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand.tsx
new file mode 100644
index 0000000000..5fc0c353e5
--- /dev/null
+++ b/docs/src/examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Flex, Segment } from '@stardust-ui/react'
+
+const FlexExampleMixedAlignment = () => (
+  <Flex gap="gap.small" hAlign="center" vAlign="center" debug>
+    <Flex.Item align="start" size="size.small">
+      <Segment content="This cell should be top aligned." />
+    </Flex.Item>
+
+    <Flex.Item align="stretch" size="size.small">
+      <Segment content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus." />
+    </Flex.Item>
+
+    <Flex.Item align="center" size="size.small">
+      <Segment content="This cell should be center-aligned." />
+    </Flex.Item>
+
+    <Flex.Item align="end" size="size.small">
+      <Segment content="This cell should be bottom-aligned." />
+    </Flex.Item>
+  </Flex>
+)
+
+export default FlexExampleMixedAlignment
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
index 712990eaa6..1d5127f2f4 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react'
 import { Flex, Button } from '@stardust-ui/react'
 
-const FlexExampleShorthand = () => (
-  <>
-    <Flex gap="gap.small" debug>
-      <Button content="Logo" icon="chess rook" />
+const FlexExampleNavMenu = () => (
+  <Flex gap="gap.small" debug>
+    <Button content="Logo" icon="chess rook" />
 
-      <Flex.Item push>
-        <Button content="Page 1" />
-      </Flex.Item>
+    <Flex.Item push>
+      <Button content="Page 1" />
+    </Flex.Item>
 
-      <Button content="Page 2" />
-      <Button content="Page 3" />
-    </Flex>
-  </>
+    <Button content="Page 2" />
+    <Button content="Page 3" />
+  </Flex>
 )
 
-export default FlexExampleShorthand
+export default FlexExampleNavMenu
diff --git a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
deleted file mode 100644
index 1d9e9fe668..0000000000
--- a/docs/src/examples/components/Flex/Types/FlexItemsAlignmentOptionsExample.shorthand.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react'
-import { Flex, Segment } from '@stardust-ui/react'
-
-const FlexExampleShorthand = () => (
-  <>
-    <Flex column gap="gap.large" hAlign="center" vAlign="center" debug>
-      {[
-        [
-          { hAlign: 'start', vAlign: 'start' },
-          { hAlign: 'start', vAlign: 'center' },
-          { hAlign: 'start', vAlign: 'end' },
-        ],
-        [
-          { hAlign: 'center', vAlign: 'start' },
-          { hAlign: 'center', vAlign: 'center' },
-          { hAlign: 'center', vAlign: 'end' },
-        ],
-        [
-          { hAlign: 'end', vAlign: 'start' },
-          { hAlign: 'end', vAlign: 'center' },
-          { hAlign: 'end', vAlign: 'end' },
-        ],
-      ].map(rowOfAlignmentProps => (
-        <Flex gap="gap.large">
-          {rowOfAlignmentProps.map((alignmentProps: any) => (
-            <Flex
-              inline
-              {...alignmentProps}
-              style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
-            >
-              <Segment styles={{ width: '30px', height: '30px' }} />
-            </Flex>
-          ))}
-        </Flex>
-      ))}
-    </Flex>
-  </>
-)
-
-export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
deleted file mode 100644
index 191d54704b..0000000000
--- a/docs/src/examples/components/Flex/Types/FlexMediaCardExample.shorthand.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { Flex, Image, Text, Header } from '@stardust-ui/react'
-
-const FlexExampleShorthand = () => (
-  <>
-    <Flex gap="gap.medium" padding="padding.medium" debug>
-      <Flex.Item size="size.medium">
-        <div style={{ position: 'relative' }}>
-          <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
-        </div>
-      </Flex.Item>
-
-      <Flex.Item grow>
-        <Flex column gap="gap.small" vAlign="stretch">
-          <Flex space="between">
-            <Header as="h3" content="LOREM IPSUM" />
-            <Text as="pre" content="Oct 24th, 00:01" />
-          </Flex>
-
-          <Text content="Man braid iPhone locavore hashtag pop-up, roof party forage heirloom chillwave brooklyn yr 8-bit gochujang blog." />
-
-          <Flex.Item push>
-            <Text as="pre" content="COPYRIGHT: Stardust-UI Inc." />
-          </Flex.Item>
-        </Flex>
-      </Flex.Item>
-    </Flex>
-  </>
-)
-
-export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
deleted file mode 100644
index cbfaaaba6d..0000000000
--- a/docs/src/examples/components/Flex/Types/FlexMixedAlignmentExample.shorthand.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-import { Flex, Segment } from '@stardust-ui/react'
-
-const FlexExampleShorthand = () => (
-  <>
-    <Flex gap="gap.small" hAlign="center" vAlign="center" debug>
-      <Flex.Item align="start" size="size.small">
-        <Segment content="This cell should be top aligned." />
-      </Flex.Item>
-
-      <Flex.Item align="stretch" size="size.small">
-        <Segment content="Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus." />
-      </Flex.Item>
-
-      <Flex.Item align="center" size="size.small">
-        <Segment content="This cell should be center-aligned." />
-      </Flex.Item>
-
-      <Flex.Item align="end" size="size.small">
-        <Segment content="This cell should be bottom-aligned." />
-      </Flex.Item>
-    </Flex>
-  </>
-)
-
-export default FlexExampleShorthand
diff --git a/docs/src/examples/components/Flex/Types/index.tsx b/docs/src/examples/components/Flex/Types/index.tsx
index 024325444d..52d481fa18 100644
--- a/docs/src/examples/components/Flex/Types/index.tsx
+++ b/docs/src/examples/components/Flex/Types/index.tsx
@@ -7,7 +7,7 @@ const Types = () => (
     <ComponentExample
       title="Media Card"
       description="Flex items alignment options."
-      examplePath="components/Flex/Types/FlexMediaCardExample"
+      examplePath="components/Flex/Types/FlexExampleMediaCard"
     />
     <ComponentExample
       title="Input"
@@ -22,17 +22,17 @@ const Types = () => (
     <ComponentExample
       title="Items Alignment"
       description="Flex items alignment options."
-      examplePath="components/Flex/Types/FlexItemsAlignmentOptionsExample"
+      examplePath="components/Flex/Types/FlexExampleItemsAlignment"
     />
     <ComponentExample
       title="Mixed Alignment"
       description="Flex mixed alignment feature."
-      examplePath="components/Flex/Types/FlexMixedAlignmentExample"
+      examplePath="components/Flex/Types/FlexExampleMixedAlignment"
     />
     <ComponentExample
       title="Columns (item size)"
       description="Flex columns example."
-      examplePath="components/Flex/Types/FlexColumnsExample"
+      examplePath="components/Flex/Types/FlexExampleColumns"
     />
   </ExampleSection>
 )

From 2d6e7a29379efe8577b6d339889173638eb84a20 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 16:46:17 +0100
Subject: [PATCH 23/39] add types

---
 .../react/src/themes/teams/components/Flex/utils.ts    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Flex/utils.ts b/packages/react/src/themes/teams/components/Flex/utils.ts
index 3a6bfea26c..7e09d509c9 100644
--- a/packages/react/src/themes/teams/components/Flex/utils.ts
+++ b/packages/react/src/themes/teams/components/Flex/utils.ts
@@ -1,4 +1,4 @@
-export const toFlexAlignment = propValue => {
+export const toFlexAlignment = (propValue: string) => {
   const trimmedValue = propValue.trim()
 
   if (trimmedValue === 'start' || trimmedValue === 'end') {
@@ -8,8 +8,6 @@ export const toFlexAlignment = propValue => {
   return trimmedValue
 }
 
-export const toFlexItemSizeValues = sizeValue => {
-  return {
-    flexBasis: sizeValue,
-  }
-}
+export const toFlexItemSizeValues = (sizeValue: string) => ({
+  flexBasis: sizeValue,
+})

From 10ab8b75d47fe4dea43fcde220510fb18fa7e309 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 16:48:43 +0100
Subject: [PATCH 24/39] simplify gap render condition

---
 packages/react/src/components/Flex/Flex.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index a59100d84e..f3e65c0d40 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -83,8 +83,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
   renderChildren = gapClasses => {
     const { column, gap, children } = this.props
 
-    let isFirst = true
-    return React.Children.map(children, (child: React.ReactElement<any>) => {
+    return React.Children.map(children, (child: React.ReactElement<any>, index) => {
       const childElement =
         child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
           ? React.cloneElement(child, {
@@ -92,9 +91,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
             })
           : child
 
-      const renderGap = !isFirst
-      isFirst = false
-
+      const renderGap = index !== 0
       return (
         <>
           {renderGap && gap && <Flex.Gap className={gapClasses} />}

From 447f745677fcced3089ffa4e59bed04c3d52578d Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Wed, 6 Feb 2019 16:50:19 +0100
Subject: [PATCH 25/39] remove obsolete comment

---
 packages/react/src/themes/teams/components/Flex/flexStyles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/themes/teams/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
index ee16a224ec..20ac10293d 100644
--- a/packages/react/src/themes/teams/components/Flex/flexStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
@@ -26,7 +26,6 @@ const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
 
       ...(p.wrap && { flexWrap: 'wrap' }),
 
-      // NOTE - EXPERIMENTAL PROPS //
       ...(p.fill && {
         height: '100%',
       }),

From bcd9929f30bc5f2e338c4136c39698f4d383b86b Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 16:59:01 +0100
Subject: [PATCH 26/39] optimize the amount of types necessary

---
 packages/react/src/components/Flex/Flex.tsx                | 7 ++-----
 .../src/themes/teams/components/Flex/flexVariables.ts      | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index f3e65c0d40..55bcf12385 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -6,9 +6,6 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { ReactProps } from '../../types'
 import FlexItem from './FlexItem'
 
-export type FlexGap = 'gap.small' | 'gap.medium' | 'gap.large'
-export type FlexPadding = 'padding.medium'
-
 export interface FlexProps {
   /** Defines if container should be inline element. */
   inline?: boolean
@@ -29,10 +26,10 @@ export interface FlexProps {
   space?: 'around' | 'between' | 'evenly'
 
   /** Defines gap between each two adjacent child items. */
-  gap?: FlexGap
+  gap?: 'gap.small' | 'gap.medium' | 'gap.large'
 
   /** Defines container's padding. */
-  padding?: FlexPadding
+  padding?: 'padding.medium'
 
   /** Enables debug mode. */
   debug?: boolean
diff --git a/packages/react/src/themes/teams/components/Flex/flexVariables.ts b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
index be7c300b38..3c93263a4d 100644
--- a/packages/react/src/themes/teams/components/Flex/flexVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
-import { FlexGap, FlexPadding } from '../../../../components/Flex/Flex'
+import { FlexProps } from '../../../../components/Flex/Flex'
 
-type GapValues = { [Key in FlexGap]: string }
-type PaddingValues = { [Key in FlexPadding]: string }
+type GapValues = { [Key in FlexProps['gap']]: string }
+type PaddingValues = { [Key in FlexProps['padding']]: string }
 
 export type FlexVariables = GapValues & PaddingValues
 

From e0a4ea3d661efc6e4abab461b96e48abdae460ae Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 17:49:50 +0100
Subject: [PATCH 27/39] remove inline style prop

---
 .../Flex/Types/FlexExampleItemsAlignment.shorthand.tsx      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
index 46a2707ccc..b729bb2892 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand.tsx
@@ -22,11 +22,7 @@ const FlexExampleItemsAlignment = () => (
     ].map(rowOfAlignmentProps => (
       <Flex gap="gap.large">
         {rowOfAlignmentProps.map((alignmentProps: any) => (
-          <Flex
-            inline
-            {...alignmentProps}
-            style={{ width: '100px', height: '100px', border: '1px dashed grey' }}
-          >
+          <Flex inline {...alignmentProps} style={{ width: '100px', height: '100px' }} debug>
             <Segment styles={{ width: '30px', height: '30px' }} />
           </Flex>
         ))}

From 31f1bd414ef25a050224497d60ae94321ca6d7be Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:20:02 +0100
Subject: [PATCH 28/39] imtroduce type for Flex Gap

---
 packages/react/src/components/Flex/Flex.tsx   | 33 +++++++++----------
 .../react/src/components/Flex/FlexGap.tsx     |  6 ++++
 2 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 packages/react/src/components/Flex/FlexGap.tsx

diff --git a/packages/react/src/components/Flex/Flex.tsx b/packages/react/src/components/Flex/Flex.tsx
index 55bcf12385..285a4ed5ca 100644
--- a/packages/react/src/components/Flex/Flex.tsx
+++ b/packages/react/src/components/Flex/Flex.tsx
@@ -1,10 +1,12 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
+import cx from 'classnames'
 
 import { UIComponent, commonPropTypes } from '../../lib'
 import { ReactProps } from '../../types'
 import FlexItem from './FlexItem'
+import FlexGap from './FlexGap'
 
 export interface FlexProps {
   /** Defines if container should be inline element. */
@@ -42,9 +44,9 @@ export interface FlexProps {
  * Arrange group of items aligned towards common direction.
  */
 class Flex extends UIComponent<ReactProps<FlexProps>> {
-  static Item: typeof FlexItem
+  static Item = FlexItem
 
-  static Gap: any
+  static Gap = FlexGap
 
   static displayName = 'Flex'
   static className = 'ui-flex'
@@ -69,15 +71,23 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
 
     space: PropTypes.oneOf(['around', 'between', 'evenly']),
 
-    gap: PropTypes.string,
+    gap: PropTypes.oneOf(['gap.small', 'gap.medium', 'gap.large']),
 
-    padding: PropTypes.string,
+    padding: PropTypes.oneOf(['padding.medium']),
     fill: PropTypes.bool,
 
     debug: PropTypes.bool,
   }
 
-  renderChildren = gapClasses => {
+  renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
+    return (
+      <ElementType className={classes.root} {...unhandledProps}>
+        {this.renderChildren(classes.gap)}
+      </ElementType>
+    )
+  }
+
+  renderChildren = (gapClasses: string) => {
     const { column, gap, children } = this.props
 
     return React.Children.map(children, (child: React.ReactElement<any>, index) => {
@@ -91,23 +101,12 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
       const renderGap = index !== 0
       return (
         <>
-          {renderGap && gap && <Flex.Gap className={gapClasses} />}
+          {renderGap && gap && <Flex.Gap className={cx(`${Flex.className}__gap`, gapClasses)} />}
           {childElement}
         </>
       )
     })
   }
-
-  renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
-    return (
-      <ElementType className={classes.root} {...unhandledProps}>
-        {this.renderChildren(classes.gap)}
-      </ElementType>
-    )
-  }
 }
 
-Flex.Item = FlexItem
-Flex.Gap = ({ className }) => <div className={className} />
-
 export default Flex
diff --git a/packages/react/src/components/Flex/FlexGap.tsx b/packages/react/src/components/Flex/FlexGap.tsx
new file mode 100644
index 0000000000..2847895207
--- /dev/null
+++ b/packages/react/src/components/Flex/FlexGap.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+const FlexGap: React.FC<any> = ({ className }) => <div className={className} />
+FlexGap.displayName = 'FlexGap'
+
+export default FlexGap

From 5d0682e9a52b6dee2e965a809c40fcce7fffe6fe Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:21:40 +0100
Subject: [PATCH 29/39] introduce additional flex item size option

---
 packages/react/src/components/Flex/FlexItem.tsx            | 7 ++++++-
 .../src/themes/teams/components/Flex/flexItemVariables.ts  | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 2e7a837696..1333fd9661 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -5,7 +5,12 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
 
-export type FlexItemSize = 'size.half' | 'size.quarter' | 'size.small' | 'size.medium'
+export type FlexItemSize =
+  | 'size.half'
+  | 'size.quarter'
+  | 'size.small'
+  | 'size.medium'
+  | 'size.large'
 
 export interface FlexItemProps {
   /** Controls item's alignment. */
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
index 261d85975d..43140fe65b 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
@@ -12,4 +12,5 @@ export default (): FlexItemVariables => ({
 
   'size.small': pxToRem(150),
   'size.medium': pxToRem(200),
+  'size.large': pxToRem(300),
 })

From 81a975b0acc4d89d11641814c8192006849cfcfa Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:23:05 +0100
Subject: [PATCH 30/39] refine prop types of flex item

---
 packages/react/src/components/Flex/FlexItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 1333fd9661..2f7c814ee7 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -52,7 +52,7 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
       content: false,
     }),
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
-    size: PropTypes.string,
+    size: PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']),
 
     stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

From 62c20003732fcdf662aa5c10fe0a2aa9cbd92fd2 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:26:18 +0100
Subject: [PATCH 31/39] use built-in TS types

---
 packages/react/src/components/Flex/FlexItem.tsx          | 9 +--------
 .../src/themes/teams/components/Flex/flexItemStyles.ts   | 3 ++-
 .../themes/teams/components/Flex/flexItemVariables.ts    | 4 ++--
 .../src/themes/teams/components/Flex/flexVariables.ts    | 4 ++--
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 2f7c814ee7..5fe9b4bb0c 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -5,19 +5,12 @@ import { UIComponent, commonPropTypes } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
 
-export type FlexItemSize =
-  | 'size.half'
-  | 'size.quarter'
-  | 'size.small'
-  | 'size.medium'
-  | 'size.large'
-
 export interface FlexItemProps {
   /** Controls item's alignment. */
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: FlexItemSize
+  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large'
 
   /**
    * Item can fill remaining space of the container.
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
index 1ba98e1949..404cd4a76d 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -2,8 +2,9 @@ import { ComponentSlotStylesInput } from '../../../types'
 import { FlexItemProps } from '../../../../components/Flex/FlexItem'
 
 import { toFlexAlignment, toFlexItemSizeValues } from './utils'
+import { FlexItemVariables } from './flexItemVariables'
 
-const flexItemStyles: ComponentSlotStylesInput<FlexItemProps, any> = {
+const flexItemStyles: ComponentSlotStylesInput<FlexItemProps, FlexItemVariables> = {
   root: ({ props: p, variables: v }) => {
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
index 43140fe65b..10e7650816 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemVariables.ts
@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
 
-import { FlexItemSize } from '../../../../components/Flex/FlexItem'
+import { FlexItemProps } from '../../../../components/Flex/FlexItem'
 
-type SizeValues = { [Key in FlexItemSize]: string }
+type SizeValues = Record<FlexItemProps['size'], string>
 
 export type FlexItemVariables = SizeValues
 
diff --git a/packages/react/src/themes/teams/components/Flex/flexVariables.ts b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
index 3c93263a4d..dd440b1b89 100644
--- a/packages/react/src/themes/teams/components/Flex/flexVariables.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexVariables.ts
@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
 import { FlexProps } from '../../../../components/Flex/Flex'
 
-type GapValues = { [Key in FlexProps['gap']]: string }
-type PaddingValues = { [Key in FlexProps['padding']]: string }
+type GapValues = Record<FlexProps['gap'], string>
+type PaddingValues = Record<FlexProps['padding'], string>
 
 export type FlexVariables = GapValues & PaddingValues
 

From fc1582e438ea4abfe30507f6d89caa4236ea76bb Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:27:10 +0100
Subject: [PATCH 32/39] minor syntax simplification

---
 .../teams/components/Flex/flexStyles.ts       | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
index 20ac10293d..60c44c9dd0 100644
--- a/packages/react/src/themes/teams/components/Flex/flexStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
@@ -4,35 +4,33 @@ import { FlexProps } from '../../../../components/Flex/Flex'
 import { toFlexAlignment } from './utils'
 
 const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
-  root: ({ props: p, variables: v }) => {
-    return {
-      display: 'flex',
-      ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }),
+  root: ({ props: p, variables: v }) => ({
+    display: 'flex',
+    ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }),
 
-      ...(p.inline && { display: 'inline-flex' }),
+    ...(p.inline && { display: 'inline-flex' }),
 
-      ...(p.column && { flexDirection: 'column' }),
+    ...(p.column && { flexDirection: 'column' }),
 
-      ...(p.hAlign &&
-        (p.column
-          ? { alignItems: toFlexAlignment(p.hAlign) }
-          : { justifyContent: toFlexAlignment(p.hAlign) })),
-      ...(p.vAlign &&
-        (p.column
-          ? { justifyContent: toFlexAlignment(p.vAlign) }
-          : { alignItems: toFlexAlignment(p.vAlign) })),
+    ...(p.hAlign &&
+      (p.column
+        ? { alignItems: toFlexAlignment(p.hAlign) }
+        : { justifyContent: toFlexAlignment(p.hAlign) })),
+    ...(p.vAlign &&
+      (p.column
+        ? { justifyContent: toFlexAlignment(p.vAlign) }
+        : { alignItems: toFlexAlignment(p.vAlign) })),
 
-      ...(p.space && { justifyContent: `space-${p.space}` }),
+    ...(p.space && { justifyContent: `space-${p.space}` }),
 
-      ...(p.wrap && { flexWrap: 'wrap' }),
+    ...(p.wrap && { flexWrap: 'wrap' }),
 
-      ...(p.fill && {
-        height: '100%',
-      }),
+    ...(p.fill && {
+      height: '100%',
+    }),
 
-      ...(p.padding && { padding: v[p.padding] }),
-    }
-  },
+    ...(p.padding && { padding: v[p.padding] }),
+  }),
 
   gap: ({ props: p, variables: v }) => {
     const gapValue = v[p.gap]

From e26502f87a8997acd2477b01f203c9007be725e9 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 18:29:51 +0100
Subject: [PATCH 33/39] add type for flex variables in styles func

---
 packages/react/src/themes/teams/components/Flex/flexStyles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/themes/teams/components/Flex/flexStyles.ts b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
index 60c44c9dd0..df0cf15ab1 100644
--- a/packages/react/src/themes/teams/components/Flex/flexStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexStyles.ts
@@ -2,8 +2,9 @@ import { ComponentSlotStylesInput } from '../../../types'
 import { FlexProps } from '../../../../components/Flex/Flex'
 
 import { toFlexAlignment } from './utils'
+import { FlexVariables } from './flexVariables'
 
-const flexStyles: ComponentSlotStylesInput<FlexProps, any> = {
+const flexStyles: ComponentSlotStylesInput<FlexProps, FlexVariables> = {
   root: ({ props: p, variables: v }) => ({
     display: 'flex',
     ...(p.debug && { border: '1px dotted grey', background: 'lightgrey' }),

From 7797fc18b963c359e381f861b9c5b03ca8321092 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 19:19:15 +0100
Subject: [PATCH 34/39] expose prop types to public interface

---
 packages/react/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7a20c2c53f..aceb5e58b5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -58,8 +58,8 @@ export {
   DropdownSearchInputProps,
 } from './components/Dropdown/DropdownSearchInput'
 
-export { default as Flex } from './components/Flex/Flex'
-export { default as FlexItem } from './components/Flex/FlexItem'
+export { default as Flex, FlexProps } from './components/Flex/Flex'
+export { default as FlexItem, FlexItemProps } from './components/Flex/FlexItem'
 
 export { default as Form, FormProps } from './components/Form/Form'
 export { default as FormField, FormFieldProps } from './components/Form/FormField'

From b3f2e86d5fdba2b8c57d44314ee3a60420d1a48c Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 19:34:55 +0100
Subject: [PATCH 35/39] reorder preferences of merged styles

---
 packages/react/src/components/Flex/FlexItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 5fe9b4bb0c..56ab6170d2 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -102,6 +102,6 @@ const applyStyles = (
 
   // assuming element is Stardust element
   return React.cloneElement(element, {
-    styles: mergeStyles(element.props.styles || {}, styles.root),
+    styles: mergeStyles(styles.root, element.props.styles),
   })
 }

From c87230fd6cdca71b8c06a48b8eaf74dac08b8bbf Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 19:37:50 +0100
Subject: [PATCH 36/39] upd

---
 packages/react/src/components/Flex/FlexItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index 56ab6170d2..e6f43466b5 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -102,6 +102,6 @@ const applyStyles = (
 
   // assuming element is Stardust element
   return React.cloneElement(element, {
-    styles: mergeStyles(styles.root, element.props.styles),
+    styles: mergeStyles(styles.root || {}, element.props.styles),
   })
 }

From 8dab4207b253f12c3d72085a00624acded6c9dd9 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 23:36:46 +0100
Subject: [PATCH 37/39] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b9a2f1c0a..faf8270784 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
 - Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
 - Add `rtl` field in the `SvgIconFuncArg`, and used it in Teams theme's number-list icon ([#851](https://github.com/stardust-ui/react/pull/851))
+- Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

From e99c27a839813705434bfd2bab1d4c5d80334458 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Thu, 7 Feb 2019 23:38:43 +0100
Subject: [PATCH 38/39] upd changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b35e413b6d..ea37e39175 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add single search flavor for `Dropdown` component @Bugaa92 ([#839](https://github.com/stardust-ui/react/pull/839))
 - Add multiple selection flavor for `Dropdown` component @Bugaa92 ([#845](https://github.com/stardust-ui/react/pull/845))
 - Add `black` and `white` options for the `color` prop of the `Label` component @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
+- Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
 
 <!--------------------------------[ v0.20.0 ]------------------------------- -->
 ## [v0.20.0](https://github.com/stardust-ui/react/tree/v0.20.0) (2019-02-06)
@@ -43,7 +44,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
 - Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
 - Add `rtl` field in the `SvgIconFuncArg`, and used it in Teams theme's number-list icon ([#851](https://github.com/stardust-ui/react/pull/851))
-- Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

From 1a374914548d39a96827608d1f9cbcbff450eb56 Mon Sep 17 00:00:00 2001
From: kuzhelov <kuroman@microsoft.com>
Date: Fri, 8 Feb 2019 01:52:01 +0100
Subject: [PATCH 39/39] upd media card example

---
 .../components/Flex/Types/FlexExampleMediaCard.shorthand.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
index 227010fb4e..8bb6c7a8b8 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx
@@ -5,7 +5,7 @@ const FlexExampleMediaCard = () => (
   <Flex gap="gap.medium" padding="padding.medium" debug>
     <Flex.Item size="size.medium">
       <div style={{ position: 'relative' }}>
-        <Image fluid src="http://localhost:8080/public/images/avatar/large/helen.jpg" />
+        <Image fluid src="public/images/avatar/large/ade.jpg" />
       </div>
     </Flex.Item>