change the toast component content props from string to react-node

[Seolhun]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• I wrote a unit test about the implementation.
• I wrote a storybook document about the implementation.
• I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Summary

• change the toast component content props from string to react-node

Details

• Replace the line breaking "\n" to div element in string content.
• Changed from string to ReactNode to build a custom content toast.
• Since ReactNode is string compatible, there is no breaking-changes.
• Fixed a problem broader than the Close area than the Content area. (flex-shrink)
• actionContent props is deprecated. It is used one place only in the desk application.
• Add a CustomContent(ReactNode) storybook.

Screen.Recording.2022-07-26.at.13.34.00.mov

Browser Compatibility

OS / Engine 호환성을 반드시 확인해주세요.

Windows

• Chrome - Blink
• Edge - Blink
• Firefox - Gecko (Option)

macOS

• Chrome - Blink
• Edge - Blink
• Safari - WebKit
• Firefox - Gecko (Option)

References

https://github.com/channel-io/ch-desk-web/issues/10597

• Figma
• Notion - Contacts Bulk Action

[changeset-bot]

🦋 Changeset detected

Latest commit: dad5a18

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

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	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

[codecov]

Codecov Report

Merging #894 (dad5a18) into next-v1 (fa97b85) will increase coverage by 0.60%.
The diff coverage is 80.00%.

@@             Coverage Diff             @@
##           next-v1     #894      +/-   ##
===========================================
+ Coverage    69.01%   69.61%   +0.60%     
===========================================
  Files          205      205              
  Lines         2872     2873       +1     
  Branches       791      791              
===========================================
+ Hits          1982     2000      +18     
+ Misses         775      759      -16     
+ Partials       115      114       -1     

Impacted Files	Coverage Δ
.../bezier-react/src/components/Toast/Toast.styled.ts	85.71% <ø> (ø)
...s/bezier-react/src/components/Toast/Toast.types.ts	100.00% <ø> (ø)
...ezier-react/src/components/Toast/ToastProvider.tsx	0.00% <0.00%> (ø)
.../bezier-react/src/components/Toast/ToastService.ts	0.00% <0.00%> (ø)
...ier-react/src/components/Toast/ToastController.tsx	100.00% <100.00%> (+100.00%)	⬆️
...bezier-react/src/components/Toast/ToastElement.tsx	86.66% <100.00%> (+13.33%)	⬆️

---

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 fa97b85...dad5a18. Read the comment docs.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[sungik-choi]

• changeset을 추가해주세요(영문)! semantic-release에서 changeset으로 변경하면서, 커밋으로 릴리즈 노트를 자동으로 생성해주지 않기 때문에 버전업에 관련된 변경사항에 대해 개발자가 직접 추가해주어야합니다.
• PR 제목을 영문으로 변경해주시면 감사하겠습니다 🙏 오픈소스임을 고려해서 PR 제목 등은 영문으로 작성하는 방식으로 맞추려고 해요(#895)

[sungik-choi]

Suggested change

	refactor(toast): change toast content props "string" to "react-noe"
	refactor(toast): change toast content props "string" to "react-node"

typo

[quino0627]

👍

[quino0627]

ToastElement에서 default로 ''를 채워주는데, fallback이 필요한가요?
f8481ac#diff-85ac2201c8cd87922f19fcf93d3b985de850225c6ea38d267ca63ab0f4a6a99aR21

[Seolhun]

어제는 잘 안보였는데, 다시보니까 Required(ToastElementProps에서)랑 ReactNode에서 차이가 발생된거였네요.

export type ToastContent = NonNullable<React.ReactNode>

로 변경하면 될것 같습니다.