@khanacademy/wonder-blocks-form 4.7.5 → 4.8.0

package/dist/index.js

@@ -40,7 +40,7 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
-const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$7 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -72,7 +72,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$6);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$7);
   const innerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
     if (innerRef.current != null) {
@@ -161,11 +161,11 @@ const colors$1 = {
     active: activeRed
   }
 };
-const styles$5 = {};
+const styles$6 = {};
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$5[styleKey]) {
-    return styles$5[styleKey];
+  if (styles$6[styleKey]) {
+    return styles$6[styleKey];
   }
   const palette = error ? colors$1.error : colors$1.default;
   let newStyles = {};
@@ -209,11 +209,11 @@ const _generateStyles$1 = (checked, error) => {
       }
     };
   }
-  styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
-  return styles$5[styleKey];
+  styles$6[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$6[styleKey];
 };
 
-const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -236,7 +236,7 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$5);
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$6);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends__default["default"]({}, sharedProps, {
@@ -303,11 +303,11 @@ const colors = {
     active: wonderBlocksTokens.color.activeRed
   }
 };
-const styles$4 = {};
+const styles$5 = {};
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
-  if (styles$4[styleKey]) {
-    return styles$4[styleKey];
+  if (styles$5[styleKey]) {
+    return styles$5[styleKey];
   }
   const palette = error ? colors.error : colors.default;
   let newStyles = {};
@@ -352,11 +352,11 @@ const _generateStyles = (checked, error) => {
       }
     };
   }
-  styles$4[styleKey] = aphrodite.StyleSheet.create(newStyles);
-  return styles$4[styleKey];
+  styles$5[styleKey] = aphrodite.StyleSheet.create(newStyles);
+  return styles$5[styleKey];
 };
 
-const _excluded$4 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const _excluded$5 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
 const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props, ref) {
   const {
       checked,
@@ -370,7 +370,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$4);
+    coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$5);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -386,14 +386,14 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
   };
   const getLabel = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: [styles$3.label, disabled && styles$3.disabledLabel]
+      style: [styles$4.label, disabled && styles$4.disabledLabel]
     }, React__namespace.createElement("label", {
       htmlFor: id
     }, label));
   };
   const getDescription = id => {
     return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$3.description,
+      style: styles$4.description,
       id: id
     }, description);
   };
@@ -408,7 +408,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       style: style,
       className: className
     }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$3.wrapper,
+      style: styles$4.wrapper,
       tabIndex: -1
     }, React__namespace.createElement(ChoiceCore, _extends__default["default"]({}, coreProps, {
       id: uniqueId,
@@ -423,7 +423,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
-const styles$3 = aphrodite.StyleSheet.create({
+const styles$4 = aphrodite.StyleSheet.create({
   wrapper: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -455,13 +455,13 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
   }));
 });
 
-const _excluded$3 = ["disabled", "error"];
+const _excluded$4 = ["disabled", "error"];
 const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$4);
   return React__namespace.createElement(ChoiceInternal, _extends__default["default"]({}, otherProps, {
     variant: "radio",
     disabled: disabled,
@@ -470,7 +470,7 @@ const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   }));
 });
 
-const _excluded$2 = ["checked", "disabled", "onChange", "value", "variant"];
+const _excluded$3 = ["checked", "disabled", "onChange", "value", "variant"];
 const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
@@ -478,7 +478,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$2);
+    remainingProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$3);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -495,7 +495,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   }));
 });
 
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$3 = aphrodite.StyleSheet.create({
   fieldset: {
     border: "none",
     padding: 0,
@@ -543,16 +543,16 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset$1, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React__namespace.createElement(wonderBlocksCore.View, {
     style: style
   }, label && React__namespace.createElement(StyledLegend$1, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
@@ -568,7 +568,7 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => handleChange(value, checked),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "checkbox"
     });
   })));
@@ -591,16 +591,16 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset, {
     "data-testid": testId,
-    style: styles$2.fieldset,
+    style: styles$3.fieldset,
     ref: ref
   }, React__namespace.createElement(wonderBlocksCore.View, {
     style: style
   }, label && React__namespace.createElement(StyledLegend, {
-    style: styles$2.legend
+    style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.description
+    style: styles$3.description
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$2.error
+    style: styles$3.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
@@ -616,14 +616,14 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
       id: `${groupName}-${value}`,
       key: value,
       onChange: () => onChange(value),
-      style: [index > 0 && styles$2.defaultLineGap, style],
+      style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "radio"
     });
   })));
 });
 
-const _excluded$1 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
-const defaultErrorMessage = "This field is required.";
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const defaultErrorMessage$1 = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
@@ -648,7 +648,7 @@ class TextField extends React__namespace.Component {
           }
         });
       } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage$1;
         const maybeError = newValue ? null : requiredString;
         this.setState({
           error: maybeError
@@ -718,12 +718,12 @@ class TextField extends React__namespace.Component {
         autoComplete,
         forwardedRef
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "text-field"
     }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-      style: [styles$1.input, wonderBlocksTypography.styles.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : !!this.state.error && [styles$1.error, light && styles$1.errorLight], !!this.state.error && styles$1.error, style && style],
+      style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, disabled ? styles$2.disabled : this.state.focused ? [styles$2.focused, light && styles$2.defaultLight] : !!this.state.error && [styles$2.error, light && styles$2.errorLight], !!this.state.error && styles$2.error, style && style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
@@ -749,7 +749,7 @@ TextField.defaultProps = {
   disabled: false,
   light: false
 };
-const styles$1 = aphrodite.StyleSheet.create({
+const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
@@ -813,11 +813,11 @@ class FieldHeading extends React__namespace.Component {
       testId
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: styles.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: styles.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -834,7 +834,7 @@ class FieldHeading extends React__namespace.Component {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
@@ -852,7 +852,7 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -870,7 +870,7 @@ class FieldHeading extends React__namespace.Component {
     }), field, this.maybeRenderError());
   }
 }
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   label: {
     color: wonderBlocksTokens.color.offBlack
   },
@@ -885,7 +885,7 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -952,7 +952,7 @@ class LabeledTextField extends React__namespace.Component {
         forwardedRef,
         ariaDescribedby
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "labeled-text-field"
@@ -997,9 +997,210 @@ var labeledTextField = React__namespace.forwardRef((props, ref) => React__namesp
   forwardedRef: ref
 })));
 
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light"];
+const defaultErrorMessage = "This field is required.";
+const StyledTextArea = wonderBlocksCore.addStyle("textarea");
+const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
+  const {
+      onChange,
+      value,
+      placeholder,
+      disabled,
+      id,
+      testId,
+      style,
+      readOnly,
+      autoComplete,
+      name,
+      className,
+      autoFocus,
+      rows,
+      spellCheck,
+      wrap,
+      minLength,
+      maxLength,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      validate,
+      onValidate,
+      required,
+      resizeType,
+      light
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const [error, setError] = React__namespace.useState(null);
+  const ids = wonderBlocksCore.useUniqueIdWithMock("text-area");
+  const uniqueId = id != null ? id : ids.get("id");
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onChange(newValue);
+    handleValidation(newValue);
+  };
+  const handleValidation = newValue => {
+    if (validate) {
+      const error = validate(newValue) || null;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    } else if (required) {
+      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+      const error = newValue ? null : requiredString;
+      setError(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    }
+  };
+  wonderBlocksCore.useOnMountEffect(() => {
+    if (value !== "") {
+      handleValidation(value);
+    }
+  });
+  const getStyles = () => {
+    const baseStyles = [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType]];
+    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, !!error && styles.error];
+    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, !!error && styles.lightError];
+    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+  };
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      width: "100%"
+    }
+  }, React__namespace.createElement(StyledTextArea, _extends__default["default"]({
+    id: uniqueId,
+    "data-testid": testId,
+    ref: ref,
+    className: className,
+    style: [...getStyles(), style],
+    value: value,
+    onChange: handleChange,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    name: name,
+    autoFocus: autoFocus,
+    rows: rows,
+    spellCheck: spellCheck,
+    wrap: wrap,
+    minLength: minLength,
+    maxLength: maxLength,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    required: !!required
+  }, otherProps, {
+    "aria-invalid": !!error
+  })));
+});
+const styles = aphrodite.StyleSheet.create({
+  textarea: {
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
+    boxSizing: "border-box",
+    padding: `10px ${wonderBlocksTokens.spacing.medium_16}px`,
+    minHeight: "1em"
+  },
+  default: {
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: wonderBlocksTokens.color.blue,
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0
+    }
+  },
+  disabled: {
+    background: wonderBlocksTokens.color.offWhite,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack64,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    cursor: "not-allowed"
+  },
+  error: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red
+    }
+  },
+  light: {
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  },
+  lightFocus: {
+    ":focus-visible": {
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0,
+      borderColor: wonderBlocksTokens.color.blue,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+    }
+  },
+  lightDisabled: {
+    backgroundColor: "transparent",
+    border: `1px solid ${wonderBlocksTokens.color.white32}`,
+    color: wonderBlocksTokens.color.white64,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.white64
+    },
+    cursor: "not-allowed"
+  },
+  lightError: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+    }
+  }
+});
+const resizeStyles = aphrodite.StyleSheet.create({
+  both: {
+    resize: "both"
+  },
+  none: {
+    resize: "none"
+  },
+  horizontal: {
+    resize: "horizontal"
+  },
+  vertical: {
+    resize: "vertical"
+  }
+});
+
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.Choice = Choice;
 exports.LabeledTextField = labeledTextField;
 exports.RadioGroup = RadioGroup;
+exports.TextArea = TextArea;
 exports.TextField = TextField$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.7.5",
+  "version": "4.8.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",

package/src/components/__tests__/field-heading.test.tsx

@@ -187,7 +187,11 @@ describe("FieldHeading", () => {
         render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={<I18nInlineMarkup>Hello, world!</I18nInlineMarkup>}
+                label={
+                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
+                        {"<b>Test</b> Hello, world!"}
+                    </I18nInlineMarkup>
+                }
             />,
         );
 
@@ -205,7 +209,11 @@ describe("FieldHeading", () => {
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label={<Body>Hello, world</Body>}
-                description={<I18nInlineMarkup>description</I18nInlineMarkup>}
+                description={
+                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
+                        {"<b>Test</b> description"}
+                    </I18nInlineMarkup>
+                }
             />,
         );