TF-toasts component implementation #2

melissaroman · 2016-12-29T21:14:29Z

Initial implementation for the tf-toasts
Added some super basic CSS (only for success) to see it better but that can easily be ripped out once we have our CSS stuff complete
Obviously questions, comments, etc. are great!
Didn't add animations in since we had talked about pushing that back until later.

ksin · 2016-12-30T18:27:47Z

README.md

+**Template:**
+```hbs
+{{!-- Inline form --}}
+{{#tf-toast type='positive' message="Positive alert message." onClick=(action "myAction")}}


No # in inline form.

ksin · 2016-12-30T18:29:36Z

README.md


-## Building
+<div class="c-toast u-toast-neutral">Neutral alert message.</div>


BEM syntax would be tf-toast and tf-toast--neutral

Thanks @ksin! Will update.

ksin · 2016-12-30T18:43:30Z

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,2 @@
-<h2 id="title">Welcome to Ember</h2>
-
+{{#tf-toaster}}{{/tf-toaster}}


Since you're not yielding anything, it's probably fine to just make this inline {{tf-toaster}}

ksin · 2016-12-30T19:02:43Z

I think some more documentation and tests for the components and services will help. It's a little tricky to reason about how this is used right now. Correct me if I'm wrong:

The consumer is expected to place tf-toaster in the root template. Toasts are displayed/dismissed by calling methods in the tf-toast-service which is injected into the invoking controller/component.

I think this is viable way of implementing toasts. I like that you don't need to keep any state in the invoking controller/component and it's all action driven. I would not expose the messages from the service. For example, what you're doing here. I would just implement a popMessage method on the service that does the same thing. A clearMessages method would be useful as well.

I think @spencer516 had a different idea of how to implement toasts using ember-wormhole, so I'm curious what others think about this approach in comparison.

melissaroman · 2016-12-30T19:09:43Z

@ksin Totally. I needed to add documentation and tests (started with some docs...) but then wanted to get feedback on this implementation first. And yes, you're right in how it's being used.

We can chat about other ideas / ember-wormhole next week too.

ksin · 2016-12-30T19:16:15Z

Let's also have a discussion as a group on what the expected data flow is for saving models / validations because that should directly effect how we implement this.

Adds component and service implementation

7a99b86

ksin reviewed Dec 30, 2016

View reviewed changes

Adds initial implementation of tf-toasts

f450a34

melissaroman force-pushed the component-implementation branch from 80fe9a5 to f450a34 Compare February 8, 2017 00:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TF-toasts component implementation #2

TF-toasts component implementation #2

melissaroman commented Dec 29, 2016

ksin Dec 30, 2016

ksin Dec 30, 2016

melissaroman Dec 30, 2016

ksin Dec 30, 2016

ksin commented Dec 30, 2016 •

edited

Loading

melissaroman commented Dec 30, 2016

ksin commented Dec 30, 2016 •

edited

Loading


		## Building
		<div class="c-toast u-toast-neutral">Neutral alert message.</div>

		@@ -1,3 +1,2 @@
		<h2 id="title">Welcome to Ember</h2>

		{{#tf-toaster}}{{/tf-toaster}}

TF-toasts component implementation #2

Are you sure you want to change the base?

TF-toasts component implementation #2

Conversation

melissaroman commented Dec 29, 2016

ksin Dec 30, 2016

Choose a reason for hiding this comment

ksin Dec 30, 2016

Choose a reason for hiding this comment

melissaroman Dec 30, 2016

Choose a reason for hiding this comment

ksin Dec 30, 2016

Choose a reason for hiding this comment

ksin commented Dec 30, 2016 • edited Loading

melissaroman commented Dec 30, 2016

ksin commented Dec 30, 2016 • edited Loading

ksin commented Dec 30, 2016 •

edited

Loading

ksin commented Dec 30, 2016 •

edited

Loading