JITMS: adding new JITM styles by jeffgolenski · Pull Request #7117 · Automattic/jetpack

jeffgolenski · 2017-05-03T18:18:35Z

Adding 2 new JITM styles and cleaning up the original JITM

To do:

clean up woo commerce JITM (visually)
clean up original JITM styles. Update outdated css
add styles for new JITM banners (calypso styled)

Current JITM style example:

New JITM style examples:

Can change border color if desired.
Can have title + description or just a title
Can have gray or primary blue CTA button
JITMs will dynamically resize/realign based on the content. In order words, If you only have a title in the JITM, it'll be vertically centered, and when you add a description, it'll automatically ensure both are vertically centered. ;-)
*Work well on mobile

Important to note that the CTA buttons have a max width in order to be easier to predict and control how they'll be displayed on various screen sizes—which can bump the button text to two lines if its long. We should try and re-word some of the JITMS so the button is one word and most of the verbs are in the description.

TO TEST:

Get this branch synced up to your sandbox.
Visit yousite.com/wp-admin/update-core.php where the sample JITMs sit ** Ensure VaultPress is deactivated to see these particular JITMs
Sample woo JITM is hanging out at yoursite.com/wp-admin/edit.php?post_type=shop_order when woo commerce is installed.

** If you've dismissed JITMs in the past and no longer see them, you'll need to reset your JITM options. Do so by SSH'ing into your sandbox and clearing them with cd public_html and then wp jetpack options delete hide_jitm

JITM: first commit - adding css comment

…tyles JITMS: cleaning up some spaces and indents within the original jitm styles

JITM: importing some scss partials into the JITM scss file

JITMS: migrating proper styles from dops-components to jetpack. Since they live outside of react, I still need to clean and streamline the styles specifically for these new JITMs though.

JITM: beginning to clean up some of the new JITMS styles

JITM: adding dismiss ability to new banners

JITMS: converting applicable PXs into REMs (margins, padding, etc)

withinboredom · 2017-05-12T14:50:30Z

@jeffgolenski don't worry about actually updating the individual markup for each type of JITM. Your examples will work great and I'll just merge this into my new JITM branch.

jeffgolenski · 2017-05-15T15:27:18Z

@withinboredom Sounds good. now that I've cleared out the other priorities from last week I'll be continuing a long with this. I've got a little more code to clean up and some styles to add for a 3rd banner style and then we'll be gold.

JITMs: updating one of the current JITMs to new styling

JITMs: removing a sample JITM

jeffgolenski · 2017-05-15T21:12:26Z

@jessefriedman @richardmuscat Can you take a look at the example images above and let me know if you have any questions? They're very flexible and still very subtle.. most importantly, they adapt to the content on the fly (As described above) and are based on the calypso banners. Give me the thumbs up and I'll replace all the old JITM style code to match these.

Then @withinboredom can do his thing.

jessefriedman · 2017-05-16T19:50:26Z

They look excellent

As for the border color on the left, did you have ideas on what those colors could mean? Or were you just showing examples?

As for the fixed width button even super short cta's can translate to long text, how will these compensate?

Have you tested them in tight quarters like the left hand side of the media uploader?

jeffgolenski · 2017-05-16T22:01:02Z

@jessefriedman

As for the border color on the left, did you have ideas on what those colors could mean? Or were you just showing examples?

My thoughts here were just to bring over the functionality of the calypso banners. If we decide we want to swap the colors we can... but we need to keep in mind that specific colors are related to plan upgrade nudges... so if we're staying away from those type of JITMS I recommend sticking with the green border.

As for the fixed width button even super short cta's can translate to long text, how will these compensate?

Long text is fine, provided its one word. If the CTA buttons are multiple words then we can't control line break—and nor should we be mico-managing the design like that... the jitms and buttons within them will still function just fine either way.

example:

Have you tested them in tight quarters like the left hand side of the media uploader?

Still doing some testing. Will report back tomorrow. Just wanted to make sure everyone was okay with the visual direction here.

jessefriedman · 2017-05-16T23:44:12Z

Great Jeff, in that case these are gtg from me. Great job.

JITMs: adding new styles to VP jitm after a post is made

jeffgolenski · 2017-05-17T15:56:29Z

Revised JITM for enabling backups after a post is published

JITMS: styling new woo JITM

jeffgolenski · 2017-05-17T17:06:58Z

Revised woo JITM:

old:

new:

cc @kellychoffman @jeffstieler

jeffgolenski · 2017-05-17T17:10:55Z

Alright @withinboredom - I think we're good to go on my end here. All the styling is setup. Once you employ your new method of triggering these JITMs I can do some more testing and cleanup if need be.

jeffgolenski · 2017-05-17T17:12:09Z

@dereksmart I tweaked the format of the JITMS for a few existing jitms. Can you give the code a once-over and make sure I didn't screw up any of the tracks data you put in?

jeffstieler · 2017-05-17T17:21:36Z

@avivapinchas @MarinaWoo the styling has changed on the JITMs, perhaps a copy change is warranted as well? (See #7117 (comment))

The new styling looks to allow for a bolder title with text underneath. What should the WCS JITMs say differently, if anything? Here's a backup one, for reference: #7117 (comment)

avivapinchas · 2017-05-17T17:46:00Z

I'd edit to:

New: Show live rates from USPS
Added bonus: print shipping labels without leaving WooCommerce.

jeffstieler · 2017-05-18T14:41:33Z

@jeffgolenski do you mind if I sneak in a copy change for our JITM here?

jeffgolenski · 2017-05-18T15:51:51Z

@jeffstieler have at it jeffrey!

jeffstieler · 2017-05-18T16:04:49Z

It looks like there's more than styling tweaks here (I'm seeing some different tracking code as well) - I'm going to hold off on making the copy changes until I have more time to grok everything that's been changed in the JITMs. 👍

rickybanister · 2017-05-23T21:23:31Z

@jeffgolenski the x icon—is that dashicons? It looks off when compared to Calypso, I suppose we are unable to use gridicons since these exist outside of Jetpack?

jeffgolenski · 2017-05-23T21:25:49Z

@rickybanister

I suppose we are unable to use gridicons since these exist outside of Jetpack?

Precisely. Unless we make a huge push to load gridicons everywhere. It's a very similar x so I didn't feel that taking a day to do so has high ROI

dereksmart · 2017-05-23T21:48:39Z

Looks great. Tracks are still sending correctly. @withinboredom you can incorporate tracks into the following PR with these data attributes in a link element:

<a
data-jptracks-name="nudge_click"
data-jptracks-prop="jitm-vault"
class="jptracks" // necessary class name
>

Code that tracks it is here

withinboredom · 2017-05-25T16:57:13Z

Implemented in #7058

JITM: first commit - adding css comment

188c78a

JITM: first commit - adding css comment

jeffgolenski added [Pri] Normal [Status] In Progress labels May 3, 2017

jeffgolenski self-assigned this May 3, 2017

jeffgolenski added 2 commits May 3, 2017 15:42

JITMS: cleaning up some spaces and indents within the original jitm s…

adf9140

…tyles JITMS: cleaning up some spaces and indents within the original jitm styles

JITM: importing some scss partials into the JITM scss file

637132b

JITM: importing some scss partials into the JITM scss file

jeherve added the General label May 3, 2017

jeffgolenski added 5 commits May 4, 2017 15:06

JITMS: migrating proper styles from dops-components to jetpack

9ecf09c

JITMS: migrating proper styles from dops-components to jetpack. Since they live outside of react, I still need to clean and streamline the styles specifically for these new JITMs though.

JITM: beginning to clean up some of the new JITMS styles

6eb31c9

JITM: beginning to clean up some of the new JITMS styles

JITM: adding dismiss ability to new banners

037983c

JITM: adding dismiss ability to new banners

JITMS: converting applicable PXs into REMs

80ae00c

JITMS: converting applicable PXs into REMs (margins, padding, etc)

JITM: cleaning up JITM styles

ae633f8

jeffgolenski added 2 commits May 15, 2017 16:53

JITMs: updating one of the current JITMs to new styling

ca7a45f

JITMs: updating one of the current JITMs to new styling

JITMs: removing a sample JITM

4449e1e

JITMs: removing a sample JITM

withinboredom mentioned this pull request May 16, 2017

Add/jitm builder #7058

Merged

1 task

JITMs: adding new styles to VP jitm after a post is made

adaf99b

JITMs: adding new styles to VP jitm after a post is made

JITMS: styling new woo JITM

e9fe3d4

JITMS: styling new woo JITM

jeffgolenski requested a review from dereksmart May 17, 2017 17:12

fix tests

da610e2

withinboredom closed this May 25, 2017

matticbot removed the [Status] In Progress label May 25, 2017

jeherve deleted the enhance/new-jitm-styles branch May 26, 2017 13:39

Conversation

jeffgolenski commented May 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

withinboredom commented May 12, 2017

Uh oh!

jeffgolenski commented May 15, 2017

Uh oh!

jeffgolenski commented May 15, 2017

Uh oh!

jessefriedman commented May 16, 2017

Uh oh!

jeffgolenski commented May 16, 2017

Uh oh!

jessefriedman commented May 16, 2017

Uh oh!

jeffgolenski commented May 17, 2017

Uh oh!

jeffgolenski commented May 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeffgolenski commented May 17, 2017

Uh oh!

jeffgolenski commented May 17, 2017

Uh oh!

jeffstieler commented May 17, 2017

Uh oh!

avivapinchas commented May 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeffstieler commented May 18, 2017

Uh oh!

jeffgolenski commented May 18, 2017

Uh oh!

jeffstieler commented May 18, 2017

Uh oh!

rickybanister commented May 23, 2017

Uh oh!

jeffgolenski commented May 23, 2017

Uh oh!

dereksmart commented May 23, 2017

Uh oh!

withinboredom commented May 25, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

jeffgolenski commented May 3, 2017 •

edited

Loading

jeffgolenski commented May 17, 2017 •

edited

Loading

avivapinchas commented May 17, 2017 •

edited

Loading