SearchField: Remove -field postfix from id

[beaesguerra]

Summary:

Previously, the SearchField component was appending "-field" to the end of a provided id prop. We remove this post-fix and now use the id prop as is

This change is needed so when SearchField is used with LabeledField, LabeledField will set the id of the field element and wire it up with the label element. Since LabeledField works with a variety of components, the id shouldn't be modified by the field.

Issue: WB-1771

Test plan:

• Confirm that the id on the search field is the same value as the id prop (/?path=/story/packages-searchfield--default&args=id:test123)
  
• Verify with the npm snapshot if there will be any breaking unit/e2e tests in webapp due to the internal id change

[changeset-bot]

🦋 Changeset detected

Latest commit: 207031b

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

This PR includes changesets to release 3 packages

Name	Type
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-birthday-picker	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

[github-actions]

Size Change: -8 B (-0.01%)

Total Size: 101 kB

Filename	Size	Change
packages/wonder-blocks-search-field/dist/es/index.js	1.38 kB	-8 B (-0.58%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3.78 kB
packages/wonder-blocks-banner/dist/es/index.js	1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.77 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	887 B
packages/wonder-blocks-button/dist/es/index.js	4.04 kB
packages/wonder-blocks-cell/dist/es/index.js	2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.06 kB
packages/wonder-blocks-core/dist/es/index.js	3.44 kB
packages/wonder-blocks-data/dist/es/index.js	6.24 kB
packages/wonder-blocks-dropdown/dist/es/index.js	18.2 kB
packages/wonder-blocks-form/dist/es/index.js	6.28 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js	4.76 kB
packages/wonder-blocks-icon-button/dist/es/index.js	3 kB
packages/wonder-blocks-icon/dist/es/index.js	871 B
packages/wonder-blocks-labeled-field/dist/es/index.js	72 B
packages/wonder-blocks-layout/dist/es/index.js	1.82 kB
packages/wonder-blocks-link/dist/es/index.js	2.28 kB
packages/wonder-blocks-modal/dist/es/index.js	5.36 kB
packages/wonder-blocks-pill/dist/es/index.js	1.65 kB
packages/wonder-blocks-popover/dist/es/index.js	4.87 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.52 kB
packages/wonder-blocks-switch/dist/es/index.js	1.94 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.74 kB
packages/wonder-blocks-testing/dist/es/index.js	1.07 kB
packages/wonder-blocks-theming/dist/es/index.js	693 B
packages/wonder-blocks-timing/dist/es/index.js	1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js	2.36 kB
packages/wonder-blocks-toolbar/dist/es/index.js	827 B
packages/wonder-blocks-tooltip/dist/es/index.js	7.08 kB
packages/wonder-blocks-typography/dist/es/index.js	1.23 kB

_{compressed-size-action}

[github-actions]

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-theapxvwkr.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	88
Tests with visual changes	0
Total stories	510
Inherited (not captured) snapshots [TurboSnap]	286
Tests on the build	374

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/cuddly-fireants-cheat.md, packages/wonder-blocks-search-field/src/components/search-field.tsx, packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx

---

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

[github-actions]

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (fae0595) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2365"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2365

[beaesguerra]

Checks look okay when I tried the npm snapshot in webapp!

[jandrade]

🎉

[jandrade]

nit: This would probably account for a patch change, but I also understand if you want to keep it as minor as the API is being affected in some way (via the renderer HTML). Feel free to keep it or change it as you prefer.

[beaesguerra]

Ah yes thanks for catching that! I think patch makes sense since the external api (props) hasn't changed