(
+
+
+ Min-width 300px
+
+
+
+ Min-width 300px
+
+
+
+ Min-width 300px
+
+
+);
diff --git a/ui_framework/doc_site/src/views/flex/flex_grow_numeric.js b/ui_framework/doc_site/src/views/flex/flex_grow_numeric.js
new file mode 100644
index 000000000000..9ed249d857a7
--- /dev/null
+++ b/ui_framework/doc_site/src/views/flex/flex_grow_numeric.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+ KuiFlexGroup,
+ KuiFlexItem,
+} from '../../../../components';
+
+export default () => (
+
+
+ 1
+ 2
wraps content if necessary
+ 3
expands_to_fit_if_content_cannot_wrap
+ 4
+
+
+
+
+
+ 6
+ 3
+ 1
+ 3
+ 6
+
+
+);
diff --git a/ui_framework/doc_site/src/views/flex/flex_grow.js b/ui_framework/doc_site/src/views/flex/flex_grow_zero.js
similarity index 100%
rename from ui_framework/doc_site/src/views/flex/flex_grow.js
rename to ui_framework/doc_site/src/views/flex/flex_grow_zero.js
diff --git a/ui_framework/src/components/flex/_flex_group.scss b/ui_framework/src/components/flex/_flex_group.scss
index 16931e2a781a..3d76a1f87246 100644
--- a/ui_framework/src/components/flex/_flex_group.scss
+++ b/ui_framework/src/components/flex/_flex_group.scss
@@ -6,53 +6,60 @@
flex-grow: 1;
flex-basis: 0;
}
+}
- // Gutter Sizes
- &.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem {
- margin-left: $kuiSizeS;
- }
+$gutterTypes: (
+ gutterSmall: $kuiSizeS,
+ gutterMedium: $kuiSize,
+ gutterLarge: $kuiSizeL,
+ gutterExtraLarge: $kuiSizeXXL,
+);
- &.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem {
- margin-left: $kuiSize;
- }
+// Gutter Sizes
+@each $gutterName, $gutterSize in $gutterTypes {
+ $halfGutterSize: $gutterSize * 0.5;
- &.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem {
- margin-left: $kuiSizeL;
- }
+ &.kuiFlexGroup--#{$gutterName} {
+ margin: -$halfGutterSize;
- &.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem {
- margin-left: $kuiSizeXXL;
+ & > .kuiFlexItem {
+ margin: $halfGutterSize;
+ }
}
+}
- // Justify the grid
- &.kuiFlexGroup--justifyContentSpaceBetween {
- justify-content: space-between;
- }
+// Justify the grid
+.kuiFlexGroup--justifyContentSpaceBetween {
+ justify-content: space-between;
+}
- &.kuiFlexGroup--justifyContentSpaceAround {
- justify-content: space-around;
- }
+.kuiFlexGroup--justifyContentSpaceAround {
+ justify-content: space-around;
+}
- &.kuiFlexGroup--justifyContentCenter {
- justify-content: center;
- }
+.kuiFlexGroup--justifyContentCenter {
+ justify-content: center;
+}
- &.kuiFlexGroup--justifyContentFlexEnd {
- justify-content: flex-end;
- }
+.kuiFlexGroup--justifyContentFlexEnd {
+ justify-content: flex-end;
+}
- // Align Items
- &.kuiFlexGroup--alignItemsStart {
- align-items: flex-start;
- }
+// Align Items
+.kuiFlexGroup--alignItemsStart {
+ align-items: flex-start;
+}
- &.kuiFlexGroup--alignItemsCenter {
- align-items: center;
- }
+.kuiFlexGroup--alignItemsCenter {
+ align-items: center;
+}
- &.kuiFlexGroup--alignItemsEnd {
- align-items: flex-end;
- }
+.kuiFlexGroup--alignItemsEnd {
+ align-items: flex-end;
+}
+
+.kuiFlexGroup--wrap {
+ flex-wrap: wrap;
}
@include screenXSmall {
diff --git a/ui_framework/src/components/flex/_flex_item.scss b/ui_framework/src/components/flex/_flex_item.scss
index 82147f38df38..167222dcf478 100644
--- a/ui_framework/src/components/flex/_flex_item.scss
+++ b/ui_framework/src/components/flex/_flex_item.scss
@@ -13,6 +13,12 @@
flex-grow: 0; /* 2 */
flex-basis: auto; /* 2 */
}
+
+ @for $i from 1 through 10 {
+ &.kuiFlexItem--flexGrow#{$i} {
+ flex-grow: $i
+ }
+ }
}
// On mobile we force them to stack and act the same.
diff --git a/ui_framework/src/components/flex/flex_group.js b/ui_framework/src/components/flex/flex_group.js
index ae0fbf441541..6c5567d4d758 100644
--- a/ui_framework/src/components/flex/flex_group.js
+++ b/ui_framework/src/components/flex/flex_group.js
@@ -31,13 +31,24 @@ const justifyContentToClassNameMap = {
export const JUSTIFY_CONTENTS = Object.keys(justifyContentToClassNameMap);
-export const KuiFlexGroup = ({ children, className, gutterSize, alignItems, justifyContent, ...rest }) => {
+export const KuiFlexGroup = ({
+ children,
+ className,
+ gutterSize,
+ alignItems,
+ justifyContent,
+ wrap,
+ ...rest
+}) => {
const classes = classNames(
'kuiFlexGroup',
gutterSizeToClassNameMap[gutterSize],
alignItemsToClassNameMap[alignItems],
justifyContentToClassNameMap[justifyContent],
- className
+ className,
+ {
+ 'kuiFlexGroup--wrap': wrap,
+ },
);
return (
@@ -56,10 +67,12 @@ KuiFlexGroup.propTypes = {
gutterSize: PropTypes.oneOf(GUTTER_SIZES),
alignItems: PropTypes.oneOf(ALIGN_ITEMS),
justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS),
+ wrap: PropTypes.bool,
};
KuiFlexGroup.defaultProps = {
gutterSize: 'large',
alignItems: 'stretch',
justifyContent: 'flexStart',
+ wrap: false,
};
diff --git a/ui_framework/src/components/flex/flex_item.js b/ui_framework/src/components/flex/flex_item.js
index d348924d7e45..eeabc214de0a 100644
--- a/ui_framework/src/components/flex/flex_item.js
+++ b/ui_framework/src/components/flex/flex_item.js
@@ -2,11 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+const validGrowNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
export const KuiFlexItem = ({ children, className, grow, ...rest }) => {
const classes = classNames(
'kuiFlexItem',
{
'kuiFlexItem--flexGrowZero': !grow,
+ [`kuiFlexItem--flexGrow${grow}`]: validGrowNumbers.indexOf(grow) >= 0,
},
className
);
@@ -23,9 +26,25 @@ export const KuiFlexItem = ({ children, className, grow, ...rest }) => {
KuiFlexItem.propTypes = {
children: PropTypes.node,
- grow: PropTypes.bool,
+ grow: growPropType,
};
+function growPropType(props, propName, componentName) {
+ const value = props[propName];
+
+ const validValues = [
+ null, undefined,
+ true, false,
+ ...validGrowNumbers
+ ];
+
+ if (validValues.indexOf(value) === -1) {
+ return new Error(
+ `Prop \`${propName}\` supplied to \`${componentName}\` must be a boolean or an integer between 1 and 10.`
+ );
+ }
+}
+
KuiFlexItem.defaultProps = {
grow: true,
};
diff --git a/ui_framework/src/components/flex/flex_item.test.js b/ui_framework/src/components/flex/flex_item.test.js
index fad345933de4..d9fdd02f35ae 100644
--- a/ui_framework/src/components/flex/flex_item.test.js
+++ b/ui_framework/src/components/flex/flex_item.test.js
@@ -13,4 +13,19 @@ describe('KuiFlexItem', () => {
expect(component)
.toMatchSnapshot();
});
+
+ test('tests the grow prop correctly', () => {
+ const propType = KuiFlexItem.propTypes.grow;
+
+ const validValues = [undefined, null, true, false, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+ const invalidValues = ['true', 'false', '1', 0];
+
+ validValues.forEach(value =>
+ expect(propType({ grow: value }, `grow`)).toBe(undefined)
+ );
+
+ invalidValues.forEach(value =>
+ expect(propType({ grow: value }, `grow`) instanceof Error).toBe(true)
+ );
+ });
});