@mackin.com/styleguide 10.1.5 → 10.2.1

package/index.d.ts

@@ -667,17 +667,22 @@ interface PopoverProps {
 declare const Popover: (p: PopoverProps) => React.JSX.Element;
 
 interface ProgressBarProps {
+    /** The value in whole pct - 55 NOT 0.55. */
     pct: number;
+    /** If `true`, the bar will be rounded at the corners. */
     round?: boolean;
+    /** If `true`, the current percent will be shown as a label. */
     showPct?: boolean;
+    /** Where to place the pct label from `showPct`.  Defaults to `bottom`.  Ignored if `showPct` is false. */
+    showPctPosition?: 'bottom' | 'right';
+    /** This will be applied to the bar. */
     className?: string;
+    /** This will be applied to the bar fill.  Override this to change the transitions or remove them. */
+    barFillClassName?: string;
+    /** Applied to the percent label element.  Ignored if `showPct` is false. */
+    pctLabelClassName?: string;
 }
-declare const ProgressBar: (props: {
-    pct: number;
-    round?: boolean;
-    showPct?: boolean;
-    className?: string;
-}) => React.JSX.Element;
+declare const ProgressBar: (props: ProgressBarProps) => React.JSX.Element;
 
 type BaseProps$1 = Omit<TextInputProps, 'rightControl' | 'wrapperClassName' | 'type' | 'className'> & InputOnFocusProps;
 interface SearchBoxProps extends BaseProps$1 {
@@ -858,6 +863,8 @@ interface SliderProps<T extends SliderValue> {
     innerTrackClassName?: string;
     /** Styles applied to the floating handle text with using 'showValue'. */
     sliderTextClassName?: string;
+    /** Styles applied to the floating handle text with using 'showValue'. */
+    ariaLabel?: (T extends number ? string : readonly string[] | undefined) | undefined;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;
 

package/index.esm.js

@@ -1743,7 +1743,7 @@ const Modal = (p) => {
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), variant: "icon", onClick: p.onClick },
+                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
                                 React__default.createElement(Icon, { id: "close" })) : React__default.createElement("span", null))),
                         p.children)))), backdropContainer);
         }
@@ -3665,6 +3665,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React.useRef(null);
     React.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3690,12 +3691,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css({
+        width: '3rem'
+    }) : undefined;
+    return (React.createElement("div", { className: cx(wrapStyles, "progressBar") },
         React.createElement("div", { className: cx(barStyles, props.className) },
-            React.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React.createElement("div", { ref: bar, className: cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {
@@ -3850,7 +3862,7 @@ const Slider = (p) => {
             width: '100%',
             height,
         }), p.className) },
-        React__default.createElement(ReactSlider, { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
+        React__default.createElement(ReactSlider, { ariaLabel: p.ariaLabel, step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
                 p.onChange(value);
             }, onChange: p.onUpdate || p.showValue ? (value) => {
                 var _a;

package/index.js

@@ -1761,7 +1761,7 @@ const Modal = (p) => {
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), variant: "icon", onClick: p.onClick },
+                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
                                 React.createElement(Icon, { id: "close" })) : React.createElement("span", null))),
                         p.children)))), backdropContainer);
         }
@@ -3683,6 +3683,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3708,12 +3709,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React__namespace.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css.css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css.css({
+        width: '3rem'
+    }) : undefined;
+    return (React__namespace.createElement("div", { className: css.cx(wrapStyles, "progressBar") },
         React__namespace.createElement("div", { className: css.cx(barStyles, props.className) },
-            React__namespace.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React__namespace.createElement("div", { ref: bar, className: css.cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: css.cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {
@@ -3868,7 +3880,7 @@ const Slider = (p) => {
             width: '100%',
             height,
         }), p.className) },
-        React.createElement(ReactSlider, { step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
+        React.createElement(ReactSlider, { ariaLabel: p.ariaLabel, step: p.step, min: p.min, max: p.max, value: p.value, onAfterChange: (value) => {
                 p.onChange(value);
             }, onChange: p.onUpdate || p.showValue ? (value) => {
                 var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.1.5",
+    "version": "10.2.1",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",