feat(SearchBar): Add multiple props to improve component management

Author: JF-Cozy

react/SearchBar/Readme.md

@@ -3,8 +3,9 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Variants from 'cozy-ui/docs/components/Variants'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
 
-const initialVariants = [{ elevation: true }]
+const initialVariants = [{ elevation: true, button: false, customIcon: false, disabledClear: false }]
 
 ;
 
@@ -13,9 +14,22 @@ const initialVariants = [{ elevation: true }]
     {variant => (
       <>
         <Typography className="u-mb-half">Normal</Typography>
-        <SearchBar className="u-mb-2" elevation={variant.elevation} />
+        <SearchBar className="u-mb-2"
+          elevation={variant.elevation}
+          disabledClear={variant.disabledClear}
+          type={variant.button ? "button" : "search"}
+          icon={variant.customIcon ? CloudIcon : undefined}
+          label={variant.button ? <Typography color="primary">This is a label</Typography> : undefined}
+        />
         <Typography className="u-mb-half">Disabled</Typography>
-        <SearchBar elevation={variant.elevation} disabled />
+        <SearchBar
+          disabled
+          elevation={variant.elevation}
+          disabledClear={variant.disabledClear}
+          type={variant.button ? "button" : "search"}
+          icon={variant.customIcon ? CloudIcon : undefined}
+          label={variant.button ? <Typography color="primary">This is a label</Typography> : undefined}
+        />
       </>
     )}
   </Variants>

react/SearchBar/index.jsx

@@ -4,22 +4,31 @@ import PropTypes from 'prop-types'
 import React, { forwardRef, useState, useMemo } from 'react'
 
 import withOnlyLocales from './locales/withOnlyLocales'
+import ButtonBase from '../ButtonBase'
 import Icon from '../Icon'
+import { iconPropType } from '../Icon'
 import IconButton from '../IconButton'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import MagnifierIcon from '../Icons/Magnifier'
 import InputBase from '../InputBase'
 import Paper from '../Paper'
+import Typography from '../Typography'
 import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
+const sizeToPixel = {
+  small: 40,
+  medium: 48,
+  large: 56
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     boxSizing: 'border-box',
     position: 'relative',
     alignItems: 'center',
-    height: 40,
+    height: ({ size }) => sizeToPixel[size],
     flex: 1,
     borderRadius: 99,
     borderStyle: 'solid',
@@ -37,7 +46,19 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.contrast
   },
   inputBase: {
-    flex: 1
+    flex: 1,
+    paddingLeft: ({ icon }) => !icon && '1rem'
+  },
+  buttonBase: {
+    flex: 1,
+    justifyContent: 'start',
+    height: '100%',
+    borderRadius: 99
+  },
+  typography: {
+    color: 'currentColor',
+    opacity: 0.42,
+    paddingLeft: ({ icon }) => !icon && '1rem'
   },
   icon: {
     color: theme.palette.text.secondary,
@@ -81,6 +102,12 @@ const SearchBar = forwardRef(
   (
     {
       placeholder: placeholderProp,
+      icon,
+      size,
+      type,
+      label: labelProp,
+      componentsProps,
+      disabledClear,
       className,
       defaultValue,
       elevation,
@@ -93,11 +120,12 @@ const SearchBar = forwardRef(
     ref
   ) => {
     const { t } = useI18n()
-    const classes = useStyles()
+    const classes = useStyles({ size, type, icon })
     const [currentValue, setCurrentValue] = useState(defaultValue)
     const [isFocused, setIsFocused] = useState(false)
 
     const placeholder = placeholderProp || t('search.placeholder')
+    const label = labelProp || t('search.placeholder')
 
     const delayedOnChange = useMemo(
       () => debounce(event => onChange(event), 375),
@@ -143,18 +171,32 @@ const SearchBar = forwardRef(
         ref={ref}
         {...props}
       >
-        <Icon className={classes.icon} icon={MagnifierIcon} />
-        <InputBase
-          className={classes.inputBase}
-          placeholder={disabled ? null : placeholder}
-          value={disabled ? placeholder : currentValue}
-          disabled={disabled}
-          aria-label={placeholder}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {currentValue && (
+        {type === 'button' ? (
+          <ButtonBase className={classes.buttonBase}>
+            {icon && <Icon className={classes.icon} icon={icon} />}
+            {typeof label === 'string' ? (
+              <Typography className={classes.typography}>{label}</Typography>
+            ) : (
+              label
+            )}
+          </ButtonBase>
+        ) : (
+          <>
+            {icon && <Icon className={classes.icon} icon={icon} />}
+            <InputBase
+              {...componentsProps?.inputBase}
+              className={classes.inputBase}
+              placeholder={disabled ? null : placeholder}
+              value={disabled ? placeholder : currentValue}
+              disabled={disabled}
+              aria-label={placeholder}
+              onChange={handleChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </>
+        )}
+        {currentValue && !disabledClear && (
           <IconButton size="medium" onClick={handleClear}>
             <Icon icon={CrossCircleIcon} />
           </IconButton>
@@ -174,6 +216,10 @@ SearchBar.displayName = 'SearchBar'
 
 SearchBar.defaultProps = {
   elevation: true,
+  icon: MagnifierIcon,
+  size: 'small',
+  type: 'search',
+  disabledClear: false,
   defaultValue: '',
   onChange: () => {},
   onFocus: () => {},
@@ -182,9 +228,22 @@ SearchBar.defaultProps = {
 
 SearchBar.propTypes = {
   className: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'search']),
+  icon: iconPropType,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  componentsProps: PropTypes.shape({
+    /** Props spread to InputBase component */
+    inputBase: PropTypes.object
+  }),
   defaultValue: PropTypes.string,
+  disabledClear: PropTypes.bool,
   elevation: PropTypes.bool,
   placeholder: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.object
+  ]),
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,