Added support for wrapClassName in SemanticUI theme

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"
 />
 ```

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);
+});

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);
+});

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);
+});

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}

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}

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}