@mackin.com/styleguide 9.4.1 → 9.6.0

package/index.d.ts

@@ -420,10 +420,14 @@ declare const Nav: (props: {
     toggle: (show: boolean) => void;
     id?: string | undefined;
     children?: React.ReactNode;
+    /** @deprecated Going foward, implement the nav visibility based on screen size in the consuming application.
+     * If true, the nav and backdrop will hide when the screen is larger.  Defaults to `theme.breakpoints.desktop`. */
     responsive?: boolean | undefined;
     className?: string | undefined;
     /** Duration of the slide animation in ms.  Defaults to `theme.timings.nav.slideMs`. */
     slideMs?: number | undefined;
+    /** Defaults to `theme.layout.navWidth`. */
+    navWidth?: string | undefined;
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
@@ -624,8 +628,12 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
     onValueChange: (value: T) => void;
     readOnly?: boolean;
     round?: boolean;
-    /** If true, bottom padding will be added to account for other inputs having space for error messages. */
+    /** If true, bottom spacing will be added to account for other inputs having space for error messages.
+     * If you plan on using 'error', make sure this is also set to true so the spacing is not added and removed when the error message is toggled.
+     */
     controlAlign?: boolean;
+    /** An error message to display below the input.  If set, 'controlAlign' will be ignored and default to 'true'. */
+    error?: string;
     /** This will be applied to the select element. */
     className?: string;
     /** Applies to the outer wrapper which contains the select and other elements. */

package/index.js

@@ -2697,14 +2697,15 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
-    const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
+    const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
+    const totalNavOffset = `calc(${navWidth} + 20px)`;
     const backdrop = React__namespace.useContext(BackdropContext);
     const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
-    const log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
-    const slideMs = (_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs;
+    const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
+    const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = css.keyframes `
 		0% {
 			transform: translateX(0);
@@ -2738,8 +2739,8 @@ const Nav = (props) => {
 		bottom: 0;
 		background-color: ${theme.colors.nav};
 		color: ${theme.colors.navFont};
-		width: ${theme.layout.navWidth};
-		min-width: ${theme.layout.navWidth};
+		width: ${navWidth};
+		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
 		z-index: ${theme.zIndexes.nav};
 		overflow-y: auto;
@@ -3016,7 +3017,7 @@ const roundPxPadding = '4px';
 const Picker = (props) => {
     const selectProps = __rest(props
     // if we put numbers in, we expect them out
-    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName"]);
+    , ["value", "options", "onValueChange", "readOnly", "round", "controlAlign", "wrapperClassName", "iconClassName", "error"]);
     // if we put numbers in, we expect them out
     let isNumber = false;
     if (props.options && props.options.length) {
@@ -3056,6 +3057,11 @@ const Picker = (props) => {
         borderRadius: theme.controls.roundRadius,
         paddingLeft: `calc(${theme.controls.padding} + ${roundPxPadding})`,
         paddingRight: `calc(${theme.controls.padding} + 1rem + ${roundPxPadding})`,
+    }, props.error && {
+        borderColor: theme.colors.required,
+        ':focus': {
+            boxShadow: theme.controls.focusOutlineRequiredShadow
+        }
     }, props.readOnly && {
         backgroundColor: 'transparent !important',
         backgroundImage: 'unset',
@@ -3112,28 +3118,24 @@ const Picker = (props) => {
         }
         return React__namespace.createElement("option", { key: val, value: val }, label);
     })));
-    let iconHeight;
-    if (props.controlAlign) {
-        iconHeight = `calc(100% - ${theme.controls.inputErrorMinHeight})`;
-    }
-    else {
-        iconHeight = '100%';
-    }
     return (React__namespace.createElement("span", { className: css.cx(css.css({
             label: 'PickerWrapper',
             position: 'relative',
             display: 'inline-block',
             width: '100%',
-            paddingBottom: props.controlAlign ? theme.controls.inputErrorMinHeight : undefined
         }), props.wrapperClassName) },
-        select,
-        !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.cx(css.css({
-                position: 'absolute',
-                right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
-                height: iconHeight,
-                pointerEvents: 'none',
-                color: theme.colors.font
-            }), props.iconClassName) }))));
+        React__namespace.createElement("div", { className: css.css({
+                position: 'relative'
+            }) },
+            select,
+            !props.readOnly && (React__namespace.createElement(Icon, { id: "sortDesc", className: css.cx(css.css({
+                    position: 'absolute',
+                    right: `calc(${theme.controls.padding} + ${props.round ? roundPxPadding : '0px'})`,
+                    height: '100%',
+                    pointerEvents: 'none',
+                    color: theme.colors.font
+                }), props.iconClassName) }))),
+        (props.error || props.controlAlign) && React__namespace.createElement(InputErrorDisplay, { error: props.error })));
 };
 
 const Pager = (props) => {

package/package.json

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