Improve minwidth styles props on Drawer Component

Author: Kubit

src/components/drawer/drawer.styled.ts

@@ -33,30 +33,7 @@ export const DrawerTitleStyled = styled.div.withConfig({
 })``;
 
 export const DrawerStyled = styled.div<DrawerStylesType>`
-  background-color: #fff;
-  max-height: 100vh;
-  max-height: var(--100svh, 100vh);
-  max-height: 100svh;
-  min-width: 50vw;
-  max-width: 50vw;
-  overflow-y: auto;
-  ${() =>
-    ({
-      theme: {
-        MEDIA_QUERIES: { onlyDesktop, onlyTablet },
-      },
-    }) => css`
-      ${onlyDesktop} {
-        min-height: 100vh;
-        min-height: var(--100svh, 100vh);
-        min-height: 100svh;
-      }
-      ${onlyTablet} {
-        min-height: 100vh;
-        min-height: var(--100svh, 100vh);
-        min-height: 100svh;
-      }
-    `};
+  ${props => props.position && getStyles(props.styles.container?.[props.position])}
 
   ${DrawerTitleStyled} {
     transition: box-shadow 300ms;
@@ -66,23 +43,6 @@ export const DrawerStyled = styled.div<DrawerStylesType>`
     ${props => getStyles(props.styles.titleContainer)}
     ${props => getTypographyStyles(props.styles.titleContainer)}
   }
-
-  ${() =>
-    ({
-      theme: {
-        MEDIA_QUERIES: { onlyMobile, onlyTablet },
-      },
-    }) => css`
-      ${onlyMobile} {
-        max-width: inherit;
-        max-height: inherit;
-      }
-      ${onlyTablet} {
-        max-width: 100vw;
-        min-width: 100vw;
-      }
-    `};
-  ${props => props.position && getStyles(props.styles.container?.[props.position])}
 `;
 
 export const DrawerNavigationStyled = styled.div<DrawerStylesType>`

src/components/drawer/drawerControlled.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
 
 import { STYLES_NAME } from '@/constants';
-import { useDeviceHeight, useMediaDevice, useScrollEffect, useZoomEffect } from '@/hooks';
-import { useStyles } from '@/hooks/useStyles/useStyles';
+import {
+  useDeviceHeight,
+  useMediaDevice,
+  useScrollEffect,
+  useStylesV2,
+  useZoomEffect,
+} from '@/hooks';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { CssProperty } from '@/utils';
 
@@ -25,13 +30,13 @@ const DrawerControlledComponent = React.forwardRef(
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     useDeviceHeight();
-    const styles = useStyles<DrawerVariantStylesType, V>(
-      STYLES_NAME.DRAWER,
-      props.variant,
-      props.ctv
-    );
+    const styles = useStylesV2<DrawerVariantStylesType, V>({
+      styleName: STYLES_NAME.DRAWER,
+      variantName: props.variant,
+      customTokens: props.ctv,
+    });
     const device = useMediaDevice();
-    const stylesByDevice = styles[device];
+    const stylesByDevice = styles?.[device];
 
     const { scrollableRef, shadowRef } = useScrollEffect({
       shadowStyles: stylesByDevice.titleContainer?.box_shadow,

src/components/drawer/stories/drawerControlled.stories.tsx

@@ -11,7 +11,11 @@ import { ButtonSizeType, ButtonVariantType } from '@/designSystem/kubit/componen
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
 import { DrawerControlled as Story } from '../index';
-import { DrawerLevelPositionTypes, DrawerTitleComponentType } from '../types';
+import {
+  DrawerLevelPositionTypes,
+  DrawerTitleComponentType,
+  DrawerVariantPositionTypes,
+} from '../types';
 import { argtypes } from './controlledArgtypes';
 
 const themeSelected = localStorage.getItem('themeSelected') || 'kubit';
@@ -110,6 +114,12 @@ export const DrawerControlledWithCtv: Story = {
         title: {
           color: 'red',
         },
+        container: {
+          [DrawerVariantPositionTypes.DRAWER_RIGHT]: {
+            min_width: '80vw',
+            max_width: '80vw',
+          },
+        },
       },
       TABLET: {
         title: {

src/designSystem/kubit/components/drawer/styles.ts

@@ -25,14 +25,23 @@ const containerCommonProps: {
   [DrawerVariantPositionTypes.DRAWER_RIGHT]: {
     border_top_left_radius: RADIUS.radius_50,
     border_bottom_left_radius: RADIUS.radius_50,
+    max_height: SPACINGS.spacing_100_vh,
+    background: COLORS.NEUTRAL.color_neutral_bg_250,
+    min_width: '50vw',
+    max_width: '50vw',
   },
   [DrawerVariantPositionTypes.DRAWER_LEFT]: {
     border_top_right_radius: RADIUS.radius_50,
     border_bottom_right_radius: RADIUS.radius_50,
+    max_height: SPACINGS.spacing_100_vh,
+    background: COLORS.NEUTRAL.color_neutral_bg_250,
+    min_width: '50vw',
+    max_width: '50vw',
   },
   [DrawerVariantPositionTypes.DRAWER_BOTTOM]: {
     border_top_right_radius: RADIUS.radius_50,
     border_top_left_radius: RADIUS.radius_50,
+    background: COLORS.NEUTRAL.color_neutral_bg_250,
   },
 };
 const commonIconContainerProps: CommonStyleType = {
@@ -122,6 +131,11 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
     [DeviceBreakpointsType.TABLET]: {
       container: {
         ...containerCommonProps,
+        [DrawerVariantPositionTypes.DRAWER_BOTTOM]: {
+          ...containerCommonProps.DRAWER_BOTTOM,
+          min_height: 'var(--100svh, 100vh)',
+          background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+        },
       },
       iconContainer: {
         ...commonIconContainerProps,
@@ -165,6 +179,14 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
       },
     },
     [DeviceBreakpointsType.MOBILE]: {
+      container: {
+        ...containerCommonProps,
+        [DrawerVariantPositionTypes.DRAWER_BOTTOM]: {
+          ...containerCommonProps.DRAWER_BOTTOM,
+          min_height: 'var(--100svh, 100vh)',
+          background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+        },
+      },
       iconContainer: {
         ...commonIconContainerProps,
         padding_top: SPACINGS.spacing_300,