feat(IconSize): Update iconSize in Buttons to be 18px square

feat(ListInput): Added "withBorder" prop in order to include border at Item and Input
leemonade · Jan 16, 2024 · 6f3decd · 6f3decd
1 parent 9f6b864
commit 6f3decd
Show file tree

Hide file tree

Showing 17 changed files with 207 additions and 108 deletions.
diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js
@@ -179,6 +179,10 @@ export const ButtonStyles = createStyles(
     const buttonTheme = theme.other.button;
     const iconStyles = {
       padding: 3,
+      '& > svg': {
+        width: 18,
+        height: 18,
+      },
     };
 
     const getTextAlign = () => {

diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isFunction, isString, isNil } from 'lodash';
-import { CloudUploadIcon, DeleteBinIcon } from '@bubbles-ui/icons/outline/';
+import { CloudUploadIcon } from '@bubbles-ui/icons/outline/';
+import { DeleteBinIcon } from '@bubbles-ui/icons/solid/';
 import { Box } from '../../layout/Box';
 import { Stack } from '../../layout/Stack';
 import { Button } from '../Button';
@@ -98,7 +99,7 @@ const ImagePreviewInput = ({
     }
   }, [imageValue]);
 
-  const { classes, cx } = ImagePreviewInputStyles({});
+  const { classes } = ImagePreviewInputStyles({});
   return (
     <Box className={classes.root}>
       {!imagePreview ? (
@@ -113,6 +114,7 @@ const ImagePreviewInput = ({
             radius={4}
             style={{ ...previewStyle }}
             useAria={useAria}
+            bordered
           />
           {!readonly && !disabled ? (
             <Box noFlex>

diff --git a/packages/components/src/form/ListInput/ListInput.js b/packages/components/src/form/ListInput/ListInput.js
@@ -3,30 +3,50 @@ import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';
 import { findIndex, isFunction, map } from 'lodash';
 import { AddCircleIcon } from '@bubbles-ui/icons/outline';
+import { useId } from '@mantine/hooks';
 import { Box } from '../../layout';
 import { ListInputStyles } from './ListInput.styles';
 import { InputWrapper } from '../InputWrapper';
-import { useId } from '@mantine/hooks';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { SortableList } from '../../informative';
-import { ListItem } from './components/ListItem';
+import { ListItem, ItemWrapperWithBorder } from './components/ListItem';
 
 export const LIST_INPUT_DEFAULT_PROPS = {
-  inputRender: (props) => {
-    return <TextInput {...props} style={{ flex: 1 }} />;
-  },
+  inputRender: (props) => <TextInput {...props} style={{ flex: 1 }} />,
   listRender: <ListItem />,
   onChange: () => {},
   valueKey: 'value',
   addButtonLabel: 'Add',
   errorRequiredMessage: 'Required',
   hideAddButton: false,
   useAria: true,
+  hideInput: false,
+  withItemBorder: false,
+  withInputBorder: false,
 };
 export const LIST_INPUT_PROP_TYPES = {
   hideAddButton: PropTypes.bool,
   useAria: PropTypes.bool,
+  valueKey: PropTypes.string,
+  addButtonLabel: PropTypes.string,
+  errorRequiredMessage: PropTypes.string,
+  inputRender: PropTypes.func,
+  listRender: PropTypes.func,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  readonly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  canAdd: PropTypes.bool,
+  size: PropTypes.any,
+  value: PropTypes.arrayOf(PropTypes.object),
+  error: PropTypes.string,
+  help: PropTypes.string,
+  description: PropTypes.string,
+  label: PropTypes.string,
+  hideInput: PropTypes.bool,
+  withItemBorder: PropTypes.bool,
+  withInputBorder: PropTypes.bool,
 };
 
 const ListInput = ({
@@ -48,6 +68,9 @@ const ListInput = ({
   value: originalValue,
   onChange,
   useAria,
+  hideInput,
+  withItemBorder,
+  withInputBorder,
 }) => {
   const { classes, cx } = ListInputStyles({});
 
@@ -64,7 +87,7 @@ const ListInput = ({
           ...item,
           __key: uuidv4(),
         }))
-      : []
+      : [],
   );
 
   const uuid = useId();
@@ -101,7 +124,7 @@ const ListInput = ({
         ...item,
         __key: uuidv4(),
       })),
-      true
+      true,
     );
   }, [originalValue]);
 
@@ -115,6 +138,8 @@ const ListInput = ({
     }
   }, [value]);
 
+  const ListInputWrapper = withInputBorder ? ItemWrapperWithBorder : React.Fragment;
+
   return (
     <InputWrapper
       label={label}
@@ -130,24 +155,25 @@ const ListInput = ({
           value={value}
           onChange={setValue}
           dragDisabled={!!editingKey}
-          itemRender={(props) => {
-            return React.cloneElement(ListRender, {
-              ...props,
+          itemRender={(itemProps) =>
+            React.cloneElement(ListRender, {
+              ...itemProps,
               readonly,
+              withBorder: withItemBorder,
               inputRender: InputRender,
               editingKey,
               valueKey,
               errorRequiredMessage,
-              editItem: () => editItem(props.item),
+              editItem: () => editItem(itemProps.item),
               stopEdit: () => setEditingKey(null),
               onChange: (event) => {
-                const index = findIndex(value, { __key: props.item.__key });
+                const index = findIndex(value, { __key: itemProps.item.__key });
                 value[index][valueKey] = event;
                 setValue([...value]);
                 setEditingKey(null);
               },
-            });
-          }}
+            })
+          }
           useAria={useAria}
         />
       </Box>
@@ -158,32 +184,36 @@ const ListInput = ({
               ? {
                   display: 'flex',
                   flexDirection: 'row',
-                  gap: theme.spacing[4],
+                  gap: theme.spacing[2],
                   width: '100%',
                   flex: 1,
                 }
               : {}
           }
         >
-          <Box style={{ width: '100%' }}>
-            {React.cloneElement(InputRender, {
-              value: valueKey ? activeItem[valueKey] : activeItem,
-              onChange: (event) => {
-                setActiveItem(valueKey ? { ...activeItem, [valueKey]: event } : event);
-                if (event) setHasError(false);
-              },
-              required: true,
-              error: hasError ? errorRequiredMessage : null,
-              addItem,
-            })}
-          </Box>
-          {!hideAddButton ? (
-            <Box style={{ flex: 0 }}>
-              <Button variant="link" leftIcon={<AddCircleIcon />} onClick={addItem}>
-                {addButtonLabel}
-              </Button>
-            </Box>
-          ) : null}
+          {hideInput ? null : (
+            <ListInputWrapper>
+              <Box style={{ width: '100%' }}>
+                {React.cloneElement(InputRender, {
+                  value: valueKey ? activeItem[valueKey] : activeItem,
+                  onChange: (event) => {
+                    setActiveItem(valueKey ? { ...activeItem, [valueKey]: event } : event);
+                    if (event) setHasError(false);
+                  },
+                  required: true,
+                  error: hasError ? errorRequiredMessage : null,
+                  addItem,
+                })}
+              </Box>
+              {!hideAddButton ? (
+                <Box style={{ flex: 0, textAlign: 'right' }}>
+                  <Button variant="link" leftIcon={<AddCircleIcon />} onClick={addItem}>
+                    {addButtonLabel}
+                  </Button>
+                </Box>
+              ) : null}
+            </ListInputWrapper>
+          )}
         </Box>
       ) : null}
     </InputWrapper>

diff --git a/packages/components/src/form/ListInput/ListInput.stories.js b/packages/components/src/form/ListInput/ListInput.stories.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { LIST_INPUT_DEFAULT_PROPS, ListInput } from './ListInput';
 import mdx from './ListInput.mdx';
+import { Box } from '../../layout/Box';
+import { Button } from '../Button';
 
 export default {
   title: 'Molecules/Form/ListInput',
@@ -26,10 +28,16 @@ function ListInputRender({ t, ...props }) {
 }
 
 const Template = ({ children, ...props }) => {
+  const [showInput, setShowInput] = React.useState(false);
   return (
-    <ListInput {...props} canAdd>
-      {children}
-    </ListInput>
+    <Box>
+      <ListInput {...props} canAdd hideInput={!showInput}>
+        {children}
+      </ListInput>
+      <Button variant="outline" onClick={() => setShowInput(!showInput)}>
+        Toggle Input
+      </Button>
+    </Box>
   );
 };
 
@@ -39,4 +47,5 @@ Playground.args = {
   // myBooleanProp: false,
   // mySelectProp: 'Hello'
   ...LIST_INPUT_DEFAULT_PROPS,
+  value: [{ value: 'Hola' }, { value: 'Mundo' }],
 };