Toaster component #86

xdrdak · 2020-06-03T13:26:50Z

Description

This PR adds a new toaster component. It uses the react-toast-notifications library for pretty much most of the heavy lifting.

We've created 2 components that are auto-hooked into an extended <ToastProvider /> component, meaning everything should be configured to the DSD defaults, but we still allow changes (any props that should work with the regular ToastProvider will work with ours)

I've also taken the time to update react-testing-library to its latest version to take advantage of the screen function.

How to test?

Checkout branch, run yarn dev
Open Storybook
Or check the deploy preview on Netlify (link available in comments)

Checklist

I have read the CONTRIBUTING guide
I have prepared CHANGELOGs for release
I have tested my changes on supported browsers
I have added tests that prove my fix is effective or that my feature works

netlify · 2020-06-03T13:31:48Z

Deploy preview for lightspeed-flame ready!

Built with commit fbad43a

https://deploy-preview-86--lightspeed-flame.netlify.app

netlify · 2020-06-03T13:37:15Z

Deploy preview for lightspeed-flame ready!

Built with commit df8f8e5

https://deploy-preview-86--lightspeed-flame.netlify.app

glambert

Nice one @xdrdak 👍

glambert · 2020-06-08T19:07:56Z

packages/flame/src/Toaster/README.md

+      <div>{/* The rest of your app */}</div>
+      <div>{/* The rest of your app */}</div>


Do we need the same example twice here?

glambert · 2020-06-08T19:14:03Z

packages/flame/src/Toaster/story.tsx

+import Readme from './README.md';
+import { ToasterProvider, useToasts } from './index';
+import { ActionableToastContent, Toaster } from './Toaster';
+import { Button } from '../Button';
+import { Heading2 } from '../Text';


Suggested change

import Readme from './README.md';

import { ToasterProvider, useToasts } from './index';

import { ActionableToastContent, Toaster } from './Toaster';

import { Button } from '../Button';

import { Heading2 } from '../Text';

import { Button } from '../Button';

import { Heading2 } from '../Text';

import Readme from './README.md';

import { ActionableToastContent, Toaster } from './Toaster';

import { ToasterProvider, useToasts } from './index';

Nit to go from absolute to (closest) relative imports. We could enable an eslint rule for this if we want to automate: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md

open a pr to the LS linter if you feel strongly about it

Meh, this is what we currently have based on the version of the airbnb setting we extend:

https://github.com/airbnb/javascript/blob/96f95fa35e23f015448445b8d5bb7ac8e03a739a/packages/eslint-config-airbnb-base/rules/imports.js#L144-L147

We could go with the latest version of eslint-plugin-import's order, what do you think?

The default value is ["builtin", "external", "parent", "sibling", "index"].

we could add it, but that should be done in a different PR.

tracking here #91

packages/flame/src/Toaster/story.tsx

glambert · 2020-06-08T19:15:34Z

packages/flame/src/Toaster/story.tsx

+        }}
+      >
+        Generate success
+      </Button>


Non-blocking: should we customize the default active/focus state for the close button or leave as is? This is with latest Chrome:

@maartenafink

packages/flame/src/Toaster/story.tsx

glambert · 2020-06-08T19:24:42Z

packages/flame/src/Toaster/Toaster.tsx

+  entered: { transform: 'translate3d(0,0,0)', opacity: 1 },
+  exiting: { transform: 'translate3d(0, 120%, 0)', opacity: 0 },
+  exited: { transform: 'translate3d(0, 120%, 0)', opacity: 0 },
+};


Was multi-stacking animation implemented from specs? There is a slight "jump" after an extra toaster is shown:

Multi stacking is apparently allowed, but no specs are written.

If anything, users can disable the functionality very easily by checking if there are any notifications in the stack.

jump is due to the underlying lib not properly calculating where things should pop, I would need to PR or hack around the issue. Its not as jarring as their own example luckily.

glambert · 2020-06-12T18:38:29Z

packages/flame/src/Toaster/story.tsx

+      </div>
+    </ToasterProvider>
+  );
+});


Is it possible to capture a Toaster with a (static) progress state for Percy?

Not unless I remove animations entirely from the component and change a chunk of the underlying implementation just to have visual diffing working.

Not worth it.

Giving it a spin to see how Percy behaves by enabling progress on the actionable examples.

No dice - oh well, let's keep as is for now 👍

* Add toaster component WIP * Update jest and testing-library. Tests for toaster * Update toaster readme * remove dangling TODO from toaster * Add better responsiveness for Toaster * Restrict Toaster types. Bypass click events for ToasterContainer * Update changelog. Add notice that we are using an external lib * Remove unused typing file * Spread rest on Toaster component to auto-pause timer * Update toaster behaviour to match specs * Supress warnings for logs. Fix toaster example setup * less jarring height transition * fixing text alignment * Set minHeight for container at 60px * Test out Percy with animations Co-authored-by: maartenafink <[email protected]> Co-authored-by: Guillaume Lambert <[email protected]>

* Add AlertInCard component. Auto color for Alert icons. (#82) * Add AlertInCard component. Auto color for Alert icons. * Update Alert/readme.md * Update CHANGELOG.md * Remove useless generic in getTheme * tiny fixes to match design specs * Update typing ignores * design feedback. remove useless typing * hush now codecov * Force add DSD specific icons if prop not filled * PR feedback Co-authored-by: maartenafink <[email protected]> * [Security] Bump websocket-extensions from 0.1.3 to 0.1.4 (#89) Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. **This update includes a security fix.** - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](faye/websocket-extensions-node@0.1.3...0.1.4) Signed-off-by: dependabot-preview[bot] <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> * ForwardRef on Remaining Base Components (#75) * Forward ref on remaining base components * adjust changelog Co-authored-by: Guillaume Lambert <[email protected]> * Toaster component (#86) * Add toaster component WIP * Update jest and testing-library. Tests for toaster * Update toaster readme * remove dangling TODO from toaster * Add better responsiveness for Toaster * Restrict Toaster types. Bypass click events for ToasterContainer * Update changelog. Add notice that we are using an external lib * Remove unused typing file * Spread rest on Toaster component to auto-pause timer * Update toaster behaviour to match specs * Supress warnings for logs. Fix toaster example setup * less jarring height transition * fixing text alignment * Set minHeight for container at 60px * Test out Percy with animations Co-authored-by: maartenafink <[email protected]> Co-authored-by: Guillaume Lambert <[email protected]> * Move storybook down to package level. Update to 5.3 (#92) * port over previous tokens stories. Adapt for flame * Move dependencies to relevant package * disable css modules as its not really relevant anymore * update popover and tooltip story styling. sort top level sections * skip theme percy snapshots as per old implementation * Remove dead deps. Bubble ExampleBox from popover and tooltip * Move stories/ into flame/.storybook. Cleanup useless test * Fix percy command * Fix weird regression due to injecting components in style tags * Display themeGet and css for colours instead of classnames * Fix spaced group * Colours -> Colors * remove superflous react devDep * leverage top level packages Co-authored-by: Guillaume Lambert <[email protected]> * cleanup of top level storybook. Fix typing (#98) * Allow next to be published * Fix tests for alert. Move publish config to flame * Flush superfluous version due to merge * Fix typing issue in Dialog/Story * [Security] Bump acorn from 6.4.0 to 6.4.1 (#97) Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. **This update includes security fixes.** - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@6.4.0...6.4.1) Signed-off-by: dependabot-preview[bot] <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Xavier Drdak <[email protected]> * Publish - @lightspeed/[email protected] * adjust publish scripts (#100) * Dummy changes to trigger release * Publish - @lightspeed/[email protected] * Adjust line-height in Alert to be normal. (#101) * Adjust lineheight in Alert to be normal. * Update changelog * Adjust changelog to better sync up with release of RC * Publish - @lightspeed/[email protected] * Fix code generation typing issue in build-themes * Publish - @lightspeed/[email protected] * Fix Alert and AlertInCard typing. Allow empty title (#102) * Fix Alert and AlertInCard typing. Allow empty title * Update changelog * Publish - @lightspeed/[email protected] * Use react popper hooks (#104) * Leverage react-popper usePopper hook * remove old popper dependency * update changelog * fix lint * Publish - @lightspeed/[email protected] * Force Update active poppers. Fix clickOutside handler (#105) * add forceUpdate to Dropdown and Popover * Replace forceUpdate with update. Fix clickOutside hook * Update CHANGELOG.md * Set higher zIndex for ToasterContainer (#107) * set higher zIndex for ToasterContainer * Update CHANGELOG.md * Publish - @lightspeed/[email protected] * Add next/Badge component (#106) * add next/Badge component * fix colors for oldskool theme * Update CHANGELOG.md * Let percy snapshot next * Use variant prop instead of type for badge * Update CHANGELOG.md * Adjust padding based on design feedback * Fix storybook publishing Co-authored-by: Guillaume Lambert <[email protected]> * Publish - @lightspeed/[email protected] * Smoothed out border-radius for next/Badge (#108) * Smoothed out border-radius for next/Badge * Update CHANGELOG.md * Export typing for next/Badge (#110) * export typing for next/Badge * Update CHANGELOG.md * Create (S)CSS-flavored Flame implementation package (#109) * Port sass as is into flame * Apply suggestions from code review Co-authored-by: Guillaume Lambert <[email protected]> * Update css README docs. Remove media queries css as this is out of scope * Remove private flag from flame-css Co-authored-by: Guillaume Lambert <[email protected]> * Publish - @lightspeed/[email protected] - @lightspeed/[email protected] * Move Storybook back to root again (#111) * move everything back to root * strip magic from storybook-components. Adjust root package scripts * Mute typings for withReadme * Fix netlify build path * Fix storybook decorator injection condition * Add chromatic workflow (#112) * Remove percy. Adjust old percy stuff for chromatic (#114) * Adjust chromatic workflow * Use tags as target for publish action. Snapshot label for visual diffing (#115) * Target tags for action. Snapshot on label * Pushes on master will trigger a snapshot * Add "type=text" to input for convenience (#117) * Publish - @lightspeed/[email protected] - @lightspeed/[email protected] * Adjust publishing scripts. Dummy changes to trigger publish * Publish - @lightspeed/[email protected] Co-authored-by: maartenafink <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Guillaume Lambert <[email protected]>

xdrdak added 6 commits June 2, 2020 15:19

Add toaster component WIP

4d05e68

Update jest and testing-library. Tests for toaster

3d8f861

Update toaster readme

9361bc3

remove dangling TODO from toaster

538cca0

Add better responsiveness for Toaster

c1a3d9f

Restrict Toaster types. Bypass click events for ToasterContainer

fbad43a

xdrdak requested a review from a team as a code owner June 3, 2020 13:26

xdrdak added 2 commits June 3, 2020 09:27

Update changelog. Add notice that we are using an external lib

2aab158

Remove unused typing file

d625e1a

xdrdak added 2 commits June 3, 2020 14:05

Spread rest on Toaster component to auto-pause timer

e4d91df

Update toaster behaviour to match specs

df8f8e5

xdrdak force-pushed the toaster-component branch from 0d3ae87 to df8f8e5 Compare June 3, 2020 19:00

xdrdak changed the base branch from master to next June 5, 2020 14:09

xdrdak added 2 commits June 5, 2020 11:00

Merge branch 'next' into toaster-component

cbe92de

Merge branch 'next' into toaster-component

b5ae102

glambert reviewed Jun 8, 2020

View reviewed changes

xdrdak and others added 4 commits June 8, 2020 17:42

Supress warnings for logs. Fix toaster example setup

4f6a04a

less jarring height transition

2275625

fixing text alignment

7b40551

Set minHeight for container at 60px

372543d

glambert reviewed Jun 12, 2020

View reviewed changes

glambert added 2 commits June 12, 2020 15:12

Test out Percy with animations

079aa31

Merge branch 'next' into toaster-component

d9bb1db

glambert approved these changes Jun 12, 2020

View reviewed changes

xdrdak merged commit 8fad2d0 into next Jun 12, 2020

xdrdak deleted the toaster-component branch June 12, 2020 20:04

xdrdak mentioned this pull request Jun 17, 2020

Flame v2 #99

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toaster component #86

Toaster component #86

xdrdak commented Jun 3, 2020

netlify bot commented Jun 3, 2020

netlify bot commented Jun 3, 2020 •

edited

Loading

glambert left a comment

glambert Jun 8, 2020

glambert Jun 8, 2020

xdrdak Jun 8, 2020

glambert Jun 8, 2020 •

edited

Loading

glambert Jun 8, 2020 •

edited

Loading

xdrdak Jun 8, 2020

xdrdak Jun 8, 2020

glambert Jun 8, 2020

xdrdak Jun 8, 2020

glambert Jun 8, 2020 •

edited

Loading

xdrdak Jun 8, 2020

glambert Jun 12, 2020

xdrdak Jun 12, 2020

glambert Jun 12, 2020

glambert Jun 12, 2020

		<div>{/* The rest of your app */}</div>
		<div>{/* The rest of your app */}</div>

Toaster component #86

Toaster component #86

Conversation

xdrdak commented Jun 3, 2020

Description

How to test?

Checklist

netlify bot commented Jun 3, 2020

netlify bot commented Jun 3, 2020 • edited Loading

glambert left a 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

glambert Jun 8, 2020 • edited Loading

Choose a reason for hiding this comment

glambert Jun 8, 2020 • edited Loading

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

glambert Jun 8, 2020 • edited Loading

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

netlify bot commented Jun 3, 2020 •

edited

Loading

glambert Jun 8, 2020 •

edited

Loading

glambert Jun 8, 2020 •

edited

Loading

glambert Jun 8, 2020 •

edited

Loading