@mackin.com/styleguide 8.9.5 → 8.10.0

package/index.d.ts

@@ -882,18 +882,22 @@ interface SliderProps<T extends SliderValue> {
     renderValue?: (value: number) => string;
     /** Used with renderValue for the custom element width. Defaults to theme.controls.height * 2. */
     renderValueWidth?: string;
+    /** The with and height of the handles.  Defaults to theme.controls.height.  Do not use css to change the handle sizes. */
+    sliderHandleSize?: string;
     /** Styles of the overall slider. */
     className?: string;
-    /** Styles for the slider handles. */
+    /** Styles for the slider handles.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'. */
     handleClassName?: string;
-    /** Styles for the first handle. */
+    /** Styles for the first handle.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'.  */
     handle1ClassName?: string;
-    /** Styles for the second handle.  Ignored if the value is not an array. */
+    /** Styles for the second handle.  Ignored if the value is not an array.  Do not use css to change the handle sizes.  Use 'sliderHandleSize'.  */
     handle2ClassName?: string;
     /** Styles of the track. */
     trackClassName?: string;
     /** Styles applied to the track between two handlers.  Ignored if the value is not an array. */
     innerTrackClassName?: string;
+    /** Styles applied to the floating handle text with using 'showValue'. */
+    sliderTextClassName?: string;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
 

package/index.js

@@ -3215,8 +3215,6 @@ const OmniLink = (props) => {
 };
 
 const roundPxPadding = '4px';
-//TB: needs to be 2rem padding for right caret
-//TB: the generated border is bad (border: 1pxsolidrgba(0, 0, 0, 0.125);)
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
@@ -3883,10 +3881,12 @@ const GlobalStyles = (p) => {
 };
 
 const Slider = (p) => {
+    var _a;
     const theme = useThemeSafely();
     const currentValue = React.useRef(p.value);
     const sliderContainer = React.useRef(null);
-    const height = p.showValue ? `calc(${theme.controls.height} + 1.5rem)` : theme.controls.height;
+    const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
+    const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
     return (React__default['default'].createElement("div", { ref: sliderContainer, className: css.cx(css.css({
             label: 'Slider',
             width: '100%',
@@ -3900,17 +3900,17 @@ const Slider = (p) => {
                 (_a = p.onUpdate) === null || _a === void 0 ? void 0 : _a.call(p, value);
             } : undefined, renderTrack: (props, state) => {
                 const { className } = props, rest = __rest(props, ["className"]);
-                return React__default['default'].createElement("div", Object.assign({ className: css.cx(className, css.css({
+                return (React__default['default'].createElement("div", Object.assign({ className: css.cx(className, p.trackClassName, css.css({
                         display: 'flex',
                         alignItems: 'center',
-                        height: theme.controls.height
-                    }), p.trackClassName) }, rest),
+                        height: sliderHandleSize
+                    })) }, rest),
                     React__default['default'].createElement("div", { className: css.css({
                             backgroundColor: theme.colors.secondary,
-                            height: `calc(${theme.controls.height} / 4)`,
+                            height: `calc(${sliderHandleSize} / 4)`,
                             borderRadius: theme.controls.roundRadius,
                             width: '100%'
-                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) }));
+                        }, p.innerTrackClassName && rest.key === 'track-1' && Array.isArray(p.value) ? p.innerTrackClassName : undefined) })));
             }, renderThumb: (props, state) => {
                 const { className } = props, rest = __rest(props, ["className"]);
                 let specificThumbStyles;
@@ -3921,8 +3921,6 @@ const Slider = (p) => {
                     specificThumbStyles = p.handle2ClassName;
                 }
                 return (React__default['default'].createElement("div", Object.assign({ className: css.cx(className, css.css({
-                        width: theme.controls.height,
-                        height: theme.controls.height,
                         borderRadius: theme.controls.roundRadius,
                         backgroundColor: 'white',
                         border: theme.controls.border,
@@ -3940,7 +3938,10 @@ const Slider = (p) => {
                         '&:hover': {
                             filter: theme.controls.hoverBrightness
                         }
-                    }), specificThumbStyles, p.handleClassName) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    }), specificThumbStyles, p.handleClassName, css.css({
+                        width: sliderHandleSize,
+                        height: sliderHandleSize,
+                    })) }, rest), p.showValue && (React__default['default'].createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {
@@ -3954,13 +3955,13 @@ const rectsCollideX = (r1, r2) => {
 };
 const HandleText = (p) => {
     var _a, _b, _c;
-    const theme = useThemeSafely();
     const displayValue = (_b = (_a = p.renderValue) === null || _a === void 0 ? void 0 : _a.call(p, p.value)) !== null && _b !== void 0 ? _b : p.value;
-    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : theme.controls.height;
+    const renderValueWidth = (_c = p.renderValueWidth) !== null && _c !== void 0 ? _c : p.sliderHandleSize;
     const renderValueLeft = React.useMemo(() => {
-        return `calc(${renderValueWidth} * 0.5 * -1 + (${theme.controls.height} * 0.5))`;
+        return `calc(${renderValueWidth} * 0.5 * -1 + (${p.sliderHandleSize} * 0.5))`;
     }, [p.renderValueWidth]);
     const [flipText, setFlipText] = React.useState(false);
+    const offset = '2px';
     React.useEffect(() => {
         // this needs to fire on every render due to the other handle also moving.
         var _a, _b;
@@ -3975,11 +3976,11 @@ const HandleText = (p) => {
     return (React__default['default'].createElement(Text, { ellipsis: true, className: css.cx('slider-handle', css.css({
             width: renderValueWidth,
             left: renderValueLeft,
-            top: flipText ? undefined : theme.controls.height,
-            bottom: flipText ? theme.controls.height : undefined,
+            top: flipText ? undefined : `calc(${p.sliderHandleSize} + ${offset})`,
+            bottom: flipText ? `calc(${p.sliderHandleSize} + ${offset})` : undefined,
             position: 'absolute',
             overflow: 'hidden',
-        })), tag: "div", align: "center" }, displayValue));
+        }), p.className), tag: "div", align: "center" }, displayValue));
 };
 
 const TabHeader = (p) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "8.9.5",
+    "version": "8.10.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",