@spothero/ui 22.1.2 → 22.2.1

package/dist/components/Button/Button.styles.js

@@ -117,6 +117,12 @@ const variants = exports.variants = {
       _disabled: {
         color: 'gray.dark'
       }
+    },
+    _active: {
+      color: 'primary.600',
+      _disabled: {
+        color: 'gray.dark'
+      }
     }
   },
   tertiaryOnDark: {

package/dist/components/RefreshedInput/Button/Button.js

@@ -54,7 +54,8 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     className: classes,
     variant: "refreshed",
-    "data-value": buttonValue
+    "data-value": buttonValue,
+    paddingBottom: "2"
   }, props, {
     isDisabled: isDisabled
   }), buttonValue));

package/dist/components/RefreshedInput/FormControl/index.js

@@ -14,14 +14,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Chakra V2 will heavily impact this component
 const labelStyle = {
   color: 'gray.600',
-  fontWeight: 'semibold',
-  top: 3,
+  fontWeight: 'normal',
+  top: 2,
   left: 0,
   position: 'absolute',
   pointerEvents: 'none',
   padding: 'inherit',
-  marginX: 3,
-  paddingX: 1,
+  paddingLeft: 3,
   marginY: 2,
   transformOrigin: 'left top',
   // below is from chakra v2 that I'm pulling in
@@ -29,9 +28,8 @@ const labelStyle = {
   transitionDuration: '200ms'
 };
 const activeLabelStyles = {
-  transform: 'scale(0.85) translateY(-16px)',
+  transform: 'scale(0.85) translateY(-.75rem) translateX(.2rem)',
   _invalid: {
-    color: 'error',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -50,9 +48,23 @@ const controlStyles = {
         opacity: 0
       },
       _invalid: {
+        '&:focus': {
+          borderBottomRadius: 0,
+          borderColor: 'primary.default'
+        },
+        '&:focus + label': {
+          color: 'gray.600'
+        },
+        '& + label': {
+          color: 'error',
+          transform: 'scale(0.85) translateY(-16px)'
+        },
         '& + label .chakra-form__required-indicator': {
           //Styling for asterisk always to be red if invalid
           color: 'error'
+        },
+        '&::placeholder': {
+          opacity: 1
         }
       }
     },
@@ -66,26 +78,34 @@ const controlStyles = {
       paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
     },
     '.chakra-input__group > .chakra-input__left-element ~ span select': {
-      paddingLeft: 9,
+      paddingLeft: 10,
       paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
     },
     '.chakra-input__group > .chakra-input__left-element ~ span button': {
-      paddingLeft: 10,
+      paddingLeft: 12,
       paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
     },
     '.chakra-input__group > .chakra-input__left-element ~ span label': {
-      paddingLeft: 8
+      // transform: 'scale(0.85) translateY(-1rem) translateX(.5rem)',
+      paddingLeft: '2.75rem'
     },
     // Styling for select
     '.chakra-select__wrapper + label': {
       ...activeLabelStyles,
-      transform: 'scale(0.85) translateY(-16px) translateX(-2px)' //X added to help align
+      transform: 'scale(0.85) translateY(-.75rem) translateX(.25rem)'
     },
     'button[data-value] + label': {
       ...activeLabelStyles
     },
     '.FormElement-contains-error': {
       borderColor: 'error'
+    },
+    '.chakra-button + label': {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      top: 0,
+      margin: 0
     }
   },
   _focusWithin: {
@@ -122,7 +142,7 @@ const FormControl = /*#__PURE__*/(0, _react.forwardRef)(({
   }, controlStyles), /*#__PURE__*/_react.default.createElement(_react2.InputGroup, null, leftElement && /*#__PURE__*/_react.default.createElement(_react2.InputLeftElement, (0, _extends2.default)({
     pointerEvents: "none",
     top: "52%",
-    left: "1.5rem",
+    left: "1.3rem",
     transform: "translate(-50%,-50%)"
   }, leftElementStyles), leftElement), /*#__PURE__*/_react.default.createElement(_react2.Box, {
     as: "span",

package/dist/components/RefreshedInput/Input/Input.js

@@ -28,6 +28,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   leftElement,
   rightElementStyles,
   leftElementStyles,
+  placeholder = '',
   ...props
 }, ref) => {
   const classes = (0, _classnames.default)({
@@ -48,8 +49,11 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
   }, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    placeholder: placeholder,
     ref: ref,
     className: classes,
+    paddingTop: 'var(--chakra-sizes-5-5)',
+    paddingBottom: "2",
     variant: "refreshed"
   }, props)));
 });

package/dist/components/RefreshedInput/Input/styles/index.js

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _styles = _interopRequireDefault(require("../../../Input/styles"));
+//Below isn't being used in build for some reason
 const variants = {
   refreshed: {
     field: {
       ..._styles.default.variants.outline.field,
       height: 'auto',
-      paddingTop: 6,
-      paddingBottom: 3
+      paddingTop: 8,
+      paddingBottom: 2
     }
   }
 };

package/dist/theme/base/sizes.js

@@ -32,6 +32,8 @@ const sizes = {
   // 16px
   5: '1.25rem',
   // 20px
+  5.5: '1.375rem',
+  // 22px
   6: '1.5rem',
   // 24px
   7: '1.75rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "22.1.2",
+  "version": "22.2.1",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",