# All files / layouts/Form FlexFields.js

80% Statements 4/5
100% Branches 0/0
0% Functions 0/1
80% Lines 4/5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68

    5x

    5x

    5x

    5x

     import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import parseFlex from '../../extensions/parseFlex';

    /**
     * DEPRECATED
     */
    const FlexFields = styled.div`
      display: flex;
      flex-direction: row;

      ${({ flex }) => parseFlex(flex)}
    `;

    FlexFields.propTypes = {
      /**
       * A visual string representation of the field layout. Like '1 0 22'. Numbers are flex sizes, spaces are space.
       */
      flex: PropTypes.string,
      /**
       * Adds an id to the element.
       */
      id: PropTypes.string,
      /**
       * Adds a class name to the element.
       */
      className: PropTypes.string,
    }

    FlexFields.defaultProps = {
      flex: '1',
      id: null,
      className: null,
    };

    FlexFields.usage = `
    # FlexFields

    Yet another way to layout fields on a row. This one tries to expose more powerful usage of flexbox via simpler implementation.

    There's obviously too many ways to layout fields in rows. Perhaps these can be consolidated in some way, or we should choose one that works best for all use cases. This one is really good at supporting cases where you want fields pushed to different sides of the row with space between.

    \`\`\`
    <FlexFields flex="00 1 0 3">
      <One />
      <Two />
      <Three />
      <Four />
      <Five />
    </FlexFields>
    \`\`\`

    FlexFields is nestable. So if you want half the row to be one field, and then the other half broken up among 3, you'd do something like

    \`\`\`
    <FlexFields flex="11">
      <One />
      <FlexFields flex="111">
        <Two />
        <Three />
        <Four />
      </FlexFields>
    </FlexFields>
    \`\`\`
    `;

    export default FlexFields;