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

feat(design): add toast component #2499

Merged
merged 23 commits into from
Mar 5, 2024
Merged

feat(design): add toast component #2499

merged 23 commits into from
Mar 5, 2024

Conversation

xelaint
Copy link
Member

@xelaint xelaint commented Jul 12, 2023

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The @daffodil/design package is missing a toast component that can be used to display time-sensitive notifications that are related to application level information.

Part of: #1948

What is the new behavior?

Toast component that is displayed at the top-level of the interface that is used to communicate time-sensitive notifications that are related to application level information.

TODO:

  • Make duration work
  • Implement CDK Overlay
  • Type on button doesn't seem to be working in toast
  • Support anchor links as actions
  • Is there a way to change position strategy depending on screen size?
  • Can we display the newly opened toast on top of the last one instead of after on the bottom?
  • Can we support configurable positions? (DaffToastHorizontalPosition and DaffToastVerticalPosition)
  • Documentation
  • Tests

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

@xelaint xelaint added help wanted Extra attention is needed for this PR or issue package: design @daffodil/design labels Jul 12, 2023
@xelaint xelaint self-assigned this Jul 12, 2023
@xelaint
Copy link
Member Author

xelaint commented Aug 9, 2023

  • Type on button doesn't seem to be working in toast
    - [ ] Support anchor links as actions
  • Is there a way to change position strategy depending on screen size?
  • Can we display the newly opened toast on top of the last one instead of after on the bottom?
  • Can we support configurable positions?
  • Documentation
  • When there are actions in the toast, there should be a role of alertdialog
  • When there are two components that reference toasts, use the same toastservice.

@damienwebdev
Copy link
Member

From a discussion between @xelaint and myself, we decide that the toast should not, by default, hand down "status" to its child buttons.

@xelaint
Copy link
Member Author

xelaint commented Aug 30, 2023

  • How to set dismissible? (close button is shown when dismissible is set to true)
  • HostListener for keydown escape doesn't work. I think we need to implement focus trapping, specifically only if it's dismissible

@xelaint
Copy link
Member Author

xelaint commented Aug 31, 2023

  • Implement a focus stack between modal-like elements, only if there are actions. (DaffFocusStackService)
  • Change toasts so that they render when the last one is either cleared or duration-removed, not clearing immediately. The filter is in the render layer, not the data layer.
  • Implement focus trap on toasts with actions.
  • Implement dismissible on toasts via data/configuration

@xelaint xelaint force-pushed the toast-component branch 2 times, most recently from be5a1f3 to e9937f9 Compare October 2, 2023 16:19
@xelaint xelaint marked this pull request as ready for review November 6, 2023 17:46
@xelaint xelaint requested a review from a team as a code owner November 6, 2023 17:46
@xelaint xelaint requested a review from a team as a code owner November 17, 2023 16:08
@xelaint xelaint force-pushed the toast-component branch 2 times, most recently from 9ae14ec to ba5593b Compare November 21, 2023 17:53
@xelaint xelaint removed the help wanted Extra attention is needed for this PR or issue label Nov 21, 2023
@xelaint xelaint added the help wanted Extra attention is needed for this PR or issue label Dec 7, 2023
@xelaint xelaint removed the help wanted Extra attention is needed for this PR or issue label Dec 15, 2023
@xelaint
Copy link
Member Author

xelaint commented Dec 18, 2023

@damienwebdev Need you to review the updates I made to the size property within DaffToastAction, and add tests.

@griest024 griest024 assigned griest024 and unassigned damienwebdev Mar 4, 2024
@griest024 griest024 added status: awaiting merge This PR has met all the requirements for merge and is waiting on an admin and removed status: awaiting review This PR is awaiting review labels Mar 5, 2024
@xelaint xelaint removed the status: awaiting merge This PR has met all the requirements for merge and is waiting on an admin label Mar 5, 2024
@xelaint xelaint merged commit 3d960ef into develop Mar 5, 2024
12 of 13 checks passed
@gray-bot gray-bot mentioned this pull request Feb 29, 2024
@damienwebdev damienwebdev deleted the toast-component branch June 13, 2024 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: design @daffodil/design
Projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants