@spaced-out/ui-design-system 0.0.66 → 0.0.67

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.67](https://github.com/spaced-out/ui-design-system/compare/v0.0.66...v0.0.67) (2023-03-30)
+
+
+### Bug Fixes
+
+* input color fix ([daa9039](https://github.com/spaced-out/ui-design-system/commit/daa90393d504c6995f67b8a84f84a92a64ff3502))
+* text highlight fix ([#90](https://github.com/spaced-out/ui-design-system/issues/90)) ([fc8d07c](https://github.com/spaced-out/ui-design-system/commit/fc8d07c23a2bf99b5d889c48d681d89f8957e8d5))
+
 ### [0.0.66](https://github.com/spaced-out/ui-design-system/compare/v0.0.65...v0.0.66) (2023-03-30)
 
 

package/lib/components/Checkbox/Checkbox.module.css

@@ -11,7 +11,8 @@
   colorBorderDanger,
   colorDanger,
   colorFocusPrimary,
-  colorFocusDanger
+  colorFocusDanger,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -85,6 +86,7 @@
   align-items: center;
   justify-content: center;
   border-radius: borderRadiusXSmall;
+  background-color: colorBackgroundTertiary;
 }
 
 .enabled {

package/lib/components/Input/Input.module.css

@@ -30,7 +30,8 @@
   colorFocusDanger,
   colorTextDisabled,
   colorFillDisabled,
-  colorTextDanger
+  colorTextDanger,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 .container {
@@ -46,6 +47,7 @@
   height: size42;
   padding: spaceNone spaceSmall;
   border: borderWidthSecondary solid colorBorderPrimary;
+  background-color: colorBackgroundTertiary;
 }
 
 .locked {

package/lib/components/Text/Text.js

@@ -7,6 +7,7 @@ exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.S
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.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); }
@@ -23,12 +24,12 @@ const HighlightText = _ref => {
   // Split text on highlight term, include term itself into parts, ignore case
   let highlights = '';
   if (Array.isArray(highlight)) {
-    highlights = highlight.join('|');
+    highlights = highlight.map(_string.escapeRegExp).join('|');
   } else {
-    highlights = highlight;
+    highlights = (0, _string.escapeRegExp)(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", {
+  const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
+  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
     key: part,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import type {ColorTypes} from '../../types/typography';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
+import {escapeRegExp} from '../../utils/string';
 
 import css from '../../styles/typography.module.css';
 
@@ -38,17 +39,19 @@ const HighlightText = ({
   // Split text on highlight term, include term itself into parts, ignore case
   let highlights = '';
   if (Array.isArray(highlight)) {
-    highlights = highlight.join('|');
+    highlights = highlight.map(escapeRegExp).join('|');
   } else {
-    highlights = highlight;
+    highlights = escapeRegExp(highlight);
   }
-  const parts = text.split(
-    new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
-  );
+
+  const parts = text
+    .split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'))
+    .filter((part) => part !== '');
+
   return (
     <span>
       {parts.map((part) =>
-        highlights.toLowerCase().includes(part.toLowerCase()) ? (
+        highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
           <span
             key={part}
             className={classify(

package/lib/components/Textarea/Textarea.module.css

@@ -28,7 +28,8 @@
   colorFocusDanger,
   colorTextDisabled,
   colorFillDisabled,
-  colorTextDanger
+  colorTextDanger,
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
 .container {
@@ -43,6 +44,7 @@
   gap: spaceSmall;
   height: size160;
   border: borderWidthSecondary solid colorBorderPrimary;
+  background-color: colorBackgroundTertiary;
 }
 
 .box textarea {

package/lib/utils/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.capitalize = void 0;
+exports.escapeRegExp = exports.capitalize = void 0;
 
 const capitalize = word => {
   if (!word) {
@@ -11,4 +11,6 @@ const capitalize = word => {
   }
   return word.toLowerCase().replace(/\w/, firstLetter => firstLetter.toUpperCase());
 };
-exports.capitalize = capitalize;
+exports.capitalize = capitalize;
+const escapeRegExp = str => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+exports.escapeRegExp = escapeRegExp;

package/lib/utils/string.js.flow

@@ -8,3 +8,6 @@ export const capitalize = (word: string): string => {
     .toLowerCase()
     .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
 };
+
+export const escapeRegExp = (str: string): string =>
+  str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');

package/package.json

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