Repository: vazco/uniforms
Pull request #358 (2017-10-26 12:04:43)

Added support for wrapClassName in SemanticUI theme
Adding support for `wrapClassName` in SUI theme, similar solution already exists in Bootstrap3/4 themes.

This will allow to use Semantic inputs variants like size, inverted, transparent etc.


codecov[bot]: # [Codecov](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=h1) Report
> Merging [#358](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=desc) into [master](https://codecov.io/gh/vazco/uniforms/commit/ba5daa283e53e2231373d7d467153d1ecde7e877?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/vazco/uniforms/pull/358/graphs/tree.svg?height=150&width=650&token=PEY7QrNpKu&src=pr)](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=tree)

```diff
@@          Coverage Diff          @@
##           master   #358   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files         157    157           
  Lines        1397   1397           
=====================================
  Hits         1397   1397
```


| [Impacted Files](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/uniforms-semantic/src/DateField.js](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=tree#diff-cGFja2FnZXMvdW5pZm9ybXMtc2VtYW50aWMvc3JjL0RhdGVGaWVsZC5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [packages/uniforms-semantic/src/TextField.js](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=tree#diff-cGFja2FnZXMvdW5pZm9ybXMtc2VtYW50aWMvc3JjL1RleHRGaWVsZC5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [packages/uniforms-semantic/src/NumField.js](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=tree#diff-cGFja2FnZXMvdW5pZm9ybXMtc2VtYW50aWMvc3JjL051bUZpZWxkLmpz) | `100% <ø> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=footer). Last update [ba5daa2...4af8d36](https://codecov.io/gh/vazco/uniforms/pull/358?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/API.md b/API.md
index 1100f5dd..513319f4 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/src/DateField.js b/packages/uniforms-semantic/src/DateField.js
index bcef7a50..ed4b4d7a 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 0fa97387..d7eb8624 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 09628b52..9ae76c0c 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}


Test patch:
diff --git a/packages/uniforms-semantic/__tests__/DateField.js b/packages/uniforms-semantic/__tests__/DateField.js
index 08236a23..5bce3224 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 093798f1..9afc1fe7 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 2ff66301..6d920d6e 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);
+});