@spaced-out/ui-design-system 0.1.90 → 0.1.92

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.92](https://github.com/spaced-out/ui-design-system/compare/v0.1.91...v0.1.92) (2024-04-28)
+
+
+### Features
+
+* removing fixed grid styles, handling in css ([#197](https://github.com/spaced-out/ui-design-system/issues/197)) ([7a3bb7d](https://github.com/spaced-out/ui-design-system/commit/7a3bb7d6f2e4032c986bc3b7ad4f8f4a3a72318c))
+
+
+### Bug Fixes
+
+* passthrough isFuild ([#194](https://github.com/spaced-out/ui-design-system/issues/194)) ([e5a238b](https://github.com/spaced-out/ui-design-system/commit/e5a238bd5b3d6dbf26b80c2f950590aedadf95cd))
+
+### [0.1.91](https://github.com/spaced-out/ui-design-system/compare/v0.1.90...v0.1.91) (2024-04-24)
+
+
+### Bug Fixes
+
+* wraps hichchartsmore in a condition ([7213481](https://github.com/spaced-out/ui-design-system/commit/7213481d480f856813d2327fe4fbddd4cf8c4413))
+
 ### [0.1.90](https://github.com/spaced-out/ui-design-system/compare/v0.1.89...v0.1.90) (2024-04-24)
 
 

package/lib/components/Dropdown/SimpleDropdown.js

@@ -24,6 +24,7 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuClose,
     resolveLabel,
     resolveSecondaryLabel,
+    isMenuFluid = true,
     ...inputProps
   } = props;
   const [dropdownInputText, setDropdownInputText] = React.useState('');
@@ -66,7 +67,8 @@ const SimpleDropdownBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      size
+      size,
+      isFluid: isMenuFluid
     }
   }));
 };

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -33,6 +33,7 @@ export type SimpleDropdownProps = {
   optionsVariant?: MenuOptionsVariant,
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
+  isMenuFluid?: boolean,
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -59,6 +60,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     onMenuClose,
     resolveLabel,
     resolveSecondaryLabel,
+    isMenuFluid = true,
     ...inputProps
   } = props;
 
@@ -121,6 +123,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size,
+        isFluid: isMenuFluid,
       }}
     />
   );

package/lib/components/Grid/Grid.js

@@ -68,7 +68,8 @@ const Row = _ref => {
     "data-testid": "Grid",
     className: (0, _classify.classify)(_GridModule.default.gridRow, className),
     style: {
-      gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`
+      '--grid-repeat-count': gridRepeatCount,
+      '--repeat-tracks': repeatTracks
     }
   }, childrenWithProps);
 };
@@ -83,8 +84,8 @@ const Col = _ref2 => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_GridModule.default.gridColumn, className),
     style: {
-      gridColumnStart,
-      gridColumnEnd
+      '--grid-column-start': gridColumnStart,
+      '--grid-column-end': gridColumnEnd
     }
   }, children);
 };

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

@@ -74,7 +74,8 @@ export const Row = ({
       data-testid="Grid"
       className={classify(css.gridRow, className)}
       style={{
-        gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`,
+        '--grid-repeat-count': gridRepeatCount,
+        '--repeat-tracks': repeatTracks,
       }}
     >
       {childrenWithProps}
@@ -99,7 +100,10 @@ export const Col = ({
 }: ColProps): React.Node => (
   <div
     className={classify(css.gridColumn, className)}
-    style={{gridColumnStart, gridColumnEnd}}
+    style={{
+      '--grid-column-start': gridColumnStart,
+      '--grid-column-end': gridColumnEnd,
+    }}
   >
     {children}
   </div>

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

@@ -10,7 +10,10 @@
 ) from '../../styles/variables/_size.css';
 
 .gridRow {
+  --grid-repeat-count: 12;
+  --repeat-tracks: 1fr;
   display: grid !important;
+  grid-template-columns: repeat(var(--grid-repeat-count), var(--repeat-tracks));
   width: sizeFluid;
   height: sizeFluid;
   gap: spaceMedium;
@@ -24,6 +27,9 @@
 }
 
 .gridColumn {
+  --grid-column-start: auto;
+  --grid-column-end: span 1;
   display: flex;
   align-items: center;
+  grid-column: var(--grid-column-start) / var(--grid-column-end);
 }

package/lib/components/SpiderChart/SpiderChart.js

@@ -22,7 +22,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 //$FlowFixMe[untyped-import]
 
-(0, _highchartsMore.default)(_highcharts.default);
+if (!!_highchartsMore.default && !!_highcharts.default && typeof _highchartsMore.default === 'function' && typeof _highcharts.default === 'object') {
+  (0, _highchartsMore.default)(_highcharts.default);
+}
 const SpiderChart = _ref => {
   let {
     classNames,

package/lib/components/SpiderChart/SpiderChart.js.flow

@@ -20,7 +20,14 @@ import {ChartWrapper} from '../ChartWrapper';
 import css from './SpiderChart.module.css';
 
 
-highChartsMore(Highcharts);
+if (
+  !!highChartsMore &&
+  !!Highcharts &&
+  typeof highChartsMore === 'function' &&
+  typeof Highcharts === 'object'
+) {
+  highChartsMore(Highcharts);
+}
 
 type ClassNames = $ReadOnly<{
   ...ChartWrapperClassNames,

package/package.json

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