feat(html): add animation-container and reuse it in tests

telerik · May 25, 2023 · 5f7d756 · 5f7d756
1 parent 94b87ee
commit 5f7d756
Show file tree

Hide file tree

Showing 59 changed files with 2,396 additions and 2,151 deletions.
diff --git a/packages/html/src/action-sheet/action-sheet.spec.tsx b/packages/html/src/action-sheet/action-sheet.spec.tsx
@@ -1,5 +1,6 @@
 import { classNames } from '../misc';
 import { ActionSheetHeader, ActionSheetItems, ActionSheetFooter } from '../action-sheet';
+import { AnimationContainer } from '../animation-container';
 
 export const ACTIONSHEET_CLASSNAME = `k-actionsheet`;
 
@@ -77,41 +78,39 @@ export const ActionSheet = (
     return (
         <div className="k-actionsheet-container">
             <div className="k-overlay"></div>
-            <div className="k-animation-container">
-                <div className="k-child-animation-container"
-                    style={{
-                        [`${ fullscreen === true ? 'top' : side }`]: 0,
-                        [`${ fullscreen === true ? 'width' : null }`]: '100%',
-                        [`${ fullscreen === true ? 'height' : null }`]: '100%',
-                        [`${ side === 'top' || side === 'bottom' ? 'width' : null }`]: '100%',
-                        [`${ side === 'left' || side === 'right' ? 'height' : null }`]: '100%'
-                    }}>
-                    <div
-                        {...other}
-                        className={classNames(
-                            props.className,
-                            ACTIONSHEET_CLASSNAME,
+            <AnimationContainer
+                animationStyle={{
+                    [`${ fullscreen === true ? 'top' : side }`]: 0,
+                    [`${ fullscreen === true ? 'width' : null }`]: '100%',
+                    [`${ fullscreen === true ? 'height' : null }`]: '100%',
+                    [`${ side === 'top' || side === 'bottom' ? 'width' : null }`]: '100%',
+                    [`${ side === 'left' || side === 'right' ? 'height' : null }`]: '100%'
+                }}>
+                <div
+                    {...other}
+                    className={classNames(
+                        props.className,
+                        ACTIONSHEET_CLASSNAME,
+                        {
+                            [`k-actionsheet-${side}`]: fullscreen === false,
+                            'k-actionsheet-fullscreen': fullscreen === true,
+                            'k-adaptive-actionsheet': adaptive
+                        },
+                    )}>
+                    <>
+                        {_ActionSheetHeader}
+                        <div className={classNames(
+                            'k-actionsheet-content',
                             {
-                                [`k-actionsheet-${side}`]: fullscreen === false,
-                                'k-actionsheet-fullscreen': fullscreen === true,
-                                'k-adaptive-actionsheet': adaptive
-                            },
+                                '!k-overflow-hidden': adaptive
+                            }
                         )}>
-                        <>
-                            {_ActionSheetHeader}
-                            <div className={classNames(
-                                'k-actionsheet-content',
-                                {
-                                    '!k-overflow-hidden': adaptive
-                                }
-                            )}>
-                                {_ActionSheetContent}
-                            </div>
-                            {_ActionSheetFooter}
-                        </>
-                    </div>
+                            {_ActionSheetContent}
+                        </div>
+                        {_ActionSheetFooter}
+                    </>
                 </div>
-            </div>
+            </AnimationContainer>
         </div>
     );
 };

diff --git a/packages/html/src/animation-container/animation-container.spec.tsx b/packages/html/src/animation-container/animation-container.spec.tsx
@@ -0,0 +1,59 @@
+import { classNames } from '../misc';
+
+export const ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
+
+const states = [];
+
+const options = {};
+
+export type KendoAnimationContainerProps = {
+    positionMode: "absolute" | "fixed";
+    offset?: {
+        top: number | string;
+        left: number | string;
+    };
+    animationStyle?: React.CSSProperties;
+};
+
+const defaultProps = {
+    positionMode: "absolute"
+};
+
+export const AnimationContainer = (
+    props:
+        KendoAnimationContainerProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        positionMode,
+        animationStyle,
+        offset,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            style={{ ...offset, ...props.style }}
+            className={classNames(
+                ANIMATION_CONTAINER_CLASSNAME,
+                "k-animation-container-shown",
+                {
+                    ["k-animation-container-fixed"]: positionMode === "fixed"
+                }
+            )}
+        >
+            <div className="k-child-animation-container" style={animationStyle}>
+                {props.children}
+            </div>
+        </div>
+    );
+};
+
+AnimationContainer.states = states;
+AnimationContainer.options = options;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps;
+
+export default AnimationContainer;
diff --git a/packages/html/src/animation-container/index.ts b/packages/html/src/animation-container/index.ts
@@ -0,0 +1 @@
+export * from './animation-container.spec';
diff --git a/packages/html/src/colorpicker/tests/colorpicker-dropdown.tsx b/packages/html/src/colorpicker/tests/colorpicker-dropdown.tsx
@@ -1,5 +1,6 @@
 import { ColorPicker } from '../../colorpicker';
 import { ColorEditor } from '../../coloreditor';
+import { Popup } from '../../popup';
 
 
 const styles = `
@@ -25,28 +26,19 @@ export default () =>(
                 <div style={{ position: "relative" }}>
                     <ColorPicker />
 
-                    <div className="k-animation-container k-animation-container-shown" style={{ position: "relative", width: "min-content" }}>
-                        <div className="k-child-animation-container">
-                            <div className="k-popup k-color-picker-popup">
-                                <ColorEditor group color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
+                    <Popup className="k-color-picker-popup">
+                        <ColorEditor group color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
+                    </Popup>
                 </div>
-
             </section>
 
             <section>
                 <div style={{ position: "relative" }}>
                     <ColorPicker value="fuchsia" />
 
-                    <div className="k-animation-container k-animation-container-shown">
-                        <div className="k-child-animation-container">
-                            <div className="k-popup k-color-picker-popup">
-                                <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
+                    <Popup className="k-color-picker-popup">
+                        <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
+                    </Popup>
                 </div>
 
             </section>

diff --git a/packages/html/src/combobox/combobox.spec.tsx b/packages/html/src/combobox/combobox.spec.tsx
@@ -122,7 +122,7 @@ export const Combobox = (
                 />
             </Input>
             { opened && popup &&
-                <Popup className="k-combobox-popup">
+                <Popup className="k-list-container k-combobox-popup">
                     {popup}
                 </Popup>
             }

diff --git a/packages/html/src/combobox/tests/combobox-opened.tsx b/packages/html/src/combobox/tests/combobox-opened.tsx
@@ -6,6 +6,9 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(

diff --git a/packages/html/src/context-menu/tests/context-menu-in-window.tsx b/packages/html/src/context-menu/tests/context-menu-in-window.tsx
@@ -28,18 +28,16 @@ export default () =>(
                 <Window title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>
                     Target
                 </Window>
-                <div className="k-animation-container">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1" showArrow></MenuItem>
-                            <MenuItem text="Item 2" showArrow></MenuItem>
-                            <MenuItem text="Item 3" showArrow></MenuItem>
-                            <MenuItem text="Item 4" showArrow></MenuItem>
-                            <MenuItem text="Item 5" showArrow></MenuItem>
-                            <MenuItem text="Item 6" showArrow></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup">
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1" showArrow></MenuItem>
+                        <MenuItem text="Item 2" showArrow></MenuItem>
+                        <MenuItem text="Item 3" showArrow></MenuItem>
+                        <MenuItem text="Item 4" showArrow></MenuItem>
+                        <MenuItem text="Item 5" showArrow></MenuItem>
+                        <MenuItem text="Item 6" showArrow></MenuItem>
+                    </MenuList>
+                </Popup>
             </section>
         </div>
     </>

diff --git a/packages/html/src/context-menu/tests/context-menu.tsx b/packages/html/src/context-menu/tests/context-menu.tsx
@@ -3,16 +3,14 @@ import { Popup } from '../../popup';
 
 
 const styles = `
-    .wrap,
-    .k-animation-container {
-        width: min-content;
+    .wrap {
         position: relative;
-        overflow: visible;
+        width: min-content;
     }
-    .child-menu {
-        position: absolute;
-        left: 100%;
-        top: 0;
+
+    .k-animation-container:first-of-type {
+        width: min-content;
+        position: relative;
     }
 `;
 
@@ -21,24 +19,21 @@ export default () =>(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
             <section className="wrap">
-                <div className="k-animation-container">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1" selected showArrow></MenuItem>
-                            <MenuItem text="Item 2"></MenuItem>
-                            <MenuItem text="Item 3"></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup">
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1" selected showArrow></MenuItem>
+                        <MenuItem text="Item 2"></MenuItem>
+                        <MenuItem text="Item 3"></MenuItem>
+                    </MenuList>
+                </Popup>
+
 
-                <div className="k-animation-container child-menu">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1.1"></MenuItem>
-                            <MenuItem text="Item 1.2"></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup" offset={{ left: "100%", top: 0 }}>
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1.1"></MenuItem>
+                        <MenuItem text="Item 1.2"></MenuItem>
+                    </MenuList>
+                </Popup>
             </section>
         </div>
     </>

diff --git a/packages/html/src/datepicker/datepicker.spec.tsx b/packages/html/src/datepicker/datepicker.spec.tsx
@@ -124,7 +124,7 @@ export const DatePicker = (
                 />
             </Input>
             { opened &&
-                <Popup className="k-datepicker-popup">
+                <Popup className="k-calendar-container k-datepicker-popup">
                     <Calendar dir={dir} />
                 </Popup>
             }

diff --git a/packages/html/src/datepicker/tests/datepicker-opened.tsx b/packages/html/src/datepicker/tests/datepicker-opened.tsx
@@ -5,6 +5,10 @@ const styles = `
         max-width: 660px;
     }
 
+    .k-animation-container {
+        position: relative;
+    }
+
     .k-popup {
         width: max-content;
     }

diff --git a/packages/html/src/daterangepicker/daterangepicker.spec.tsx b/packages/html/src/daterangepicker/daterangepicker.spec.tsx
@@ -88,7 +88,7 @@ export const DateRangePicker = (
                 </FloatingLabel>
             </span>
             { opened &&
-                <Popup className="k-daterangepicker-popup">
+                <Popup className="k-calendar-container k-daterangepicker-popup">
                     <MultiViewCalendar dir={dir} />
                 </Popup>
             }

diff --git a/packages/html/src/daterangepicker/tests/daterangepicker-opened.tsx b/packages/html/src/daterangepicker/tests/daterangepicker-opened.tsx
@@ -1,8 +1,14 @@
 import { DateRangePicker } from '..';
 
+const styles = `
+    .k-animation-container {
+        position: relative;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <span>DateRangePicker Opened</span>

diff --git a/packages/html/src/datetime-selector/tests/datetime-selector.tsx b/packages/html/src/datetime-selector/tests/datetime-selector.tsx
@@ -1,12 +1,12 @@
-import DateTimeSelector from '../datetime-selector.spec';
+import { DateTimeSelector } from '..';
+import { Popup } from '../../popup';
 
 
 const style = `
     .k-animation-container {
         width: min-content;
         max-width: 100%;
         position: relative;
-        overflow: visible;
     }
 `;
 
@@ -19,19 +19,15 @@ export default () =>(
             <span>Time tab</span>
 
             <section>
-                <div className="k-animation-container">
-                    <div className="k-popup k-reset k-datetime-container">
-                        <DateTimeSelector />
-                    </div>
-                </div>
+                <Popup className="k-datetime-container">
+                    <DateTimeSelector />
+                </Popup>
             </section>
 
             <section>
-                <div className="k-animation-container">
-                    <div className="k-popup k-reset k-datetime-container">
-                        <DateTimeSelector tab="time" />
-                    </div>
-                </div>
+                <Popup className="k-datetime-container">
+                    <DateTimeSelector tab="time" />
+                </Popup>
             </section>
 
         </div>

diff --git a/packages/html/src/datetimepicker/datetimepicker.spec.tsx b/packages/html/src/datetimepicker/datetimepicker.spec.tsx
@@ -127,7 +127,7 @@ export const DateTimePicker = (
                 />
             </Input>
             { opened &&
-                <Popup className="k-datetimepicker-popup" dir={dir}>
+                <Popup className={`k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`} dir={dir}>
                     <DateTimeSelector tab={tab} dir={dir} />
                 </Popup>
             }

diff --git a/packages/html/src/datetimepicker/tests/datetimepicker-opened.tsx b/packages/html/src/datetimepicker/tests/datetimepicker-opened.tsx
@@ -5,6 +5,10 @@ const styles = `
     #test-area {
         max-width: 740px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(