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

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.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

@@ -71,7 +71,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     type = 'primary',
     isFluid = false,
     disabled = false,
-    actionType = 'submit',
+    actionType = 'button',
     size = 'medium',
     ...props
   } = _ref2;

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

@@ -110,7 +110,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         type = 'primary',
         isFluid = false,
         disabled = false,
-        actionType = 'submit',
+        actionType = 'button',
         size = 'medium',
         ...props
       }: ButtonProps,

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.21",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {