@khanacademy/wonder-blocks-form 7.1.1 → 7.1.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.1.2
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- 7bb37a2: Update component docs to include labelling guidelines
+- 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+- 7bb37a2: Marking LabeledTextField with `@deprecated` in favour of LabeledField + TextField
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [8fc65a9]
+- Updated dependencies [e1b78db]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-clickable@6.1.2
+    - @khanacademy/wonder-blocks-icon@5.1.2
+    - @khanacademy/wonder-blocks-layout@3.1.2
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/components/labeled-text-field.d.ts

@@ -158,9 +158,13 @@ declare class LabeledTextField extends React.Component<PropsWithForwardRef, Stat
 }
 type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof LabeledTextField, React.ComponentProps<typeof LabeledTextField>>, "forwardedRef">;
 /**
+ * **DEPRECATED**: Please use `LabeledField` with `TextField` instead.
+ *
  * A LabeledTextField is an element used to accept a single line of text
  * from the user paired with a label, description, and error field elements.
  *
+ * @deprecated
+ *
  * ### Usage
  *
  * ```jsx

package/dist/components/text-area.d.ts

@@ -1,5 +1,16 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * A TextArea is an element used to accept text from the user.
+ *
+ * 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
+ */
 declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
     role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {

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

@@ -152,6 +152,13 @@ type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField
 /**
  * A TextField is an element used to accept a single line of text from the user.
  *
+ * 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

package/dist/es/index.js

@@ -78,8 +78,8 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   })), checked || checked == null ? checkboxIcon : React.createElement(React.Fragment, null));
 });
 const disabledState$1 = {
-  border: semanticColor.border.primary,
-  background: semanticColor.action.disabled.secondary
+  border: semanticColor.action.secondary.disabled.border,
+  background: semanticColor.action.secondary.disabled.background
 };
 const sharedStyles$1 = StyleSheet.create({
   inputReset: {
@@ -119,7 +119,7 @@ const _generateStyles$1 = (checked, error) => {
   }
   const isCheckedOrIndeterminate = checked || checked == null;
   const actionType = error ? "destructive" : "progressive";
-  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const styleType = isCheckedOrIndeterminate ? "primary" : "secondary";
   const colorAction = semanticColor.action[styleType][actionType];
   const states = {
     default: {
@@ -138,7 +138,7 @@ const _generateStyles$1 = (checked, error) => {
         backgroundColor: states.default.background,
         borderColor: states.default.border,
         ":focus-visible": {
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -160,7 +160,7 @@ const _generateStyles$1 = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -213,8 +213,8 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   }));
 });
 const disabledState = {
-  border: semanticColor.border.primary,
-  background: semanticColor.action.disabled.secondary
+  border: semanticColor.action.secondary.disabled.border,
+  background: semanticColor.action.secondary.disabled.background
 };
 const size = 16;
 const disabledChecked = {
@@ -224,7 +224,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: semanticColor.action.disabled.default
+  backgroundColor: semanticColor.action.primary.disabled.background
 };
 const sharedStyles = StyleSheet.create({
   inputReset: {
@@ -258,7 +258,7 @@ const _generateStyles = (checked, error) => {
     return styles$5[styleKey];
   }
   const actionType = error ? "destructive" : "progressive";
-  const colorAction = semanticColor.action.outlined[actionType];
+  const colorAction = semanticColor.action.secondary[actionType];
   const states = {
     unchecked: {
       border: semanticColor.border.strong,
@@ -281,7 +281,7 @@ const _generateStyles = (checked, error) => {
         borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -303,7 +303,7 @@ const _generateStyles = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -399,7 +399,7 @@ const styles$4 = StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: semanticColor.text.disabled
+    color: semanticColor.action.secondary.disabled.foreground
   },
   description: {
     marginLeft: spacing.medium_16 + spacing.xSmall_8,
@@ -731,8 +731,8 @@ const states$1 = {
     foreground: semanticColor.text.primary
   },
   disabled: {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
     foreground: semanticColor.text.secondary
   },
   error: {
@@ -760,8 +760,8 @@ const styles$2 = StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: semanticColor.border.focus,
-      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      borderColor: semanticColor.focus.outer,
+      outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -773,8 +773,8 @@ const styles$2 = StyleSheet.create({
       color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states$1.error.border,
-      borderColor: states$1.error.border
+      outlineColor: semanticColor.focus.outer,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`
     }
   },
   disabled: {
@@ -786,7 +786,7 @@ const styles$2 = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   }
@@ -1090,8 +1090,8 @@ const states = {
     foreground: semanticColor.text.primary
   },
   disabled: {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
     foreground: semanticColor.text.secondary
   },
   error: {
@@ -1117,8 +1117,8 @@ const styles = StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: semanticColor.border.focus,
-      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      borderColor: semanticColor.focus.outer,
+      outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -1131,7 +1131,7 @@ const styles = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   },
@@ -1143,7 +1143,7 @@ const styles = StyleSheet.create({
       color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states.error.border,
+      outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
       borderColor: states.error.border
     }
   }

package/dist/index.js

@@ -107,8 +107,8 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
   })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
 });
 const disabledState$1 = {
-  border: wonderBlocksTokens.semanticColor.border.primary,
-  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+  border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+  background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
 };
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
@@ -148,7 +148,7 @@ const _generateStyles$1 = (checked, error) => {
   }
   const isCheckedOrIndeterminate = checked || checked == null;
   const actionType = error ? "destructive" : "progressive";
-  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const styleType = isCheckedOrIndeterminate ? "primary" : "secondary";
   const colorAction = wonderBlocksTokens.semanticColor.action[styleType][actionType];
   const states = {
     default: {
@@ -167,7 +167,7 @@ const _generateStyles$1 = (checked, error) => {
         backgroundColor: states.default.background,
         borderColor: states.default.border,
         ":focus-visible": {
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -189,7 +189,7 @@ const _generateStyles$1 = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -242,8 +242,8 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   }));
 });
 const disabledState = {
-  border: wonderBlocksTokens.semanticColor.border.primary,
-  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+  border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+  background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background
 };
 const size = 16;
 const disabledChecked = {
@@ -253,7 +253,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: wonderBlocksTokens.semanticColor.action.disabled.default
+  backgroundColor: wonderBlocksTokens.semanticColor.action.primary.disabled.background
 };
 const sharedStyles = aphrodite.StyleSheet.create({
   inputReset: {
@@ -287,7 +287,7 @@ const _generateStyles = (checked, error) => {
     return styles$5[styleKey];
   }
   const actionType = error ? "destructive" : "progressive";
-  const colorAction = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const colorAction = wonderBlocksTokens.semanticColor.action.secondary[actionType];
   const states = {
     unchecked: {
       border: wonderBlocksTokens.semanticColor.border.strong,
@@ -310,7 +310,7 @@ const _generateStyles = (checked, error) => {
         borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: 1
         },
         ":hover": {
@@ -332,7 +332,7 @@ const _generateStyles = (checked, error) => {
         borderColor: currentState.border,
         ":focus-visible": {
           backgroundColor: error ? states.error.background : colorAction.hover.background,
-          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
           outlineOffset: -1
         },
         ":hover": {
@@ -428,7 +428,7 @@ const styles$4 = aphrodite.StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: wonderBlocksTokens.semanticColor.text.disabled
+    color: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground
   },
   description: {
     marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
@@ -760,8 +760,8 @@ const states$1 = {
     foreground: wonderBlocksTokens.semanticColor.text.primary
   },
   disabled: {
-    border: wonderBlocksTokens.semanticColor.border.primary,
-    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+    background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
     foreground: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
@@ -789,8 +789,8 @@ const styles$2 = aphrodite.StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.semanticColor.border.focus,
-      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      borderColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -802,8 +802,8 @@ const styles$2 = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states$1.error.border,
-      borderColor: states$1.error.border
+      outlineColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   },
   disabled: {
@@ -815,7 +815,7 @@ const styles$2 = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   }
@@ -1119,8 +1119,8 @@ const states = {
     foreground: wonderBlocksTokens.semanticColor.text.primary
   },
   disabled: {
-    border: wonderBlocksTokens.semanticColor.border.primary,
-    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    border: wonderBlocksTokens.semanticColor.action.secondary.disabled.border,
+    background: wonderBlocksTokens.semanticColor.action.secondary.disabled.background,
     foreground: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
@@ -1146,8 +1146,8 @@ const styles = aphrodite.StyleSheet.create({
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.semanticColor.border.focus,
-      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      borderColor: wonderBlocksTokens.semanticColor.focus.outer,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -2
     }
   },
@@ -1160,7 +1160,7 @@ const styles = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       outlineOffset: -3
     }
   },
@@ -1172,7 +1172,7 @@ const styles = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: states.error.border,
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
       borderColor: states.error.border
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.1",
-    "@khanacademy/wonder-blocks-core": "12.1.1",
-    "@khanacademy/wonder-blocks-icon": "5.1.1",
-    "@khanacademy/wonder-blocks-layout": "3.1.1",
-    "@khanacademy/wonder-blocks-tokens": "4.2.1",
-    "@khanacademy/wonder-blocks-typography": "3.1.1"
+    "@khanacademy/wonder-blocks-clickable": "6.1.2",
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-icon": "5.1.2",
+    "@khanacademy/wonder-blocks-layout": "3.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",