@khanacademy/wonder-blocks-labeled-field 1.1.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-labeled-field
 
+## 2.0.0
+
+### Major Changes
+
+-   8d26588f: Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended.
+
+### Patch Changes
+
+-   Updated dependencies [0de25cd8]
+    -   @khanacademy/wonder-blocks-tokens@4.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.6
+
 ## 1.1.1
 
 ### Patch Changes

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

@@ -75,10 +75,6 @@ type Props = {
      * - The error will have a testId formatted as `${testId}-error`
      */
     testId?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light?: boolean;
     /**
      * The object containing the custom labels used inside this component.
      *

package/dist/es/index.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'aphrodite';
 import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { semanticColor, color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { semanticColor, spacing } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
@@ -81,7 +81,6 @@ function LabeledField(props) {
     id,
     required,
     testId,
-    light,
     description,
     errorMessage,
     labels = defaultLabeledFieldLabels
@@ -94,14 +93,13 @@ function LabeledField(props) {
   const errorId = `${uniqueId}-error`;
   const isRequired = !!required || !!field.props.required;
   const hasError = !!errorMessage || !!field.props.error;
-  const isLight = light || field.props.light;
   function renderLabel() {
     const requiredIcon = React.createElement(StyledSpan, {
-      style: [styles.textWordBreak, isLight ? styles.lightRequired : styles.required],
+      style: [styles.textWordBreak, styles.required],
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: [styles.textWordBreak, isLight ? styles.lightLabel : styles.label],
+      style: [styles.textWordBreak, styles.label],
       tag: "label",
       htmlFor: fieldId,
       testId: testId && `${testId}-label`,
@@ -115,7 +113,7 @@ function LabeledField(props) {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: [styles.textWordBreak, isLight ? styles.lightDescription : styles.description],
+      style: [styles.textWordBreak, styles.description],
       testId: testId && `${testId}-description`,
       id: descriptionId
     }, description), React.createElement(Strut, {
@@ -131,11 +129,11 @@ function LabeledField(props) {
       "aria-atomic": "true"
     }, errorMessage && React.createElement(React.Fragment, null, React.createElement(PhosphorIcon, {
       icon: WarningCircle,
-      style: [styles.errorIcon, isLight ? styles.lightError : styles.error],
+      style: [styles.errorIcon, styles.error],
       role: "img",
       "aria-label": labels.errorIconAriaLabel
     }), React.createElement(LabelSmall, {
-      style: [styles.textWordBreak, styles.errorMessage, isLight ? styles.lightError : styles.error]
+      style: [styles.textWordBreak, styles.errorMessage, styles.error]
     }, errorMessage))));
   }
   function renderField() {
@@ -144,8 +142,7 @@ function LabeledField(props) {
       "aria-describedby": [errorMessage && errorId, description && descriptionId].filter(Boolean).join(" "),
       required: required || field.props.required,
       error: hasError,
-      testId: testId ? `${testId}-field` : undefined,
-      light: isLight
+      testId: testId ? `${testId}-field` : undefined
     });
   }
   return React.createElement(View, {
@@ -158,15 +155,9 @@ const styles = StyleSheet.create({
   label: {
     color: semanticColor.text.primary
   },
-  lightLabel: {
-    color: semanticColor.text.inverse
-  },
   description: {
     color: semanticColor.text.secondary
   },
-  lightDescription: {
-    color: color.white64
-  },
   errorSection: {
     flexDirection: "row",
     gap: spacing.xSmall_8
@@ -177,9 +168,6 @@ const styles = StyleSheet.create({
   error: {
     color: semanticColor.status.critical.foreground
   },
-  lightError: {
-    color: color.fadedRed
-  },
   errorIcon: {
     marginTop: "1px"
   },
@@ -189,9 +177,6 @@ const styles = StyleSheet.create({
   required: {
     color: semanticColor.status.critical.foreground
   },
-  lightRequired: {
-    color: color.fadedRed
-  },
   textWordBreak: {
     overflowWrap: "break-word"
   }

package/dist/index.js

@@ -110,7 +110,6 @@ function LabeledField(props) {
     id,
     required,
     testId,
-    light,
     description,
     errorMessage,
     labels = defaultLabeledFieldLabels
@@ -123,14 +122,13 @@ function LabeledField(props) {
   const errorId = `${uniqueId}-error`;
   const isRequired = !!required || !!field.props.required;
   const hasError = !!errorMessage || !!field.props.error;
-  const isLight = light || field.props.light;
   function renderLabel() {
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: [styles.textWordBreak, isLight ? styles.lightRequired : styles.required],
+      style: [styles.textWordBreak, styles.required],
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: [styles.textWordBreak, isLight ? styles.lightLabel : styles.label],
+      style: [styles.textWordBreak, styles.label],
       tag: "label",
       htmlFor: fieldId,
       testId: testId && `${testId}-label`,
@@ -144,7 +142,7 @@ function LabeledField(props) {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: [styles.textWordBreak, isLight ? styles.lightDescription : styles.description],
+      style: [styles.textWordBreak, styles.description],
       testId: testId && `${testId}-description`,
       id: descriptionId
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
@@ -160,11 +158,11 @@ function LabeledField(props) {
       "aria-atomic": "true"
     }, errorMessage && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(PhosphorIcon, {
       icon: WarningCircle__default["default"],
-      style: [styles.errorIcon, isLight ? styles.lightError : styles.error],
+      style: [styles.errorIcon, styles.error],
       role: "img",
       "aria-label": labels.errorIconAriaLabel
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: [styles.textWordBreak, styles.errorMessage, isLight ? styles.lightError : styles.error]
+      style: [styles.textWordBreak, styles.errorMessage, styles.error]
     }, errorMessage))));
   }
   function renderField() {
@@ -173,8 +171,7 @@ function LabeledField(props) {
       "aria-describedby": [errorMessage && errorId, description && descriptionId].filter(Boolean).join(" "),
       required: required || field.props.required,
       error: hasError,
-      testId: testId ? `${testId}-field` : undefined,
-      light: isLight
+      testId: testId ? `${testId}-field` : undefined
     });
   }
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -187,15 +184,9 @@ const styles = aphrodite.StyleSheet.create({
   label: {
     color: wonderBlocksTokens.semanticColor.text.primary
   },
-  lightLabel: {
-    color: wonderBlocksTokens.semanticColor.text.inverse
-  },
   description: {
     color: wonderBlocksTokens.semanticColor.text.secondary
   },
-  lightDescription: {
-    color: wonderBlocksTokens.color.white64
-  },
   errorSection: {
     flexDirection: "row",
     gap: wonderBlocksTokens.spacing.xSmall_8
@@ -206,9 +197,6 @@ const styles = aphrodite.StyleSheet.create({
   error: {
     color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
-  lightError: {
-    color: wonderBlocksTokens.color.fadedRed
-  },
   errorIcon: {
     marginTop: "1px"
   },
@@ -218,9 +206,6 @@ const styles = aphrodite.StyleSheet.create({
   required: {
     color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
-  lightRequired: {
-    color: wonderBlocksTokens.color.fadedRed
-  },
   textWordBreak: {
     overflowWrap: "break-word"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-labeled-field",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "design": "v1",
   "description": "LabeledField handles accessibility and layout for associating labels with form components.",
   "main": "dist/index.js",
@@ -18,8 +18,8 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-layout": "^3.0.5",
-    "@khanacademy/wonder-blocks-tokens": "^3.0.1",
+    "@khanacademy/wonder-blocks-layout": "^3.0.6",
+    "@khanacademy/wonder-blocks-tokens": "^4.0.0",
     "@khanacademy/wonder-blocks-typography": "^3.0.5"
   },
   "peerDependencies": {