feat(Transition): add prop wrapper, and new type 'collapse'

Author: chenyueban

packages/fluent-ui.com/src/docs/components/Transition/README.md

@@ -72,3 +72,22 @@ The Transition component's `mountOnEnter` property prevents the child component
   )
 }
 ```
+
+## Collapse
+
+```jsx
+() => {
+  const [visible, setVisible] = React.useState(false)
+  function handleVisible() {
+    setVisible(v => !v)
+  }
+  return (
+    <>
+      <Toggle checked={visible} onChange={handleVisible} />
+      <Transition visible={visible} type="collapse">
+        <Box width={50} height={50} margin={2} backgroundColor="white.default"></Box>
+      </Transition>
+    </>
+  )
+}
+```

packages/fluent-ui.com/src/docs/components/Transition/api.md

@@ -18,7 +18,8 @@ import { Transition } from '@fluent-ui/core'
 | --- | --- | --- | --- |
 | children | React.ReactNode |  | Elements that require transition effects. |
 | visible | boolean | false | Control element display. |
-| type | 'fade' ∨ 'zoom' ∨ 'slide' | 'fade' | Transition effects type. |
+| type | 'fade' ∨ 'zoom' ∨ 'slide' ∨ 'collapse' | 'fade' | Transition effects type. |
+| wrapper | boolean | true | If `true` a layer of div will be nested outside the target to display the animation, otherwise the animation will be displayed directly on the target. |
 | mountOnEnter | boolean | false | By default the child component is mounted immediately along with the parent `Transition` component. If you want to "lazy mount" the component on the first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay mounted, even on "exited", unless you also specify `unmountOnExit`. |
 | unmountOnExit | boolean | false | By default the child component stays mounted after it reaches the `'exited'` state. Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting. |
 | appear | boolean | true | The component will transition in as soon as the `<Transition>` mounts. |

…t-ui/src/Transition/Transition.styled.ts …-ui/src/Transition/Transition.styled.tsxpackages/fluent-ui/src/Transition/Transition.styled.ts renamed to packages/fluent-ui/src/Transition/Transition.styled.tsx packages/fluent-ui/src/Transition/Transition.styled.ts renamed to packages/fluent-ui/src/Transition/Transition.styled.tsx

@@ -2,11 +2,13 @@ import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { variant } from '@xstyled/system'
 import { createBaseTransition } from '../styles/createTransition'
+import { Box } from '..'
 
-export type Type = 'fade' | 'zoom' | 'slide'
+export type Type = 'fade' | 'zoom' | 'slide' | 'collapse'
 export interface StyledContainerProps {
   type?: Type
   visible?: boolean
+  wrapper?: boolean
 }
 
 export const fade = css`
@@ -60,6 +62,21 @@ export const slide = css`
   }
 `
 
+export const collapse = css`
+  &.collapse-enter {
+    transform: scaleY(0);
+    &-active {
+      transform: scaleY(1);
+    }
+  }
+  &.collapse-exit {
+    transform: scaleY(1);
+    &-active {
+      transform: scaleY(0);
+    }
+  }
+`
+
 export const type = variant({
   prop: 'type',
   default: 'fade',
@@ -78,16 +95,25 @@ export const type = variant({
       transition: ${createBaseTransition(['transform'])};
       ${({ visible }: StyledContainerProps): string | false =>
         visible ? `transform: none;` : `transform: translateY(100vh);`}
+    `,
+    collapse: css`
+      overflow: hidden;
+      transform-origin: top left;
+      transition: ${createBaseTransition(['transform'])};
+      ${({ visible }: StyledContainerProps): string | false =>
+        visible ? `transform: scaleY(1);` : `transform: scaleY(0);`}
     `
   }
 })
 
 export const StyledContainer = styled(
-  ({ children, ...props }): React.ReactElement => React.cloneElement(children, props)
+  ({ children, wrapper, ...props }): React.ReactElement =>
+    wrapper ? <Box {...props}>{children}</Box> : React.cloneElement(children, props)
 )<StyledContainerProps>`
   ${type}
 
   ${fade}
   ${zoom}
   ${slide}
+  ${collapse}
 `

packages/fluent-ui/src/Transition/Transition.tsx

@@ -6,16 +6,25 @@ import { Type, StyledContainer } from './Transition.styled'
 export interface TransitionProps extends Omit<CSSTransitionProps, 'in'> {
   type?: Type
   visible?: boolean
+  wrapper?: boolean
 }
 
 const Transition = React.forwardRef<HTMLElement, TransitionProps>(
   (
-    { type = 'fade', appear = true, timeout = 250, visible, children, ...rest }: TransitionProps,
+    {
+      type = 'fade',
+      wrapper = true,
+      appear = true,
+      timeout = 250,
+      visible,
+      children,
+      ...rest
+    }: TransitionProps,
     ref
   ): React.ReactElement => {
     return (
       <CSSTransition in={visible} appear={appear} timeout={timeout} classNames={type} {...rest}>
-        <StyledContainer ref={ref} visible={visible} type={type}>
+        <StyledContainer ref={ref} visible={visible} type={type} wrapper={wrapper}>
           {children}
         </StyledContainer>
       </CSSTransition>