@spaced-out/ui-design-system 0.1.66 → 0.1.68

package/.cspell/custom-words.txt

@@ -46,6 +46,7 @@ proxysense
 rerouter
 rgba
 sbdocs
+senseai
 Stapleton
 storysource
 superrover
@@ -59,6 +60,7 @@ Typeahead
 typeof
 valuenow
 Verda
+vish
 xmark
 yourcomponentname
 yxxx

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.68](https://github.com/spaced-out/ui-design-system/compare/v0.1.67...v0.1.68) (2023-12-04)
+
+
+### Features
+
+* bulk action buttons and table inline edit ([#155](https://github.com/spaced-out/ui-design-system/issues/155)) ([7ae82fc](https://github.com/spaced-out/ui-design-system/commit/7ae82fc6f3fba77f53d7a2269d7a4df675c6d69f))
+
+
+### Bug Fixes
+
+* circular loader extra space ([#154](https://github.com/spaced-out/ui-design-system/issues/154)) ([a6ce232](https://github.com/spaced-out/ui-design-system/commit/a6ce2326edc4ce7779471f171d70ba2f33203cfc))
+
+### [0.1.67](https://github.com/spaced-out/ui-design-system/compare/v0.1.66...v0.1.67) (2023-11-10)
+
+
+### Features
+
+* tooltip now accepts elevation as an enum ([c2c2548](https://github.com/spaced-out/ui-design-system/commit/c2c254895e343cfcfe336b416d5341ac06d07ba6))
+
+
+### Bug Fixes
+
+* add senseai to side menu link ([#151](https://github.com/spaced-out/ui-design-system/issues/151)) ([fec9cab](https://github.com/spaced-out/ui-design-system/commit/fec9cab34a2be35e89ce4c72968451ae6cac3444))
+* button overflow fix ([#153](https://github.com/spaced-out/ui-design-system/issues/153)) ([932ea91](https://github.com/spaced-out/ui-design-system/commit/932ea91a5d75c3044998efb6bf4f0e27357dd8e9))
+* table column fixes ([4aefc17](https://github.com/spaced-out/ui-design-system/commit/4aefc175d6f24b7fd6eea425f68f38712f478488))
+
 ### [0.1.66](https://github.com/spaced-out/ui-design-system/compare/v0.1.65...v0.1.66) (2023-11-06)
 
 

package/design-tokens/color/app-color.json

@@ -105,6 +105,20 @@
       "value": "{baseColor.indigo.940.70.value}"
     },
     "button-fill": {
+      "tableAction": {
+        "enabled": {
+          "value": "{baseColor.purple.600.value}"
+        },
+        "hovered": {
+          "value": "{baseColor.purple.700.value}"
+        },
+        "pressed": {
+          "value": "{baseColor.purple.700.value}"
+        },
+        "border": {
+          "value": "{baseColor.purple.400.value}"
+        }
+      },
       "primary": {
         "enabled": {
           "value": "{baseColor.purple.500.value}"

package/design-tokens/size/base-size.json

@@ -129,6 +129,9 @@
     "960": {
       "value": "960px"
     },
+    "1280": {
+      "value": "1280px"
+    },
     "fluid": {
       "value": "100%"
     },

package/lib/components/Button/Button.js

@@ -111,7 +111,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.buttonRow
   }, !(iconLeftName || iconRightName) ? /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainer
+    className: (0, _classify.classify)(_ButtonModule.default.textContainer, classNames?.text)
   }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
@@ -147,7 +147,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [_ButtonModule.default.hidden]: isLoading
     }, classNames?.icon)
   }), /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainer
+    className: (0, _classify.classify)(_ButtonModule.default.textContainer, classNames?.text)
   }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.loader
   }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {

package/lib/components/Button/Button.js.flow

@@ -11,7 +11,7 @@ import {Truncate} from '../Truncate';
 import css from './Button.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
 
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
@@ -162,7 +162,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         <div className={css.buttonRow}>
           {/* Has no icon, only child */}
           {!(iconLeftName || iconRightName) ? (
-            <div className={css.textContainer}>
+            <div className={classify(css.textContainer, classNames?.text)}>
               {isLoading && (
                 <div className={css.loader}>
                   <CircularLoader
@@ -223,7 +223,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       )}
                     />
                   )}
-                  <div className={css.textContainer}>
+                  <div className={classify(css.textContainer, classNames?.text)}>
                     {isLoading && (
                       <div className={css.loader}>
                         <CircularLoader

package/lib/components/CircularLoader/CircularLoader.module.css

@@ -15,27 +15,29 @@
 @value spinnerSize: size60;
 @value spinnerThickness: size5;
 
-@value innerCircleSize: calc(spinnerSize - 2 * spinnerThickness);
-
-@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - spinnerThickness), colorFillPrimary calc(100% - spinnerThickness));
+@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - var(--spinner-thickness)), colorFillPrimary calc(100% - var(--spinner-thickness)));
 
 .container {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  --spinner-size: spinnerSize;
+  --spinner-thickness: spinnerThickness;
 }
 
 .mediumContainer {
-  transform: scale(0.5);
+  --spinner-size: calc(0.5 * spinnerSize);
+  --spinner-thickness: calc(0.5 * spinnerThickness);
 }
 
 .smallContainer {
-  transform: scale(0.36);
+  --spinner-size: calc(0.36 * spinnerSize);
+  --spinner-thickness: calc(0.36 * spinnerThickness);
 }
 
 .spinLoader {
-  height: spinnerSize;
-  width: spinnerSize;
+  height: var(--spinner-size);
+  width: var(--spinner-size);
   display: block;
   position: relative;
   animation: spin motionDurationSlowest linear 0s infinite normal;
@@ -46,9 +48,9 @@
   --color: colorFillPrimary;
   display: block;
   position: absolute;
-  border-radius: calc(spinnerSize/2);
-  height: spinnerSize;
-  width: spinnerSize;
+  border-radius: calc(var(--spinner-size) / 2);
+  height: var(--spinner-size);
+  width: var(--spinner-size);
   top: spaceNone;
   right: spaceNone;
   background: conic-gradient(
@@ -63,18 +65,20 @@
 .ellipse {
   --color: colorFillPrimary;
   position: absolute;
-  left: calc(spinnerSize - spinnerThickness);
   right: spaceNone;
   top: spaceNone;
   bottom: spaceNone;
-  border-radius: calc(spinnerThickness/2);
-  height: spinnerThickness;
-  width: spinnerThickness;
+  border-radius: calc(var(--spinner-thickness) / 2);
+  height: var(--spinner-thickness);
+  width: var(--spinner-thickness);
   margin: auto;
   background: var(--color);
 }
 
 @keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
   to {
     transform: rotate(360deg);
   }

package/lib/components/Icon/SemanticIcon.js

@@ -23,6 +23,7 @@ const SemanticIcon = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!iconProps.name && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, iconProps, {
+    className: (0, _classify.default)(iconProps.className, classNames?.icon),
     color: _typography.TEXT_COLORS[semantic],
     type: type
   }))));

package/lib/components/Icon/SemanticIcon.js.flow

@@ -35,7 +35,12 @@ export const SemanticIcon = ({
           classNames?.wrapper,
         )}
       >
-        <Icon {...iconProps} color={TEXT_COLORS[semantic]} type={type} />
+        <Icon
+          {...iconProps}
+          className={classify(iconProps.className, classNames?.icon)}
+          color={TEXT_COLORS[semantic]}
+          type={type}
+        />
       </div>
     )}
   </>

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -17,98 +17,87 @@ const MENU_NAME_LIST = Object.freeze({
   dashboard: {
     title: 'Dashboard',
     iconName: 'house',
-    iconType: 'duotone',
-    iconSwapOpacity: false
+    iconType: 'duotone'
   },
   engage: {
     title: 'Engage',
     iconName: 'bullseye-pointer',
-    iconType: 'duotone',
-    iconSwapOpacity: false
+    iconType: 'duotone'
   },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   analytics: {
     title: 'Analytics',
     iconName: 'chart-column',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   messaging: {
     title: 'Messaging',
     iconName: 'messages',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   records: {
     title: 'Records',
     iconName: 'folder-open',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   bulkCleanup: {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   support: {
     title: 'Support',
     iconName: 'headset',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   audit: {
     title: 'Audit',
     iconName: 'print-magnifying-glass',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   timeline: {
     title: 'Timeline',
     iconName: 'timeline',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   people: {
     title: 'People',
     iconName: 'people-group',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts: {
     title: 'Contacts',
     iconName: 'address-card',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts2: {
     title: 'Contacts',
     iconName: 'calendars',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
   },
   contacts3: {
     title: 'Contacts',
     iconName: 'browser',
-    iconType: 'duotone',
-    iconSwapOpacity: true
+    iconType: 'duotone'
+  },
+  senseai: {
+    title: 'AI Copilot',
+    iconName: 'sparkles',
+    iconType: 'duotone'
   }
 });
 exports.MENU_NAME_LIST = MENU_NAME_LIST;
@@ -122,8 +111,8 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange
   } = _ref;
   const selected = selectedValue === pageNameKey;
-  const onChangeHandler = () => {
-    onChange && onChange(pageNameKey);
+  const onChangeHandler = e => {
+    onChange && onChange(e, pageNameKey);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -14,97 +14,86 @@ export const MENU_NAME_LIST = Object.freeze({
     title: 'Dashboard',
     iconName: 'house',
     iconType: 'duotone',
-    iconSwapOpacity: false,
   },
   engage: {
     title: 'Engage',
     iconName: 'bullseye-pointer',
     iconType: 'duotone',
-    iconSwapOpacity: false,
   },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   analytics: {
     title: 'Analytics',
     iconName: 'chart-column',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   messaging: {
     title: 'Messaging',
     iconName: 'messages',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   records: {
     title: 'Records',
     iconName: 'folder-open',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   bulkCleanup: {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   support: {
     title: 'Support',
     iconName: 'headset',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   audit: {
     title: 'Audit',
     iconName: 'print-magnifying-glass',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   timeline: {
     title: 'Timeline',
     iconName: 'timeline',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   people: {
     title: 'People',
     iconName: 'people-group',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts: {
     title: 'Contacts',
     iconName: 'address-card',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts2: {
     title: 'Contacts',
     iconName: 'calendars',
     iconType: 'duotone',
-    iconSwapOpacity: true,
   },
   contacts3: {
     title: 'Contacts',
     iconName: 'browser',
     iconType: 'duotone',
-    iconSwapOpacity: true,
+  },
+  senseai: {
+    title: 'AI Copilot',
+    iconName: 'sparkles',
+    iconType: 'duotone',
   },
 });
 
@@ -118,7 +107,7 @@ export type SideMenuLinkProps = {
   hovered?: boolean,
   selectedValue?: string,
   opened?: boolean,
-  onChange?: (newValue: string) => mixed,
+  onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
 };
 
 export const SideMenuLink: React$AbstractComponent<
@@ -137,8 +126,8 @@ export const SideMenuLink: React$AbstractComponent<
     ref,
   ): React.Node => {
     const selected = selectedValue === pageNameKey;
-    const onChangeHandler = () => {
-      onChange && onChange(pageNameKey);
+    const onChangeHandler = (e: SyntheticEvent<HTMLElement>) => {
+      onChange && onChange(e, pageNameKey);
     };
     return (
       <div