diff --git a/src/modifiers/flexbox.js b/src/modifiers/flexbox.js index 68b917b0..eb9420d5 100644 --- a/src/modifiers/flexbox.js +++ b/src/modifiers/flexbox.js @@ -50,22 +50,13 @@ const flexboxHelperPropTypes = { const flexboxHelperNames = Object.keys(flexboxHelperPropTypes); export default { - propTypes: { - flex: PropTypes.bool, - ...flexboxHelperPropTypes, - }, - defaultProps: { - flex: false, - ...flexboxHelperNames.reduce((defaults, flexboxHelperName) => { - defaults[flexboxHelperName] = undefined; - return defaults; - }, {}), - }, + propTypes: flexboxHelperPropTypes, + defaultProps: flexboxHelperNames.reduce((defaults, flexboxHelperName) => { + defaults[flexboxHelperName] = undefined; + return defaults; + }, {}), classnames: (props) => classNames( - { - 'is-flex': props.flex, - }, flexboxHelperNames.reduce((classes, flexboxHelper) => { const propValue = props[flexboxHelper]; classes[`is-${camelToSnake(flexboxHelper)}-${propValue}`] = propValue; diff --git a/src/modifiers/index.d.ts b/src/modifiers/index.d.ts index 2469d073..795046a1 100644 --- a/src/modifiers/index.d.ts +++ b/src/modifiers/index.d.ts @@ -32,7 +32,6 @@ interface SpacingProps { } interface FlexboxProps { - flex?: boolean; flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; justifyContent?: @@ -66,14 +65,22 @@ interface FlexboxProps { | 'stretch'; } +type DisplayModifier = + | 'block' + | 'flex' + | 'inline' + | 'inline-block' + | 'inline-flex'; + interface ResponsiveModifiers { - display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex'; + display?: DisplayModifier; hide?: boolean; textSize?: 1 | 2 | 3 | 4 | 5 | 6; textAlignment?: 'centered' | 'justified' | 'left' | 'right'; } interface ResponsiveProps { + display?: DisplayModifier; mobile?: ResponsiveModifiers; tablet?: ResponsiveModifiers; desktop?: ResponsiveModifiers; diff --git a/src/modifiers/responsives.js b/src/modifiers/responsives.js index 944c2516..1563033e 100644 --- a/src/modifiers/responsives.js +++ b/src/modifiers/responsives.js @@ -46,8 +46,12 @@ const responsiveModifierPropTypes = VIEWPORTS.reduce( return allViewports; }, { - propTypes: {}, - defaultProps: {}, + propTypes: { + display: PropTypes.oneOf(DISPLAYS), + }, + defaultProps: { + display: undefined, + }, }, );