feat(Checkbox): nowrap modifier

8base · Dec 29, 2018 · 916de2c · 916de2c
1 parent 08bd214
commit 916de2c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -16,6 +16,8 @@ type CheckboxProps = {
   hasError?: boolean,
   /** show disabled styles  */
   disabled?: boolean,
+  /** no wrap text  */
+  nowrap?: boolean,
 
   /** callback to change chcked state */
   onChange?: (boolean, SyntheticInputEvent<HTMLInputElement>) => void,
@@ -38,7 +40,7 @@ class Checkbox extends PureComponent<CheckboxProps> {
   }
 
   render() {
-    const { onChange, checked, hasError, disabled, label, ...rest } = this.props;
+    const { onChange, checked, hasError, disabled, label, nowrap, ...rest } = this.props;
 
     return (
       <CheckboxWrapperTag { ...rest } tagName="label">
@@ -54,7 +56,7 @@ class Checkbox extends PureComponent<CheckboxProps> {
           type="checkbox"
           tagName="input"
         />
-        <CheckboxTextTag tagName="div">{ label }</CheckboxTextTag>
+        <CheckboxTextTag tagName="div" nowrap={ nowrap }>{ label }</CheckboxTextTag>
       </CheckboxWrapperTag>
     );
   }

diff --git a/src/components/Checkbox/Checkbox.theme.js b/src/components/Checkbox/Checkbox.theme.js
@@ -31,6 +31,12 @@ const themeText = createComponentTheme(`${name}Text`, ({ COLORS }: *): * => ({
     color: COLORS.SECONDARY_TEXT_COLOR,
     fontSize: COLORS.BODY_TEXT,
   },
+
+  modifiers: {
+    nowrap: {
+      whiteSpace: 'nowrap',
+    },
+  },
 }));
 
 const theme = {

diff --git a/src/components/CheckboxField/CheckboxField.js b/src/components/CheckboxField/CheckboxField.js
@@ -18,6 +18,8 @@ type CheckboxFieldProps = {|
   color ?: 'primary' | 'secondary',
   /** show disabled styles  */
   disabled ?: boolean,
+  /** no wrap text  */
+  nowrap?: boolean,
 |};
 
 const CheckboxField = ({
@@ -27,6 +29,7 @@ const CheckboxField = ({
   meta,
   disabled,
   color,
+  nowrap,
   ...rest
   }: CheckboxFieldProps) => {
   const { name, value, onChange, onFocus, onBlur } = input;
@@ -44,6 +47,7 @@ const CheckboxField = ({
         hasError={ hasError }
         disabled={ disabled }
         color={ color }
+        nowrap={ nowrap }
       />
     </FormField>
   );