feat(Box): add a scrollable prop (#1836)

mondaycom · Dec 20, 2023 · 95b4383 · 95b4383
1 parent 82cb3b8
commit 95b4383
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss
@@ -1,13 +1,19 @@
 // Monday ui styles dependencies
 @import "~monday-ui-style/src/common";
+@import "~monday-ui-style/dist/mixins";
 
 // Utilities map
 @import "../../styles/utilities/utilities-settings";
 
-.box{
+.box {
   overflow: hidden;
+
+  &.scrollable {
+    /* TODO: make default in the next major version */
+    overflow: auto;
+    @include scroller;
+  }
 }
 
 // Generating Utility class locally for Box component
 @include utility-class-factory($utilities-modules, $export: "modules");
-
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -71,6 +71,10 @@ interface BoxProps extends VibeComponentProps {
   paddingStart?: ValueOf<PaddingStart>;
   backgroundColor?: ValueOf<BackgroundColor>;
   textColor?: ValueOf<Color>;
+  /**
+   * TODO: make default in next major version
+   */
+  scrollable?: boolean;
 }
 
 const Box: VibeComponent<BoxProps> & {
@@ -121,7 +125,8 @@ const Box: VibeComponent<BoxProps> & {
       paddingBottom,
       paddingStart,
       textColor,
-      backgroundColor
+      backgroundColor,
+      scrollable
     },
     ref
   ) => {
@@ -134,7 +139,7 @@ const Box: VibeComponent<BoxProps> & {
         className: cx(
           styles.box,
           className,
-          { [DISABLED.DISABLED]: disabled },
+          { [DISABLED.DISABLED]: disabled, [styles.scrollable]: scrollable },
           border,
           borderColor,
           rounded,