@storybook/components 6.3.0-beta.9 → 6.3.0-rc.11

package/dist/cjs/controls/Color.js

@@ -353,8 +353,15 @@ var useColorInput = function useColorInput(initialValue, onChange) {
   var _useState5 = (0, _react.useState)((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
       _useState6 = _slicedToArray(_useState5, 2),
       colorSpace = _useState6[0],
-      setColorSpace = _useState6[1];
+      setColorSpace = _useState6[1]; // Reset state when initialValue becomes undefined (when resetting controls)
 
+
+  (0, _react.useEffect)(function () {
+    if (initialValue !== undefined) return;
+    setValue('');
+    setColor(undefined);
+    setColorSpace(ColorSpace.HEX);
+  }, [initialValue]);
   var realValue = (0, _react.useMemo)(function () {
     return getRealValue(value, color, colorSpace).toLowerCase();
   }, [value, color, colorSpace]);
@@ -392,8 +399,13 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
   var _useState7 = (0, _react.useState)(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedColors = _useState8[0],
-      setSelectedColors = _useState8[1];
+      setSelectedColors = _useState8[1]; // Reset state when currentColor becomes undefined (when resetting controls)
+
 
+  (0, _react.useEffect)(function () {
+    if (currentColor !== undefined) return;
+    setSelectedColors([]);
+  }, [currentColor]);
   var presets = (0, _react.useMemo)(function () {
     var initialPresets = (presetColors || []).map(function (preset) {
       if (typeof preset === 'string') return parseValue(preset);

package/dist/cjs/controls/Number.js

@@ -96,7 +96,7 @@ var NumberControl = function NumberControl(_ref) {
       forceVisible = _useState4[0],
       setForceVisible = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(null),
       _useState6 = _slicedToArray(_useState5, 2),
       parseError = _useState6[0],
       setParseError = _useState6[1];
@@ -106,10 +106,10 @@ var NumberControl = function NumberControl(_ref) {
     var result = parseFloat(event.target.value);
 
     if (Number.isNaN(result)) {
-      setParseError(true);
+      setParseError(new Error("'".concat(event.target.value, "' is not a number")));
     } else {
       onChange(result);
-      setParseError(false);
+      setParseError(null);
     }
   }, [onChange, setParseError]);
   var onForceVisible = (0, _react.useCallback)(function () {

package/dist/cjs/controls/Object.js

@@ -325,7 +325,7 @@ var ObjectControl = function ObjectControl(_ref7) {
       showRaw = _useState2[0],
       setShowRaw = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = _slicedToArray(_useState3, 2),
       parseError = _useState4[0],
       setParseError = _useState4[1];

package/dist/cjs/controls/Range.js

@@ -1,15 +1,43 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RangeControl = void 0;
 
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
 require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.number.to-fixed.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _theming = require("@storybook/theming");
 
@@ -19,10 +47,15 @@ var _helpers = require("./helpers");
 
 var _Number = require("./Number");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var RangeInput = _theming.styled.input(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+      min = _ref.min,
+      max = _ref.max,
+      value = _ref.value;
   return {
     // Resytled using http://danielstern.ca/range.css/#/
     '&': {
@@ -31,8 +64,8 @@ var RangeInput = _theming.styled.input(function (_ref) {
       appearance: 'none'
     },
     '&::-webkit-slider-runnable-track': {
-      background: theme.base === 'light' ? (0, _polished.darken)(0.02, theme.input.background) : (0, _polished.lighten)(0.02, theme.input.background),
-      border: "1px solid ".concat(theme.appBorderColor),
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       borderRadius: 6,
       width: '100%',
       height: 6,
@@ -63,8 +96,7 @@ var RangeInput = _theming.styled.input(function (_ref) {
     '&:focus': {
       outline: 'none',
       '&::-webkit-slider-runnable-track': {
-        borderColor: (0, _polished.rgba)(theme.color.secondary, 0.4),
-        background: theme.background.hoverable
+        borderColor: (0, _polished.rgba)(theme.color.secondary, 0.4)
       },
       '&::-webkit-slider-thumb': {
         borderColor: theme.color.secondary,
@@ -72,8 +104,8 @@ var RangeInput = _theming.styled.input(function (_ref) {
       }
     },
     '&::-moz-range-track': {
-      background: theme.base === 'light' ? (0, _polished.darken)(0.02, theme.input.background) : (0, _polished.lighten)(0.02, theme.input.background),
-      border: '1px solid rgba(0, 0, 0, 0.1)',
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       borderRadius: 6,
       width: '100%',
       height: 6,
@@ -101,22 +133,17 @@ var RangeInput = _theming.styled.input(function (_ref) {
       }
     },
     '&::-ms-track': {
-      background: theme.base === 'light' ? (0, _polished.darken)(0.02, theme.input.background) : (0, _polished.lighten)(0.02, theme.input.background),
-      borderColor: 'transparent',
-      borderWidth: '7.3px 0',
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.darken)(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat((0, _polished.lighten)(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       color: 'transparent',
       width: '100%',
       height: '6px',
       cursor: 'pointer'
     },
     '&::-ms-fill-lower': {
-      background: '#dadada',
-      border: "1px solid ".concat(theme.appBorderColor),
       borderRadius: 6
     },
     '&::-ms-fill-upper': {
-      background: '#dddddd',
-      border: "1px solid ".concat(theme.appBorderColor),
       borderRadius: 6
     },
     '&::-ms-thumb': {
@@ -128,12 +155,6 @@ var RangeInput = _theming.styled.input(function (_ref) {
       cursor: 'grab',
       marginTop: 0
     },
-    '&:focus::-ms-fill-lower': {
-      background: '#dddddd'
-    },
-    '&:focus::-ms-fill-upper': {
-      background: '#e0e0e0'
-    },
     '@supports (-ms-ime-align:auto)': {
       'input[type=range]': {
         margin: '0'
@@ -146,7 +167,9 @@ var RangeLabel = _theming.styled.span({
   paddingLeft: 5,
   paddingRight: 5,
   fontSize: 12,
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  fontFeatureSettings: 'tnum',
+  fontVariantNumeric: 'tabular-nums'
 });
 
 var RangeWrapper = _theming.styled.div({
@@ -155,6 +178,13 @@ var RangeWrapper = _theming.styled.div({
   width: '100%'
 });
 
+function getNumberOfDecimalPlaces(number) {
+  var match = number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return !match ? 0 : Math.max(0, // Number of digits right of decimal point.
+  (match[1] ? match[1].length : 0) - ( // Adjust for scientific notation.
+  match[2] ? +match[2] : 0));
+}
+
 var RangeControl = function RangeControl(_ref2) {
   var name = _ref2.name,
       value = _ref2.value,
@@ -173,6 +203,9 @@ var RangeControl = function RangeControl(_ref2) {
   };
 
   var hasValue = value !== undefined;
+  var numberOFDecimalsPlaces = (0, _react.useMemo)(function () {
+    return getNumberOfDecimalPlaces(step);
+  }, [step]);
   return /*#__PURE__*/_react.default.createElement(RangeWrapper, null, /*#__PURE__*/_react.default.createElement(RangeLabel, null, min), /*#__PURE__*/_react.default.createElement(RangeInput, {
     id: (0, _helpers.getControlId)(name),
     type: "range",
@@ -184,7 +217,7 @@ var RangeControl = function RangeControl(_ref2) {
     step: step,
     onFocus: onFocus,
     onBlur: onBlur
-  }), /*#__PURE__*/_react.default.createElement(RangeLabel, null, "".concat(hasValue ? value : '--', " / ").concat(max)));
+  }), /*#__PURE__*/_react.default.createElement(RangeLabel, null, "".concat(hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'), " / ", max));
 };
 
 exports.RangeControl = RangeControl;

package/dist/cjs/controls/Range.stories.js

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Undefined = exports.Zero = exports.Basic = exports.default = void 0;
+exports.Undefined = exports.BigMaxValue = exports.Decimals = exports.Zero = exports.Basic = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -57,7 +57,11 @@ var _default = {
 };
 exports.default = _default;
 
-var Template = function Template(initialValue) {
+var Template = function Template(_ref) {
+  var initialValue = _ref.initialValue,
+      step = _ref.step,
+      max = _ref.max;
+
   var _useState = (0, _react.useState)(initialValue),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -70,25 +74,53 @@ var Template = function Template(initialValue) {
       return setValue(newVal);
     },
     min: 0,
-    max: 20,
-    step: 2
+    max: max,
+    step: step
   }), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(value) || 'undefined'));
 };
 
 var Basic = function Basic() {
-  return Template(10);
+  return Template({
+    initialValue: 10,
+    max: 20,
+    step: 2
+  });
 };
 
 exports.Basic = Basic;
 
 var Zero = function Zero() {
-  return Template(0);
+  return Template({
+    initialValue: 0,
+    max: 20,
+    step: 2
+  });
 };
 
 exports.Zero = Zero;
 
+var Decimals = function Decimals() {
+  return Template({
+    step: 0.000000000002,
+    initialValue: 1989.123123123123,
+    max: 2000
+  });
+};
+
+exports.Decimals = Decimals;
+
+var BigMaxValue = function BigMaxValue() {
+  return Template({
+    step: 1000,
+    initialValue: 15,
+    max: 10000000000
+  });
+};
+
+exports.BigMaxValue = BigMaxValue;
+
 var Undefined = function Undefined() {
-  return Template(undefined);
+  return Template({});
 };
 
 exports.Undefined = Undefined;

package/dist/esm/controls/Color.js

@@ -43,7 +43,7 @@ import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.function.name.js";
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import convert from 'color-convert';
 import throttle from 'lodash/throttle';
@@ -294,8 +294,15 @@ var useColorInput = function useColorInput(initialValue, onChange) {
   var _useState5 = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
       _useState6 = _slicedToArray(_useState5, 2),
       colorSpace = _useState6[0],
-      setColorSpace = _useState6[1];
+      setColorSpace = _useState6[1]; // Reset state when initialValue becomes undefined (when resetting controls)
 
+
+  useEffect(function () {
+    if (initialValue !== undefined) return;
+    setValue('');
+    setColor(undefined);
+    setColorSpace(ColorSpace.HEX);
+  }, [initialValue]);
   var realValue = useMemo(function () {
     return getRealValue(value, color, colorSpace).toLowerCase();
   }, [value, color, colorSpace]);
@@ -333,8 +340,13 @@ var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
   var _useState7 = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedColors = _useState8[0],
-      setSelectedColors = _useState8[1];
+      setSelectedColors = _useState8[1]; // Reset state when currentColor becomes undefined (when resetting controls)
+
 
+  useEffect(function () {
+    if (currentColor !== undefined) return;
+    setSelectedColors([]);
+  }, [currentColor]);
   var presets = useMemo(function () {
     var initialPresets = (presetColors || []).map(function (preset) {
       if (typeof preset === 'string') return parseValue(preset);

package/dist/esm/controls/Number.js

@@ -56,7 +56,7 @@ export var NumberControl = function NumberControl(_ref) {
       forceVisible = _useState4[0],
       setForceVisible = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
       parseError = _useState6[0],
       setParseError = _useState6[1];
@@ -66,10 +66,10 @@ export var NumberControl = function NumberControl(_ref) {
     var result = parseFloat(event.target.value);
 
     if (Number.isNaN(result)) {
-      setParseError(true);
+      setParseError(new Error("'".concat(event.target.value, "' is not a number")));
     } else {
       onChange(result);
-      setParseError(false);
+      setParseError(null);
     }
   }, [onChange, setParseError]);
   var onForceVisible = useCallback(function () {

package/dist/esm/controls/Object.js

@@ -282,7 +282,7 @@ export var ObjectControl = function ObjectControl(_ref7) {
       showRaw = _useState2[0],
       setShowRaw = _useState2[1];
 
-  var _useState3 = useState(),
+  var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
       parseError = _useState4[0],
       setParseError = _useState4[1];

package/dist/esm/controls/Range.js

@@ -1,12 +1,20 @@
-import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.concat.js";
-import React from 'react';
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.number.to-fixed.js";
+import React, { useMemo } from 'react';
 import { styled } from '@storybook/theming';
 import { lighten, darken, rgba } from 'polished';
 import { getControlId } from './helpers';
 import { parse } from './Number';
 var RangeInput = styled.input(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+      min = _ref.min,
+      max = _ref.max,
+      value = _ref.value;
   return {
     // Resytled using http://danielstern.ca/range.css/#/
     '&': {
@@ -15,8 +23,8 @@ var RangeInput = styled.input(function (_ref) {
       appearance: 'none'
     },
     '&::-webkit-slider-runnable-track': {
-      background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-      border: "1px solid ".concat(theme.appBorderColor),
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       borderRadius: 6,
       width: '100%',
       height: 6,
@@ -47,8 +55,7 @@ var RangeInput = styled.input(function (_ref) {
     '&:focus': {
       outline: 'none',
       '&::-webkit-slider-runnable-track': {
-        borderColor: rgba(theme.color.secondary, 0.4),
-        background: theme.background.hoverable
+        borderColor: rgba(theme.color.secondary, 0.4)
       },
       '&::-webkit-slider-thumb': {
         borderColor: theme.color.secondary,
@@ -56,8 +63,8 @@ var RangeInput = styled.input(function (_ref) {
       }
     },
     '&::-moz-range-track': {
-      background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-      border: '1px solid rgba(0, 0, 0, 0.1)',
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       borderRadius: 6,
       width: '100%',
       height: 6,
@@ -85,22 +92,17 @@ var RangeInput = styled.input(function (_ref) {
       }
     },
     '&::-ms-track': {
-      background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-      borderColor: 'transparent',
-      borderWidth: '7.3px 0',
+      background: theme.base === 'light' ? "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(darken(0.02, theme.input.background), " 100%)") : "linear-gradient(to right, \n            ".concat(theme.color.green, " 0%, ").concat(theme.color.green, " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " ").concat((value - min) / (max - min) * 100, "%, \n            ").concat(lighten(0.02, theme.input.background), " 100%)"),
+      boxShadow: "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
       color: 'transparent',
       width: '100%',
       height: '6px',
       cursor: 'pointer'
     },
     '&::-ms-fill-lower': {
-      background: '#dadada',
-      border: "1px solid ".concat(theme.appBorderColor),
       borderRadius: 6
     },
     '&::-ms-fill-upper': {
-      background: '#dddddd',
-      border: "1px solid ".concat(theme.appBorderColor),
       borderRadius: 6
     },
     '&::-ms-thumb': {
@@ -112,12 +114,6 @@ var RangeInput = styled.input(function (_ref) {
       cursor: 'grab',
       marginTop: 0
     },
-    '&:focus::-ms-fill-lower': {
-      background: '#dddddd'
-    },
-    '&:focus::-ms-fill-upper': {
-      background: '#e0e0e0'
-    },
     '@supports (-ms-ime-align:auto)': {
       'input[type=range]': {
         margin: '0'
@@ -129,13 +125,23 @@ var RangeLabel = styled.span({
   paddingLeft: 5,
   paddingRight: 5,
   fontSize: 12,
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  fontFeatureSettings: 'tnum',
+  fontVariantNumeric: 'tabular-nums'
 });
 var RangeWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',
   width: '100%'
 });
+
+function getNumberOfDecimalPlaces(number) {
+  var match = number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return !match ? 0 : Math.max(0, // Number of digits right of decimal point.
+  (match[1] ? match[1].length : 0) - ( // Adjust for scientific notation.
+  match[2] ? +match[2] : 0));
+}
+
 export var RangeControl = function RangeControl(_ref2) {
   var name = _ref2.name,
       value = _ref2.value,
@@ -154,6 +160,9 @@ export var RangeControl = function RangeControl(_ref2) {
   };
 
   var hasValue = value !== undefined;
+  var numberOFDecimalsPlaces = useMemo(function () {
+    return getNumberOfDecimalPlaces(step);
+  }, [step]);
   return /*#__PURE__*/React.createElement(RangeWrapper, null, /*#__PURE__*/React.createElement(RangeLabel, null, min), /*#__PURE__*/React.createElement(RangeInput, {
     id: getControlId(name),
     type: "range",
@@ -165,6 +174,6 @@ export var RangeControl = function RangeControl(_ref2) {
     step: step,
     onFocus: onFocus,
     onBlur: onBlur
-  }), /*#__PURE__*/React.createElement(RangeLabel, null, "".concat(hasValue ? value : '--', " / ").concat(max)));
+  }), /*#__PURE__*/React.createElement(RangeLabel, null, "".concat(hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'), " / ", max));
 };
 RangeControl.displayName = "RangeControl";

package/dist/esm/controls/Range.stories.js

@@ -28,7 +28,11 @@ export default {
   component: RangeControl
 };
 
-var Template = function Template(initialValue) {
+var Template = function Template(_ref) {
+  var initialValue = _ref.initialValue,
+      step = _ref.step,
+      max = _ref.max;
+
   var _useState = useState(initialValue),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -41,17 +45,39 @@ var Template = function Template(initialValue) {
       return setValue(newVal);
     },
     min: 0,
-    max: 20,
-    step: 2
+    max: max,
+    step: step
   }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
 };
 
 export var Basic = function Basic() {
-  return Template(10);
+  return Template({
+    initialValue: 10,
+    max: 20,
+    step: 2
+  });
 };
 export var Zero = function Zero() {
-  return Template(0);
+  return Template({
+    initialValue: 0,
+    max: 20,
+    step: 2
+  });
+};
+export var Decimals = function Decimals() {
+  return Template({
+    step: 0.000000000002,
+    initialValue: 1989.123123123123,
+    max: 2000
+  });
+};
+export var BigMaxValue = function BigMaxValue() {
+  return Template({
+    step: 1000,
+    initialValue: 15,
+    max: 10000000000
+  });
 };
 export var Undefined = function Undefined() {
-  return Template(undefined);
+  return Template({});
 };

package/dist/modern/controls/Color.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import convert from 'color-convert';
 import throttle from 'lodash/throttle';
@@ -214,7 +214,14 @@ const getRealValue = (value, color, colorSpace) => {
 const useColorInput = (initialValue, onChange) => {
   const [value, setValue] = useState(initialValue || '');
   const [color, setColor] = useState(() => parseValue(value));
-  const [colorSpace, setColorSpace] = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX);
+  const [colorSpace, setColorSpace] = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX); // Reset state when initialValue becomes undefined (when resetting controls)
+
+  useEffect(() => {
+    if (initialValue !== undefined) return;
+    setValue('');
+    setColor(undefined);
+    setColorSpace(ColorSpace.HEX);
+  }, [initialValue]);
   const realValue = useMemo(() => getRealValue(value, color, colorSpace).toLowerCase(), [value, color, colorSpace]);
   const updateValue = useCallback(update => {
     const parsed = parseValue(update);
@@ -245,7 +252,12 @@ const useColorInput = (initialValue, onChange) => {
 const id = value => value.replace(/\s*/, '').toLowerCase();
 
 const usePresets = (presetColors, currentColor, colorSpace) => {
-  const [selectedColors, setSelectedColors] = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []);
+  const [selectedColors, setSelectedColors] = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []); // Reset state when currentColor becomes undefined (when resetting controls)
+
+  useEffect(() => {
+    if (currentColor !== undefined) return;
+    setSelectedColors([]);
+  }, [currentColor]);
   const presets = useMemo(() => {
     const initialPresets = (presetColors || []).map(preset => {
       if (typeof preset === 'string') return parseValue(preset);

package/dist/modern/controls/Number.js

@@ -22,16 +22,16 @@ export const NumberControl = ({
 }) => {
   const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
   const [forceVisible, setForceVisible] = useState(false);
-  const [parseError, setParseError] = useState(false);
+  const [parseError, setParseError] = useState(null);
   const handleChange = useCallback(event => {
     setInputValue(event.target.value);
     const result = parseFloat(event.target.value);
 
     if (Number.isNaN(result)) {
-      setParseError(true);
+      setParseError(new Error(`'${event.target.value}' is not a number`));
     } else {
       onChange(result);
-      setParseError(false);
+      setParseError(null);
     }
   }, [onChange, setParseError]);
   const onForceVisible = useCallback(() => {

package/dist/modern/controls/Object.js

@@ -245,7 +245,7 @@ export const ObjectControl = ({
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
   const [showRaw, setShowRaw] = useState(!hasData);
-  const [parseError, setParseError] = useState();
+  const [parseError, setParseError] = useState(null);
   const updateRaw = useCallback(raw => {
     try {
       if (raw) onChange(JSON.parse(raw));

package/dist/modern/controls/Range.js

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { styled } from '@storybook/theming';
 import { lighten, darken, rgba } from 'polished';
 import { getControlId } from './helpers';
 import { parse } from './Number';
 const RangeInput = styled.input(({
-  theme
+  theme,
+  min,
+  max,
+  value
 }) => ({
   // Resytled using http://danielstern.ca/range.css/#/
   '&': {
@@ -13,8 +16,14 @@ const RangeInput = styled.input(({
     appearance: 'none'
   },
   '&::-webkit-slider-runnable-track': {
-    background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-    border: `1px solid ${theme.appBorderColor}`,
+    background: theme.base === 'light' ? `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} 100%)`,
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
     borderRadius: 6,
     width: '100%',
     height: 6,
@@ -45,8 +54,7 @@ const RangeInput = styled.input(({
   '&:focus': {
     outline: 'none',
     '&::-webkit-slider-runnable-track': {
-      borderColor: rgba(theme.color.secondary, 0.4),
-      background: theme.background.hoverable
+      borderColor: rgba(theme.color.secondary, 0.4)
     },
     '&::-webkit-slider-thumb': {
       borderColor: theme.color.secondary,
@@ -54,8 +62,14 @@ const RangeInput = styled.input(({
     }
   },
   '&::-moz-range-track': {
-    background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-    border: '1px solid rgba(0, 0, 0, 0.1)',
+    background: theme.base === 'light' ? `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} 100%)`,
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
     borderRadius: 6,
     width: '100%',
     height: 6,
@@ -83,22 +97,23 @@ const RangeInput = styled.input(({
     }
   },
   '&::-ms-track': {
-    background: theme.base === 'light' ? darken(0.02, theme.input.background) : lighten(0.02, theme.input.background),
-    borderColor: 'transparent',
-    borderWidth: '7.3px 0',
+    background: theme.base === 'light' ? `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${darken(0.02, theme.input.background)} 100%)` : `linear-gradient(to right, 
+            ${theme.color.green} 0%, ${theme.color.green} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} ${(value - min) / (max - min) * 100}%, 
+            ${lighten(0.02, theme.input.background)} 100%)`,
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
     color: 'transparent',
     width: '100%',
     height: '6px',
     cursor: 'pointer'
   },
   '&::-ms-fill-lower': {
-    background: '#dadada',
-    border: `1px solid ${theme.appBorderColor}`,
     borderRadius: 6
   },
   '&::-ms-fill-upper': {
-    background: '#dddddd',
-    border: `1px solid ${theme.appBorderColor}`,
     borderRadius: 6
   },
   '&::-ms-thumb': {
@@ -110,12 +125,6 @@ const RangeInput = styled.input(({
     cursor: 'grab',
     marginTop: 0
   },
-  '&:focus::-ms-fill-lower': {
-    background: '#dddddd'
-  },
-  '&:focus::-ms-fill-upper': {
-    background: '#e0e0e0'
-  },
   '@supports (-ms-ime-align:auto)': {
     'input[type=range]': {
       margin: '0'
@@ -126,13 +135,23 @@ const RangeLabel = styled.span({
   paddingLeft: 5,
   paddingRight: 5,
   fontSize: 12,
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  fontFeatureSettings: 'tnum',
+  fontVariantNumeric: 'tabular-nums'
 });
 const RangeWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',
   width: '100%'
 });
+
+function getNumberOfDecimalPlaces(number) {
+  const match = number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return !match ? 0 : Math.max(0, // Number of digits right of decimal point.
+  (match[1] ? match[1].length : 0) - ( // Adjust for scientific notation.
+  match[2] ? +match[2] : 0));
+}
+
 export const RangeControl = ({
   name,
   value,
@@ -148,6 +167,7 @@ export const RangeControl = ({
   };
 
   const hasValue = value !== undefined;
+  const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
   return /*#__PURE__*/React.createElement(RangeWrapper, null, /*#__PURE__*/React.createElement(RangeLabel, null, min), /*#__PURE__*/React.createElement(RangeInput, {
     id: getControlId(name),
     type: "range",
@@ -159,6 +179,6 @@ export const RangeControl = ({
     step,
     onFocus,
     onBlur
-  }), /*#__PURE__*/React.createElement(RangeLabel, null, `${hasValue ? value : '--'} / ${max}`));
+  }), /*#__PURE__*/React.createElement(RangeLabel, null, `${hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'}`, " / ", max));
 };
 RangeControl.displayName = "RangeControl";

package/dist/modern/controls/Range.stories.js

@@ -5,18 +5,40 @@ export default {
   component: RangeControl
 };
 
-const Template = initialValue => {
+const Template = ({
+  initialValue,
+  step,
+  max
+}) => {
   const [value, setValue] = useState(initialValue);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RangeControl, {
     name: "range",
     value: value,
     onChange: newVal => setValue(newVal),
     min: 0,
-    max: 20,
-    step: 2
+    max: max,
+    step: step
   }), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value) || 'undefined'));
 };
 
-export const Basic = () => Template(10);
-export const Zero = () => Template(0);
-export const Undefined = () => Template(undefined);
+export const Basic = () => Template({
+  initialValue: 10,
+  max: 20,
+  step: 2
+});
+export const Zero = () => Template({
+  initialValue: 0,
+  max: 20,
+  step: 2
+});
+export const Decimals = () => Template({
+  step: 0.000000000002,
+  initialValue: 1989.123123123123,
+  max: 2000
+});
+export const BigMaxValue = () => Template({
+  step: 1000,
+  initialValue: 15,
+  max: 10000000000
+});
+export const Undefined = () => Template({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.3.0-beta.9",
+  "version": "6.3.0-rc.11",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.3.0-beta.9",
+    "@storybook/client-logger": "6.3.0-rc.11",
     "@storybook/csf": "0.0.1",
-    "@storybook/theming": "6.3.0-beta.9",
+    "@storybook/theming": "6.3.0-rc.11",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df59c3933e319f216ef41b6a516102884e54e7f0",
+  "gitHead": "db9968a8a241edf423c5780e229eca3f5e5ce773",
   "sbmodern": "dist/modern/index.js"
 }