Enhance transition components

src/components/feedback/Dialog.tsx

@@ -196,7 +196,7 @@ const Dialog = function Dialog({
 
   return (
     <Wrapper
-      visible={transitionComponentVisible}
+      direction={transitionComponentVisible ? 'in' : 'out'}
       onTransitionEnd={onTransitionEnd}
     >
       <div

src/components/feedback/test/Dialog-test.js

@@ -17,9 +17,9 @@ const createComponent = (Component, props = {}) => {
 /**
  * @type {import('../../../types').TransitionComponent}
  */
-const ComponentWithTransition = ({ children, visible, onTransitionEnd }) => {
+const ComponentWithTransition = ({ children, direction, onTransitionEnd }) => {
   // Fake a 50ms transition time
-  setTimeout(() => onTransitionEnd?.(visible ? 'in' : 'out'), 50);
+  setTimeout(() => onTransitionEnd?.(direction), 50);
   return <div>{children}</div>;
 };
 

src/components/transition/Slider.tsx

@@ -4,9 +4,10 @@ import type { TransitionComponent } from '../../types';
 
 const Slider: TransitionComponent = ({
   children,
-  visible,
+  direction = 'in',
   onTransitionEnd,
 }) => {
+  const visible = direction === 'in';
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [containerHeight, setContainerHeight] = useState(visible ? 'auto' : 0);
 
@@ -55,15 +56,14 @@ const Slider: TransitionComponent = ({
   const handleTransitionEnd = useCallback(() => {
     if (visible) {
       setContainerHeight('auto');
-      onTransitionEnd?.('in');
     } else {
       // When the collapse animation completes, stop rendering the content so
       // that the browser has fewer nodes to render and the content is removed
       // from keyboard navigation.
       setContentVisible(false);
-      onTransitionEnd?.('out');
     }
-  }, [setContainerHeight, visible, onTransitionEnd]);
+    onTransitionEnd?.(direction);
+  }, [setContainerHeight, visible, onTransitionEnd, direction]);
 
   const isFullyVisible = containerHeight === 'auto';
 

src/components/transition/test/Slider-test.js

@@ -8,7 +8,7 @@ describe('Slider', () => {
 
   const createSlider = (props = {}) => {
     return mount(
-      <Slider visible={false} {...props}>
+      <Slider {...props}>
         <div style={{ width: 100, height: 200 }}>Test content</div>
       </Slider>,
       { attachTo: container }
@@ -24,8 +24,8 @@ describe('Slider', () => {
     container.remove();
   });
 
-  it('should render collapsed if `visible` is false on mount', () => {
-    const wrapper = createSlider({ visible: false });
+  it('should render collapsed if `direction` is `out` on mount', () => {
+    const wrapper = createSlider({ direction: 'out' });
     const { height } = wrapper.getDOMNode().getBoundingClientRect();
     assert.equal(height, 0);
 
@@ -34,25 +34,27 @@ describe('Slider', () => {
     assert.equal(wrapper.getDOMNode().style.display, 'none');
   });
 
-  it('should render expanded if `visible` is true on mount', () => {
-    const wrapper = createSlider({ visible: true });
-    const { height } = wrapper.getDOMNode().getBoundingClientRect();
-    assert.equal(height, 200);
+  ['in', undefined].forEach(direction => {
+    it('should render expanded if `direction` is `in` or not provided on mount', () => {
+      const wrapper = createSlider({ direction });
+      const { height } = wrapper.getDOMNode().getBoundingClientRect();
+      assert.equal(height, 200);
+    });
   });
 
-  it('should transition to expanded if `visible` changes to `true`', () => {
-    const wrapper = createSlider({ visible: false });
+  it('should transition to expanded if `direction` changes to `in`', () => {
+    const wrapper = createSlider({ direction: 'out' });
 
-    wrapper.setProps({ visible: true });
+    wrapper.setProps({ direction: 'in' });
 
     const containerStyle = wrapper.getDOMNode().style;
     assert.equal(containerStyle.height, '200px');
   });
 
-  it('should transition to collapsed if `visible` changes to `false`', done => {
-    const wrapper = createSlider({ visible: true });
+  it('should transition to collapsed if `direction` changes to `out`', done => {
+    const wrapper = createSlider({ direction: 'in' });
 
-    wrapper.setProps({ visible: false });
+    wrapper.setProps({ direction: 'out' });
 
     setTimeout(() => {
       const containerStyle = wrapper.getDOMNode().style;
@@ -62,9 +64,9 @@ describe('Slider', () => {
   });
 
   it('should set the container height to "auto" when an expand transition finishes', () => {
-    const wrapper = createSlider({ visible: false });
+    const wrapper = createSlider({ direction: 'out' });
 
-    wrapper.setProps({ visible: true });
+    wrapper.setProps({ direction: 'in' });
 
     let containerStyle = wrapper.getDOMNode().style;
     assert.equal(containerStyle.height, '200px');
@@ -75,38 +77,38 @@ describe('Slider', () => {
     assert.equal(containerStyle.height, 'auto');
   });
 
-  it('should hide overflowing content when not fully visible', () => {
+  it('should hide overflowing content when not fully expanded', () => {
     // When fully collapsed, overflow should be hidden.
-    const wrapper = createSlider({ visible: false });
+    const wrapper = createSlider({ direction: 'out' });
     let containerStyle = wrapper.getDOMNode().style;
     assert.equal(containerStyle.overflow, 'hidden');
 
     // When starting to expand, or when collapsing, overflow should also be hidden.
-    wrapper.setProps({ visible: true });
+    wrapper.setProps({ direction: 'in' });
     assert.equal(containerStyle.overflow, 'hidden');
 
-    // When fully visible, we make overflow visible to make focus rings or
+    // When fully expanded, we make overflow visible to make focus rings or
     // other content which extends beyond the bounds of the Slider visible.
     wrapper.find('div').first().simulate('transitionend');
     containerStyle = wrapper.getDOMNode().style;
     assert.equal(containerStyle.overflow, 'visible');
   });
 
   it('should stop rendering content when a collapse transition finishes', () => {
-    const wrapper = createSlider({ visible: true });
+    const wrapper = createSlider({ direction: 'in' });
 
-    wrapper.setProps({ visible: false });
+    wrapper.setProps({ direction: 'out' });
 
     wrapper.find('div').first().simulate('transitionend');
 
     const containerStyle = wrapper.getDOMNode().style;
     assert.equal(containerStyle.display, 'none');
   });
 
-  [true, false].forEach(visible => {
+  ['in', 'out'].forEach(direction => {
     it('should handle unmounting while expanding or collapsing', () => {
-      const wrapper = createSlider({ visible });
-      wrapper.setProps({ visible: !visible });
+      const wrapper = createSlider({ direction });
+      wrapper.setProps({ direction: direction === 'in' ? 'out' : 'in' });
       wrapper.unmount();
     });
   });
@@ -115,12 +117,12 @@ describe('Slider', () => {
     'should pass a11y checks',
     checkAccessibility([
       {
-        name: 'visible',
-        content: () => createSlider({ visible: true }),
+        name: 'in',
+        content: () => createSlider({ direction: 'in' }),
       },
       {
-        name: 'hidden',
-        content: () => createSlider({ visible: false }),
+        name: 'out',
+        content: () => createSlider({ direction: 'out' }),
       },
     ])
   );

src/pattern-library/components/patterns/UsingComponentsPage.tsx

@@ -194,7 +194,7 @@ export default function UsingComponentsPage() {
           <Library.Code
             size="sm"
             content={`type TransitionComponentProps = {
-  visible: boolean;
+  direction?: 'in' | 'out';
   onTransitionEnd?: (direction: 'in' | 'out') => void;
 };`}
             title="Common transition-component props"

src/pattern-library/components/patterns/transition/SliderPage.tsx

@@ -7,16 +7,17 @@ import Library from '../../Library';
 
 const Slider_: FunctionComponent<
   ComponentProps<TransitionComponent> & { _transitionStatus?: 'in' | 'out' }
-> = ({ children, visible, onTransitionEnd, _transitionStatus }) => {
-  const [isVisible, setIsVisible] = useState(visible);
-  const toggleSlider = () => setIsVisible(prev => !prev);
+> = ({ children, direction, onTransitionEnd, _transitionStatus }) => {
+  const [currentDirection, setCurrentDirection] = useState(direction);
+  const toggleSlider = () =>
+    setCurrentDirection(prev => (prev === 'in' ? 'out' : 'in'));
 
   return (
     <div className="flex-col w-full space-y-2">
       <Button onClick={toggleSlider} variant="primary">
-        {isVisible ? 'Hide' : 'Show'} slider
+        {currentDirection === 'in' ? 'Hide' : 'Show'} slider
       </Button>
-      <Slider visible={isVisible} onTransitionEnd={onTransitionEnd}>
+      <Slider direction={currentDirection} onTransitionEnd={onTransitionEnd}>
         {children}
       </Slider>
       <div>
@@ -66,7 +67,7 @@ export default function SliderPage() {
           <Library.Usage componentName="Slider" />
           <Library.Example>
             <Library.Demo title="Basic example" withSource>
-              <Slider_ visible={false}>
+              <Slider_ direction="out">
                 <Card>
                   <CardContent>This is the content of the Slider</CardContent>
                 </Card>
@@ -76,17 +77,17 @@ export default function SliderPage() {
         </Library.Pattern>
 
         <Library.Pattern title="Props">
-          <Library.Example title="visible">
-            This mandatory boolean prop tells if the Slider is currently
-            displayed or hidden.
+          <Library.Example title="direction">
+            This prop tells if the Slider is currently expanded (<code>in</code>
+            ) or collapsed (<code>out</code>). It is <code>in</code> by default.
           </Library.Example>
 
           <Library.Example title="onTransitionEnd">
             Optionally, you can provide a callback that will be invoked once the{' '}
             <code>in</code>/<code>out</code> transitions end.
             <Library.Demo title="Slider with onTransitionEnd" withSource>
               <Slider_
-                visible={false}
+                direction="out"
                 onTransitionEnd={direction => setTransitionStatus(direction)}
                 _transitionStatus={transitionStatus}
               >

src/types.ts

@@ -31,6 +31,6 @@ export type IconComponent = FunctionComponent<JSX.SVGAttributes<SVGSVGElement>>;
  * animate the mounting and unmounting of a child component.
  */
 export type TransitionComponent = FunctionComponent<{
-  visible: boolean;
+  direction?: 'in' | 'out';
   onTransitionEnd?: (direction: 'in' | 'out') => void;
 }>;