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(config): add transition durations for tailwind #2036

Merged
merged 2 commits into from
Aug 22, 2024

Conversation

booc0mtaco
Copy link
Contributor

@booc0mtaco booc0mtaco commented Aug 15, 2024

  • add in durations via (transitionDuration)

  • add in new toast notification implementation example

  • use new medium durations in example

  • demo autodismiss behavior with stack of notifications

  • use state to track

Test Plan:

  • Wrote/updated automated tests
  • CI tests / new tests are not applicable
  • Manually tested my changes, and here are the details:

@booc0mtaco
Copy link
Contributor Author

Screen.Recording.2024-08-15.at.10.19.21.mov

Copy link

github-actions bot commented Aug 15, 2024

size-limit report 📦

Path Size
components 89.2 KB (0%)
styles 27.25 KB (0%)

Copy link

codecov bot commented Aug 15, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.43%. Comparing base (db6203e) to head (2e7de53).
Report is 1 commits behind head on next.

Additional details and impacted files
@@           Coverage Diff           @@
##             next    #2036   +/-   ##
=======================================
  Coverage   97.43%   97.43%           
=======================================
  Files         109      109           
  Lines        2613     2613           
  Branches      664      664           
=======================================
  Hits         2546     2546           
  Misses         65       65           
  Partials        2        2           

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

@booc0mtaco
Copy link
Contributor Author

@ahuth Fun little puzzle you might have a nice idea for.

So in this example, what I want to do is use a list to store records for the notifications that get added.

  • because we want to do the transitions, I don't .pop from the list as it will get unmounted right away and not give time for the transition to run.
  • Things currently work fine, but we end up with an increasingly large array. I'd like to clean up that list
  • Curious about the best approach (I think one can use useEffect, some delay or maybe debounce to trim all the hidden entries?)

Maybe i talked myself into a solution, but wanted to loop you in anyway lol

@ahuth
Copy link
Contributor

ahuth commented Aug 20, 2024

Ah nice, I like the debounce idea. Only cleanup when toast stuff isn't happening?

On the other hand, if it's just for stories, maybe it's fine to let the list get super large?

@booc0mtaco
Copy link
Contributor Author

Ah nice, I like the debounce idea. Only cleanup when toast stuff isn't happening?

On the other hand, if it's just for stories, maybe it's fine to let the list get super large?

Yah, we have control over the time period for how long it takes to transition out, so could keep them in sync. I like the idea of keeping the example simple and describing it as demo-only (e.g., "in a production implementation, make sure to prune the notification list once dismissal has occurred")

- demo autodismiss behavior with stack of notifications
- use state to track
- add in durations via (transitionDuration)
- add in new toast notification implementation example
- use new medium durations in example

- demo autodismiss behavior with stack of notifications
- use state to track

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# Date:      Thu Aug 15 10:40:43 2024 -0400
#
# On branch aholloway/EDS-1385
# Changes to be committed:
#	deleted:    src/components/ToastNotification/ToastNotification.stories.ts
#	new file:   src/components/ToastNotification/ToastNotification.stories.tsx
#	modified:   tailwind.config.ts
#
@booc0mtaco booc0mtaco marked this pull request as ready for review August 20, 2024 17:41
@booc0mtaco booc0mtaco requested a review from a team August 20, 2024 17:43
@booc0mtaco booc0mtaco changed the title docs(ToastNotification): add interactive implementation example feat(config): add transition durations for tailwind Aug 20, 2024
@booc0mtaco booc0mtaco merged commit aed0f09 into next Aug 22, 2024
9 checks passed
@booc0mtaco booc0mtaco deleted the aholloway/EDS-1385 branch August 22, 2024 18:25
@booc0mtaco booc0mtaco mentioned this pull request Aug 23, 2024
booc0mtaco added a commit that referenced this pull request Aug 23, 2024
## [15.3.0](v15.2.1...v15.3.0) (2024-08-23)

[Storybook](https://61313967cde49b003ae2a860-vuzmfnjuoj.chromatic.com/)

Figma Components Library:
🟢  No breaking changes
- EDS-toastNotification:
  - deleted the dissmissType property
  - Added Toast Pattern documentation to handle multiple toasts
- EDS-popover: added EDS-popover 2.0 component

### Features

* **config:** add transition durations for tailwind ([#2036](#2036)) ([aed0f09](aed0f09))
* **Popover:** update theming to 2.0 ([#2031](#2031)) ([c5ab351](c5ab351))
* **tokens:** add in additional table tokens ([#2035](#2035)) ([a698a5b](a698a5b))
* **tokens:** update visited tokens ([#2034](#2034)) ([df84c87](df84c87))


### Bug Fixes

* **Card:** add spacing between eyebrow and title ([#2040](#2040)) ([d6ee15d](d6ee15d))
* **Link:** handle inverse variant for standalone links ([#2042](#2042)) ([351d7fd](351d7fd))
* **Popover:** update component version number ([#2038](#2038)) ([9940d76](9940d76))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants