diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss index df861e81c0..f0d38ed741 100644 --- 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 index ef60bbe53c..cfdad16268 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -71,6 +71,10 @@ interface BoxProps extends VibeComponentProps { paddingStart?: ValueOf; backgroundColor?: ValueOf; textColor?: ValueOf; + /** + * TODO: make default in next major version + */ + scrollable?: boolean; } const Box: VibeComponent & { @@ -121,7 +125,8 @@ const Box: VibeComponent & { paddingBottom, paddingStart, textColor, - backgroundColor + backgroundColor, + scrollable }, ref ) => { @@ -134,7 +139,7 @@ const Box: VibeComponent & { className: cx( styles.box, className, - { [DISABLED.DISABLED]: disabled }, + { [DISABLED.DISABLED]: disabled, [styles.scrollable]: scrollable }, border, borderColor, rounded,