Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Wrong propTypes for SearchFieldAdvanced.icons #3026

Conversation

bradenmacdonald
Copy link
Contributor

@bradenmacdonald bradenmacdonald commented Mar 28, 2024

Description

Bug: Merely using the default <SearchField /> in an MFE without setting the optional icons property results in the following console warning:

 console.error
    Warning: Failed prop type: Invalid prop `icons.submit` of type `function` supplied to `SearchFieldAdvanced`, expected a single ReactElement.
        at SearchFieldAdvanced (frontend-app-course-authoring/node_modules/@openedx/paragon/src/SearchField/SearchFieldAdvanced.jsx:18:5)
        at SearchField (frontend-app-course-authoring/node_modules/@openedx/paragon/src/SearchField/index.jsx:28:5)

From the SearchField docs, you can easily verify that the icons prop takes elementType values, not element values by trying these two:

✅ Works: pass an element type (or leave icons unspecified)

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  icons={{submit: Search}}
/>

🛑 Doesn't work: pass an actual element :

<SearchField
  onSubmit={value => console.log(`search submitted: ${value}`)}
  icons={{submit: <Search />}}
/>

I don't know why this warning isn't showing up on the docs site console. Perhaps warnings are suppressed there?

Deploy Preview

This doesn't change the implementation, just the runtime console warning.

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

@openedx-webhooks
Copy link

Thanks for the pull request, @bradenmacdonald! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

  • supporting documentation
  • Open edX discussion forum threads
  • timeline information ("this must be merged by XX date", and why that is)
  • partner information ("this is a course on edx.org")
  • any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Mar 28, 2024
@bradenmacdonald bradenmacdonald added the bug Report of or fix for something that isn't working as intended label Mar 28, 2024
Copy link

netlify bot commented Mar 28, 2024

Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 4378e8c
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/6605e8cfe95c9300087a5904
😎 Deploy Preview https://deploy-preview-3026--paragon-openedx.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@bradenmacdonald bradenmacdonald force-pushed the braden/fix-searchfield-icon-validation branch from 0f20f41 to 4378e8c Compare March 28, 2024 22:01
Copy link

codecov bot commented Mar 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.18%. Comparing base (1fd134a) to head (4378e8c).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #3026   +/-   ##
=======================================
  Coverage   93.18%   93.18%           
=======================================
  Files         249      249           
  Lines        4342     4342           
  Branches     1036     1036           
=======================================
  Hits         4046     4046           
  Misses        292      292           
  Partials        4        4           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@brian-smith-tcril brian-smith-tcril merged commit 0750db7 into openedx:master May 1, 2024
10 checks passed
@openedx-webhooks
Copy link

@bradenmacdonald 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

@openedx-semantic-release-bot

🎉 This PR is included in version 22.3.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@bradenmacdonald
Copy link
Contributor Author

Thanks @brian-smith-tcril !

@bradenmacdonald bradenmacdonald deleted the braden/fix-searchfield-icon-validation branch May 2, 2024 03:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Report of or fix for something that isn't working as intended byte-size open-source-contribution PR author is not from Axim or 2U released
Projects
Archived in project
Status: Closed
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants