[BD-46] feat: add new toast #2959

khudym · 2023-12-21T14:21:09Z

Description

Implemented new toast based on event emitter
Issue#1858

Deploy Preview

components/toast

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 · 2023-12-21T14:21:15Z

Thanks for the pull request, @khudym!

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

netlify · 2023-12-21T14:21:15Z

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`21168db`
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/6595448fbd76f100080b954c
😎 Deploy Preview	https://deploy-preview-2959--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.

PKulkoRaccoonGang · 2023-12-26T21:16:12Z

src/Toast/README.md

@@ -2,7 +2,8 @@
 title: 'Toast'
 type: 'component'
 components:
- Toast
+- ToastContainer
+- toast


[nit] Is toast a React component?

i`ll remove it, not a component

PKulkoRaccoonGang · 2023-12-26T21:37:51Z

src/Toast/README.md

-      </Toast>
-
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+       <div className="mt-3">


[important] Let's shorten the example of using the component and use a ready-made ExamplePropsForm component, which we use to improve the user experience.

For example:

We can display the number of milliseconds as a range

Add position options as inputs with the radio type

Use a checkbox to display the action

Example of using the ExamplePropsForm component:

https://paragon-openedx.netlify.app/components/bubble/#expandable

https://paragon-openedx.netlify.app/components/chipcarousel/#basic-usage

PKulkoRaccoonGang · 2023-12-26T21:39:33Z

src/Toast/ToastContainer.jsx

 ToastContainer.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
+  position: PropTypes.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),


[important] let's put the PropTypes value into a constant

For example: const TOAST_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];

PKulkoRaccoonGang · 2023-12-26T21:41:19Z

src/Toast/index.jsx

-export const TOAST_CLOSE_LABEL_TEXT = 'Close';
-export const TOAST_DELAY = 5000;
+import Button from '../Button';
+import { Close } from '../../icons';

 function Toast({


[proposal] I propose renaming this component to BaseToast. This will make it more obvious what it is used for.

PKulkoRaccoonGang · 2023-12-26T21:41:38Z

src/Toast/index.jsx

+    >
+      <div className="toast__header small">
+        <p className="toast__message">{message}</p>
+


[nit] Do we need this gap?

i`ll remove it

PKulkoRaccoonGang · 2023-12-26T22:01:51Z

src/index.js

@@ -133,7 +133,8 @@ export {
  TabPane,
 } from './Tabs';
 export { default as TextArea } from './TextArea';
-export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
+export { default as ToastContainer } from './Toast/ToastContainer';
+export { toast } from './Toast/toast';


[important] I suggest changing the file structure in the Toast folder.

Let's consider the option of moving the EventEmitter.js and toast.js files to the utils folder (+ we will implement re-export for these files). Let's rename the index.jsx file to BaseToast, and ToastContainer.jsx in index.jsx.

For example:

Toast

tests

...

utils

EventEmitter.js

index.js

toast.js

_variables.scss

BaseToast.jsx

index.scss

README.MD

index.jsx

The export from Paragon will look like this:
export { default as ToastContainer, toast } from './Toast';

OK, i`ll do it. Maybe we should think about the organization of files so that key files will be in the root (here, for example, the toast container and the toast function) that are exported or keep them in the "core" directory

PKulkoRaccoonGang · 2023-12-26T22:13:11Z

src/Toast/toast.js

+import { toastEmitter } from './EventEmitter';
+
+// eslint-disable-next-line import/prefer-default-export
+export const toast = ({ message, duration, actions }) => {


I think it would be great to add a little jsDocs documentation for this function

PKulkoRaccoonGang · 2023-12-26T22:16:52Z

src/Toast/README.md

+## Features
+
+- **Customizable Appearance**: Choose the window position for toast.
+- **Interactive**: Includes a close button for manual dismissal.
+- **Auto-dismiss**: Disappears automatically after a set duration.
+- **Hover Interactivity**: Auto-dismiss timer pauses on hover or focus, allowing users to interact with the content.


[important] Let's place this description of the functionality of the Toast component in the Behaviors. Now we're repeating ourselves.

Yeah, good idea

PKulkoRaccoonGang · 2023-12-26T22:19:39Z

src/Toast/ToastContainer.jsx

+  }, []);
+
+  return portalDivRef.current ? ReactDOM.createPortal(
+    <div className="toast-container" style={{ ...positionStyle }}>


Suggested change

<div className="toast-container" style={{ ...positionStyle }}>

<div className="pgn__toast-container" style={{ ...positionStyle }}>

PKulkoRaccoonGang · 2023-12-26T22:33:03Z

src/Toast/EventEmitter.js

+    this.events[event].push(callback);
+  }
+
+  emit(event, data) {


[proposal] In the current implementation, when using several Toasts on a page, we observe their simultaneous calling. After clicking on any of the Toast triggers, we simultaneously call the emitter for all toasts on the page. We need to unify this process and make sure that the trigger executes the showToast event only for the desired Toast.

On the component usage example pages we have Toast in the code example (copy button) and in the usage example itself.

codecov · 2024-01-03T11:38:06Z

Codecov Report

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

Comparison is base (6927788) 93.00% compared to head (21168db) 93.05%.

Files	Patch %	Lines
src/Toast/BaseToast.jsx	90.90%	2 Missing ⚠️
src/Toast/index.jsx	96.77%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2959      +/-   ##
==========================================
+ Coverage   93.00%   93.05%   +0.05%     
==========================================
  Files         236      239       +3     
  Lines        4273     4306      +33     
  Branches     1033     1036       +3     
==========================================
+ Hits         3974     4007      +33     
  Misses        295      295              
  Partials        4        4

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

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Dec 21, 2023

PKulkoRaccoonGang reviewed Dec 26, 2023

View reviewed changes

Kyrylo Hudym-Levkovych added 4 commits January 2, 2024 14:34

feat: add simple logic with reducer

fc6278c

feat: new toast component

5833ac0

fix: fix build-docs issue, refactor toast component

4276858

refactor: add changes after review

4bf88cf

khudym force-pushed the hudym/feat/toast branch from 9e1dc57 to 4bf88cf Compare January 2, 2024 12:36

Kyrylo Hudym-Levkovych added 4 commits January 2, 2024 15:44

refactor: update styles after review

6b38233

refactor: remove unnecessary gap after review

b5563da

test: change toastEmitter path in tests

296ec07

fix: fix linter errors

21168db

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] feat: add new toast #2959

[BD-46] feat: add new toast #2959

khudym commented Dec 21, 2023 •

edited

openedx-webhooks commented Dec 21, 2023

netlify bot commented Dec 21, 2023 •

edited

PKulkoRaccoonGang Dec 26, 2023

khudym Jan 2, 2024

PKulkoRaccoonGang Dec 26, 2023

khudym Jan 2, 2024

PKulkoRaccoonGang Dec 26, 2023

PKulkoRaccoonGang Dec 26, 2023

PKulkoRaccoonGang Dec 26, 2023

khudym Jan 2, 2024 •

edited

PKulkoRaccoonGang Dec 26, 2023

khudym Jan 2, 2024

PKulkoRaccoonGang Dec 26, 2023

PKulkoRaccoonGang Dec 26, 2023

khudym Jan 2, 2024

PKulkoRaccoonGang Dec 26, 2023

PKulkoRaccoonGang Dec 26, 2023

codecov bot commented Jan 3, 2024

	<div className="toast-container" style={{ ...positionStyle }}>
	<div className="pgn__toast-container" style={{ ...positionStyle }}>

[BD-46] feat: add new toast #2959

Are you sure you want to change the base?

[BD-46] feat: add new toast #2959

Conversation

khudym commented Dec 21, 2023 • edited

Description

Deploy Preview

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Dec 21, 2023

netlify bot commented Dec 21, 2023 • edited

✅ Deploy Preview for paragon-openedx ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

khudym Jan 2, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jan 3, 2024

Codecov Report

khudym commented Dec 21, 2023 •

edited

netlify bot commented Dec 21, 2023 •

edited

khudym Jan 2, 2024 •

edited