Redesign text fields (#187)

* New TextFieldInput designs * New Select designs * New AddressInput designs
5afe · Feb 24, 2022 · 59b0080 · 59b0080
1 parent c986e41
commit 59b0080
Show file tree

Hide file tree

Showing 39 changed files with 2,074 additions and 1,169 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,9 +1,10 @@
 module.exports = {
-  stories: ["../src/**/*.stories.tsx"],
+  stories: ['../src/**/*.stories.tsx'],
   addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-links",
-    "@storybook/addon-docs",
-    "storybook-addon-react-docgen",
-  ]
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    'storybook-addon-react-docgen',
+    'storybook-addon-controls',
+  ],
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.9.8",
+  "version": "1.0.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
@@ -35,10 +35,12 @@
     "@babel/preset-typescript": "^7.16.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.0",
+    "@mui/x-data-grid": "4.0.2",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
+    "@storybook/addon-controls": "^6.4.19",
     "@storybook/addons": "^6.3.12",
     "@storybook/react": "^6.3.12",
     "@testing-library/jest-dom": "^5.11.5",
@@ -70,7 +72,6 @@
     "rimraf": "^3.0.2",
     "storybook-addon-react-docgen": "^1.2.42",
     "styled-components": "^5.3.3",
-    "@mui/x-data-grid": "4.0.2",
     "ts-loader": "^8.2.0",
     "typescript": "^4.5.0",
     "url-loader": "^4.1.1",

diff --git a/src/inputs/AddressInput/AddressInput.stories.tsx b/src/inputs/AddressInput/AddressInput.stories.tsx
@@ -31,7 +31,7 @@ export default {
 
     hiddenLabel: {
       control: { type: 'boolean' },
-      defaultValue: true,
+      defaultValue: false,
     },
     disabled: {
       control: { type: 'boolean' },
@@ -99,6 +99,8 @@ export const SimpleAddressInput = ({
     <div>
       <StyledText>Network Settings:</StyledText>
       <Select
+        name="network"
+        label="Network"
         items={networks}
         activeItemId={currentNetworkPrefix}
         onItemClick={(networkPrefix) => {

diff --git a/src/inputs/AddressInput/index.tsx b/src/inputs/AddressInput/index.tsx
@@ -51,6 +51,7 @@ function AddressInput({
   ...rest
 }: AddressInputProps): ReactElement {
   const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false);
+  const [inputValue, setInputValue] = useState('');
   const defaulInputValue = addPrefix(address, networkPrefix, showNetworkPrefix);
   const inputRef = useRef({ value: defaulInputValue });
   const throttle = useThrottle();
@@ -126,14 +127,14 @@ function AddressInput({
       const inputPrefix = getNetworkPrefix(inputValue);
       const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue);
 
+      // if the valid network prefix is present, we remove it from the address state
       const isValidPrefix = networkPrefix === inputPrefix;
+      const checksumAddress = checksumValidAddress(
+        isValidPrefix ? inputWithoutPrefix : inputValue
+      );
 
-      if (isValidPrefix) {
-        // if the valid network prefix is present, we remove it from the address state
-        onChangeAddress(checksumValidAddress(inputWithoutPrefix));
-      } else {
-        onChangeAddress(checksumValidAddress(inputValue));
-      }
+      onChangeAddress(checksumAddress);
+      setInputValue(checksumAddress);
     },
     [networkPrefix, onChangeAddress]
   );
@@ -162,6 +163,7 @@ function AddressInput({
       hiddenLabel={hiddenLabel && !shrink}
       disabled={disabled || isLoadingENSResolution}
       onChange={onChange}
+      value={inputValue}
       InputProps={{
         ...InputProps,
         // if isLoading we show a custom loader adornment

diff --git a/src/inputs/Select/dai.png b/src/inputs/Select/dai.png
diff --git a/src/inputs/Select/gnosis.png b/src/inputs/Select/gnosis.png
diff --git a/src/inputs/Select/index.tsx b/src/inputs/Select/index.tsx
@@ -1,39 +1,16 @@
 import React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
+import SelectMUI, {
+  SelectProps as SelectMuiProps,
+} from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
-import SelectMUI from '@material-ui/core/Select';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
 import styled from 'styled-components';
 
 import { Text } from '../../dataDisplay';
 
-const IconImg = styled.img`
-  width: 20px;
-  margin-right: 10px;
-`;
-
-const StyledSelect = styled(SelectMUI)`
-  background-color: ${(props) => props.theme.colors.separator};
-  border-radius: 5px;
-  height: 56px;
-  width: 140px;
-
-  .MuiSelect-select {
-    display: flex;
-    align-items: center;
-    padding-left: 15px;
-  }
-
-  .MuiSelect-selectMenu {
-    font-family: ${(props) => props.theme.fonts.fontFamily};
-  }
-
-  &.MuiInput-underline:hover:not(.Mui-disabled):before {
-    border-bottom: 2px solid ${(props) => props.theme.colors.primary};
-  }
-  &.MuiInput-underline:after {
-    border-bottom: 2px solid ${(props) => props.theme.colors.primary};
-  }
-`;
+import { inputLabelStyles, inputStyles, errorStyles } from '../styles';
 
 export type SelectItem = {
   id: string;
@@ -42,24 +19,37 @@ export type SelectItem = {
   iconUrl?: string;
 };
 
-type Props = {
+type SelectProps = {
+  id?: string;
+  name: string;
+  label: string;
+  error?: string;
+  helperText?: string | undefined;
+  showErrorsInTheLabel?: boolean | undefined;
   items: Array<SelectItem>;
   activeItemId: string;
   onItemClick: (id: string) => void;
-  id?: string;
   fallbackImage?: string;
-};
+} & Omit<SelectMuiProps, 'error'>;
 
 function Select({
+  id,
+  name,
+  label,
+  error,
+  helperText,
+  showErrorsInTheLabel,
   items,
   activeItemId,
   onItemClick,
-  id,
   fallbackImage,
+  fullWidth,
   ...rest
-}: Props): React.ReactElement {
+}: SelectProps): React.ReactElement {
   const [open, setOpen] = React.useState(false);
 
+  const hasError = !!error;
+
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     onItemClick(event.target.value as string);
   };
@@ -82,44 +72,103 @@ function Select({
   };
 
   return (
-    <div>
-      <FormControl>
-        <StyledSelect
-          labelId={id ? id : 'generic-select'}
-          id={id ? id : 'generic-select'}
-          open={open}
-          onClose={handleClose}
-          onOpen={handleOpen}
-          value={activeItemId}
-          onChange={handleChange}
-          {...rest}>
-          {items.map((i) => {
-            return (
-              <MenuItem value={i.id} key={i.id}>
-                {i.iconUrl && (
-                  <IconImg
-                    alt={i.label}
-                    onError={onFallbackImage}
-                    src={i.iconUrl}
-                  />
-                )}
-                <div>
-                  <Text size="sm" color="text">
-                    {i.label}
+    <StyledFormControl variant="outlined" fullWidth={fullWidth}>
+      <InputLabel error={!!error}>
+        {showErrorsInTheLabel && hasError ? error : label}
+      </InputLabel>
+      <StyledSelect
+        id={id}
+        name={name}
+        labelId={id}
+        error={hasError}
+        open={open}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        value={activeItemId}
+        onChange={handleChange}
+        label={id ? id : 'generic-select'}
+        variant="outlined"
+        {...rest}>
+        {items.map((i) => {
+          return (
+            <MenuItem value={i.id} key={i.id}>
+              {i.iconUrl && (
+                <IconImg
+                  alt={i.label}
+                  onError={onFallbackImage}
+                  src={i.iconUrl}
+                />
+              )}
+              <div>
+                <Text size="sm" color="text">
+                  {i.label}
+                </Text>
+                {i.subLabel && (
+                  <Text size="sm" color="secondary" strong>
+                    {i.subLabel}
                   </Text>
-                  {i.subLabel && (
-                    <Text size="sm" color="secondary" strong>
-                      {i.subLabel}
-                    </Text>
-                  )}
-                </div>
-              </MenuItem>
-            );
-          })}
-        </StyledSelect>
-      </FormControl>
-    </div>
+                )}
+              </div>
+            </MenuItem>
+          );
+        })}
+      </StyledSelect>
+      {(helperText || (error && showErrorsInTheLabel)) && (
+        <StyledFormHelperText error={hasError && !showErrorsInTheLabel}>
+          {helperText || error}
+        </StyledFormHelperText>
+      )}
+    </StyledFormControl>
   );
 }
 
+const IconImg = styled.img`
+  width: 20px;
+  margin-right: 10px;
+`;
+
+const StyledSelect = styled(SelectMUI)`
+  && {
+    .MuiSelect-root {
+      background: #fff;
+    }
+
+    .MuiSelect-select {
+      display: flex;
+      align-items: center;
+      padding-left: 15px;
+    }
+
+    .MuiSelect-selectMenu {
+      font-family: ${(props) => props.theme.fonts.fontFamily};
+    }
+
+    && {
+      fieldset {
+        border: 1px solid
+          ${({ theme, value, error }) =>
+            error
+              ? theme.colors.error
+              : value
+              ? theme.colors.inputFilled
+              : theme.colors.inputDisabled};
+      }
+    }
+  }
+`;
+
+const StyledFormControl = styled(FormControl)`
+  && {
+    ${inputLabelStyles}
+    ${inputStyles}
+    ${errorStyles}
+  }
+`;
+
+const StyledFormHelperText = styled(FormHelperText)`
+  && {
+    font-family: ${(props) => props.theme.fonts.fontFamily};
+  }
+`;
+
 export default Select;