Fix scrollable modal story and address review feedback

Author: federico-ercoles

Diff for: packages/bento-design-system/src/Chip/Chip.css.ts

@@ -11,9 +11,9 @@ export const chipRecipe = strictRecipe({
   }),
   variants: {
     uppercase: {
-      true: {
+      true: bentoSprinkles({
         textTransform: "uppercase",
-      },
+      }),
     },
   },
 });

Diff for: packages/bento-design-system/src/Modal/Modal.tsx

@@ -8,9 +8,7 @@ import {
   Box,
   Column,
   Columns,
-  Inset,
   Actions,
-  Stack,
 } from "..";
 import { useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
 import { useDialog } from "@react-aria/dialog";
@@ -103,40 +101,50 @@ export function Modal(props: Props) {
 
   return (
     <CustomModal {...props} aria-label={props.title}>
-      <Inset spaceX={config.paddingX} spaceY={config.paddingY}>
-        <Stack space={config.internalSpacing}>
-          <Columns space={16} alignY="top">
-            <Columns space={16} alignY="center">
-              {icon && <Column width="content">{icon}</Column>}
-              <Title size={config.titleSize}>{props.title}</Title>
-            </Columns>
-            <Column width="content">
-              <IconButton
-                icon={config.closeIcon}
-                label={props.closeButtonLabel ?? defaultMessages.Modal.closeButtonLabel}
-                onPress={props.onClose}
-                size={config.closeIconSize}
-                tabIndex={-1}
-                kind="transparent"
-                hierarchy="secondary"
-              />
-            </Column>
+      <Box
+        paddingX={config.paddingX}
+        paddingTop={config.paddingY}
+        paddingBottom={config.internalSpacing}
+      >
+        <Columns space={16} alignY="top">
+          <Columns space={16} alignY="center">
+            {icon && <Column width="content">{icon}</Column>}
+            <Title size={config.titleSize}>{props.title}</Title>
           </Columns>
-          <Box className={modalBody}>{props.children}</Box>
-          <Actions
-            primaryAction={
-              props.primaryAction
-                ? { ...props.primaryAction, isDestructive: kind === "destructive" }
-                : undefined
-            }
-            secondaryAction={props.secondaryAction}
-            size={config.actionsSize}
-            loadingMessage={props.loadingMessage}
-            error={props.error}
-            errorBannerWidth={props.errorBannerWidth || config.defaultErrorBannerWidth}
-          />
-        </Stack>
-      </Inset>
+          <Column width="content">
+            <IconButton
+              icon={config.closeIcon}
+              label={props.closeButtonLabel ?? defaultMessages.Modal.closeButtonLabel}
+              onPress={props.onClose}
+              size={config.closeIconSize}
+              tabIndex={-1}
+              kind="transparent"
+              hierarchy="secondary"
+            />
+          </Column>
+        </Columns>
+      </Box>
+      <Box className={modalBody} paddingX={config.paddingX}>
+        {props.children}
+      </Box>
+      <Box
+        paddingX={config.paddingX}
+        paddingTop={config.internalSpacing}
+        paddingBottom={config.paddingY}
+      >
+        <Actions
+          primaryAction={
+            props.primaryAction
+              ? { ...props.primaryAction, isDestructive: kind === "destructive" }
+              : undefined
+          }
+          secondaryAction={props.secondaryAction}
+          size={config.actionsSize}
+          loadingMessage={props.loadingMessage}
+          error={props.error}
+          errorBannerWidth={props.errorBannerWidth || config.defaultErrorBannerWidth}
+        />
+      </Box>
     </CustomModal>
   );
 }