DTRA-1707 / Kate / [DTrader-V2]: Fix UX issue for Turbos,Vanillas,Hig…

…her/Lower and Touch/No Touch trade type (#16747) * fix: layout jumps * chore: smooth animation * refactor: remove animatin for minimized trade params * refactor: update quill with the latest changes * fix: test case
binary-com · Sep 9, 2024 · e9e92bc · e9e92bc
1 parent 6067f72
commit e9e92bc
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account/package.json b/packages/account/package.json
@@ -35,7 +35,7 @@
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.32.0",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "1.16.5",
+        "@deriv-com/quill-ui": "1.16.9",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -98,7 +98,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.16.5",
+        "@deriv-com/quill-ui": "1.16.9",
         "@deriv-com/translations": "1.3.5",
         "@deriv-com/ui": "1.32.0",
         "@deriv-com/utils": "^0.0.25",

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -90,7 +90,7 @@
     "dependencies": {
         "@deriv-com/analytics": "1.14.0",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.16.5",
+        "@deriv-com/quill-ui": "1.16.9",
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.32.0",
         "@deriv/api-types": "1.0.172",

diff --git a/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.scss b/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.scss
@@ -46,9 +46,10 @@
         align-items: center;
         padding: 0 var(--core-spacing-400) var(--core-spacing-400);
         gap: var(--core-spacing-400);
-        position: sticky;
+        position: fixed;
+        width: 100%;
         z-index: 2; // chart has z-index: 1, it should not push purchase buttons down
-        bottom: 0;
+        bottom: var(--core-spacing-2800);
 
         &.slide {
             &-enter {

diff --git a/...trader/src/AppV2/Components/TradeParameters/__tests__/trade-parameters-container.spec.tsx b/...trader/src/AppV2/Components/TradeParameters/__tests__/trade-parameters-container.spec.tsx
@@ -19,8 +19,12 @@ describe('TradeParametersContainer', () => {
         expect(screen.getByText(children)).toBeInTheDocument();
     });
 
-    it('should render only children if is_minimized is true', () => {
-        render(<TradeParametersContainer is_minimized>{mock_children}</TradeParametersContainer>);
+    it('should render only children if is_minimized and is_minimized_visible is true', () => {
+        render(
+            <TradeParametersContainer is_minimized is_minimized_visible>
+                {mock_children}
+            </TradeParametersContainer>
+        );
 
         expect(screen.queryByText('Set your trade')).not.toBeInTheDocument();
         expect(screen.queryByText('Guide')).not.toBeInTheDocument();

diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters-container.tsx b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters-container.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Localize } from '@deriv/translations';
-import { CSSTransition } from 'react-transition-group';
 import { Text } from '@deriv-com/quill-ui';
 import Guide from '../Guide';
 
@@ -14,22 +13,8 @@ const TradeParametersContainer = ({
     is_minimized,
     is_minimized_visible,
 }: React.PropsWithChildren<TTradeParametersContainer>) =>
-    is_minimized ? (
-        <div className='trade-params--minimized'>
-            <CSSTransition
-                in={is_minimized_visible}
-                timeout={0}
-                classNames={{
-                    appear: 'trade-params__options__wrapper--minimized--enter',
-                    enter: 'trade-params__options__wrapper--minimized--enter',
-                    enterDone: 'trade-params__options__wrapper--minimized--enter-done',
-                    exit: 'trade-params__options__wrapper--minimized--exit',
-                }}
-                unmountOnExit
-            >
-                {children}
-            </CSSTransition>
-        </div>
+    is_minimized && is_minimized_visible ? (
+        <div className='trade-params--minimized'>{children}</div>
     ) : (
         <section className='trade-params'>
             <div className='trade-params__title'>

diff --git a/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.scss b/packages/trader/src/AppV2/Components/TradeParameters/trade-parameters.scss
@@ -41,24 +41,9 @@
             }
 
             &--minimized {
-                max-height: 0px;
-                padding: 0px;
-                transition: transform 0.5s, opacity 0.5s, max-height 0.5s, padding 0.1s;
+                max-height: 104px;
+                padding: var(--core-spacing-400) var(--core-spacing-400) var(--core-spacing-400) var(--core-spacing-400);
 
-                &--enter,
-                &--exit {
-                    opacity: 0;
-                    transform: translateY(100%);
-                    max-height: 0px;
-                    padding: 0px;
-                }
-                &--enter-done {
-                    opacity: 1;
-                    transform: translateY(0);
-                    max-height: 104px;
-                    padding: var(--core-spacing-400) var(--core-spacing-400) var(--core-spacing-400)
-                        var(--core-spacing-400);
-                }
                 .quill-input__container {
                     width: unset;
                 }

diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.scss b/packages/trader/src/AppV2/Containers/Trade/trade.scss
@@ -53,6 +53,10 @@
         }
     }
     &__parameter {
-        display: inline;
+        min-height: 13.6rem;
+
+        &:has(.trade-params__options__wrapper--horizontal:not(:only-child)) {
+            min-height: 16.8rem;
+        }
     }
 }