@khanacademy/wonder-blocks-search-field 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 5.1.2
+
+### Patch Changes
+
+- 7bb37a2: Update component docs to include labelling guidelines
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [7bb37a2]
+- Updated dependencies [051f0f8]
+- Updated dependencies [e1b78db]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [7bb37a2]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-icon-button@6.1.2
+    - @khanacademy/wonder-blocks-form@7.1.2
+    - @khanacademy/wonder-blocks-icon@5.1.2
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
+## 5.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-form@7.1.1
+    - @khanacademy/wonder-blocks-icon@5.1.1
+    - @khanacademy/wonder-blocks-icon-button@6.1.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/components/search-field.d.ts

@@ -95,6 +95,14 @@ type Props = AriaProps & {
  * Search Field. A TextField with a search icon on its left side
  * and an X icon on its right side.
  *
+ * Make sure to provide a label for the field. This can be done by either:
+ * - (recommended) Using the **LabeledField** component to provide a label,
+ * description, and/or error message for the field
+ * - Using a `label` html tag with the `htmlFor` prop set to the unique id of
+ * the field
+ * - Using an `aria-label` attribute on the field
+ * - Using an `aria-labelledby` attribute on the field
+ *
  * ### Usage
  * ```jsx
  * import {SearchField} from "@khanacademy/wonder-blocks-search-field";

package/dist/es/index.js

@@ -63,7 +63,7 @@ const SearchField = React.forwardRef(function SearchField(props, ref) {
   }, React.createElement(PhosphorIcon, {
     icon: magnifyingGlassIcon,
     size: "small",
-    color: disabled ? semanticColor.action.disabled.default : semanticColor.icon.primary,
+    color: disabled ? semanticColor.icon.disabled : semanticColor.icon.primary,
     style: styles.searchIcon,
     "aria-hidden": "true"
   }), React.createElement(TextField, _extends({

package/dist/index.js

@@ -13,7 +13,10 @@ var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -26,11 +29,16 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
+var magnifyingGlassIcon__default = /*#__PURE__*/_interopDefaultLegacy(magnifyingGlassIcon);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
 const defaultLabels = {
   clearSearch: "Clear search"
@@ -56,7 +64,7 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
       onFocus,
       onBlur
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
   const innerRef = React__namespace.useRef(null);
   const handleClear = () => {
     var _innerRef$current;
@@ -67,8 +75,8 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
     if (!value.length || disabled) {
       return null;
     }
-    return React__namespace.createElement(IconButton, {
-      icon: xIcon,
+    return React__namespace.createElement(IconButton__default["default"], {
+      icon: xIcon__default["default"],
       size: "small",
       kind: "tertiary",
       onClick: handleClear,
@@ -82,12 +90,12 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
     onClick: onClick,
     style: [styles.inputContainer, style]
   }, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    icon: magnifyingGlassIcon,
+    icon: magnifyingGlassIcon__default["default"],
     size: "small",
-    color: disabled ? wonderBlocksTokens.semanticColor.action.disabled.default : wonderBlocksTokens.semanticColor.icon.primary,
+    color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.primary,
     style: styles.searchIcon,
     "aria-hidden": "true"
-  }), React__namespace.createElement(wonderBlocksForm.TextField, _extends({
+  }), React__namespace.createElement(wonderBlocksForm.TextField, _extends__default["default"]({
     id: uniqueId,
     type: "text",
     autoFocus: autoFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-search-field",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "design": "v1",
   "description": "Search Field components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.0",
-    "@khanacademy/wonder-blocks-form": "7.1.0",
-    "@khanacademy/wonder-blocks-icon": "5.1.0",
-    "@khanacademy/wonder-blocks-icon-button": "6.1.0",
-    "@khanacademy/wonder-blocks-tokens": "4.2.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.0"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-form": "7.1.2",
+    "@khanacademy/wonder-blocks-icon": "5.1.2",
+    "@khanacademy/wonder-blocks-icon-button": "6.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +26,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"