From 916de2c6a335c50a621b509aee269ed1e76e7e61 Mon Sep 17 00:00:00 2001
From: Osipov Vladimir <zouxuoz@gmail.com>
Date: Sat, 29 Dec 2018 11:39:57 +0300
Subject: [PATCH] feat(Checkbox): nowrap modifier

---
 src/components/Checkbox/Checkbox.js           | 6 ++++--
 src/components/Checkbox/Checkbox.theme.js     | 6 ++++++
 src/components/CheckboxField/CheckboxField.js | 4 ++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index 66a62349..e03528cc 100644
--- 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
index ffd8e455..346c2946 100644
--- 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
index 136a2f6a..b94740e8 100644
--- 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>
   );