@spaced-out/ui-design-system 0.0.21 → 0.0.23-beta.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.0.23-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.22...v0.0.23-beta.0) (2023-02-14)
+
+
+### Features
+
+* [GDS-118] sub menu ([#61](https://github.com/spaced-out/ui-design-system/issues/61)) ([7e32aae](https://github.com/spaced-out/ui-design-system/commit/7e32aaebb5427188e8e3f35f5fcd7066557be579))
+* status indicator component ([7f6b0bd](https://github.com/spaced-out/ui-design-system/commit/7f6b0bdcb0c5506f9f5c4c3fcc50206073f4eabe))
+
+
+### Bug Fixes
+
+* chip states and chip truncate text fixes ([16573d2](https://github.com/spaced-out/ui-design-system/commit/16573d24ff201335c33a888aff3d7cf3dd36a133))
+* tab onhover and icon only center ([#64](https://github.com/spaced-out/ui-design-system/issues/64)) ([148606a](https://github.com/spaced-out/ui-design-system/commit/148606af18fa7808612236bd0cb34a61908a2f49))
+
+### [0.0.22](https://github.com/spaced-out/ui-design-system/compare/v0.0.21...v0.0.22) (2023-02-09)
+
+
+### Features
+
+* button tabs component and button text fixes ([#62](https://github.com/spaced-out/ui-design-system/issues/62)) ([bd44a54](https://github.com/spaced-out/ui-design-system/commit/bd44a547e7ba0bcb9cf59be212191dd6353f79e0))
+
 ### [0.0.21](https://github.com/spaced-out/ui-design-system/compare/v0.0.20...v0.0.21) (2023-02-08)
 
 

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

@@ -162,6 +162,13 @@
         }
       }
     },
+    "sub-menu": {
+      "background": {
+        "default": {
+          "value": "{baseColor.indigo.920.value}"
+        }
+      }
+    },
     "gray.lightest": {
       "value": "{baseColor.gray.75.value}"
     },

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

@@ -69,6 +69,9 @@
     "240": {
       "value": "240px"
     },
+    "260": {
+      "value": "260px"
+    },
     "276": {
       "value": "276px"
     },
@@ -98,6 +101,9 @@
     },
     "fluid": {
       "value": "100%"
+    },
+    "fullViewportHeight": {
+      "value": "100vh"
     }
   }
 }

package/lib/components/Button/Button.js

@@ -7,6 +7,7 @@ exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
 var _ButtonModule = _interopRequireDefault(require("./Button.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); }
@@ -97,27 +98,30 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _ButtonModule.default.buttonRow
   }, !(iconLeftName || iconRightName) ? /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.textContainerCenter
-  }, children) :
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)) :
   // has icon, but no child
   children == null ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
-    type: iconLeftType || iconRightType
+    type: iconLeftType || iconRightType,
+    className: classNames?.icon
   }) :
   // has icon _and_ child
   (iconLeftName || iconRightName) && /*#__PURE__*/React.createElement(React.Fragment, null, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
-    type: iconLeftType
+    type: iconLeftType,
+    className: classNames?.icon
   }), /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.textContainerLeft
-  }, children), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
-    type: iconRightType
+    type: iconRightType,
+    className: classNames?.icon
   }))));
 });
 exports.Button = Button;

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

@@ -5,11 +5,12 @@ import * as React from 'react';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
 
 import css from './Button.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
 
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
@@ -143,7 +144,9 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         <div className={css.buttonRow}>
           {/* Has no icon, only child */}
           {!(iconLeftName || iconRightName) ? (
-            <div className={css.textContainerCenter}>{children}</div>
+            <div className={css.textContainerCenter}>
+              <Truncate>{children}</Truncate>
+            </div>
           ) : // has icon, but no child
             children == null ? (
               <Icon
@@ -151,6 +154,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                 color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
                 size={size === 'medium' ? 'medium' : 'small'}
                 type={iconLeftType || iconRightType}
+                className={classNames?.icon}
               />
             ) : (
             // has icon _and_ child
@@ -164,9 +168,12 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconLeftType}
+                      className={classNames?.icon}
                     />
                   )}
-                  <div className={css.textContainerLeft}>{children}</div>
+                  <div className={css.textContainerLeft}>
+                    <Truncate>{children}</Truncate>
+                  </div>
                   {iconRightName && (
                     <Icon
                       name={iconRightName}
@@ -175,6 +182,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconRightType}
+                      className={classNames?.icon}
                     />
                   )}
                 </>

package/lib/components/Button/Button.module.css

@@ -66,7 +66,7 @@ button {
   flex-direction: row;
   padding: spaceNone spaceMedium;
   height: size42;
-  text-align: center;
+  text-align: left;
   justify-content: center;
   border-radius: borderRadiusMedium;
   align-items: center;

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonTab = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _Button = require("../../Button");
+var _ButtonTabModule = _interopRequireDefault(require("./ButtonTab.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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const ButtonTab = _ref => {
+  let {
+    classNames,
+    children,
+    iconName,
+    iconType = 'regular',
+    size,
+    onButtonTabSelect,
+    id,
+    selectedButtonTabId,
+    disabled,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props, {
+    disabled: disabled,
+    size: size,
+    type: id === selectedButtonTabId ? 'tertiary' : 'ghost',
+    classNames: {
+      wrapper: (0, _classify.default)(_ButtonTabModule.default.buttonTabWrapper, {
+        [_ButtonTabModule.default.mediumButtonTab]: size === 'medium',
+        [_ButtonTabModule.default.smallButtonTab]: size === 'small',
+        [_ButtonTabModule.default.onlyIcon]: iconName && !children,
+        [_ButtonTabModule.default.isSelected]: id === selectedButtonTabId,
+        [_ButtonTabModule.default.isUnSelected]: id !== selectedButtonTabId,
+        [_ButtonTabModule.default.disabled]: disabled
+      }, classNames?.wrapper),
+      icon: _ButtonTabModule.default.icon
+    },
+    iconLeftName: iconName,
+    iconLeftType: iconType,
+    onClick: e => onButtonTabSelect && onButtonTabSelect(id, e)
+  }), children);
+};
+exports.ButtonTab = ButtonTab;

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -0,0 +1,67 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import {Button} from '../../Button';
+import type {IconType} from '../../Icon';
+
+import css from './ButtonTab.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type ButtonTabProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  disabled?: boolean,
+  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+  iconName?: string,
+  iconType?: IconType,
+  size?: 'medium' | 'small',
+  isFluid?: boolean,
+  ariaLabel?: string,
+  id: string,
+  selectedButtonTabId?: string,
+  ...
+};
+
+export const ButtonTab = ({
+  classNames,
+  children,
+  iconName,
+  iconType = 'regular',
+  size,
+  onButtonTabSelect,
+  id,
+  selectedButtonTabId,
+  disabled,
+  ...props
+}: ButtonTabProps): React.Node => (
+  <Button
+    {...props}
+    disabled={disabled}
+    size={size}
+    type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
+    classNames={{
+      wrapper: classify(
+        css.buttonTabWrapper,
+        {
+          [css.mediumButtonTab]: size === 'medium',
+          [css.smallButtonTab]: size === 'small',
+          [css.onlyIcon]: iconName && !children,
+          [css.isSelected]: id === selectedButtonTabId,
+          [css.isUnSelected]: id !== selectedButtonTabId,
+          [css.disabled]: disabled,
+        },
+        classNames?.wrapper,
+      ),
+      icon: css.icon,
+    }}
+    iconLeftName={iconName}
+    iconLeftType={iconType}
+    onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
+  >
+    {children}
+  </Button>
+);

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -0,0 +1,75 @@
+@value (colorTextDisabled, colorTextPrimary, colorTextSecondary, colorBackgroundTertiary, colorButtonFillTertiaryEnabled) from '../../../styles/variables/_color.css';
+@value (size38, size30) from '../../../styles/variables/_size.css';
+@value (spaceSmall) from '../../../styles/variables/_space.css';
+@value (borderWidthPrimary) from '../../../styles/variables/_border.css';
+
+button.buttonTabWrapper {
+  padding-left: spaceSmall;
+  padding-right: spaceSmall;
+  height: size38;
+  color: colorTextSecondary;
+  min-width: initial;
+  text-align: left;
+}
+
+.buttonTabWrapper .icon {
+  color: colorTextSecondary;
+}
+
+button.buttonTabWrapper:hover {
+  color: colorTextPrimary;
+  background-color: initial;
+}
+
+button.buttonTabWrapper:hover .icon {
+  color: colorTextPrimary;
+}
+
+.buttonTabWrapper.mediumButtonTab {
+  height: size38;
+}
+
+.buttonTabWrapper.smallButtonTab {
+  height: size30;
+}
+
+.onlyIcon {
+  color: colorTextSecondary;
+  padding-left: initial;
+  padding-right: initial;
+}
+
+.mediumButtonTab.onlyIcon {
+  max-width: size38;
+}
+
+.smallButtonTab.onlyIcon {
+  max-width: size30;
+}
+
+.buttonTabWrapper.isSelected {
+  background-color: colorBackgroundTertiary;
+  color: colorTextPrimary;
+}
+
+.buttonTabWrapper.isSelected:hover {
+  background-color: colorBackgroundTertiary;
+}
+
+.buttonTabWrapper.isSelected .icon {
+  color: colorTextPrimary;
+}
+
+.buttonTabWrapper.disabled {
+  color: colorTextDisabled;
+}
+
+.buttonTabWrapper.disabled .icon {
+  color: colorTextDisabled;
+}
+
+.buttonTabWrapper.isUnSelected {
+  padding-left: spaceSmall;
+  padding-right: spaceSmall;
+  border: borderWidthPrimary solid colorButtonFillTertiaryEnabled;
+}

package/lib/components/ButtonTabs/ButtonTab/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ButtonTab = require("./ButtonTab");
+Object.keys(_ButtonTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonTab[key];
+    }
+  });
+});

package/lib/components/ButtonTabs/ButtonTab/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './ButtonTab';

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonTabs = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ButtonTabs = _ref => {
+  let {
+    classNames,
+    children,
+    isFluid,
+    size = 'medium',
+    disabled,
+    selectedButtonTabId,
+    onButtonTabSelect
+  } = _ref;
+  const childrenWithProps = React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...child.props,
+        isFluid,
+        size,
+        disabled,
+        selectedButtonTabId,
+        onButtonTabSelect
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ButtonTabs",
+    className: (0, _classify.default)(_ButtonTabsModule.default.buttonTabsWrapper, {
+      [_ButtonTabsModule.default.medium]: size === 'medium',
+      [_ButtonTabsModule.default.small]: size === 'small',
+      [_ButtonTabsModule.default.isFluid]: isFluid,
+      [_ButtonTabsModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, childrenWithProps);
+};
+exports.ButtonTabs = ButtonTabs;

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -0,0 +1,62 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './ButtonTabs.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type ButtonTabsProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  isFluid?: boolean,
+  size?: 'medium' | 'small',
+  disabled?: boolean,
+  selectedButtonTabId?: string,
+  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const ButtonTabs = ({
+  classNames,
+  children,
+  isFluid,
+  size = 'medium',
+  disabled,
+  selectedButtonTabId,
+  onButtonTabSelect,
+}: ButtonTabsProps): React.Node => {
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        ...child.props,
+        isFluid,
+        size,
+        disabled,
+        selectedButtonTabId,
+        onButtonTabSelect,
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      data-testid="ButtonTabs"
+      className={classify(
+        css.buttonTabsWrapper,
+        {
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+          [css.isFluid]: isFluid,
+          [css.disabled]: disabled,
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};

package/lib/components/ButtonTabs/ButtonTabs.module.css

@@ -0,0 +1,27 @@
+@value (colorBackgroundSecondary) from '../../styles/variables/_color.css';
+@value (size42, size34, sizeFluid) from '../../styles/variables/_size.css';
+@value (spaceXXSmall) from '../../styles/variables/_space.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+
+.buttonTabsWrapper {
+  display: flex;
+  gap: spaceXXSmall;
+  background-color: colorBackgroundSecondary;
+  align-items: center;
+  padding-left: calc(spaceXXSmall / 2);
+  padding-right: calc(spaceXXSmall / 2);
+  width: fit-content;
+  border-radius: borderRadiusMedium;
+}
+
+.buttonTabsWrapper.medium {
+  height: size42;
+}
+
+.buttonTabsWrapper.small {
+  height: size34;
+}
+
+.buttonTabsWrapper.isFluid {
+  width: sizeFluid;
+}

package/lib/components/ButtonTabs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ButtonTab = require("./ButtonTab");
+Object.keys(_ButtonTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonTab[key];
+    }
+  });
+});
+var _ButtonTabs = require("./ButtonTabs");
+Object.keys(_ButtonTabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ButtonTabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ButtonTabs[key];
+    }
+  });
+});

package/lib/components/ButtonTabs/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './ButtonTab';
+export * from './ButtonTabs';

package/lib/components/Chip/Chip.js

@@ -7,6 +7,7 @@ exports.Chip = exports.CHIP_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
 var _ChipModule = _interopRequireDefault(require("./Chip.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); }
@@ -31,6 +32,7 @@ const Chip = _ref => {
     iconType = 'regular',
     dismissable = false,
     onDismiss = () => null,
+    onClick,
     disabled
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -47,18 +49,24 @@ const Chip = _ref => {
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    onClick: onClick
   }, iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: _ChipModule.default.chipIcon,
     name: iconName,
     type: iconType,
     size: "small"
-  }), children, dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: _ChipModule.default.dismissIcon,
     name: "xmark",
     type: iconType,
     size: "small",
-    onClick: event => !disabled && onDismiss && onDismiss(event)
+    onClick: event => {
+      event.stopPropagation();
+      if (!disabled && onDismiss) {
+        onDismiss(event);
+      }
+    }
   }));
 };
 exports.Chip = Chip;

package/lib/components/Chip/Chip.js.flow

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
 
 import css from './Chip.module.css';
 
@@ -27,6 +28,7 @@ export type BaseChipProps = {
   semantic?: ChipSemanticType,
   children: React.Node,
   disabled?: boolean,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
 export type MediumChipProps = {
@@ -53,6 +55,7 @@ export const Chip = ({
   iconType = 'regular',
   dismissable = false,
   onDismiss = () => null,
+  onClick,
   disabled,
 }: ChipProps): React.Node => (
   <div
@@ -74,6 +77,7 @@ export const Chip = ({
       },
       classNames?.wrapper,
     )}
+    onClick={onClick}
   >
     {iconName && size !== 'small' && (
       <Icon
@@ -83,14 +87,20 @@ export const Chip = ({
         size="small"
       />
     )}
-    {children}
+    <Truncate>{children}</Truncate>
+
     {dismissable && size !== 'small' && (
       <Icon
         className={css.dismissIcon}
         name="xmark"
         type={iconType}
         size="small"
-        onClick={(event) => !disabled && onDismiss && onDismiss(event)}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (!disabled && onDismiss) {
+            onDismiss(event);
+          }
+        }}
       />
     )}
   </div>