refactor: vector

packages/core/src/components/vector-range/index.jsx

@@ -27,7 +27,7 @@ const VectorRange = ({
               },
           );
         }}
-        vector={isSingle ? range : range.min}
+        value={isSingle ? range : range.min}
       />
       <label className="vector-range__to-label">
         ∆
@@ -61,7 +61,7 @@ const VectorRange = ({
               },
             );
           }}
-          vector={range.max}
+          value={range.max}
         />
       )}
     </div>

packages/core/src/components/vector/index.jsx

@@ -9,11 +9,11 @@ const Vector = ({
   integer,
   labels,
   onChange,
-  vector,
+  value,
 }) => (
   <div className="vector">
     <label>
-      {labels[0]}
+      <div className="vector__label-text">{labels[0]}</div>
       <Number
         integer={integer}
         onChange={(event, value) => {
@@ -21,27 +21,27 @@ const Vector = ({
             event,
             [
               value,
-              vector[1],
+              value[1],
             ],
           );
         }}
-        value={vector[0]}
+        value={value[0]}
       />
     </label>
     <label>
-      {labels[1]}
+      <div className="vector__label-text">{labels[1]}</div>
       <Number
         integer={integer}
         onChange={(event, value) => {
           onChange(
             event,
             [
-              vector[0],
+              value[0],
               value,
             ],
           );
         }}
-        value={vector[1]}
+        value={value[1]}
       />
     </label>
   </div>
@@ -77,7 +77,7 @@ Vector.propTypes = {
   integer: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   labels: PropTypes.arrayOf(PropTypes.string),
-  vector: vectorPropType.isRequired,
+  value: vectorPropType.isRequired,
 };
 
 export default Vector;

packages/core/src/components/vector/index.scss

@@ -1,3 +1,8 @@
 .vector {
   display: flex;
 }
+
+.vector__label-text {
+  font-size: 0.7em;
+  margin-right: 0.5em;
+}