formsy-semantic-ui-react - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

example/FormExamples.js

@@ -57,2 +57,7 @@ import React, { Component } from 'react';
 
+        <Form.Group inline>
+          <Form.Input name="phonePrefix" width={2} inline label="Phone" placeholder="+1" />
+          <Form.Input name="phone" width={4} inline label="-" placeholder="000-000-0000" />
+        </Form.Group>
+
         <Form.RadioGroup
@@ -59,0 +64,0 @@ name="size"

lib/FormsyDropdown.js

@@ -140,3 +140,3 @@ 'use strict';
           },
-          shortHandMode && _react2['default'].createElement(
+          shortHandMode && label && _react2['default'].createElement(
             'label',
@@ -143,0 +143,0 @@ { htmlFor: id },

lib/FormsyInput.js

@@ -138,3 +138,3 @@ 'use strict';
           },
-          shortHandMode && _react2['default'].createElement(
+          shortHandMode && label && _react2['default'].createElement(
             'label',
@@ -141,0 +141,0 @@ { htmlFor: id },

lib/utils.js

@@ -44,5 +44,6 @@ "use strict";
       innerRef = props.innerRef,
-      suirProps = _objectWithoutProperties(props, ["as", "instantValidation", "error", "defaultChecked", "defaultSelected", "rootClassName", "rootStyle", "defaultValue", "rootElement", "errorLabel", "formRadioGroup", "getValue", "isPristine", "isValid", "getErrorMessage", "setValidations", "setValue", "resetValue", "hasValue", "getErrorMessages", "isFormDisabled", "isFormSubmitted", "isRequired", "showRequired", "showError", "isValidValue", "validations", "validationError", "validationErrors", "width", "passRequiredToField", "inputAs", "innerRef"]);
+      inline = props.inline,
+      suirProps = _objectWithoutProperties(props, ["as", "instantValidation", "error", "defaultChecked", "defaultSelected", "rootClassName", "rootStyle", "defaultValue", "rootElement", "errorLabel", "formRadioGroup", "getValue", "isPristine", "isValid", "getErrorMessage", "setValidations", "setValue", "resetValue", "hasValue", "getErrorMessages", "isFormDisabled", "isFormSubmitted", "isRequired", "showRequired", "showError", "isValidValue", "validations", "validationError", "validationErrors", "width", "passRequiredToField", "inputAs", "innerRef", "inline"]);
 
   return suirProps;
 }

package.json

 {
   "name": "formsy-semantic-ui-react",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Formsy-React wrappers for Semantic-Ui-React's form Components",
@@ -5,0 +5,0 @@ "repository": {

src/FormsyDropdown.js

@@ -128,3 +128,3 @@ import React, { Component, createElement, cloneElement } from 'react';
       >
-        { shortHandMode && <label htmlFor={id}> { label } </label> }
+        { shortHandMode && label && <label htmlFor={id}> { label } </label> }
         { createElement(dropdownNode, { ...dropdownProps }) }
@@ -131,0 +131,0 @@ { error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }

src/FormsyInput.js

@@ -124,3 +124,3 @@ import React, { Component, createElement, cloneElement } from 'react';
       >
-        { shortHandMode && <label htmlFor={id}> { label } </label> }
+        { shortHandMode && label && <label htmlFor={id}> { label } </label> }
         { createElement(inputNode, { ...inputProps }) }
@@ -127,0 +127,0 @@ { !disabled && error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }

src/utils.js

@@ -36,2 +36,3 @@ export function filterSuirElementProps(props) {
     innerRef, //eslint-disable-line
+    inline, // eslint-disable-line
     ...suirProps,
@@ -38,0 +39,0 @@ } = props;

test/Form.spec.js

@@ -66,2 +66,28 @@ import React from 'react';
     });
+
+    context('Layout structure', () => {
+      it('should render label for a Input', () => {
+        const wrapper = mountForm(<Form.Input name="input" label="input-label"/>);
+        const inputLabel = wrapper.find('label');
+        assert.equal(inputLabel.length, 1);
+      });
+
+      it('should not render label for a Input if none given', () => {
+        const wrapper = mountForm(<Form.Input name="input"/>);
+        const inputLabel = wrapper.find('label');
+        assert.equal(inputLabel.length, 0);
+      });
+
+      it('should render label for a DropDown', () => {
+        const wrapper = mountForm(<Form.Dropdown name="formInput" options={[]} label="drop-down-label"/>);
+        const inputLabel = wrapper.find('label');
+        assert.equal(inputLabel.length, 1);
+      });
+
+      it('should not render label for a DropDown', () => {
+        const wrapper = mountForm(<Form.Dropdown name="formInput" options={[]}/>);
+        const inputLabel = wrapper.find('label');
+        assert.equal(inputLabel.length, 0);
+      });
+    });
   });
@@ -68,0 +94,0 @@

No alert changes

Improved metrics

Lines of code

2469

increased by1.15%

Worsened metrics

Total package byte prevSize

256752

decreased by-0.15%

No dependency changes