@spaced-out/ui-design-system 0.0.20 → 0.0.22

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* actiontype default value should be button ([#59](https://github.com/spaced-out/ui-design-system/issues/59)) ([f0c1c38](https://github.com/spaced-out/ui-design-system/commit/f0c1c382a2c6501a57b7ffd2e50c4b585f3079af))
+* incontext alert design fixes ([#60](https://github.com/spaced-out/ui-design-system/issues/60)) ([60e8aa0](https://github.com/spaced-out/ui-design-system/commit/60e8aa052d56f2624a6a83aa77fdeb0f24d7327c))
+
 ### [0.0.20](https://github.com/spaced-out/ui-design-system/compare/v0.0.19...v0.0.20) (2023-02-08)
 
 

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); }
@@ -71,7 +72,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     type = 'primary',
     isFluid = false,
     disabled = false,
-    actionType = 'submit',
+    actionType = 'button',
     size = 'medium',
     ...props
   } = _ref2;
@@ -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',
@@ -110,7 +111,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         type = 'primary',
         isFluid = false,
         disabled = false,
-        actionType = 'submit',
+        actionType = 'button',
         size = 'medium',
         ...props
       }: ButtonProps,
@@ -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/InContextAlert/InContextAlert.js

@@ -81,7 +81,9 @@ const InContextAlert = props => {
     children,
     selfDismiss = false,
     leftIconName = '',
-    onCloseClick
+    onCloseClick,
+    actionText = '',
+    onAction
   } = props;
   const [dismissed, setDismissed] = React.useState(false);
   const closeClickHandler = e => {
@@ -103,7 +105,10 @@ const InContextAlert = props => {
     className: (0, _classify.classify)(classNames?.alertText)
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
     line: 2
-  }, children)), dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, children)), actionText ? /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
+    className: _InContextAlertModule.default.actionText,
+    onClick: onAction
+  }, actionText) : dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
     color: _typography.TEXT_COLORS.primary,
     name: "close",
     size: "small",

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
 import {Icon} from '../Icon';
-import {SubTitleExtraSmall} from '../Text';
+import {ButtonTextExtraSmall, SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './InContextAlert.module.css';
@@ -32,6 +32,8 @@ type InContextAlertBaseProps = {
       }
     | {dismissable?: false},
   children?: string,
+  actionText?: string,
+  onAction?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
 type InContextAlertPropsFixedIcon = {
@@ -127,6 +129,8 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
     selfDismiss = false,
     leftIconName = '',
     onCloseClick,
+    actionText = '',
+    onAction,
   } = props;
   const [dismissed, setDismissed] = React.useState(false);
   const closeClickHandler = (e) => {
@@ -156,15 +160,21 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
               <Truncate line={2}>{children}</Truncate>
             </SubTitleExtraSmall>
           )}
-          {dismissable && (
-            <Icon
-              color={TEXT_COLORS.primary}
-              name="close"
-              size="small"
-              type="regular"
-              onClick={closeClickHandler}
-              className={css.closeIcon}
-            />
+          {actionText ? (
+            <ButtonTextExtraSmall className={css.actionText} onClick={onAction}>
+              {actionText}
+            </ButtonTextExtraSmall>
+          ) : (
+            dismissable && (
+              <Icon
+                color={TEXT_COLORS.primary}
+                name="close"
+                size="small"
+                type="regular"
+                onClick={closeClickHandler}
+                className={css.closeIcon}
+              />
+            )
           )}
         </div>
       )}

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -34,7 +34,6 @@
   border-radius: borderRadiusXSmall;
   width: sizeFluid;
   word-break: normal;
-  overflow-wrap: anywhere;
   border-width: borderWidthPrimary;
   border-style: solid;
 }
@@ -68,3 +67,9 @@
   cursor: pointer;
   margin-left: auto;
 }
+
+.actionText {
+  cursor: pointer;
+  margin-left: auto;
+  text-decoration: underline;
+}

package/lib/components/OptionButton/OptionButton.js

@@ -27,7 +27,8 @@ const OptionButton = _ref => {
     onButtonClick,
     onMenuOpen,
     onMenuClose,
-    ariaLabel
+    ariaLabel,
+    actionType
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   return /*#__PURE__*/React.createElement("div", {
@@ -43,7 +44,8 @@ const OptionButton = _ref => {
     },
     disabled: disabled,
     isFluid: isFluid,
-    ariaLabel: ariaLabel
+    ariaLabel: ariaLabel,
+    actionType: actionType
   }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
     anchorPosition: anchorPosition,
     ariaLabel: ariaLabel,

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

@@ -37,6 +37,7 @@ export const OptionButton = ({
   onMenuOpen,
   onMenuClose,
   ariaLabel,
+  actionType,
 }: OptionButtonProps): React.Node => {
   const [iconName, setIconName] = React.useState('chevron-down');
 
@@ -52,6 +53,7 @@ export const OptionButton = ({
         disabled={disabled}
         isFluid={isFluid}
         ariaLabel={ariaLabel}
+        actionType={actionType}
       >
         {children}
       </Button>

package/package.json

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