Merge pull request #278 from qoretechnologies/bugfix/fix-collection-c…

…olumns-props

Fixed a regression bug where columns props were not properly passed to `ReqoreColumns` inside the collection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.34.1",
+  "version": "0.34.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Collection/index.tsx

@@ -67,7 +67,6 @@ export const StyledCollectionWrapper = styled(StyledColumns)`
 
 export const ReqoreCollection = ({
   items,
-  columnsGap = '10px',
   stacked,
   rounded = true,
   fill,
@@ -100,6 +99,14 @@ export const ReqoreCollection = ({
   inputPlaceholder = (items) => `Search in ${size(items)} items`,
   paging,
   height,
+
+  // Columns props
+  minColumnWidth,
+  maxColumnWidth,
+  columns,
+  alignItems,
+  columnsGap = '10px',
+
   ...rest
 }: IReqoreCollectionProps) => {
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
@@ -251,13 +258,17 @@ export const ReqoreCollection = ({
                 </ReqoreMessage>
               ) : (
                 <StyledCollectionWrapper
-                  columns={_showAs === 'grid' ? 'auto-fit' : 1}
+                  columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
                   columnsGap={stacked ? '0px' : columnsGap}
                   rounded={rounded}
                   stacked={stacked}
                   fill={fill}
                   ref={setContentRef}
                   height={height}
+                  alignItems={alignItems}
+                  minColumnWidth={minColumnWidth}
+                  maxColumnWidth={maxColumnWidth}
+                  className='reqore-collection-content'
                 >
                   {finalItems?.map((item, index) => (
                     <ReqoreCollectionItem

src/stories/Collection/Collection.stories.tsx

@@ -125,6 +125,16 @@ SelectedFirst.args = {
   showSelectedFirst: true,
 };
 
+export const CustomColumnsData = Template.bind({});
+CustomColumnsData.args = {
+  columns: 2,
+  columnsGap: '50px',
+  minColumnWidth: '100px',
+  maxColumnWidth: '200px',
+  items,
+  label: '2 columns of max 200px width with 50px gap',
+};
+
 export const CustomPropsAndTexts = Template.bind({});
 CustomPropsAndTexts.args = {
   label: 'Collection of items',