@spaced-out/ui-design-system 0.3.14 → 0.3.15

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.3.15](https://github.com/spaced-out/ui-design-system/compare/v0.3.14...v0.3.15) (2024-12-20)
+
+
+### Features
+
+* added tooltip to avatarGroup ([#310](https://github.com/spaced-out/ui-design-system/issues/310)) ([5ed558a](https://github.com/spaced-out/ui-design-system/commit/5ed558aef65f29a82e9ae0f5f130eb00fb444830))
+
+
+### Bug Fixes
+
+* fixed content design fixes ([#309](https://github.com/spaced-out/ui-design-system/issues/309)) ([120de80](https://github.com/spaced-out/ui-design-system/commit/120de8085a731009d6a920c0b8bc11848b3472f4))
+* updated docs for dismissable ([8c5dcbe](https://github.com/spaced-out/ui-design-system/commit/8c5dcbe9bb7140e4c7bf5dbb29dbd784f9579b51))
+* uses a design token ([a01d821](https://github.com/spaced-out/ui-design-system/commit/a01d82193f4738a25384172e77e2c53d82480143))
+
 ### [0.3.14](https://github.com/spaced-out/ui-design-system/compare/v0.3.13...v0.3.14) (2024-12-19)
 
 

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -36,13 +36,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let colorIndex = -1;
   const avatarInGroup = (child, index, color) => {
     const {
-      classNames
+      classNames,
+      text
     } = child.props;
     const {
       wrapper,
       ...restClassNames
     } = classNames || {};
-    return /*#__PURE__*/React.cloneElement(child, {
+    const avatar = /*#__PURE__*/React.cloneElement(child, {
       size,
       classNames: {
         wrapper: (0, _classify.default)(_AvatarGroupModule.default.avatarInGroup, wrapper),
@@ -54,6 +55,11 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       color
     });
+    return text ? /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+      body: text,
+      placement: placement,
+      elevation: tooltipElevation
+    }, avatar) : avatar;
   };
   const childrenArray = React.Children.toArray(children);
   const totalAvatarCount = childrenArray.length;

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -57,9 +57,9 @@ export const AvatarGroup: React$AbstractComponent<
     let colorIndex = -1;
 
     const avatarInGroup = (child, index, color) => {
-      const {classNames} = child.props;
+      const {classNames, text} = child.props;
       const {wrapper, ...restClassNames} = classNames || {};
-      return React.cloneElement(child, {
+      const avatar = React.cloneElement(child, {
         size,
         classNames: {
           wrapper: classify(css.avatarInGroup, wrapper),
@@ -71,6 +71,13 @@ export const AvatarGroup: React$AbstractComponent<
         },
         color,
       });
+      return text ? (
+        <Tooltip body={text} placement={placement} elevation={tooltipElevation}>
+          {avatar}
+        </Tooltip>
+      ) : (
+        avatar
+      );
     };
 
     const childrenArray = React.Children.toArray(children);

package/lib/components/ChatBubble/ChatBubble.module.css

@@ -1,5 +1,6 @@
 @value (
   spaceNone,
+  spaceXXSmall,
   spaceXSmall,
   spaceSmall
 ) from '../../styles/variables/_space.css';
@@ -49,12 +50,14 @@
 .chatContentWrapper {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: spaceXSmall;
   border: borderWidthPrimary solid colorBorderPrimary;
   border-radius: borderRadiusSmall;
   background-color: colorBackgroundTertiary;
-  padding: spaceSmall;
+  padding: spaceXSmall spaceSmall;
   max-width: size580;
+  min-height: size42;
 }
 
 .chatBodyWrapper {
@@ -64,6 +67,8 @@
 
 .chatBodyWrapperBgColor {
   background-color: colorNeutralLightest;
+  margin-top: spaceXXSmall;
+  word-wrap: break-word;
 }
 
 .chatBodyWrapperLoading {

package/lib/components/PromptChip/PromptChip.js

@@ -27,7 +27,7 @@ const PromptChip = /*#__PURE__*/React.forwardRef((props, ref) => {
     iconType = _Icon.ICON_TYPE.solid,
     iconName = 'lightbulb',
     children,
-    iconColor = 'clickable',
+    iconColor,
     rightSlot,
     onDismiss,
     classNames,
@@ -56,7 +56,7 @@ const PromptChip = /*#__PURE__*/React.forwardRef((props, ref) => {
     role: "button"
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_PromptChipModule.default.promptChipContainer, {
-      [_PromptChipModule.default.onHover]: !!onClick
+      [_PromptChipModule.default.promptChipContainerHover]: !!onClick
     }, classNames?.container)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PromptChipModule.default.leftSection
@@ -65,7 +65,9 @@ const PromptChip = /*#__PURE__*/React.forwardRef((props, ref) => {
     name: iconName,
     type: iconType,
     color: iconColor,
-    className: classNames?.icon
+    className: (0, _classify.classify)({
+      [_PromptChipModule.default.chipIconDefaultColor]: !iconColor
+    }, classNames?.icon)
   }), !!children && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children)
   }, children)), /*#__PURE__*/React.createElement("div", {

package/lib/components/PromptChip/PromptChip.js.flow

@@ -58,7 +58,7 @@ export const PromptChip: React$AbstractComponent<
       iconType = ICON_TYPE.solid,
       iconName = 'lightbulb',
       children,
-      iconColor = 'clickable',
+      iconColor,
       rightSlot,
       onDismiss,
       classNames,
@@ -98,7 +98,7 @@ export const PromptChip: React$AbstractComponent<
               className={classify(
                 css.promptChipContainer,
                 {
-                  [css.onHover]: !!onClick,
+                  [css.promptChipContainerHover]: !!onClick,
                 },
                 classNames?.container,
               )}
@@ -109,7 +109,12 @@ export const PromptChip: React$AbstractComponent<
                   name={iconName}
                   type={iconType}
                   color={iconColor}
-                  className={classNames?.icon}
+                  className={classify(
+                    {
+                      [css.chipIconDefaultColor]: !iconColor,
+                    },
+                    classNames?.icon,
+                  )}
                 />
                 {!!children && (
                   <div

package/lib/components/PromptChip/PromptChip.module.css

@@ -4,10 +4,12 @@
     spaceFluid
 ) from '../../styles/variables/_space.css';
 @value (
+    colorDataViz2,
     colorFillPrimary,
     colorInformation,
     colorFocusPrimary,
     colorFillSecondary,
+    colorTextClickable,
     colorNeutralLightest,
     colorBackgroundTertiary,
     colorInformationLightest
@@ -24,6 +26,7 @@
  ) from '../../styles/variables/_opacity.css';
 
 .promptChipWrapper {
+  composes: boxShadow2 from '../../styles/shadow.module.css';
   display: flex;
   border-radius: borderRadiusMedium;
   outline: none;
@@ -50,15 +53,6 @@
   background-color: colorNeutralLightest;
 }
 
-.onHover:hover {
-  background-image: linear-gradient(
-    to right,
-    colorFillSecondary,
-    colorInformationLightest
-  );
-  cursor: pointer;
-}
-
 .promptChipContainer {
   display: flex;
   width: spaceFluid;
@@ -68,6 +62,23 @@
   align-items: center;
   border-radius: borderRadiusMedium;
   justify-content: space-between;
+
+  & .chipIconDefaultColor {
+    color: colorDataViz2;
+  }
+}
+
+.promptChipContainerHover:hover {
+  background-image: linear-gradient(
+    to right,
+    colorFillSecondary,
+    colorInformationLightest
+  );
+  cursor: pointer;
+
+  & .chipIconDefaultColor {
+    color: colorTextClickable;
+  }
 }
 
 .leftSection,

package/lib/components/PromptInput/PromptInput.module.css

@@ -43,7 +43,7 @@
 .textarea {
   width: sizeFluid;
   max-height: size200;
-  min-height: 100%;
+  min-height: sizeFluid;
 }
 
 .secondaryRow {

package/lib/components/TextTile/TextTile.module.css

@@ -6,6 +6,7 @@
   colorFillPrimary,
   colorInformation
 ) from '../../styles/variables/_color.css';
+@value (size44) from '../../styles/variables/_size.css';
 
 .textTileWrapper {
   display: flex;
@@ -18,6 +19,7 @@
   display: flex;
   gap: spaceXSmall;
   justify-content: center;
+  margin-left: calc(-1 * size44);
 }
 
 .sparkles {

package/package.json

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