feat!: release updates to Chip, SearchField, Pagination, Form.Autosuggest

[adamstankiewicz]

Description

This release contains breaking changes to the following 4 components:

• Chip
• Pagination
• SearchField
• Form.Autosuggest

Breaking Changes

Chip

This updates the Chip component to reflect the design spec as intended.

BREAKING CHANGE: Many of the SCSS variables (i.e., tokens) surrounding Chip were removed. Consumers should verify no longer using any of the removed SCSS variables in custom Paragon brands/themes.

Pagination

This updates the Pagination component to rely on the proper button variants, rather than having all pagination buttons be of the primary variant (even when unselected) with custom styles overriding the default button variant style (e.g., background color).

It also refactors the component to be more maintainable moving forward.

BREAKING CHANGE: Many of the SCSS variables (i.e., tokens) surrounding Pagination were removed. Consumers should verify no longer using any of the removed SCSS variables in custom Paragon brands/themes.

BREAKING CHANGE: icons prop now accepts the icon src instead of an Icon component.

Before

<Pagination
  ...
  icons={{
    leftIcon: <Icon src={ChevronLeft} />,
    rightIcon: <Icon src={ChevronRight} />,
  }}
/>

After

<Pagination
  ...
  icons={{
    leftIcon: ChevronLeft,
    rightIcon: ChevronRight,
  }}
/>

SearchField

This updates the SearchField component to rely on IconButton components for its actions (e.g., reset, submit). It also ensures the external submit button in the dark variant has appropriate hover styles.

BREAKING CHANGE: icons prop now accepts the icon src instead of an Icon component.

Before

<SearchField
  ...
  icons={{
    submit: <Icon src={Search} />,
    clear: <Icon src={Close} />,
  }}
/>

After

<SearchField
  ...
  icons={{
    submit: Search,
    clear: Close,
  }}
/>

Form.Autosuggest

This updates the Autosuggest component to provide the consumer with:

• The value entered in the textbox by the user
• The selected value (as it is displayed in the dropdown)
• The id of the selected option

This also allows the consumer to determine if the component should be in an error state when:

• No text has been entered
• Text has been entered, but not selection has been made
• An external validation check has failed - "customError"

The consumer will provide error messages for the appropriate error states.

BREAKING CHANGE: value prop of Form.Autosuggest is now an object instead of a string

BREAKING CHANGE: Form.Autosuggest now uses onChange instead of onSelected

BREAKING CHANGE: Form.Autosuggest now takes in different error messages for value/selection required, and custom errors

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

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.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Name	Link
🔨 Latest commit	8416547
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/65aa8e4f207ac500092bf188
😎 Deploy Preview	https://deploy-preview-2995--paragon-openedx.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 configuration.

[brian-smith-tcril]

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (b858230) 93.00% compared to head (8416547) 93.18%.
Report is 2 commits behind head on master.

Files	Patch %	Lines
src/Pagination/PaginationContext.jsx	97.05%	2 Missing ⚠️
src/Form/FormAutosuggest.jsx	99.28%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2995      +/-   ##
==========================================
+ Coverage   93.00%   93.18%   +0.18%     
==========================================
  Files         236      249      +13     
  Lines        4273     4342      +69     
  Branches     1033     1036       +3     
==========================================
+ Hits         3974     4046      +72     
+ Misses        295      292       -3     
  Partials        4        4              

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

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀