Add some props on BottomSheet, CozyDialogs and SearchBar

docs/components/DemoProvider.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import TranspiledDemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import TranspiledDemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 
 // Provider used in readme.md files, because we must
 // use transpiled files inside readme.

react/BottomSheet/BottomSheet.jsx

@@ -129,6 +129,7 @@ export const defaultBottomSheetSpringConfig = {
 const defaultSettings = {
   mediumHeightRatio: 0.75,
   mediumHeight: null,
+  hasMinHeightOffset: false,
   isOpenMin: false
 }
 
@@ -142,7 +143,7 @@ const BottomSheet = memo(
     offset,
     children
   }) => {
-    const { mediumHeightRatio, mediumHeight, isOpenMin } = {
+    const { mediumHeightRatio, mediumHeight, isOpenMin, hasMinHeightOffset } = {
       ...defaultSettings,
       ...settings
     }
@@ -244,6 +245,7 @@ const BottomSheet = memo(
         isClosable,
         isOpenMin,
         headerRef,
+        offset: hasMinHeightOffset ? offset : 0,
         actionButtonsHeight,
         actionButtonsBottomMargin
       })
@@ -418,6 +420,8 @@ BottomSheet.propTypes = {
     mediumHeight: PropTypes.number,
     /** Height of the middle snap point, expressed as a percentage of the viewport height */
     mediumHeightRatio: PropTypes.number,
+    /** To include the offset in the min height value */
+    hasMinHeightOffset: PropTypes.bool,
     /** To open the BottomSheet at the minimum height, if have an header */
     isOpenMin: PropTypes.bool
   }),

react/BottomSheet/README.md

@@ -46,6 +46,8 @@ import BottomSheet, { BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transp
 * **settings** : `<object>` – Settings that can be modified
   * **mediumHeight** : `<number>` – Height in pixel of the middle snap point
   * **mediumHeightRatio** : `<number>` – Height of the middle snap point, expressed as a percentage of the viewport height
+  * **isOpenMin** : `<boolean>` – To open the BottomSheet at the minimum height, if have an header
+  * **hasMinHeightOffset** : `<boolean>` – To include the offset in the min height value
 * **backdrop** : `<boolean>` – To add a backdrop
 * **skipAnimation** : `<boolean>` – To remove animations
 * **offset** : `<number>` – Add an offset at the bottom

react/BottomSheet/helpers.js

@@ -57,13 +57,15 @@ export const computeMinHeight = ({
   isClosable,
   isOpenMin,
   headerRef,
+  offset = 0,
   actionButtonsHeight,
   actionButtonsBottomMargin
 }) => {
   if (isClosable && !isOpenMin) return 0
 
   return (
     headerRef.current.offsetHeight +
+    offset +
     actionButtonsHeight +
     actionButtonsBottomMargin +
     (getFlagshipMetadata().navbarHeight || 0) +

react/BottomSheet/helpers.spec.js

@@ -152,6 +152,18 @@ describe('computeMinHeight', () => {
 
     expect(res).toBe(85)
   })
+
+  it('should return correct value with offset', () => {
+    const res = computeMinHeight({
+      isClosable: false,
+      headerRef: { current: { offsetHeight: 10 } },
+      offset: 10,
+      actionButtonsHeight: 20,
+      actionButtonsBottomMargin: 30
+    })
+
+    expect(res).toBe(95)
+  })
 })
 
 describe('setTopPosition', () => {

react/CozyDialogs/Readme.md

@@ -33,7 +33,7 @@ import Button from  'cozy-ui/transpiled/react/Buttons'
 
 * **componentsProps** : `<object>` – overriden properties of specific components
   * **dialogTitle** : `<object>` – DialogTitle component properties
-* **size** : `<string>` – Can be "s", "m" (default) or "l"
+* **size** : `<string>` – Can be "small", "medium" (default), "large" or "full"
 * **open** : `<boolean>` (required) – To open/close the modal
 * **disableTitleAutoPadding** : `<boolean>` (optional) – Disable title padding calculation that would prevent overlapping with close and back buttons
   * if set to `true` then you should handle those CSS properties by yourself or title will take 100% of width
@@ -205,6 +205,7 @@ const initialVariants = [{
   showActions: true,
   disableGutters: false,
   hideTitle: false,
+  fullScreen: false,
   withBackground: false
 }]
 
@@ -264,6 +265,11 @@ const initialVariants = [{
               label="Large"
               control={<Radio />}
             />
+            <FormControlLabel
+              value="full"
+              label="Full"
+              control={<Radio />}
+            />
           </RadioGroup>
         </FormControl>
         <div className="u-mt-1">
@@ -283,6 +289,7 @@ const initialVariants = [{
         {state.modalOpened && (
           <DialogComponent
             open
+            {...(variant.fullScreen && { fullScreen: true })}
             size={DialogComponent !== ConfirmDialog ? state.size : undefined}
             onClose={variant.withCloseButton ? handleClose : undefined}
             onBack={variant.withBackButton ? handleBack : undefined}

react/CozyDialogs/dialogPropTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
 export default {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
   open: PropTypes.bool.isRequired,
   disableTitleAutoPadding: PropTypes.bool,
   background: PropTypes.string,

react/CozyDialogs/useCozyDialog.js

@@ -6,7 +6,7 @@ import useBreakpoints from '../providers/Breakpoints'
 import { makeStyles } from '../styles'
 
 let globalId = 0
-const modalSizes = ['small', 'medium', 'large']
+const modalSizes = ['small', 'medium', 'large', 'full']
 
 const useStyles = makeStyles({
   paper: {
@@ -92,19 +92,22 @@ const useCozyDialog = props => {
 
   const dividerClassName = 'divider--dialog'
   const dividerProps = {
+    ...componentsProps?.divider,
     classes: {
       root: dividerClassName
     }
   }
 
   const dialogActionsClassName = 'cozyDialogActions'
   const dialogActionsProps = {
+    ...componentsProps?.dialogActions,
     classes: {
       root: dialogActionsClassName
     }
   }
 
   const dialogContentProps = {
+    ...componentsProps?.dialogContent,
     classes: {
       root: cx({
         disableGutters

react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -455,6 +455,10 @@ export const makeLightNormalOverrides = theme => ({
           maxWidth: '800px'
         }
       },
+      '&.full': {
+        width: '100%',
+        maxWidth: '100%'
+      },
       '&.overflow': {
         overflowY: 'visible !important', // Allow the icon to overflow the dialog, otherwise it will be cut off,
         '& .cozyDialogContent': {

react/SearchBar/Readme.md

@@ -3,19 +3,72 @@ 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'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 
-const initialVariants = [{ elevation: true }]
+const initialVariants = [{ elevation: true, button: false, customIcon: false, disabledClear: false }]
+initialState = { size: 'small' }
 
 ;
 
 <DemoProvider>
   <Variants initialVariants={initialVariants} screenshotAllVariants>
     {variant => (
       <>
+         <FormControl component="fieldset">
+          <FormLabel component="legend">Size</FormLabel>
+          <RadioGroup
+            aria-label="radio"
+            name="size"
+            row
+            value={state.size}
+            onChange={event => { setState({ size: event.target.value }) }}
+          >
+            <FormControlLabel
+              value="small"
+              label="Small"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="medium"
+              label="Medium"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="large"
+              label="Large"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="auto"
+              label="Auto"
+              control={<Radio />}
+            />
+          </RadioGroup>
+        </FormControl>
         <Typography className="u-mb-half">Normal</Typography>
-        <SearchBar className="u-mb-2" elevation={variant.elevation} />
+        <SearchBar className="u-mb-2"
+          elevation={variant.elevation}
+          size={state.size}
+          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}
+          size={state.size}
+          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>