@spothero/ui 15.9.2 → 15.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.9.2",
+  "version": "15.9.3",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",

package/styles/v2/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -15,7 +15,6 @@ const AutoSuggestSelect = forwardRef(
             isInvalid,
             isDisabled,
             isRequired,
-            isOptional,
             getOptions,
             onChange,
             iconSrc,
@@ -133,7 +132,6 @@ const AutoSuggestSelect = forwardRef(
             <FormControl
                 errorMessage={errorMessage}
                 isRequired={isRequired}
-                isOptional={isOptional}
                 helperText={helperText}
                 label={label}
                 inputId={id}
@@ -170,7 +168,7 @@ AutoSuggestSelect.propTypes = {
     placeholder: PropTypes.string,
     /** Optional helper text displayed below the select */
     helperText: PropTypes.string,
-    /** Error message that would display under the select */
+    /** Error message that would dispplay under the select */
     errorMessage: PropTypes.string,
     /** Boolean that sets whether the select is valid */
     isInvalid: PropTypes.bool,
@@ -178,8 +176,6 @@ AutoSuggestSelect.propTypes = {
     isDisabled: PropTypes.bool,
     /** Boolean that sets whether the select is required */
     isRequired: PropTypes.bool,
-    /** Boolean that sets whether the select is optional */
-    isOptional: PropTypes.bool,
     /** Function that is called with the value typed into the input that returns a list of options for the select */
     getOptions: PropTypes.func.isRequired,
     /** Function that is called when an option is selected, it returns the label and value of the selection */

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

@@ -1,8 +1,7 @@
-import React, {forwardRef} from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import ReactSelect from 'react-select';
-
+import React, {forwardRef} from 'react';
+import {Select as ChakraSelect} from '@chakra-ui/react';
 import IconChevronDown from '@spothero/icons/chevron-down';
 
 import Icon from '../Icon/Icon';
@@ -18,127 +17,12 @@ const Select = forwardRef(
             isDisabled,
             isRequired,
             isOptional,
-            options,
             ...props
         },
         ref
     ) => {
         const classes = cn({'FormElement-contains-error': isInvalid});
 
-        const baseText = {
-            fontSize: 'var(--chakra-fontSizes-base)',
-            color: 'var(--chakra-colors-text-primary-light)',
-        };
-
-        /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
-        const customStyles = {
-            select: (provided, state) => ({
-                ...provided,
-
-                '&:hover': {
-                    cursor: state.isDisabled ? 'not-allowed' : 'auto',
-                },
-            }),
-            menu: provided => ({
-                ...provided,
-                ...baseText,
-                borderColor: 'var(--chakra-colors-gray-200)',
-                borderWidth: '1px',
-                boxShadow: 'none',
-            }),
-            control: (provided, state) => ({
-                ...provided,
-                borderColor: isInvalid
-                    ? 'var(--chakra-colors-error)'
-                    : state.isFocused
-                    ? 'var(--chakra-colors-primary-default)'
-                    : 'var(--chakra-colors-gray-200)',
-                borderWidth: '1px',
-                borderRadius: '4px',
-                backgroundColor: state.isDisabled
-                    ? 'var(--chakra-colors-gray-50)'
-                    : 'transparent',
-                boxShadow: 'none',
-                height: 'var(--chakra-sizes-10)',
-                minWidth: 'var(--chakra-sizes-48)',
-                width: props.width && props.width,
-
-                '&:hover': {
-                    borderColor: isInvalid
-                        ? 'var(--chakra-colors-error)'
-                        : state.isFocused
-                        ? 'var(--chakra-colors-primary-default)'
-                        : 'var(--chakra-colors-gray-200)',
-                },
-            }),
-            input: (provided, state) => ({
-                ...provided,
-                ...baseText,
-                borderRadius: '4px',
-                color: state.isDisabled
-                    ? 'var(--chakra-colors-text-secondary-light)'
-                    : 'var(--chakra-colors-text-primary-light)',
-                backgroundColor: state.isDisabled
-                    ? 'var(--chakra-colors-gray-50)'
-                    : 'transparent',
-            }),
-            placeholder: provided => ({
-                ...provided,
-                fontSize: 'var(--chakra-fontSizes-base)',
-                color: 'var(--chakra-colors-gray-600)',
-            }),
-            singleValue: (provided, state) => ({
-                ...provided,
-                ...baseText,
-                color: state.isDisabled
-                    ? 'var(--chakra-colors-text-secondary-light)'
-                    : 'var(--chakra-colors-text-primary-light)',
-
-                '&:hover': {
-                    cursor: state.isDisabled ? 'not-allowed' : 'auto',
-                },
-            }),
-            option: (provided, state) => ({
-                ...provided,
-                backgroundColor: state.isSelected
-                    ? 'var(--chakra-colors-gray-200)'
-                    : state.isFocused
-                    ? 'var(--chakra-colors-gray-50)'
-                    : 'transparent',
-                color: 'var(--chakra-colors-text-primary-light)',
-                fontWeight: state.isSelected
-                    ? 'var(--chakra-fontWeights-semibold)'
-                    : 'var(--chakra-fontWeights-normal)',
-
-                ':active': {
-                    fontWeight: 'var(--chakra-fontWeights-semibold)',
-                    color: 'var(--chakra-colors-text-primary-light)',
-                    backgroundColor:
-                        !state.isDisabled && 'var(--chakra-colors-gray-200)',
-                },
-            }),
-        };
-
-        const dropdownIndicatorStyles = {
-            width: 18,
-            display: 'flex',
-            marginRight: 'var(--chakra-space-4)',
-            marginLeft: 'var(--chakra-space-7)',
-            color: 'var(--chakra-colors-gray-600)',
-            '&:hover': {
-                color: 'var(--chakra-colors-gray-600)',
-            },
-        };
-
-        const DropdownIndicator = ({innerRef, innerProps}) => (
-            <Icon
-                as={IconChevronDown}
-                style={dropdownIndicatorStyles}
-                ref={innerRef}
-                {...innerProps}
-            />
-        );
-
         return (
             <FormControl
                 isInvalid={isInvalid}
@@ -149,19 +33,12 @@ const Select = forwardRef(
                 helperText={helperText}
                 label={label}
                 inputId={props.id}
-                minWidth={48}
-                width={props.width && props.width}
             >
-                <ReactSelect
-                    options={options?.length && options}
-                    isSearchable={false}
-                    isDisabled={isDisabled}
-                    components={{
-                        DropdownIndicator,
-                        IndicatorSeparator: () => null,
-                    }}
-                    maxMenuHeight={280}
-                    styles={customStyles}
+                <ChakraSelect
+                    icon={<Icon as={IconChevronDown} />}
+                    iconSize={12}
+                    fontWeight="regular"
+                    fontSize="sm"
                     ref={ref}
                     className={classes}
                     {...props}
@@ -173,11 +50,8 @@ const Select = forwardRef(
 
 Select.propTypes = {
     id: PropTypes.string.isRequired,
-    options: PropTypes.array,
     label: PropTypes.string,
-    isRequired: PropTypes.bool,
     helperText: PropTypes.string,
-    placeholder: PropTypes.string,
     errorMessage: PropTypes.string,
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,

package/styles/v2/components/Select/Select.stories.js

@@ -11,7 +11,14 @@ export default {
     },
 };
 
-const SelectTemplate = props => <Component options {...props} />;
+const SelectTemplate = props => (
+    <Component variant="outline" maxWidth="200px" {...props}>
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="three">Three</option>
+        <option value="four">Four</option>
+    </Component>
+);
 
 SelectTemplate.propTypes = {
     placeholder: PropTypes.string,
@@ -21,54 +28,33 @@ SelectTemplate.propTypes = {
     isInvalid: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isReadOnly: PropTypes.bool,
-    isOptional: PropTypes.bool,
 };
 
 export const Select = SelectTemplate.bind({});
 
 Select.argTypes = {
-    id: {control: {type: 'text'}},
-    options: {
-        control: {type: 'object'},
+    placeholder: {
+        control: {type: 'text'},
     },
     label: {
         control: {type: 'text'},
     },
-    isRequired: {control: {type: 'boolean'}},
     helperText: {
         control: {type: 'text'},
     },
-    placeholder: {
-        control: {type: 'text'},
-    },
     errorMessage: {
         control: {type: 'text'},
     },
-    isInvalid: {control: {type: 'boolean'}},
-    isDisabled: {control: {type: 'boolean'}},
 };
 
 Select.args = {
-    id: 'input_id',
-    options: [
-        {value: 'One', label: 'Option One'},
-        {value: 'Two', label: 'Option Two'},
-        {value: 'Three', label: 'Option Three'},
-        {value: 'Four', label: 'Option Four'},
-        {value: 'Five', label: 'Option Five'},
-        {value: 'Six', label: 'Option Six'},
-        {value: 'Seven', label: 'Option Seven'},
-        {value: 'Eight', label: 'Option Eight'},
-        {value: 'Nine', label: 'Option Nine'},
-        {value: 'Ten', label: 'Option Ten'},
-    ],
+    placeholder: 'Placeholder text',
     label: 'Label',
-    isRequired: false,
     helperText: 'Helper text',
-    placeholder: 'Select One...',
     errorMessage: 'Error message',
     isInvalid: false,
     isDisabled: false,
     isReadOnly: false,
+    isRequired: false,
     isOptional: false,
 };

package/styles/v2/components/Select/styles/index.js

@@ -0,0 +1,29 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+const variants = {
+    outline: {
+        field: {
+            border: '1px solid',
+            borderColor: 'inherit',
+            bg: 'inherit',
+            _hover: {borderColor: 'gray.300'},
+            _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
+            _disabled: {opacity: 0.4, cursor: 'not-allowed'},
+            _invalid: {
+                borderColor: 'error',
+                boxShadow: t => `0 0 0 1px ${t.colors.error}`,
+            },
+            _focus: {
+                zIndex: 1,
+                borderColor: 'primary.400',
+                boxShadow: t => `0 0 0 1px ${t.colors.primary['400']}`,
+            },
+        },
+        addon: {border: '1px solid', borderColor: 'inherit', bg: 'gray.100'},
+    },
+};
+
+export default merge(chakraDefaultTheme.components.Select, {
+    variants,
+});

package/styles/v2/components/styles.js

@@ -9,6 +9,7 @@ export {default as Spinner} from './Spinner/Spinner.styles';
 export {default as Heading} from './Heading/Heading.styles';
 export {default as Divider} from './Divider/Divider.styles';
 export {default as Tabs} from './Tabs/styles';
+export {default as Select} from './Select/styles';
 export {default as Checkbox} from './Checkbox/styles';
 export {default as Switch} from './Switch/styles';
 export {default as Popover} from './Popover/styles';