[BD-46] feat: replace custom submit and reset btns with IconButton

[khudym]

Description

Replace custom Searchfield buttons with IconButton
Issue

Deploy Preview

Deploy

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!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	56ba018
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/655c5d2bb80abe0008f6d528
😎 Deploy Preview	https://deploy-preview-2719--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.

[openedx-webhooks]

Thanks for the pull request, @khudym!

When this pull request is ready, tag your edX technical lead.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9face09) 92.83% compared to head (56ba018) 92.83%.
Report is 71 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2719      +/-   ##
==========================================
- Coverage   92.83%   92.83%   -0.01%     
==========================================
  Files         235      235              
  Lines        4241     4240       -1     
  Branches     1029     1029              
==========================================
- Hits         3937     3936       -1     
  Misses        300      300              
  Partials        4        4              

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

[viktorrusakov]

@khudym We should also try to simplify icons prop if we decide to switch to IconButton, it just does not make sense to pass whole <Icon /> component when we only need its src. Instead, I should be able to provide just the icons themselves, e.g.

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

It's also important not to make a breaking change out of this, one option to do this is to use withDeprecatedProps HOC. I've played around with it a bit, and I think something like this will allow consumers to use new props without breaking old behaviour (this is just a POC, the actual implementation might be cleaner)

SearchField.propTypes = {
  ...
  icons: PropTypes.shape({
    submit: PropTypes.elementType.isRequired,
    clear: PropTypes.elementType,
  })
};

SearchField.defaultProps = {
  ...,
  icons: {
    clear: Close,
    submit: Search,
  },
};

export default withDeprecatedProps(SearchField, 'SearchField', {
  icons: {
    deprType: DeprTypes.FORMAT,
    expect: value => typeof value === 'object' && !React.isValidElement(value.submit) && !React.isValidElement(value.clear),
    transform: value => {
      const newValue = { ...value };
      if (React.isValidElement(value.submit)) {
        newValue.submit = value.submit.props.src;
      }
      if (React.isValidElement(value.clear)) {
        newValue.clear = value.clear.props.src;
      }
      return newValue;
    },
    message: 'It should be an object with "clear" and "submit" keys that contains Icon instances as values.',
  },
});

After this you can pass icon components in both ways

// old variant, consumers will get a warning about deprecation of this usage
<SearchField
  icons={{
    clear: <Icon src={Close} />,
    submit: <Icon src={Search} />,
  }}
/>

// new variant, intended behaviour
<SearchField
  icons={{
    clear: Minus,
    submit: Add,
  }}
/>

Can you try to do this as well? (think we'll also need to implement this for SearchField.Advanced component)

[monteri]

@adamstankiewicz Are we concerned about breaking change here or not. I like @viktorrusakov 's solution. What stops me from doing that is potential breaking change since we change component's API.

[monteri]

@adamstankiewicz,
discussing with @brian-smith-tcril on the PWG we came to conclusion that proper API and code is more beneficial then avoiding the breaking change.

// old variant, consumers will get a warning about deprecation of this usage
<SearchField
  icons={{
    clear: <Icon src={Close} />,
    submit: <Icon src={Search} />,
  }}
/>

// new variant, intended behaviour
<SearchField
  icons={{
    clear: Minus,
    submit: Add,
  }}
/>

[brian-smith-tcril]

@monteri we'll want to make sure the commit uses the breaking change format https://www.conventionalcommits.org/en/v1.0.0/#commit-message-with-both--and-breaking-change-footer

[khudym]

We plan to release all breaking changes at the same time, a new PR is open #2842

[openedx-webhooks]

@khudym Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.