@mackin.com/styleguide 9.5.0 → 9.6.0

package/index.d.ts

@@ -628,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

@@ -3017,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) {
@@ -3057,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',
@@ -3113,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.5.0",
+    "version": "9.6.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",