Allow I18nInlineMarkup to be used with LabeledTextField

[kevinbarabash]

Summary:

This PR updates LabeledTextField to accept <I18nInlineMarkup> for the 'label' and 'description' props and updates field-heading.js to wrap them in the appropriate typography component. If developers need to customize the styling they can do so by wrapping <I18nInlineMarkup> in another component.

Issue: None

Test plan:

• yarn jest wonder-blocks-form

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 65533a8b2afed2c2d90cef7c22995159e2ab9c41

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@khanacademy/wonder-blocks-form	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/moody-poems-bow.md, packages/wonder-blocks-form/package.json, packages/wonder-blocks-form/src/components/field-heading.js, packages/wonder-blocks-form/src/components/labeled-text-field.js, packages/wonder-blocks-i18n/src/components/i18n-inline-markup.js, packages/wonder-blocks-form/src/components/__tests__/field-heading.test.js

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[netlify[bot]]

✅ Deploy Preview for wonder-blocks ready!

Name	Link
🔨 Latest commit	65533a8b2afed2c2d90cef7c22995159e2ab9c41
🔍 Latest deploy log	https://app.netlify.com/sites/wonder-blocks/deploys/6329e0091ae08600088000ae
😎 Deploy Preview	https://deploy-preview-1603--wonder-blocks.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions[bot]]

Size Change: +113 B (0%)

Total Size: 74.3 kB

Filename	Size	Change
packages/wonder-blocks-form/dist/es/index.js	4.97 kB	+85 B (+2%)
packages/wonder-blocks-i18n/dist/es/index.js	4.49 kB	+28 B (+1%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.52 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	894 B
packages/wonder-blocks-button/dist/es/index.js	2.82 kB
packages/wonder-blocks-cell/dist/es/index.js	1.92 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.07 kB
packages/wonder-blocks-color/dist/es/index.js	1.01 kB
packages/wonder-blocks-core/dist/es/index.js	3.17 kB
packages/wonder-blocks-data/dist/es/index.js	6.1 kB
packages/wonder-blocks-dropdown/dist/es/index.js	11.5 kB
packages/wonder-blocks-grid/dist/es/index.js	1.37 kB
packages/wonder-blocks-icon-button/dist/es/index.js	1.75 kB
packages/wonder-blocks-icon/dist/es/index.js	2.43 kB
packages/wonder-blocks-layout/dist/es/index.js	1.74 kB
packages/wonder-blocks-link/dist/es/index.js	1.62 kB
packages/wonder-blocks-modal/dist/es/index.js	4.82 kB
packages/wonder-blocks-popover/dist/es/index.js	4.14 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.24 kB
packages/wonder-blocks-spacing/dist/es/index.js	158 B
packages/wonder-blocks-testing/dist/es/index.js	3.64 kB
packages/wonder-blocks-timing/dist/es/index.js	1.61 kB
packages/wonder-blocks-toolbar/dist/es/index.js	855 B
packages/wonder-blocks-tooltip/dist/es/index.js	4.76 kB
packages/wonder-blocks-typography/dist/es/index.js	1.24 kB

_{compressed-size-action}

[codecov[bot]]

Codecov Report

Merging #1603 (65533a8) into main (e936440) will increase coverage by 0.64%. The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1603      +/-   ##
==========================================
+ Coverage   97.04%   97.69%   +0.64%     
==========================================
  Files         208      208              
  Lines        4534     4510      -24     
  Branches     1353     1350       -3     
==========================================
+ Hits         4400     4406       +6     
+ Misses        134      104      -30     

Impacted Files	Coverage Δ
...r-blocks-form/src/components/labeled-text-field.js	100.00% <ø> (ø)
...wonder-blocks-form/src/components/field-heading.js	94.28% <100.00%> (+3.96%)	:arrow_up:
...r-blocks-i18n/src/components/i18n-inline-markup.js	95.65% <100.00%> (+0.19%)	:arrow_up:
...rogress-spinner/src/components/circular-spinner.js	100.00% <0.00%> (ø)
...s/wonder-blocks-modal/src/components/focus-trap.js	96.15% <0.00%> (+50.69%)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update e936440...65533a8. Read the comment docs.

[jeresig]

Thanks Kevin, appreciate it! If landing this is blocking other work, then please just land it - but I feel like if this is a "nice to have" then let's update more things!

[kevinbarabash]

I totally forgot about this PR. I'll update it on Monday.

[kevinbarabash]

#1620 is even more flexible so I'm going to close this PR in preference of that one. I see that there's some things I need to port from this one to that one (namely the removal of the typeof label checks that we have in a few places).