Also support other display classes via display modifier prop

couds · Jan 1, 2021 · 5f1b1eb · 5f1b1eb
1 parent 9f30802
commit 5f1b1eb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git 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
@@ -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
@@ -46,8 +46,12 @@ const responsiveModifierPropTypes = VIEWPORTS.reduce(
     return allViewports;
   },
   {
-    propTypes: {},
-    defaultProps: {},
+    propTypes: {
+      display: PropTypes.oneOf(DISPLAYS),
+    },
+    defaultProps: {
+      display: undefined,
+    },
   },
 );