@spaced-out/ui-design-system 0.1.14 → 0.1.15

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.15](https://github.com/spaced-out/ui-design-system/compare/v0.1.14...v0.1.15) (2023-04-18)
+
+
+### Features
+
+* tooltips now support custom components ([1096cf8](https://github.com/spaced-out/ui-design-system/commit/1096cf8efb96f1fb321e3a4e372aeafa114f9f51))
+
+
+### Bug Fixes
+
+* export everything from dropdown ([b2bb628](https://github.com/spaced-out/ui-design-system/commit/b2bb6286362acccaca12f794711d2d12c895633b))
+* fixed imports ([af88522](https://github.com/spaced-out/ui-design-system/commit/af88522d227895bbf67f81157ed5395dde76e75c))
+
 ### [0.1.14](https://github.com/spaced-out/ui-design-system/compare/v0.1.13...v0.1.14) (2023-04-17)
 
 

package/lib/components/Tooltip/Tooltip.js

@@ -13,7 +13,6 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _mergeRefs = require("../../utils/merge-refs");
 var _string = require("../../utils/string");
-var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -87,12 +86,14 @@ const Tooltip = _ref => {
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: titleMaxLines
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: "inversePrimary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TooltipModule.default.title, classNames?.title)
   }, title)), !!body && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: bodyMaxLines
-  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
-    color: !title ? 'inversePrimary' : 'inverseSecondary'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TooltipModule.default.body, {
+      [_TooltipModule.default.hasTitle]: !!title
+    }, classNames?.body)
   }, body))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;

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

@@ -32,13 +32,12 @@ import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {mergeRefs} from '../../utils/merge-refs';
 import {capitalize} from '../../utils/string';
-import {BodyMedium, SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './Tooltip.module.css';
 
 
-type ClassNames = $ReadOnly<{tooltip?: string}>;
+type ClassNames = $ReadOnly<{tooltip?: string, title?: string, body?: string}>;
 
 export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',
@@ -147,19 +146,25 @@ export const Tooltip = ({
           >
             {!!title && (
               <Truncate line={titleMaxLines}>
-                <SubTitleExtraSmall color="inversePrimary">
+                <div className={classify(css.title, classNames?.title)}>
                   {title}
-                </SubTitleExtraSmall>
+                </div>
               </Truncate>
             )}
 
             {!!body && (
               <Truncate line={bodyMaxLines}>
-                <BodyMedium
-                  color={!title ? 'inversePrimary' : 'inverseSecondary'}
+                <div
+                  className={classify(
+                    css.body,
+                    {
+                      [css.hasTitle]: !!title,
+                    },
+                    classNames?.body,
+                  )}
                 >
                   {body}
-                </BodyMedium>
+                </div>
               </Truncate>
             )}
           </div>,

package/lib/components/Tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-@value (colorTooltipFill) from '../../styles/variables/_color.css';
+@value (colorTooltipFill, colorTextInversePrimary, colorTextInverseSecondary) from '../../styles/variables/_color.css';
 @value (size300) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
 @value (borderRadiusSmall) from '../../styles/variables/_border.css';
@@ -17,3 +17,17 @@
   word-wrap: break-word;
   z-index: var(--tooltip-elevation);
 }
+
+.title {
+  composes: subTitleExtraSmall from '../../styles/typography.module.css';
+  color: colorTextInversePrimary;
+}
+
+.body {
+  composes: bodyMedium from '../../styles/typography.module.css';
+  color: colorTextInversePrimary;
+}
+
+.hasTitle {
+  color: colorTextInverseSecondary;
+}

package/package.json

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