From 4af8d36b42706a9c0057ea364296cc93fbc494f0 Mon Sep 17 00:00:00 2001
From: Maciek Stasieluk <macrusher@gmail.com>
Date: Thu, 26 Oct 2017 14:01:00 +0200
Subject: [PATCH] Added support for wrapClassName in SemanticUI theme

---
 API.md                                            | 12 +++++++++---
 packages/uniforms-semantic/__tests__/DateField.js |  7 +++++++
 packages/uniforms-semantic/__tests__/NumField.js  |  7 +++++++
 packages/uniforms-semantic/__tests__/TextField.js |  7 +++++++
 packages/uniforms-semantic/src/DateField.js       |  3 ++-
 packages/uniforms-semantic/src/NumField.js        |  3 ++-
 packages/uniforms-semantic/src/TextField.js       |  3 ++-
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/API.md b/API.md
index 1100f5ddb..513319f4e 100644
--- a/API.md
+++ b/API.md
@@ -345,10 +345,12 @@ import DateField from 'uniforms-unstyled/DateField'; // Choose your theme packag
     showInlineError={true}
 
     // Field and sourroundings wrap className.
-    //   *Some description would be great, huh?*
+    //   In SemanticUI theme, this class name is used on ui input wrapper,
+    //   so you can pass classes like small, huge, inverted, transparent etc.
     // Available in:
     //   bootstrap3
     //   bootstrap4
+    //   semantic
     wrapClassName="a b c"
 
     // Display time picker in ampm (12hr) format or 24hr format.
@@ -738,10 +740,12 @@ import NumField from 'uniforms-unstyled/NumField'; // Choose your theme package.
     step={5}
 
     // Field and sourroundings wrap className.
-    //   *Some description would be great, huh?*
+    //   In SemanticUI theme, this class name is used on ui input wrapper,
+    //   so you can pass variations like small, huge, inverted, transparent etc.
     // Available in:
     //   bootstrap3
     //   bootstrap4
+    //   semantic
     wrapClassName="a b c"
 />
 ```
@@ -995,10 +999,12 @@ import TextField from 'uniforms-unstyled/TextField'; // Choose your theme packag
     type="password"
 
     // Field and sourroundings wrap className.
-    //   *Some description would be great, huh?*
+    //   In SemanticUI theme, this class name is used on ui input wrapper,
+    //   so you can pass variations like small, huge, inverted, transparent etc.
     // Available in:
     //   bootstrap3
     //   bootstrap4
+    //   semantic
     wrapClassName="a b c"
 />
 ```
diff --git a/packages/uniforms-semantic/__tests__/DateField.js b/packages/uniforms-semantic/__tests__/DateField.js
index 08236a239..5bce3224e 100644
--- a/packages/uniforms-semantic/__tests__/DateField.js
+++ b/packages/uniforms-semantic/__tests__/DateField.js
@@ -161,3 +161,10 @@ test('<DateField> - renders a icon', () => {
 
     expect(wrapper.find('i')).toHaveLength(1);
 });
+
+test('<DateField> - renders with a custom wrapClassName', () => {
+    const element = <DateField name="x" wrapClassName="test-class-name" />;
+    const wrapper = mount(element, createContext({x: {type: Date}}));
+
+    expect(wrapper.find('.ui.input.test-class-name')).toHaveLength(1);
+});
diff --git a/packages/uniforms-semantic/__tests__/NumField.js b/packages/uniforms-semantic/__tests__/NumField.js
index 093798f11..9afc1fe73 100644
--- a/packages/uniforms-semantic/__tests__/NumField.js
+++ b/packages/uniforms-semantic/__tests__/NumField.js
@@ -246,3 +246,10 @@ test('<NumField> - renders a icon', () => {
 
     expect(wrapper.find('i')).toHaveLength(1);
 });
+
+test('<NumField> - renders with a custom wrapClassName', () => {
+    const element = <NumField name="x" wrapClassName="test-class-name" />;
+    const wrapper = mount(element, createContext({x: {type: Number}}));
+
+    expect(wrapper.find('.ui.input.test-class-name')).toHaveLength(1);
+});
diff --git a/packages/uniforms-semantic/__tests__/TextField.js b/packages/uniforms-semantic/__tests__/TextField.js
index 2ff663013..6d920d6ee 100644
--- a/packages/uniforms-semantic/__tests__/TextField.js
+++ b/packages/uniforms-semantic/__tests__/TextField.js
@@ -164,3 +164,10 @@ test('<TextField> - renders a icon', () => {
 
     expect(wrapper.find('i')).toHaveLength(1);
 });
+
+test('<TextField> - renders with a custom wrapClassName', () => {
+    const element = <TextField name="x" wrapClassName="test-class-name" />;
+    const wrapper = mount(element, createContext({x: {type: String}}));
+
+    expect(wrapper.find('.ui.input.test-class-name')).toHaveLength(1);
+});
diff --git a/packages/uniforms-semantic/src/DateField.js b/packages/uniforms-semantic/src/DateField.js
index bcef7a509..ed4b4d7a6 100644
--- a/packages/uniforms-semantic/src/DateField.js
+++ b/packages/uniforms-semantic/src/DateField.js
@@ -32,6 +32,7 @@ const Date_ = ({
     required,
     showInlineError,
     value,
+    wrapClassName,
     ...props
 }) =>
     <div className={classnames(className, {disabled, error, required}, 'field')} {...filterDOMProps(props)}>
@@ -41,7 +42,7 @@ const Date_ = ({
             </label>
         )}
 
-        <div className={classnames('ui', {left: iconLeft, icon: icon || iconLeft}, 'input')}>
+        <div className={classnames('ui', wrapClassName, {left: iconLeft, icon: icon || iconLeft}, 'input')}>
             <input
                 disabled={disabled}
                 id={id}
diff --git a/packages/uniforms-semantic/src/NumField.js b/packages/uniforms-semantic/src/NumField.js
index 0fa97387c..d7eb8624f 100644
--- a/packages/uniforms-semantic/src/NumField.js
+++ b/packages/uniforms-semantic/src/NumField.js
@@ -27,6 +27,7 @@ const Num_ = ({
     showInlineError,
     step,
     value,
+    wrapClassName,
     ...props
 }) =>
     <div className={classnames(className, {disabled, error, required}, 'field')} {...filterDOMProps(props)}>
@@ -36,7 +37,7 @@ const Num_ = ({
             </label>
         )}
 
-        <div className={classnames('ui', {left: iconLeft, icon: icon || iconLeft}, 'input')}>
+        <div className={classnames('ui', wrapClassName, {left: iconLeft, icon: icon || iconLeft}, 'input')}>
             <input
                 disabled={disabled}
                 id={id}
diff --git a/packages/uniforms-semantic/src/TextField.js b/packages/uniforms-semantic/src/TextField.js
index 09628b527..9ae76c0ce 100644
--- a/packages/uniforms-semantic/src/TextField.js
+++ b/packages/uniforms-semantic/src/TextField.js
@@ -21,6 +21,7 @@ const Text = ({
     showInlineError,
     type,
     value,
+    wrapClassName,
     ...props
 }) =>
     <div className={classnames(className, {disabled, error, required}, 'field')} {...filterDOMProps(props)}>
@@ -30,7 +31,7 @@ const Text = ({
             </label>
         )}
 
-        <div className={classnames('ui', {left: iconLeft, icon: icon || iconLeft}, 'input')}>
+        <div className={classnames('ui', wrapClassName, {left: iconLeft, icon: icon || iconLeft}, 'input')}>
             <input
                 disabled={disabled}
                 id={id}