WEB-2113 fix paddings

Telefonica · Dec 20, 2024 · 07dafe9 · 07dafe9
1 parent d0ea098
commit 07dafe9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 18 deletions.
diff --git a/src/drawer.css.ts b/src/drawer.css.ts
@@ -3,7 +3,7 @@ import * as mq from './media-queries.css';
 import {vars} from './skins/skin-contract.css';
 import {sprinkles} from './sprinkles.css';
 
-export const ANIMATION_DURATION_MS = 400; // review
+export const ANIMATION_DURATION_MS = 350;
 
 export const container = style([
     sprinkles({
@@ -20,12 +20,13 @@ export const container = style([
         '@media': {
             [mq.mobile]: {
                 left: 0,
-                transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+                transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.5, 0, 0.5, 1)`,
             },
             [mq.tabletOrBigger]: {
                 borderTopLeftRadius: vars.borderRadii.container,
                 borderBottomLeftRadius: vars.borderRadii.container,
-                transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,
+                transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.5, 0, 0.5, 1)`,
+                maxWidth: 'calc(100vw - 40px)',
             },
         },
     },
@@ -38,16 +39,6 @@ export const drawer = style([
         flexDirection: 'column',
         flexGrow: 1,
     }),
-    {
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                paddingBottom: 16,
-            },
-            [mq.desktopOrBigger]: {
-                paddingBottom: 24,
-            },
-        },
-    },
 ]);
 
 export const titleContainer = style([

diff --git a/src/drawer.tsx b/src/drawer.tsx
@@ -178,7 +178,7 @@ const Drawer = ({
     dataAttributes,
 }: DrawerProps): JSX.Element => {
     const layoutRef = React.useRef<DrawerPropsRef>(null);
-    const hasButtons = !!(button || secondaryButton || buttonLink);
+    const hasActions = !!(button || secondaryButton || buttonLink);
     const [scrollableParentElement, setScrollableParentElement] = React.useState<HTMLElement | null>(null);
     const topScrollSignalRef = React.useRef<HTMLDivElement>(null);
     const bottomScrollSignalRef = React.useRef<HTMLDivElement>(null);
@@ -255,12 +255,12 @@ const Drawer = ({
                             {children}
                         </Stack>
                     </Box>
+                    {!hasActions && <Box paddingBottom={{mobile: 16, desktop: 24}} />}
                     <div ref={bottomScrollSignalRef} />
                 </div>
-                <MaybeDivider show={showButtonsDivider} />
-                <Box paddingBottom={16} />
-                {hasButtons && (
-                    <Box paddingX={paddingX}>
+                <MaybeDivider show={hasActions && showButtonsDivider} />
+                {hasActions && (
+                    <Box paddingX={paddingX} paddingY={{mobile: 16, desktop: 24}}>
                         <ButtonLayout
                             primaryButton={
                                 button && (