Add overridable labelWidth for all built-in components

Author: tim-soft

README.md

@@ -111,7 +111,7 @@ This is the main container component for your GUI and is the default export from
 ##### optional
 
 - `liveUpdate: bool` - Determines if live updates should occur, defaults to `true`
-- `labelWidth: number` - The width of the labels in pixels, defaults to `40`
+- `labelWidth: string` - The width of the labels in any valid CSS units, defaults to `40%`
 - `className: string` - The class name to set on the `DatGui` div
 - `style: object` - The style object to set on the `DatGui` div
 
@@ -138,6 +138,7 @@ Below are docs for the required and optional props you can pass to each componen
 - `className: string` - A CSS class name
 - `style: object` - A style object for inline styles
 - `label: string` - The label for the controller eg., `<DatString path='message' label='Message' />`
+- `labelWidth: string` - The width of the labels in any valid CSS units, overrides `<DatGUI labelWidth>`
 
 #### `DatBoolean`
 

src/components/DatBoolean.js

@@ -11,6 +11,7 @@ export default class DatBoolean extends Component {
     data: PropTypes.object,
     path: PropTypes.string,
     label: PropTypes.string,
+    labelWidth: PropTypes.string.isRequired,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func
   };
@@ -52,13 +53,15 @@ export default class DatBoolean extends Component {
   };
 
   render() {
-    const { path, label, className, style } = this.props;
+    const { path, label, labelWidth, className, style } = this.props;
     const labelText = isString(label) ? label : path;
 
     return (
       <li className={cx('cr', 'boolean', className)} style={style}>
         <label>
-          <span className="label-text">{labelText}</span>
+          <span className="label-text" style={{ width: labelWidth }}>
+            {labelText}
+          </span>
           <input
             type="checkbox"
             checked={this.state.value}

src/components/DatColor.js

@@ -12,7 +12,7 @@ export default class DatColor extends Component {
     data: PropTypes.object,
     path: PropTypes.string,
     label: PropTypes.string,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func
@@ -24,7 +24,6 @@ export default class DatColor extends Component {
     data: null,
     path: null,
     label: null,
-    labelWidth: null,
     liveUpdate: null,
     onUpdate: () => null,
     _onUpdateValue: () => null
@@ -96,15 +95,10 @@ export default class DatColor extends Component {
         style={{ borderLeftColor: `${value}`, ...style }}
       >
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+          <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          <div
-            style={{
-              width: `${100 - labelWidth}%`,
-              backgroundColor: `${value}`
-            }}
-          >
+          <div style={{ backgroundColor: value, width: '100%' }}>
             <div
               className="swatch"
               onClick={this.handleClickColorPicker}

src/components/DatNumber.js

@@ -49,7 +49,7 @@ export default class DatNumber extends Component {
     data: PropTypes.object,
     path: PropTypes.string,
     label: PropTypes.string,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func,
@@ -65,7 +65,6 @@ export default class DatNumber extends Component {
     data: null,
     path: null,
     label: null,
-    labelWidth: null,
     liveUpdate: null,
     onUpdate: () => null,
     _onUpdateValue: () => null,
@@ -138,7 +137,7 @@ export default class DatNumber extends Component {
     } = this.props;
     const labelText = isString(label) ? label : path;
     const hasSlider = isFinite(min) && isFinite(max);
-    const controlsWidth = 100 - labelWidth;
+    const controlsWidth = 100;
     const inputWidth =
       hasSlider && disableSlider !== true
         ? Math.round(controlsWidth / 3)
@@ -148,7 +147,7 @@ export default class DatNumber extends Component {
     return (
       <li className={cx('cr', 'number', className)} style={style}>
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+          <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
           {hasSlider && disableSlider !== true

src/components/DatPresets.js

@@ -14,7 +14,7 @@ export default class DatPresets extends Component {
     path: PropTypes.string,
     label: PropTypes.string.isRequired,
     options: PropTypes.array.isRequired,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func
   };
@@ -24,7 +24,6 @@ export default class DatPresets extends Component {
     style: null,
     data: null,
     path: null,
-    labelWidth: 40,
     liveUpdate: true,
     onUpdate: () => null
   };
@@ -69,13 +68,10 @@ export default class DatPresets extends Component {
     return (
       <li className={cx('cr', 'presets', className)} style={style}>
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+          <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
-          <select
-            style={{ width: `${100 - labelWidth}%` }}
-            onChange={this.handleChange}
-          >
+          <select onChange={this.handleChange}>
             {options.map(preset => {
               return Object.keys(preset).map(key => {
                 return (

src/components/DatSelect.js

@@ -12,7 +12,7 @@ export default class DatSelect extends Component {
     path: PropTypes.string,
     label: PropTypes.string,
     options: PropTypes.array.isRequired,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func
@@ -24,7 +24,6 @@ export default class DatSelect extends Component {
     data: null,
     path: null,
     label: null,
-    labelWidth: null,
     liveUpdate: true,
     onUpdate: () => null,
     _onUpdateValue: () => null
@@ -62,13 +61,13 @@ export default class DatSelect extends Component {
     return (
       <li className={cx('cr', 'select', className)} style={style}>
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+          <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
           <select
             value={value}
-            style={{ width: `${100 - labelWidth}%` }}
             onChange={this.handleChange}
+            style={{ width: '100%' }}
           >
             {options.map((item, index) => (
               // eslint-disable-next-line react/no-array-index-key

src/components/DatString.js

@@ -11,7 +11,7 @@ export default class DatString extends Component {
     data: PropTypes.object,
     path: PropTypes.string,
     label: PropTypes.string,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     liveUpdate: PropTypes.bool,
     onUpdate: PropTypes.func,
     _onUpdateValue: PropTypes.func
@@ -23,7 +23,6 @@ export default class DatString extends Component {
     data: null,
     path: null,
     label: null,
-    labelWidth: 40,
     liveUpdate: true,
     onUpdate: () => null,
     _onUpdateValue: () => null
@@ -85,13 +84,12 @@ export default class DatString extends Component {
     return (
       <li className={cx('cr', 'string', className)} style={style}>
         <label>
-          <span className="label-text" style={{ width: `${labelWidth}%` }}>
+          <span className="label-text" style={{ width: labelWidth }}>
             {labelText}
           </span>
           <input
             type="text"
             value={this.state.value}
-            style={{ width: `${100 - labelWidth}%` }}
             onChange={this.handleChange}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}

src/index.js

@@ -12,14 +12,13 @@ export default class DatGui extends Component {
     children: PropTypes.node.isRequired,
     onUpdate: PropTypes.func.isRequired,
     liveUpdate: PropTypes.bool,
-    labelWidth: PropTypes.number,
+    labelWidth: PropTypes.string.isRequired,
     className: PropTypes.string,
     style: PropTypes.object
   };
 
   static defaultProps = {
     liveUpdate: true,
-    labelWidth: 40,
     className: null,
     style: null
   };

src/style/_string.scss

@@ -4,5 +4,6 @@
   input[type='text'] {
     color: $string-color;
     padding: 2px 5px;
+    width: 100%;
   }
 }