@spaced-out/ui-design-system 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.13](https://github.com/spaced-out/ui-design-system/compare/v0.1.12...v0.1.13) (2023-04-14)
+
+
+### Features
+
+* added escape button capabilities to click-away ([#99](https://github.com/spaced-out/ui-design-system/issues/99)) ([79cff71](https://github.com/spaced-out/ui-design-system/commit/79cff71912d3e92d9ea12c95f543aa3c623df143))
+
+
+### Bug Fixes
+
+* docs update ([78756c0](https://github.com/spaced-out/ui-design-system/commit/78756c066afdcd2574e8eaa70db94c3ddc638cf2))
+* docs update ([10ac5a6](https://github.com/spaced-out/ui-design-system/commit/10ac5a69d98744f16540efb61d9b1fdce5a2620f))
+* fixed elevation story ([ef5cf99](https://github.com/spaced-out/ui-design-system/commit/ef5cf99f3655edb606ec6141701f596759cb0713))
+* removed file extensions ([1e9b6fa](https://github.com/spaced-out/ui-design-system/commit/1e9b6fade3557f55baf9ba37c6dbc49bb180b7bc))
+* stories docs reuired optional props fix ([bdf9592](https://github.com/spaced-out/ui-design-system/commit/bdf959298f5c77890ac3f7c62c74960b4a6ce738))
+* support button classnames in button dropdown ([#100](https://github.com/spaced-out/ui-design-system/issues/100)) ([26c68f7](https://github.com/spaced-out/ui-design-system/commit/26c68f7f8aa1264cf1868bd250021767b888f4d2))
+* truncate word break changes ([#98](https://github.com/spaced-out/ui-design-system/issues/98)) ([0ff5cc1](https://github.com/spaced-out/ui-design-system/commit/0ff5cc1cc730350e449d9d42015b57a46ad5a302))
+
 ### [0.1.12](https://github.com/spaced-out/ui-design-system/compare/v0.1.11...v0.1.12) (2023-04-12)
 
 

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

@@ -6,6 +6,9 @@
     "card": {
       "value": "{baseElevation.4.value}"
     },
+    "tooltip": {
+      "value": "{baseElevation.4.value}"
+    },
     "menu": {
       "value": "{baseElevation.12.value}"
     },
@@ -17,9 +20,6 @@
     },
     "toast": {
       "value": "{baseElevation.60.value}"
-    },
-    "tooltip": {
-      "value": "{baseElevation.4.value}"
     }
   }
 }

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -86,7 +86,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       },
       isFluid: isFluid,
       classNames: {
-        wrapper: classNames?.buttonWrapper
+        wrapper: classNames?.buttonWrapper,
+        icon: classNames?.buttonIcon
       }
     }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -39,6 +39,7 @@ export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
 type ClassNames = $ReadOnly<{
   buttonWrapper?: string,
   dropdownContainer?: string,
+  buttonIcon?: string,
 }>;
 
 export type ButtonDropdownProps = {
@@ -117,7 +118,10 @@ export const ButtonDropdown: React$AbstractComponent<
                 onOpen();
               }}
               isFluid={isFluid}
-              classNames={{wrapper: classNames?.buttonWrapper}}
+              classNames={{
+                wrapper: classNames?.buttonWrapper,
+                icon: classNames?.buttonIcon,
+              }}
             >
               {children}
             </Button>

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -44,7 +44,7 @@ type InContextAlertBaseProps = {
 
 export type InContextAlertProps = {
   ...InContextAlertBaseProps,
-  semantic: AlertSemanticType,
+  semantic?: AlertSemanticType,
   leftIconName?: string,
   leftIconType?: IconType,
 };

package/lib/components/OptionButton/OptionButton.js.flow

@@ -13,7 +13,7 @@ import css from './OptionButton.module.css';
 
 export type OptionButtonProps = {
   ...ButtonProps,
-  menu: MenuProps,
+  menu?: MenuProps,
   anchorPosition?: AnchorType,
   onOptionSelect?: (option: MenuOption) => mixed,
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,

package/lib/components/Pagination/PaginationItem.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.PaginationItem = exports.PaginationButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Button = require("../Button/Button.js");
-var _Text = require("../Text/Text.js");
+var _Button = require("../Button");
+var _Text = require("../Text");
 var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/components/Pagination/PaginationItem.js.flow

@@ -3,10 +3,10 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
-import {Button} from '../Button/Button.js';
-import {ButtonTextSmall} from '../Text/Text.js';
+import {Button} from '../Button';
+import {ButtonTextSmall} from '../Text';
 
-import type {PaginationItemProps} from './Pagination.js';
+import type {PaginationItemProps} from './Pagination';
 
 import css from './Pagination.module.css';
 

package/lib/components/Truncate/Truncate.js

@@ -15,12 +15,15 @@ const BaseTruncate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     line = 1,
-    showFullTextOnHover = false
+    showFullTextOnHover = false,
+    wordBreak = 'break-all',
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement("span", {
-    className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp),
+    className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
     style: {
-      WebkitLineClamp: `${line}`
+      '--line-clamp': line,
+      '--word-break': wordBreak
     },
     title: showFullTextOnHover ? children : '',
     ref: ref
@@ -31,7 +34,9 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     line = 1,
-    showFullTextOnHover = false
+    showFullTextOnHover = false,
+    wordBreak = 'break-all',
+    className: truncateClassName
   } = _ref2;
   const arrayChildren = React.Children.toArray(children);
   if (arrayChildren.length) {
@@ -42,9 +47,10 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         children
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
-        className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
+        className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className, truncateClassName),
         style: {
-          WebkitLineClamp: `${line}`
+          '--line-clamp': line,
+          '--word-break': wordBreak
         },
         title: showFullTextOnHover ? children : '',
         ref
@@ -53,7 +59,9 @@ const Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     return /*#__PURE__*/React.createElement(BaseTruncate, {
       line: line,
       showFullTextOnHover: showFullTextOnHover,
-      ref: ref
+      ref: ref,
+      wordBreak: wordBreak,
+      className: truncateClassName
     }, children);
   }
   return null;

package/lib/components/Truncate/Truncate.js.flow

@@ -11,6 +11,8 @@ export type TruncateProps = {
   children?: React.Node,
   line?: number,
   showFullTextOnHover?: boolean,
+  wordBreak?: string,
+  className?: string,
 };
 
 export const BaseTruncate: React$AbstractComponent<
@@ -18,12 +20,18 @@ export const BaseTruncate: React$AbstractComponent<
   HTMLSpanElement,
 > = React.forwardRef<TruncateProps, HTMLSpanElement>(
   (
-    {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+    {
+      children,
+      line = 1,
+      showFullTextOnHover = false,
+      wordBreak = 'break-all',
+      className,
+    }: TruncateProps,
     ref,
   ): React.Node => (
     <span
-      className={classify(css.truncateLineClamp)}
-      style={{WebkitLineClamp: `${line}`}}
+      className={classify(css.truncateLineClamp, className)}
+      style={{'--line-clamp': line, '--word-break': wordBreak}}
       title={showFullTextOnHover ? children : ''}
       ref={ref}
     >
@@ -35,7 +43,13 @@ export const BaseTruncate: React$AbstractComponent<
 export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
   React.forwardRef<TruncateProps, HTMLSpanElement>(
     (
-      {children, line = 1, showFullTextOnHover = false}: TruncateProps,
+      {
+        children,
+        line = 1,
+        showFullTextOnHover = false,
+        wordBreak = 'break-all',
+        className: truncateClassName,
+      }: TruncateProps,
       ref,
     ): React.Node => {
       const arrayChildren = React.Children.toArray(children);
@@ -45,8 +59,12 @@ export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
           const {className, children} = child.props;
 
           return React.cloneElement(child, {
-            className: classify(css.truncateLineClamp, className),
-            style: {WebkitLineClamp: `${line}`},
+            className: classify(
+              css.truncateLineClamp,
+              className,
+              truncateClassName,
+            ),
+            style: {'--line-clamp': line, '--word-break': wordBreak},
             title: showFullTextOnHover ? children : '',
             ref,
           });
@@ -56,6 +74,8 @@ export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
             line={line}
             showFullTextOnHover={showFullTextOnHover}
             ref={ref}
+            wordBreak={wordBreak}
+            className={truncateClassName}
           >
             {children}
           </BaseTruncate>

package/lib/components/Truncate/Truncate.module.css

@@ -1,5 +1,3 @@
 .truncateLineClamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  composes: truncate from '../../styles/typography.module.css';
 }

package/lib/hooks/usePagination.js.flow

@@ -3,7 +3,7 @@
 import type {
   PaginationBaseProps,
   PaginationItemProps,
-} from '../components/Pagination/Pagination.js';
+} from '../components/Pagination';
 import {range} from '../utils/helpers';
 
 

package/lib/styles/typography.module.css

@@ -233,9 +233,13 @@
 }
 
 .truncate {
-  white-space: nowrap;
+  --line-clamp: 1;
+  --word-break: break-all;
+  -webkit-line-clamp: var(--line-clamp);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: var(--word-break);
 }
 
 .highlightText {

package/lib/styles/variables/_elevation.css

@@ -2,6 +2,8 @@
 
 @value elevationCard: 4;
 
+@value elevationTooltip: 4;
+
 @value elevationMenu: 12;
 
 @value elevationBackdrop: 40;
@@ -9,5 +11,3 @@
 @value elevationModal: 40;
 
 @value elevationToast: 60;
-
-@value elevationTooltip: 4;

package/lib/styles/variables/_elevation.js

@@ -9,6 +9,8 @@ const elevationNone = '0';
 exports.elevationNone = elevationNone;
 const elevationCard = '4';
 exports.elevationCard = elevationCard;
+const elevationTooltip = '4';
+exports.elevationTooltip = elevationTooltip;
 const elevationMenu = '12';
 exports.elevationMenu = elevationMenu;
 const elevationBackdrop = '40';
@@ -16,6 +18,4 @@ exports.elevationBackdrop = elevationBackdrop;
 const elevationModal = '40';
 exports.elevationModal = elevationModal;
 const elevationToast = '60';
-exports.elevationToast = elevationToast;
-const elevationTooltip = '4';
-exports.elevationTooltip = elevationTooltip;
+exports.elevationToast = elevationToast;

package/lib/styles/variables/_elevation.js.flow

@@ -4,6 +4,8 @@ export const elevationNone = '0';
 
 export const elevationCard = '4';
 
+export const elevationTooltip = '4';
+
 export const elevationMenu = '12';
 
 export const elevationBackdrop = '40';
@@ -11,5 +13,3 @@ export const elevationBackdrop = '40';
 export const elevationModal = '40';
 
 export const elevationToast = '60';
-
-export const elevationTooltip = '4';

package/lib/utils/click-away.js

@@ -49,6 +49,11 @@ class ClickAway extends React.Component {
         }, this.handleOnChange);
       }
     });
+    _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
+      if (evt?.key === 'Escape') {
+        this.forceClose();
+      }
+    });
     _defineProperty(this, "forceClose", () => {
       this.setState({
         isOpen: false
@@ -74,13 +79,18 @@ class ClickAway extends React.Component {
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
         window.document.addEventListener('click', this.handleCloseClick);
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
+        }
       } else {
         window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
   componentWillUnmount() {
     window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
     const {
@@ -106,5 +116,6 @@ class ClickAway extends React.Component {
 }
 exports.ClickAway = ClickAway;
 _defineProperty(ClickAway, "defaultProps", {
-  shouldCancel: () => false
+  shouldCancel: () => false,
+  closeOnEscapeKeypress: true
 });

package/lib/utils/click-away.js.flow

@@ -17,6 +17,7 @@ export type ChildProps = {
 };
 
 type ClickAwayProps = {
+  closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
   shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
@@ -31,9 +32,13 @@ type ClickAwayState = {
 // TODO(Nishant): Make this a functional component
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
-  static defaultProps: {shouldCancel: () => boolean} = {
-    shouldCancel: () => false,
-  };
+  static defaultProps: {
+    shouldCancel: () => boolean,
+    closeOnEscapeKeypress?: boolean,
+  } = {
+      shouldCancel: () => false,
+      closeOnEscapeKeypress: true,
+    };
 
   state: ClickAwayState = {
     isOpen: false,
@@ -58,14 +63,28 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
         window.document.addEventListener('click', this.handleCloseClick);
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener(
+            'keyup',
+            this.handleCloseOnEscapeKeypress,
+          );
+        }
       } else {
         window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener(
+          'keyup',
+          this.handleCloseOnEscapeKeypress,
+        );
       }
     }
   }
 
   componentWillUnmount() {
     window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener(
+      'keyup',
+      this.handleCloseOnEscapeKeypress,
+    );
   }
 
   render(): React.Node {
@@ -115,6 +134,14 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     }
   };
 
+  handleCloseOnEscapeKeypress: (
+    evt?: SyntheticKeyboardEvent<EventTarget>,
+  ) => void = (evt?: SyntheticKeyboardEvent<EventTarget>) => {
+      if (evt?.key === 'Escape') {
+        this.forceClose();
+      }
+    };
+
   forceClose: () => void = () => {
     this.setState({isOpen: false}, this.handleOnChange);
   };

package/package.json

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