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

package/lib/components/Toggle/Toggle.js.flow

@@ -3,7 +3,6 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
-import {FormLabelMedium} from '../Text/Text';
 
 import css from './Toggle.module.css';
 
@@ -25,10 +24,11 @@ export type ToggleProps = {
   disabled?: boolean,
   focused?: boolean,
   value?: string,
+  ariaLabel?: string,
 };
 
-export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
-  React.forwardRef<ToggleProps, HTMLLabelElement>(
+export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
+  React.forwardRef<ToggleProps, HTMLInputElement>(
     (
       {
         name = 'toggle',
@@ -39,11 +39,13 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         checked,
         focused,
         onChange,
+        ariaLabel,
         ...props
       }: ToggleProps,
-      ref,
+      forwardRef,
     ): React.Node => {
       const toggleInput = React.createRef<HTMLInputElement>();
+      React.useImperativeHandle(forwardRef, () => toggleInput.current);
       const handleOnChange = () => {
         if (!disabled) {
           onChange &&
@@ -54,13 +56,17 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         }
       };
 
+      const onWrapClickHandler = () => {
+        toggleInput.current?.click();
+      };
+
       React.useEffect(() => {
         if (toggleInput.current && focused) {
           toggleInput.current.focus();
         }
       }, [focused]);
       return (
-        <label
+        <div
           className={classify(
             css.container,
             {
@@ -68,7 +74,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             },
             classNames?.wrapper,
           )}
-          ref={ref}
+          onClick={onWrapClickHandler}
         >
           <span className={css.toggleWrap}>
             <input
@@ -79,6 +85,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
               onChange={handleOnChange}
               ref={toggleInput}
               disabled={disabled}
+              aria-label={ariaLabel || children}
               {...props}
             />
             <span
@@ -88,14 +95,11 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             />
           </span>
           {React.Children.count(children) > 0 && (
-            <FormLabelMedium
-              color="secondary"
-              className={classify(css.toggleLabel, classNames?.label)}
-            >
+            <div className={classify(css.toggleLabel, classNames?.label)}>
               {children}
-            </FormLabelMedium>
+            </div>
           )}
-        </label>
+        </div>
       );
     },
   );

package/lib/components/Toggle/Toggle.module.css

@@ -138,5 +138,7 @@
 }
 
 .toggleLabel {
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
   margin-left: spaceNone;
 }

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/lib/utils/click-away.js.flow

@@ -16,7 +16,7 @@ export type ChildProps = {
   anchorRef: (?HTMLElement) => mixed,
 };
 
-type ClickAwayProps = {
+export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
   shouldCancel: (event: MouseEvent) => boolean,

package/package.json

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