@spaced-out/ui-design-system 0.1.84 → 0.1.86

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.86](https://github.com/spaced-out/ui-design-system/compare/v0.1.85...v0.1.86) (2024-04-19)
+
+
+### Features
+
+* [GDS-362] adding responsive grid ([#190](https://github.com/spaced-out/ui-design-system/issues/190)) ([313c5c8](https://github.com/spaced-out/ui-design-system/commit/313c5c8b58502eae3bd95324f7cbdaad1b1f4d58))
+
+### [0.1.85](https://github.com/spaced-out/ui-design-system/compare/v0.1.84...v0.1.85) (2024-04-18)
+
+
+### Bug Fixes
+
+* floating dom issue tooltip ([#188](https://github.com/spaced-out/ui-design-system/issues/188)) ([8ad85e2](https://github.com/spaced-out/ui-design-system/commit/8ad85e2d683a8bba4ae6ec013e110e4ebdccec81))
+
 ### [0.1.84](https://github.com/spaced-out/ui-design-system/compare/v0.1.83...v0.1.84) (2024-04-10)
 
 

package/lib/components/Grid/Grid.js

@@ -14,16 +14,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
-  large: 6
+  large: 6,
+  autoFill: 'auto-fill'
 };
 const Row = _ref => {
   let {
     className,
     children,
     span = 1,
-    gridType = 'medium'
+    gridType = 'medium',
+    repeatTracks = '1fr'
   } = _ref;
-  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
   let columnSpanCount = 0;
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, child => {
@@ -42,21 +44,30 @@ const Row = _ref => {
       }
       lastChildColCount = columnSpanCount;
       columnSpanCount = lastChildColCount + offset + span;
-      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+      if (gridType === 'autoFill') {
+        gridColumnStart = 'auto';
         return /*#__PURE__*/React.cloneElement(child, {
-          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`
+        });
+      } else if (typeof gridRepeatCount === 'number' && columnSpanCount <= gridRepeatCount) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return /*#__PURE__*/React.cloneElement(child, {
+          gridColumnStart,
           gridColumnEnd: `span ${span}`
         });
       } else {
-        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+        console.error(`number of column exceed ${gridRepeatCount}`);
       }
     }
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Grid",
-    className: (0, _classify.classify)(_GridModule.default.gridRow, _GridModule.default[`gridRowSpan${span}`], className),
+    className: (0, _classify.classify)(_GridModule.default.gridRow, className),
     style: {
-      gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`
+      gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`
     }
   }, childrenWithProps);
 };

package/lib/components/Grid/Grid.js.flow

@@ -11,13 +11,15 @@ export type RowProps = {
   children?: React.Node,
   span?: number,
   offset?: number,
-  gridType?: 'small' | 'medium' | 'large',
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill',
+  repeatTracks?: string,
 };
 
 const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
   large: 6,
+  autoFill: 'auto-fill',
 };
 
 export const Row = ({
@@ -25,8 +27,9 @@ export const Row = ({
   children,
   span = 1,
   gridType = 'medium',
+  repeatTracks = '1fr',
 }: RowProps): React.Node => {
-  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
   let columnSpanCount = 0;
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, (child) => {
@@ -42,13 +45,25 @@ export const Row = ({
       }
       lastChildColCount = columnSpanCount;
       columnSpanCount = lastChildColCount + offset + span;
-      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+      if (gridType === 'autoFill') {
+        gridColumnStart = 'auto';
         return React.cloneElement(child, {
-          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else if (
+        typeof gridRepeatCount === 'number' &&
+        columnSpanCount <= gridRepeatCount
+      ) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return React.cloneElement(child, {
+          gridColumnStart,
           gridColumnEnd: `span ${span}`,
         });
       } else {
-        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+        console.error(`number of column exceed ${gridRepeatCount}`);
       }
     }
   });
@@ -56,8 +71,10 @@ export const Row = ({
   return (
     <div
       data-testid="Grid"
-      className={classify(css.gridRow, css[`gridRowSpan${span}`], className)}
-      style={{gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`}}
+      className={classify(css.gridRow, className)}
+      style={{
+        gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`,
+      }}
     >
       {childrenWithProps}
     </div>

package/lib/components/Grid/Grid.module.css

@@ -12,7 +12,6 @@
 .gridRow {
   display: grid !important;
   width: sizeFluid;
-  min-width: size960;
   height: sizeFluid;
   gap: spaceMedium;
   padding: spaceNone spaceLarge;
@@ -20,7 +19,7 @@
   grid-auto-columns: 1fr;
   grid-column-gap: spaceMedium;
   grid-row-gap: spaceMedium;
-  grid-auto-rows: sizeFluid;
+  grid-auto-rows: auto;
   box-sizing: border-box;
 }
 

package/lib/components/Tooltip/Tooltip.js

@@ -88,7 +88,7 @@ const Tooltip = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
+  })), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
     ref: refs.setFloating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {

package/lib/components/Tooltip/Tooltip.js.flow

@@ -158,8 +158,9 @@ export const Tooltip = ({
           ...children.props,
         }),
       )}
-      <FloatingPortal>
-        {isOpen && (
+
+      {isOpen && (
+        <FloatingPortal>
           <>
             {!hidden && (
               <div
@@ -198,8 +199,8 @@ export const Tooltip = ({
               </div>
             )}
           </>
-        )}
-      </FloatingPortal>
+        </FloatingPortal>
+      )}
     </>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {