@spaced-out/ui-design-system 0.1.73 → 0.1.75

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.75](https://github.com/spaced-out/ui-design-system/compare/v0.1.74...v0.1.75) (2024-01-10)
+
+
+### Features
+
+* new panel background, table inline edit fixes and breadcrumb example ([9339852](https://github.com/spaced-out/ui-design-system/commit/9339852c1c23814df1d28bfec0e31fb355d337b9))
+
+
+### Bug Fixes
+
+* tablist example sizing fix ([138c023](https://github.com/spaced-out/ui-design-system/commit/138c023df80dfb81d4f4b6b38929e5b09d18798d))
+
+### [0.1.74](https://github.com/spaced-out/ui-design-system/compare/v0.1.73...v0.1.74) (2024-01-04)
+
+
+### Bug Fixes
+
+* removed width of tablist container story ([caadaf6](https://github.com/spaced-out/ui-design-system/commit/caadaf69dfbc3c16598192719473d5b06cf8ae65))
+* support window resize for tablist ([#156](https://github.com/spaced-out/ui-design-system/issues/156)) ([8c2990a](https://github.com/spaced-out/ui-design-system/commit/8c2990a3e862ebac43a75cc026754584260c6aaa))
+
 ### [0.1.73](https://github.com/spaced-out/ui-design-system/compare/v0.1.72...v0.1.73) (2024-01-02)
 
 

package/lib/components/Panel/Panel.module.css

@@ -1,7 +1,7 @@
 @value (spaceNegFluid, spaceNone, spaceMedium, spaceSmall, spaceFluid) from '../../styles/variables/_space.css';
 @value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
-@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackgroundSecondary) from '../../styles/variables/_color.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
 @value (borderRadiusNone) from '../../styles/variables/_border.css';
 
 .panel {
@@ -62,7 +62,7 @@
   padding: spaceMedium;
   height: sizeFluid;
   overflow: auto;
-  background-color: colorBackgroundSecondary;
+  background-color: colorBackgroundPrimary;
 }
 
 .panelFooter {

package/lib/components/Tabs/TabList/TabList.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabList = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useWindowSize = require("../../../hooks/useWindowSize/useWindowSize");
 var _size = require("../../../styles/variables/_size");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
@@ -25,6 +26,9 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
   const [containerWidth, setContainerWidth] = React.useState(0);
   const childrenWithProps = () => {
     const childrenArray = React.Children.toArray(children);
@@ -113,7 +117,8 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
       setContainerWidth(availableContainerWidth);
     }
-  }, [ref.current]);
+    // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
+  }, [ref.current, width]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": "Tabs",

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
 import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
@@ -37,6 +38,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
     ): React.Node => {
       const ref = React.useRef(null);
       React.useImperativeHandle(forwardRef, () => ref.current);
+      const {width} = useWindowSize();
 
       const [containerWidth, setContainerWidth] = React.useState(0);
 
@@ -132,7 +134,8 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
             (parseInt(size36) + parseInt(spaceMedium));
           setContainerWidth(availableContainerWidth);
         }
-      }, [ref.current]);
+        // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
+      }, [ref.current, width]);
 
       return (
         <div

package/package.json

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