@spothero/ui 14.6.0 → 14.7.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 14.7.1 - 05/13/2022
+
+## Miscellaneous Updates
+* [[7141cca](https://github.com/spothero/fe-ui/commit/7141cca)] - `fix:` Kebab case style property was throwing terminal warning ([#289](https://github.com/spothero/fe-ui/pull/289)) (Mick Johnson)
+
+# 14.7.0 - 05/12/2022
+
+## New Features
+* [[bf20c4f](https://github.com/spothero/fe-ui/commit/bf20c4f)] - Add classname to input and select so it doesn't break in prod ([#287](https://github.com/spothero/fe-ui/pull/287)) (annaliarosed)
+	* `Co-authored-by:` Annalia Destefano <annalia.destefano@spothero.com>
+
 # 14.6.0 - 05/10/2022
 
 ## New Features

package/CHANGELOG.tmp

@@ -1,10 +1,5 @@
-# 14.6.0 - 05/10/2022
+# 14.7.1 - 05/13/2022
 
-## New Features
-* [[119cc85](https://github.com/spothero/fe-ui/commit/119cc85)] - Wrap Select component in FormControl component ([#285](https://github.com/spothero/fe-ui/pull/285)) (annaliarosed)
-	* `feat:` Wrap Select in FormControl and update stories for Select
-	* `feat:` Update styles to match design
-	* `chore:` Remove FormControl stories for now
-	* `fix:` Connect label and input
-	* `fix:` Connect label and inputCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
+## Miscellaneous Updates
+* [[7141cca](https://github.com/spothero/fe-ui/commit/7141cca)] - `fix:` Kebab case style property was throwing terminal warning ([#289](https://github.com/spothero/fe-ui/pull/289)) (Mick Johnson)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "14.6.0",
+  "version": "14.7.1",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index-bundled.cjs.js",
   "module": "v2/index.js",

package/styles/v2/components/Button/Button.jsx

@@ -15,7 +15,6 @@ const anchorProps = (isExternal = false) => ({
 const Button = forwardRef(({asAnchor, isExternal, ...props}, ref) => (
     <ChakraButton
         iconSpacing={2}
-        sx={{'text-underline-offset': '1px'}}
         {...props}
         {...((asAnchor || props.as === 'a') && anchorProps(isExternal))}
         ref={ref}

package/styles/v2/components/Button/Button.styles.js

@@ -142,6 +142,7 @@ export const variants = {
         borderRadius: 'unset',
         color: 'primary.default',
         textDecoration: 'underline',
+        textUnderlineOffset: '1px',
         h: 'unset',
         m: 'unset',
         minW: 'unset',
@@ -164,6 +165,7 @@ export const variants = {
         borderWidth: 'none',
         color: 'white',
         textDecoration: 'underline',
+        textUnderlineOffset: '1px',
         h: 'unset',
         m: 'unset',
         minW: 'unset',

package/styles/v2/components/Input/Input.jsx

@@ -1,4 +1,5 @@
 import React, {forwardRef} from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import {Input as ChakraInput} from '@chakra-ui/react';
 import FormControl from '../FormControl/FormControl';
@@ -15,19 +16,23 @@ const Input = forwardRef(
             ...props
         },
         ref
-    ) => (
-        <FormControl
-            isInvalid={isInvalid}
-            isDisabled={isDisabled}
-            isRequired={isRequired}
-            errorMessage={errorMessage}
-            helperText={helperText}
-            label={label}
-            inputId={props.id}
-        >
-            <ChakraInput ref={ref} {...props} />
-        </FormControl>
-    )
+    ) => {
+        const classes = cn({'FormElement-contains-error': isInvalid});
+
+        return (
+            <FormControl
+                isInvalid={isInvalid}
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                errorMessage={errorMessage}
+                helperText={helperText}
+                label={label}
+                inputId={props.id}
+            >
+                <ChakraInput ref={ref} className={classes} {...props} />
+            </FormControl>
+        );
+    }
 );
 
 Input.propTypes = {

package/styles/v2/components/Select/Select.jsx

@@ -1,4 +1,5 @@
 import React, {forwardRef} from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import {Select as ChakraSelect} from '@chakra-ui/react';
 import FormControl from '../FormControl/FormControl';
@@ -15,24 +16,29 @@ const Select = forwardRef(
             ...props
         },
         ref
-    ) => (
-        <FormControl
-            isInvalid={isInvalid}
-            isDisabled={isDisabled}
-            isRequired={isRequired}
-            errorMessage={errorMessage}
-            helperText={helperText}
-            label={label}
-            inputId={props.id}
-        >
-            <ChakraSelect
-                fontWeight="regular"
-                fontSize="sm"
-                ref={ref}
-                {...props}
-            />
-        </FormControl>
-    )
+    ) => {
+        const classes = cn({'FormElement-contains-error': isInvalid});
+
+        return (
+            <FormControl
+                isInvalid={isInvalid}
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                errorMessage={errorMessage}
+                helperText={helperText}
+                label={label}
+                inputId={props.id}
+            >
+                <ChakraSelect
+                    fontWeight="regular"
+                    fontSize="sm"
+                    ref={ref}
+                    className={classes}
+                    {...props}
+                />
+            </FormControl>
+        );
+    }
 );
 
 Select.propTypes = {