cozy-ui 73.3.0 → 74.2.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [74.2.0](https://github.com/cozy/cozy-ui/compare/v74.1.0...v74.2.0) (2022-09-02)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Adjust height when content changes ([1c0ad64](https://github.com/cozy/cozy-ui/commit/1c0ad64))
+* **BottomSheet:** Force modal zindex value for BottomSheet ([a22405d](https://github.com/cozy/cozy-ui/commit/a22405d))
+* **BottomSheet:** Remove container if no backdrop ([3830e52](https://github.com/cozy/cozy-ui/commit/3830e52))
+* **BottomSheet:** Remove fragment prop if no portal ([cc49949](https://github.com/cozy/cozy-ui/commit/cc49949))
+
+
+### Features
+
+* **BottomSheet:** Upgrade mui-bottom-sheet to 1.0.9 ([59484ae](https://github.com/cozy/cozy-ui/commit/59484ae))
+
+# [74.1.0](https://github.com/cozy/cozy-ui/compare/v74.0.0...v74.1.0) (2022-09-02)
+
+
+### Features
+
+* Add help-outlined and refresh icons ([b33458c](https://github.com/cozy/cozy-ui/commit/b33458c))
+
+# [74.0.0](https://github.com/cozy/cozy-ui/compare/v73.3.0...v74.0.0) (2022-09-01)
+
+
+### Features
+
+* Wrap BottomSheet in Portal ([00156fe](https://github.com/cozy/cozy-ui/commit/00156fe))
+
+
+### BREAKING CHANGES
+
+* BottomSheet now use Portal by default to work as a modal, and so is attached to the body. If for some reasons you need to use the BottomSheet inside a specific place in the DOM, you can use `disablePortal` prop.
+
 # [73.3.0](https://github.com/cozy/cozy-ui/compare/v73.2.3...v73.3.0) (2022-09-01)
 
 

package/assets/icons/ui/help-outlined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9 8.802C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 0 0-1 1v2h2V8.802ZM7 11v2h2v-2H7ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8ZM0 8a8 8 0 1 0 16 0A8 8 0 0 0 0 8Z"/></svg>

package/assets/icons/ui/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8a8.039 8.039 0 0 0 7.229-4.571 1 1 0 1 0-1.806-.858A6.031 6.031 0 0 1 8 14c-3.309 0-6-2.691-6-6s2.691-6 6-6c1.482 0 2.866.571 3.938 1.507a.989.989 0 0 0-.706.353 1 1 0 0 0 .128 1.408l3 2.5A1 1 0 0 0 16 7V3a1 1 0 0 0-1-1 .987.987 0 0 0-.96.801C12.548 1.08 10.364 0 8 0Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "73.3.0",
+  "version": "74.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -163,7 +163,7 @@
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
     "mime-types": "2.1.35",
-    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.8",
+    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
     "piwik-react-router": "0.12.1",

package/react/BottomSheet/BackdropOrFragment.jsx

@@ -6,7 +6,6 @@ const BackdropOrFragment = ({ showBackdrop, onClick, children }) => {
   const Comp = showBackdrop ? Backdrop : Fragment
   const props = showBackdrop
     ? {
-        style: { zIndex: 'var(--zIndex-overlay)' },
         open: showBackdrop,
         onClick
       }

package/react/BottomSheet/BottomSheet.jsx

@@ -1,11 +1,21 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  forwardRef,
+  memo,
+  Fragment
+} from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 import { useTimeoutWhen } from 'rooks'
 import Fade from '@material-ui/core/Fade'
+import Portal from '@material-ui/core/Portal'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
 
+import CozyTheme, { useCozyTheme } from '../CozyTheme'
 import Stack from '../Stack'
 import Paper from '../Paper'
 import BackdropOrFragment from './BackdropOrFragment'
@@ -20,15 +30,33 @@ import {
 } from './helpers'
 import { ANIMATION_DURATION } from './constants'
 
+const createContainerWrapperStyles = () => ({
+  container: {
+    position: 'fixed',
+    zIndex: 'var(--zIndex-modal)',
+    inset: 0
+  }
+})
+
+const ContainerWrapper = ({ showBackdrop, children }) => {
+  const styles = createContainerWrapperStyles()
+
+  if (showBackdrop) {
+    return <div style={styles.container}>{children}</div>
+  }
+
+  return children
+}
+
 const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
     borderTopLeftRadius: '1rem',
     borderTopRightRadius: '1rem',
     transition: 'border-radius 0.5s',
-    zIndex: 'var(--zIndex-drawer)',
     boxShadow:
       '0 -0.5px 0px 0 rgba(0, 0, 0, 0.10), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 0 -4px 4px 0 rgba(0, 0, 0, 0.02), 0 -8px 8px 0 rgba(0, 0, 0, 0.02), 0 -16px 16px 0 rgba(0, 0, 0, 0.02)',
     backgroundColor: 'var(--paperBackgroundColor)',
+    zIndex: 'var(--zIndex-modal)',
     ...(squared && {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
@@ -52,8 +80,7 @@ const createStyles = ({ squared, hasToolbarProps }) => ({
     position: 'fixed',
     bottom: 0,
     left: 0,
-    backgroundColor: 'var(--paperBackgroundColor)',
-    zIndex: 'var(--zIndex-overlay)'
+    backgroundColor: 'var(--paperBackgroundColor)'
   },
   flagshipImmersive: {
     backgroundColor: 'var(--paperBackgroundColor)',
@@ -77,194 +104,192 @@ const defaultSettings = {
   mediumHeight: null
 }
 
-const BottomSheet = ({
-  toolbarProps,
-  settings,
-  backdrop,
-  skipAnimation,
-  onClose,
-  children
-}) => {
-  const { mediumHeightRatio, mediumHeight } = {
-    ...defaultSettings,
-    ...settings
-  }
-
-  const innerContentRef = useRef()
-  const headerRef = useRef()
-  const headerContentRef = useRef()
-  const [isTopPosition, setIsTopPosition] = useState(false)
-  const [isBottomPosition, setIsBottomPosition] = useState(false)
-  const [isHidden, setIsHidden] = useState(false)
-  const [showBackdrop, setShowBackdrop] = useState(backdrop)
-  const [peekHeights, setPeekHeights] = useState(null)
-  const [currentIndex, setCurrentIndex] = useState()
-  const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
-  const [initPos, setInitPos] = useState(0)
+const BottomSheet = memo(
+  ({ toolbarProps, settings, backdrop, skipAnimation, onClose, children }) => {
+    const { mediumHeightRatio, mediumHeight } = {
+      ...defaultSettings,
+      ...settings
+    }
 
-  const squared = backdrop
-    ? isTopPosition && bottomSpacerHeight <= 0
-    : isTopPosition
-  const hasToolbarProps = !!Object.keys(toolbarProps).length
-  const isClosable = !!onClose || backdrop
+    const innerContentRef = useRef()
+    const headerRef = useRef()
+    const headerContentRef = useRef()
+    const [isTopPosition, setIsTopPosition] = useState(false)
+    const [isBottomPosition, setIsBottomPosition] = useState(false)
+    const [isHidden, setIsHidden] = useState(false)
+    const [showBackdrop, setShowBackdrop] = useState(backdrop)
+    const [peekHeights, setPeekHeights] = useState(null)
+    const [currentIndex, setCurrentIndex] = useState()
+    const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
+    const [initPos, setInitPos] = useState(0)
 
-  const styles = createStyles({
-    squared,
-    hasToolbarProps
-  })
-  const overriddenChildren = makeOverridenChildren(children, headerContentRef)
+    const squared = backdrop
+      ? isTopPosition && bottomSpacerHeight <= 0
+      : isTopPosition
+    const hasToolbarProps = !!Object.keys(toolbarProps).length
+    const isClosable = !!onClose || backdrop
 
-  if (backdrop && !onClose) {
-    throw new Error(
-      'BottomSheet must have `onClose` method to work properly when setting `backdrop` to `true`'
-    )
-  }
+    const styles = createStyles({
+      squared,
+      hasToolbarProps
+    })
+    const overriddenChildren = makeOverridenChildren(children, headerContentRef)
 
-  const handleClose = useCallback(() => {
-    setShowBackdrop(false)
-    setIsHidden(true)
-    onClose && onClose()
-  }, [onClose])
+    if (backdrop && !onClose) {
+      throw new Error(
+        'BottomSheet must have `onClose` method to work properly when setting `backdrop` to `true`'
+      )
+    }
 
-  const handleOnIndexChange = snapIndex => {
-    const maxHeightSnapIndex = peekHeights.length - 1
+    const handleClose = useCallback(() => {
+      setShowBackdrop(false)
+      setIsHidden(true)
+      onClose && onClose()
+    }, [onClose])
 
-    setCurrentIndex(snapIndex)
-    setTopPosition({
-      snapIndex,
-      maxHeightSnapIndex,
-      isTopPosition,
-      setIsTopPosition
-    })
-    setBottomPosition({ snapIndex, isBottomPosition, setIsBottomPosition })
-  }
+    const handleOnIndexChange = snapIndex => {
+      const maxHeightSnapIndex = peekHeights.length - 1
 
-  // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
-  // Needed for iOS Safari
-  useEffect(() => {
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = 'auto'
+      setCurrentIndex(snapIndex)
+      setTopPosition({
+        snapIndex,
+        maxHeightSnapIndex,
+        isTopPosition,
+        setIsTopPosition
+      })
+      setBottomPosition({ snapIndex, isBottomPosition, setIsBottomPosition })
     }
-  }, [])
 
-  // close the bottom sheet by swaping it below the minimum height
-  useTimeoutWhen(
-    () => handleClose(),
-    ANIMATION_DURATION,
-    isClosable && isBottomPosition
-  )
-  const innerContentHeight = innerContentRef?.current?.offsetHeight ?? 0
+    // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
+    // Needed for iOS Safari
+    useEffect(() => {
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = 'auto'
+      }
+    }, [])
 
-  useEffect(() => {
-    const headerContent = headerContentRef.current
-    const actionButtonsHeight = headerContent
-      ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
-      : 0
-    const actionButtonsBottomMargin = headerContent
-      ? parseFloat(
-          getComputedStyle(headerContent).getPropertyValue('padding-bottom')
-        )
-      : 0
+    // close the bottom sheet by swaping it below the minimum height
+    useTimeoutWhen(
+      () => handleClose(),
+      ANIMATION_DURATION,
+      isClosable && isBottomPosition
+    )
 
-    const maxHeight = computeMaxHeight(toolbarProps)
-    const computedMediumHeight = computeMediumHeight({
-      backdrop,
-      maxHeight,
-      mediumHeight,
+    useEffect(() => {
+      const headerContent = headerContentRef.current
+      const innerContentHeight = innerContentRef.current.offsetHeight
+      const actionButtonsHeight = headerContent
+        ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
+        : 0
+      const actionButtonsBottomMargin = headerContent
+        ? parseFloat(
+            getComputedStyle(headerContent).getPropertyValue('padding-bottom')
+          )
+        : 0
+
+      const maxHeight = computeMaxHeight(toolbarProps)
+      const computedMediumHeight = computeMediumHeight({
+        backdrop,
+        maxHeight,
+        mediumHeight,
+        mediumHeightRatio,
+        innerContentHeight
+      })
+      const minHeight = computeMinHeight({
+        isClosable,
+        headerRef,
+        actionButtonsHeight,
+        actionButtonsBottomMargin
+      })
+      const bottomSpacerHeight = maxHeight - innerContentHeight
+
+      if (computedMediumHeight >= maxHeight) {
+        setIsTopPosition(true)
+      }
+      setPeekHeights([...new Set([minHeight, computedMediumHeight, maxHeight])])
+      setInitPos(computedMediumHeight)
+      // Used so that the BottomSheet can be opened to the top without stopping at the content height
+      setBottomSpacerHeight(bottomSpacerHeight)
+    }, [
+      innerContentRef,
+      toolbarProps,
       mediumHeightRatio,
-      innerContentHeight
-    })
-    const minHeight = computeMinHeight({
+      mediumHeight,
+      showBackdrop,
+      backdrop,
       isClosable,
-      headerRef,
-      actionButtonsHeight,
-      actionButtonsBottomMargin
-    })
-    const bottomSpacerHeight = maxHeight - innerContentHeight
+      children // to recompute data if content changes
+    ])
 
-    if (computedMediumHeight >= maxHeight) {
-      setIsTopPosition(true)
-    }
-    setPeekHeights([...new Set([minHeight, computedMediumHeight, maxHeight])])
-    setInitPos(computedMediumHeight)
-    // Used so that the BottomSheet can be opened to the top without stopping at the content height
-    setBottomSpacerHeight(bottomSpacerHeight)
-  }, [
-    innerContentHeight,
-    toolbarProps,
-    mediumHeightRatio,
-    mediumHeight,
-    showBackdrop,
-    backdrop,
-    isClosable
-  ])
+    return (
+      <ContainerWrapper showBackdrop={showBackdrop}>
+        {getFlagshipMetadata().immersive && (
+          <span style={styles.flagshipImmersive} />
+        )}
+        <BackdropOrFragment
+          showBackdrop={showBackdrop}
+          onClick={() =>
+            minimizeAndClose({
+              backdrop,
+              setCurrentIndex,
+              setIsTopPosition,
+              setIsBottomPosition,
+              handleClose
+            })
+          }
+        />
+        <MuiBottomSheet
+          peekHeights={peekHeights}
+          defaultHeight={initPos}
+          backdrop={false}
+          fullHeight={hasToolbarProps ? false : true}
+          currentIndex={currentIndex}
+          onIndexChange={handleOnIndexChange}
+          styles={{ root: styles.root }}
+          threshold={0}
+          // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+          springConfig={{
+            tension: defaultBottomSheetSpringConfig.tension,
+            friction: defaultBottomSheetSpringConfig.friction,
+            clamp: defaultBottomSheetSpringConfig.clamp
+          }}
+          disabledClosing={!onClose}
+          hidden={isHidden}
+          snapPointSeekerMode="next"
+          skipAnimation={skipAnimation}
+        >
+          <div ref={innerContentRef}>
+            <Paper
+              data-testid="bottomSheet-header"
+              className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+              ref={headerRef}
+              elevation={0}
+              square
+            >
+              <div style={styles.indicator} />
+            </Paper>
+            <Stack
+              style={styles.stack}
+              className="u-flex u-flex-column u-ov-hidden"
+              spacing="s"
+            >
+              {overriddenChildren}
+            </Stack>
+          </div>
+          <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
+        </MuiBottomSheet>
+        {!isBottomPosition && (
+          <Fade in timeout={ANIMATION_DURATION}>
+            <div style={styles.bounceSafer} />
+          </Fade>
+        )}
+      </ContainerWrapper>
+    )
+  }
+)
 
-  return (
-    <>
-      {getFlagshipMetadata().immersive && (
-        <span style={styles.flagshipImmersive} />
-      )}
-      <BackdropOrFragment
-        showBackdrop={showBackdrop}
-        onClick={() =>
-          minimizeAndClose({
-            backdrop,
-            setCurrentIndex,
-            setIsTopPosition,
-            setIsBottomPosition,
-            handleClose
-          })
-        }
-      />
-      <MuiBottomSheet
-        peekHeights={peekHeights}
-        defaultHeight={initPos}
-        backdrop={false}
-        fullHeight={hasToolbarProps ? false : true}
-        currentIndex={currentIndex}
-        onIndexChange={handleOnIndexChange}
-        styles={{ root: styles.root }}
-        threshold={0}
-        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-        springConfig={{
-          tension: defaultBottomSheetSpringConfig.tension,
-          friction: defaultBottomSheetSpringConfig.friction,
-          clamp: defaultBottomSheetSpringConfig.clamp
-        }}
-        disabledClosing={!onClose}
-        hidden={isHidden}
-        snapPointSeekerMode="next"
-        skipAnimation={skipAnimation}
-      >
-        <div ref={innerContentRef}>
-          <Paper
-            data-testid="bottomSheet-header"
-            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-            ref={headerRef}
-            elevation={0}
-            square
-          >
-            <div style={styles.indicator} />
-          </Paper>
-          <Stack
-            style={styles.stack}
-            className="u-flex u-flex-column u-ov-hidden"
-            spacing="s"
-          >
-            {overriddenChildren}
-          </Stack>
-        </div>
-        <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
-      </MuiBottomSheet>
-      {!isBottomPosition && (
-        <Fade in timeout={ANIMATION_DURATION}>
-          <div style={styles.bounceSafer} />
-        </Fade>
-      )}
-    </>
-  )
-}
+BottomSheet.displayName = 'BottomSheet'
 
 BottomSheet.defaultProps = {
   classes: {},
@@ -295,4 +320,22 @@ BottomSheet.propTypes = {
   onClose: PropTypes.func
 }
 
-export default React.memo(BottomSheet)
+const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
+  const cozyTheme = useCozyTheme()
+  const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
+  const wrapperProps = portalProps?.disablePortal
+    ? undefined
+    : { variant: cozyTheme }
+
+  return (
+    <Portal {...portalProps}>
+      <CozyThemeWrapper {...wrapperProps}>
+        <BottomSheet ref={ref} {...props} />
+      </CozyThemeWrapper>
+    </Portal>
+  )
+})
+
+BottomSheetPortal.displayName = 'BottomSheetPortal'
+
+export default BottomSheetPortal

package/react/BottomSheet/README.md

@@ -1,8 +1,11 @@
 Display content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. Based on cozy
-/ mui-bottom-sheet: [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options).
+/ mui-bottom-sheet: [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options). It uses `Portal` to have the same behavior as `Dialogs` / `Modals` (can be disabled with the `disablePortal` prop).
 
 ### Props
 
+* **portalProps** : `<object>` – Portal properties
+  * **container** : `<HTMLElement> | <function> | <React.Component>` – Portal container
+  * **disablePortal** : `<boolean>` – Disable the portal behavior
 * **toolbarProps** : `<object>` – Toolbar properties
   * **ref** : `<object>` – React reference of the toolbar node
   * **height** : `<number>` – Toolbar height value
@@ -48,11 +51,14 @@ const initialVariants = [{
 }]
 const initialState = {
   isBottomSheetDisplayed: isTesting(),
+  isSecondBottomSheetDisplayed: false,
   mediumHeight: isTesting() ? 450 : undefined,
   mediumHeightRatio: undefined
 }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })
+const showSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: true })
+const hideSecondBottomSheet = () => setState({ isSecondBottomSheetDisplayed: false })
 
 const handleChangeMediumHeight = el => {
   setState({ mediumHeight: Number(el.target.value) })
@@ -109,8 +115,22 @@ const settings = state.mediumHeight === undefined && state.mediumHeightRatio ===
         >
           {variant.withHeader && (
             <BottomSheetHeader className="u-ph-1 u-pb-1">
-              <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
+              <Button
+                className="u-mr-half"
+                variant="secondary"
+                label="Open BottomSheet"
+                fullWidth
+                onClick={showSecondBottomSheet}
+              />
               <Button variant="secondary" label="Button 2" fullWidth />
+
+              {state.isSecondBottomSheetDisplayed && (
+                <BottomSheet backdrop onClose={hideSecondBottomSheet}>
+                  <BottomSheetItem>
+                    {content.ada.short}
+                  </BottomSheetItem>
+                </BottomSheet>
+              )}
             </BottomSheetHeader>
           )}
           {!variant.withListContent && (

package/react/CozyDialogs/Readme.md

@@ -56,6 +56,8 @@ 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'
+import BottomSheet, { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
+import Stack from 'cozy-ui/transpiled/react/Stack'
 
 import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
 
@@ -64,6 +66,12 @@ const handleBack = () => {
   Alerter.success('Back button has been pressed', { duration: 5000 })
   setState({ modalOpened: !state.modalOpened })
 }
+const hideBottomSheet = () => setState({ bottomSheetOpened: false })
+const showBottomSheet = () => setState({ bottomSheetOpened: true })
+const hideSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: false })
+const showSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: true })
+const hideBSConfirmDialog = () => setState({ BSConfirmDialogOpened: false })
+const showBSConfirmDialog = () => setState({ BSConfirmDialogOpened: true })
 
 const DialogComponent = state.modal
 
@@ -152,6 +160,9 @@ const toggleDialog = dialog => {
 
 initialState = {
   modalOpened: isTesting(),
+  bottomSheetOpened: false,
+  secondConfirmDialogOpened: false,
+  BSConfirmDialogOpened: false,
   modal: Dialog,
   size: 'medium',
   content: 'default',
@@ -257,14 +268,52 @@ const initialVariants = [{
           }
           disableGutters={variant.disableGutters}
           content={
-            <Typography variant='body1' color='textPrimary'>
-              { state.content == 'default'
-              ? dialogContents[DialogComponent.name]
-              : state.content == 'long'
-                ? content.ada.long
-                : content.ada.short}<br/>
-              <Button className='u-mt-1 u-ml-0' label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
-            </Typography>}
+            <>
+              <Typography component="div" variant="body1">
+                { state.content == 'default'
+                  ? dialogContents[DialogComponent.name]
+                  : state.content == 'long'
+                    ? content.ada.long
+                    : content.ada.short
+                }
+                <Stack className="u-mt-1" spacing="s">
+                  <div>
+                    <Button label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
+                  </div>
+                  <div>
+                    <Button label="Show inner bottom sheet" onClick={showBottomSheet}/>
+                  </div>
+                  <div>
+                    <Button label="Show inner confirm dialog" onClick={showSecondConfirmDialog}/>
+                  </div>
+                </Stack>
+              </Typography>
+
+              {state.secondConfirmDialogOpened && (
+                <ConfirmDialog open onClose={hideSecondConfirmDialog}
+                  title="This is a simple title"
+                  content="This is a simple content"
+                />
+              )}
+
+              {state.bottomSheetOpened && (
+                <BottomSheet backdrop onClose={hideBottomSheet}>
+                  <BottomSheetItem>
+                    <div className="u-mb-1">
+                      <Button label="Show inner confirm dialog" onClick={showBSConfirmDialog}/>
+                    </div>
+                    {content.ada.long}
+                    {state.BSConfirmDialogOpened && (
+                      <ConfirmDialog open onClose={hideBSConfirmDialog}
+                        title="This is a simple title"
+                        content="This is a simple content"
+                      />
+                    )}
+                  </BottomSheetItem>
+                </BottomSheet>
+              )}
+            </>
+          }
           actions={variant.showActions && dialogActions[DialogComponent.name]}
           actionsLayout={variant.actionsLayoutColumn ? 'column' : 'row'}
         />