@khanacademy/wonder-blocks-search-field 2.3.6 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/components/search-field.d.ts +24 -0
  3. package/dist/es/index.js +18 -16
  4. package/dist/index.js +17 -15
  5. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @khanacademy/wonder-blocks-search-field
2
2
 
3
+ ## 3.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e9a119a8: # SearchField
8
+
9
+ - Adds `error`, `instantValidation`, `validate`, and `onValidate` props to be consistent with form components.
10
+ - Refine magnifying glass icon styling to make it match Figma more (smaller, bold icon, spacing, update disabled state)
11
+ - Hide the clear button if the SearchField is disabled
12
+
13
+ ### Patch Changes
14
+
15
+ - 257b6bc3: SearchField: Remove "-field" that was automatically appended to the id.
16
+
17
+ ## 3.0.0
18
+
19
+ ### Major Changes
20
+
21
+ - e6abdd17: Upgrade to React 18
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies [e6abdd17]
26
+ - @khanacademy/wonder-blocks-core@8.0.0
27
+ - @khanacademy/wonder-blocks-form@5.0.0
28
+ - @khanacademy/wonder-blocks-icon@5.0.0
29
+ - @khanacademy/wonder-blocks-icon-button@6.0.0
30
+ - @khanacademy/wonder-blocks-tokens@3.0.0
31
+ - @khanacademy/wonder-blocks-typography@3.0.0
32
+
3
33
  ## 2.3.6
4
34
 
5
35
  ### Patch Changes
package/dist/components/search-field.d.ts CHANGED
@@ -45,6 +45,30 @@ type Props = AriaProps & {
45
45
  * Test ID used for e2e testing.
46
46
  */
47
47
  testId?: string;
48
+ /**
49
+ * Whether the search field is in an error state.
50
+ */
51
+ error?: boolean;
52
+ /**
53
+ * Provide a validation for the input value.
54
+ * Return a string error message or null | void for a valid input.
55
+ *
56
+ * Use this for errors that are shown to the user while they are filling out
57
+ * a form.
58
+ */
59
+ validate?: (value: string) => string | null | void;
60
+ /**
61
+ * Called right after the SearchField is validated.
62
+ */
63
+ onValidate?: (errorMessage?: string | null | undefined) => unknown;
64
+ /**
65
+ * If true, SearchField is validated as the user types (onChange). If false,
66
+ * it is validated when the user's focus moves out of the field (onBlur).
67
+ * It is preferred that instantValidation is set to `false`, however, it
68
+ * defaults to `true` for consistency with form components like TextField
69
+ * and TextArea.
70
+ */
71
+ instantValidation?: boolean;
48
72
  /**
49
73
  * Called when the value has changed.
50
74
  */
package/dist/es/index.js CHANGED
@@ -3,19 +3,19 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
3
3
  import * as React from 'react';
4
4
  import { StyleSheet } from 'aphrodite';
5
5
  import xIcon from '@phosphor-icons/core/regular/x.svg';
6
- import magnifyingGlassIcon from '@phosphor-icons/core/regular/magnifying-glass.svg';
6
+ import magnifyingGlassIcon from '@phosphor-icons/core/bold/magnifying-glass-bold.svg';
7
7
  import { styles as styles$1 } from '@khanacademy/wonder-blocks-typography';
8
8
  import { IDProvider, View } from '@khanacademy/wonder-blocks-core';
9
9
  import IconButton from '@khanacademy/wonder-blocks-icon-button';
10
10
  import { TextField } from '@khanacademy/wonder-blocks-form';
11
11
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
12
- import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
12
+ import { color, semanticColor, spacing } from '@khanacademy/wonder-blocks-tokens';
13
13
 
14
14
  const defaultLabels = {
15
15
  clearSearch: "Clear search"
16
16
  };
17
17
 
18
- const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "light", "id", "value", "placeholder", "style", "testId", "onClick", "onChange", "onFocus", "onBlur"];
18
+ const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "light", "id", "value", "placeholder", "style", "testId", "error", "instantValidation", "validate", "onValidate", "onClick", "onChange", "onFocus", "onBlur"];
19
19
  const SearchField = React.forwardRef(function SearchField(props, ref) {
20
20
  const {
21
21
  clearAriaLabel = defaultLabels.clearSearch,
@@ -27,6 +27,10 @@ const SearchField = React.forwardRef(function SearchField(props, ref) {
27
27
  placeholder,
28
28
  style,
29
29
  testId,
30
+ error,
31
+ instantValidation = true,
32
+ validate,
33
+ onValidate,
30
34
  onClick,
31
35
  onChange,
32
36
  onFocus,
@@ -40,11 +44,12 @@ const SearchField = React.forwardRef(function SearchField(props, ref) {
40
44
  innerRef == null ? void 0 : (_innerRef$current = innerRef.current) == null ? void 0 : _innerRef$current.focus();
41
45
  };
42
46
  const maybeRenderClearIconButton = () => {
43
- if (!value.length) {
47
+ if (!value.length || disabled) {
44
48
  return null;
45
49
  }
46
50
  return React.createElement(IconButton, {
47
51
  icon: xIcon,
52
+ size: "small",
48
53
  kind: "tertiary",
49
54
  onClick: handleClear,
50
55
  style: styles.dismissIcon,
@@ -59,20 +64,24 @@ const SearchField = React.forwardRef(function SearchField(props, ref) {
59
64
  style: [styles.inputContainer, style]
60
65
  }, React.createElement(PhosphorIcon, {
61
66
  icon: magnifyingGlassIcon,
62
- size: "medium",
63
- color: color.offBlack64,
67
+ size: "small",
68
+ color: disabled ? light ? color.white32 : semanticColor.action.disabled.default : semanticColor.icon.primary,
64
69
  style: styles.searchIcon,
65
70
  "aria-hidden": "true"
66
71
  }), React.createElement(TextField, _extends({
67
- id: `${uniqueId}-field`,
72
+ id: uniqueId,
68
73
  type: "text",
69
74
  autoFocus: autoFocus,
70
75
  disabled: disabled,
71
76
  light: light,
77
+ instantValidation: instantValidation,
78
+ validate: validate,
79
+ onValidate: onValidate,
72
80
  onChange: onChange,
73
81
  onFocus: onFocus,
74
82
  onBlur: onBlur,
75
83
  placeholder: placeholder,
84
+ error: error,
76
85
  ref: node => {
77
86
  if (ref) {
78
87
  ref.current = node;
@@ -100,20 +109,13 @@ const styles = StyleSheet.create({
100
109
  dismissIcon: {
101
110
  margin: 0,
102
111
  position: "absolute",
103
- right: 0,
104
- ":hover": {
105
- border: "none"
106
- }
112
+ right: spacing.xxxSmall_4
107
113
  },
108
114
  inputStyleReset: {
109
115
  display: "flex",
110
116
  flex: 1,
111
- "::placeholder": {
112
- color: color.offBlack64
113
- },
114
117
  width: "100%",
115
- color: "inherit",
116
- paddingLeft: spacing.large_24 + spacing.medium_16,
118
+ paddingLeft: spacing.xLarge_32,
117
119
  paddingRight: spacing.large_24 + spacing.medium_16
118
120
  }
119
121
  });
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithou
5
5
  var React = require('react');
6
6
  var aphrodite = require('aphrodite');
7
7
  var xIcon = require('@phosphor-icons/core/regular/x.svg');
8
- var magnifyingGlassIcon = require('@phosphor-icons/core/regular/magnifying-glass.svg');
8
+ var magnifyingGlassIcon = require('@phosphor-icons/core/bold/magnifying-glass-bold.svg');
9
9
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
10
10
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
11
11
  var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -44,7 +44,7 @@ const defaultLabels = {
44
44
  clearSearch: "Clear search"
45
45
  };
46
46
 
47
- const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "light", "id", "value", "placeholder", "style", "testId", "onClick", "onChange", "onFocus", "onBlur"];
47
+ const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "light", "id", "value", "placeholder", "style", "testId", "error", "instantValidation", "validate", "onValidate", "onClick", "onChange", "onFocus", "onBlur"];
48
48
  const SearchField = React__namespace.forwardRef(function SearchField(props, ref) {
49
49
  const {
50
50
  clearAriaLabel = defaultLabels.clearSearch,
@@ -56,6 +56,10 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
56
56
  placeholder,
57
57
  style,
58
58
  testId,
59
+ error,
60
+ instantValidation = true,
61
+ validate,
62
+ onValidate,
59
63
  onClick,
60
64
  onChange,
61
65
  onFocus,
@@ -69,11 +73,12 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
69
73
  innerRef == null ? void 0 : (_innerRef$current = innerRef.current) == null ? void 0 : _innerRef$current.focus();
70
74
  };
71
75
  const maybeRenderClearIconButton = () => {
72
- if (!value.length) {
76
+ if (!value.length || disabled) {
73
77
  return null;
74
78
  }
75
79
  return React__namespace.createElement(IconButton__default["default"], {
76
80
  icon: xIcon__default["default"],
81
+ size: "small",
77
82
  kind: "tertiary",
78
83
  onClick: handleClear,
79
84
  style: styles.dismissIcon,
@@ -88,20 +93,24 @@ const SearchField = React__namespace.forwardRef(function SearchField(props, ref)
88
93
  style: [styles.inputContainer, style]
89
94
  }, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
90
95
  icon: magnifyingGlassIcon__default["default"],
91
- size: "medium",
92
- color: wonderBlocksTokens.color.offBlack64,
96
+ size: "small",
97
+ color: disabled ? light ? wonderBlocksTokens.color.white32 : wonderBlocksTokens.semanticColor.action.disabled.default : wonderBlocksTokens.semanticColor.icon.primary,
93
98
  style: styles.searchIcon,
94
99
  "aria-hidden": "true"
95
100
  }), React__namespace.createElement(wonderBlocksForm.TextField, _extends__default["default"]({
96
- id: `${uniqueId}-field`,
101
+ id: uniqueId,
97
102
  type: "text",
98
103
  autoFocus: autoFocus,
99
104
  disabled: disabled,
100
105
  light: light,
106
+ instantValidation: instantValidation,
107
+ validate: validate,
108
+ onValidate: onValidate,
101
109
  onChange: onChange,
102
110
  onFocus: onFocus,
103
111
  onBlur: onBlur,
104
112
  placeholder: placeholder,
113
+ error: error,
105
114
  ref: node => {
106
115
  if (ref) {
107
116
  ref.current = node;
@@ -129,20 +138,13 @@ const styles = aphrodite.StyleSheet.create({
129
138
  dismissIcon: {
130
139
  margin: 0,
131
140
  position: "absolute",
132
- right: 0,
133
- ":hover": {
134
- border: "none"
135
- }
141
+ right: wonderBlocksTokens.spacing.xxxSmall_4
136
142
  },
137
143
  inputStyleReset: {
138
144
  display: "flex",
139
145
  flex: 1,
140
- "::placeholder": {
141
- color: wonderBlocksTokens.color.offBlack64
142
- },
143
146
  width: "100%",
144
- color: "inherit",
145
- paddingLeft: wonderBlocksTokens.spacing.large_24 + wonderBlocksTokens.spacing.medium_16,
147
+ paddingLeft: wonderBlocksTokens.spacing.xLarge_32,
146
148
  paddingRight: wonderBlocksTokens.spacing.large_24 + wonderBlocksTokens.spacing.medium_16
147
149
  }
148
150
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-search-field",
3
- "version": "2.3.6",
3
+ "version": "3.1.0",
4
4
  "design": "v1",
5
5
  "description": "Search Field components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -16,19 +16,19 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
- "@khanacademy/wonder-blocks-core": "^7.0.1",
20
- "@khanacademy/wonder-blocks-form": "^4.11.0",
21
- "@khanacademy/wonder-blocks-icon": "^4.2.0",
22
- "@khanacademy/wonder-blocks-icon-button": "^5.6.2",
23
- "@khanacademy/wonder-blocks-tokens": "^2.1.0",
24
- "@khanacademy/wonder-blocks-typography": "^2.1.16"
19
+ "@khanacademy/wonder-blocks-core": "^8.0.0",
20
+ "@khanacademy/wonder-blocks-form": "^5.0.0",
21
+ "@khanacademy/wonder-blocks-icon": "^5.0.0",
22
+ "@khanacademy/wonder-blocks-icon-button": "^6.0.0",
23
+ "@khanacademy/wonder-blocks-tokens": "^3.0.0",
24
+ "@khanacademy/wonder-blocks-typography": "^3.0.0"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "@phosphor-icons/core": "^2.0.2",
28
28
  "aphrodite": "^1.2.5",
29
- "react": "16.14.0"
29
+ "react": "18.2.0"
30
30
  },
31
31
  "devDependencies": {
32
- "@khanacademy/wb-dev-build-settings": "^1.0.1"
32
+ "@khanacademy/wb-dev-build-settings": "^2.0.0"
33
33
  }
34
34
  }