@spaced-out/ui-design-system 0.0.50 → 0.0.52

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.52](https://github.com/spaced-out/ui-design-system/compare/v0.0.51...v0.0.52) (2023-03-20)
+
+
+### Bug Fixes
+
+* modal positioning fix ([0697163](https://github.com/spaced-out/ui-design-system/commit/0697163bdafbb71828a3282a14e0fe8579998278))
+
+### [0.0.51](https://github.com/spaced-out/ui-design-system/compare/v0.0.50...v0.0.51) (2023-03-20)
+
+
+### Features
+
+* text highlighting now supports array of string ([bc7604f](https://github.com/spaced-out/ui-design-system/commit/bc7604fc552ec1e61275d93f792ea9a8267279a5))
+
+
+### Bug Fixes
+
+* button right icon only type fix ([#81](https://github.com/spaced-out/ui-design-system/issues/81)) ([3e8b819](https://github.com/spaced-out/ui-design-system/commit/3e8b819be701fd31746a944b7be32ed739dfd632))
+* updated picker usage ([9344611](https://github.com/spaced-out/ui-design-system/commit/934461138f750c2e748c1be146204350cfad9041))
+
 ### [0.0.50](https://github.com/spaced-out/ui-design-system/compare/v0.0.49...v0.0.50) (2023-03-13)
 
 

package/README.md

@@ -89,7 +89,7 @@ CSS use:
 JS use:
 
 ```js
-import size2 from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
+import {size2} from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
 import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
 ```
 

package/lib/components/Button/Button.js

@@ -104,7 +104,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
-    type: iconLeftType || iconRightType,
+    type: iconLeftName ? iconLeftType : iconRightType,
     className: classNames?.icon
   }) :
   // has icon _and_ child

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

@@ -153,7 +153,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                 name={iconLeftName || iconRightName}
                 color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
                 size={size === 'medium' ? 'medium' : 'small'}
-                type={iconLeftType || iconRightType}
+                type={iconLeftName ? iconLeftType : iconRightType}
                 className={classNames?.icon}
               />
             ) : (

package/lib/components/Modal/Modal.module.css

@@ -15,7 +15,8 @@
 .modal {
   position: fixed;
   top: spaceHalfFluid;
-  transform: translateY(spaceNegHalfFluid) scale(0.95);
+  left: spaceHalfFluid;
+  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(0.95);
   opacity: opacity0;
   composes: boxShadow4 from '../../styles/shadow.module.css';
   display: flex;
@@ -30,7 +31,7 @@
 
 .modalContainer.open.in .modal {
   opacity: opacity100;
-  transform: translateY(spaceNegHalfFluid) scale(1);
+  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(1);
 }
 
 .backdrop {

package/lib/components/Panel/Panel.module.css

@@ -27,12 +27,14 @@
 .panel.left {
   top: spaceNone;
   left: spaceNone;
+  right: initial;
   transform: translateX(spaceNegFluid);
 }
 
 .panel.right {
   top: spaceNone;
   right: spaceNone;
+  left: initial;
   transform: translateX(spaceFluid);
 }
 

package/lib/components/Text/Text.js

@@ -21,8 +21,15 @@ const HighlightText = _ref => {
     highlightWithBackground
   } = _ref;
   // Split text on highlight term, include term itself into parts, ignore case
-  const parts = text.split(new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'));
-  return /*#__PURE__*/React.createElement("span", null, parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
+  let highlights = '';
+  if (Array.isArray(highlight)) {
+    highlights = highlight.join('|');
+  } else {
+    highlights = highlight;
+  }
+  const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'));
+  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes(part.toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+    key: part,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)

package/lib/components/Text/Text.js.flow

@@ -14,7 +14,7 @@ export type TextProps = {
   children?: React.Node,
   className?: string,
   highlightedTextClassName?: string,
-  highlightString?: string,
+  highlightString?: string | string[],
   caseSensitiveHighlighting?: boolean,
   highlightWithBackground?: boolean,
   ...
@@ -22,7 +22,7 @@ export type TextProps = {
 
 export type HighlightTextProps = {
   text: string,
-  highlight: string,
+  highlight: string | string[],
   highlightClassName?: string,
   caseSensitiveHighlighting?: boolean,
   highlightWithBackground?: boolean,
@@ -36,14 +36,21 @@ const HighlightText = ({
   highlightWithBackground,
 }: HighlightTextProps) => {
   // Split text on highlight term, include term itself into parts, ignore case
+  let highlights = '';
+  if (Array.isArray(highlight)) {
+    highlights = highlight.join('|');
+  } else {
+    highlights = highlight;
+  }
   const parts = text.split(
-    new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'),
+    new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
   );
   return (
     <span>
       {parts.map((part) =>
-        part.toLowerCase() === highlight.toLowerCase() ? (
+        highlights.toLowerCase().includes(part.toLowerCase()) ? (
           <span
+            key={part}
             className={classify(
               css.highlightText,
               {

package/package.json

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