Fix label/control width calc

Author: tim-soft

src/components/DatBoolean.js

@@ -57,7 +57,10 @@ export default class DatBoolean extends Component {
           <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          <span className="checkbox-container">
+          <span
+            className="checkbox-container"
+            style={{ width: `calc(100% - ${labelWidth})` }}
+          >
             <input
               type="checkbox"
               checked={this.state.value}

src/components/DatColor.js

@@ -91,7 +91,12 @@ export default class DatColor extends Component {
           <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          <div style={{ backgroundColor: value, width: '100%' }}>
+          <div
+            style={{
+              backgroundColor: value,
+              width: `calc(100% - ${labelWidth})`
+            }}
+          >
             <div
               className="swatch"
               onClick={this.handleClickColorPicker}

src/components/DatNumber.js

@@ -143,19 +143,23 @@ export default class DatNumber extends Component {
           <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          {hasSlider && disableSlider !== true
-            ? this.renderSlider(sliderWidth)
-            : null}
-          <input
-            type="number"
-            step={step}
-            min={min}
-            max={max}
-            inputMode="numeric"
-            value={this.state.value}
-            style={{ width: `${inputWidth}%` }}
-            onChange={this.handleChange}
-          />
+          <span
+            style={{ display: 'inherit', width: `calc(100% - ${labelWidth})` }}
+          >
+            {hasSlider && disableSlider !== true
+              ? this.renderSlider(sliderWidth)
+              : null}
+            <input
+              type="number"
+              step={step}
+              min={min}
+              max={max}
+              inputMode="numeric"
+              value={this.state.value}
+              style={{ width: `${inputWidth}%` }}
+              onChange={this.handleChange}
+            />
+          </span>
         </label>
       </li>
     );

src/components/DatPresets.js

@@ -68,7 +68,10 @@ export default class DatPresets extends Component {
           <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          <select onChange={this.handleChange}>
+          <select
+            onChange={this.handleChange}
+            style={{ width: `calc(100% - ${labelWidth})` }}
+          >
             {options.map(preset => {
               return Object.keys(preset).map(key => {
                 return (

src/components/DatSelect.js

@@ -64,7 +64,7 @@ export default class DatSelect extends Component {
           <select
             value={value}
             onChange={this.handleChange}
-            style={{ width: '100%' }}
+            style={{ width: `calc(100% - ${labelWidth})` }}
           >
             {options.map((item, index) => (
               // eslint-disable-next-line react/no-array-index-key

src/components/DatString.js

@@ -85,6 +85,7 @@ export default class DatString extends Component {
             {labelText}
           </span>
           <input
+            style={{ width: `calc(100% - ${labelWidth})` }}
             type="text"
             value={this.state.value}
             onChange={this.handleChange}

src/index.js

@@ -12,15 +12,16 @@ export default class DatGui extends Component {
     children: PropTypes.node.isRequired,
     onUpdate: PropTypes.func.isRequired,
     liveUpdate: PropTypes.bool,
-    labelWidth: PropTypes.string.isRequired,
+    labelWidth: PropTypes.string,
     className: PropTypes.string,
     style: PropTypes.object
   };
 
   static defaultProps = {
     liveUpdate: true,
     className: null,
-    style: null
+    style: null,
+    labelWidth: '40%'
   };
 
   handleUpdateValue = (path, value) => {