Fix the outline colour for the wp-checkout component #36887

fditrapani · 2019-10-18T15:08:38Z

Changes proposed in this Pull Request

This PR changes the default outline colour.

Before:

After:

Testing instructions

Follow instructions here: #36720

Fixes #

This will be a new package that can be used to replace the checkout process in Calypso, CrowdSignal, Jetpack, and Akismet.

This makes it more declarative and allows more freedom to the component.

matticbot · 2019-10-18T15:08:40Z

Test live: https://calypso.live/?branch=fix/outline-color

…ttic/wp-calypso into add/wp-checkout-component

sirbrillig · 2019-10-18T15:15:45Z

packages/wp-checkout/public/index.html

@@ -13,6 +13,10 @@
 			-moz-osx-font-smoothing: grayscale;
 			background: #F3F4F5;
 		}
+
+		*:focus {


These styles will only affect this page, which is just a demo for a host page. Is this a style rule we will want for all our hosts? If so, we should include it somewhere in the files in src/components.

note to self: maybe I should rename this directory from public to demo to make it more obvious what it does!

oh right. Good point! I'll move it to the parent container.

sirbrillig

Nice! Now, I wonder what happens if we just merge this in github?

sirbrillig · 2019-10-18T19:44:49Z

Merged manually into #36720 to avoid a squash.

matticbot · 2019-10-21T08:11:06Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~27 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest        -46 B  (-0.0%)      +27 B  (+0.1%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~920 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-login                -3556 B  (-0.3%)     -378 B  (-0.1%)
entry-main                 -2927 B  (-0.2%)     -298 B  (-0.1%)
entry-domains-landing      -1914 B  (-0.3%)     -244 B  (-0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~10921 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
devdocs                       +4596 B  (+3.6%)     +364 B  (+1.0%)
stats                         +2551 B  (+0.3%)     +641 B  (+0.3%)
activity                      +2551 B  (+0.6%)     +644 B  (+0.6%)
settings                      +2547 B  (+0.4%)     +687 B  (+0.5%)
themes                        +2516 B  (+0.6%)     +675 B  (+0.7%)
post-editor                   +2481 B  (+0.1%)     +707 B  (+0.1%)
woocommerce                   +2409 B  (+0.1%)     +619 B  (+0.1%)
checkout                      +2406 B  (+0.3%)     +746 B  (+0.3%)
media                         +2280 B  (+0.6%)     +608 B  (+0.6%)
gutenberg-editor              +2280 B  (+0.3%)     +612 B  (+0.3%)
plugins                       +2173 B  (+0.4%)     +649 B  (+0.5%)
import                        +2173 B  (+1.0%)     +668 B  (+1.2%)
domains                       +2173 B  (+0.2%)     +689 B  (+0.3%)
plans                         +2172 B  (+0.4%)     +634 B  (+0.5%)
settings-performance          +2169 B  (+1.1%)     +658 B  (+1.2%)
people                         +591 B  (+0.2%)      +44 B  (+0.0%)
theme                          +576 B  (+0.2%)     +111 B  (+0.1%)
earn                           +575 B  (+0.2%)     +101 B  (+0.2%)
account                        +539 B  (+0.2%)      +52 B  (+0.1%)
concierge                      +411 B  (+0.1%)      +69 B  (+0.1%)
hosting                        +410 B  (+0.4%)      +18 B  (+0.1%)
comments                       +253 B  (+0.0%)      +50 B  (+0.0%)
settings-writing               +249 B  (+0.1%)      +46 B  (+0.0%)
zoninator                      +233 B  (+0.1%)      +25 B  (+0.0%)
wp-super-cache                 +233 B  (+0.1%)      +24 B  (+0.0%)
settings-discussion            +233 B  (+0.1%)      +32 B  (+0.1%)
sensei                         +233 B  (+0.2%)      +41 B  (+0.2%)
purchases                      +233 B  (+0.0%)      +33 B  (+0.0%)
home                           +233 B  (+0.1%)      +33 B  (+0.0%)
hello-dolly                    +233 B  (+0.2%)      +40 B  (+0.1%)
export                         +233 B  (+0.1%)      +38 B  (+0.1%)
email                          +233 B  (+0.1%)      +38 B  (+0.0%)
jetpack-connect                +232 B  (+0.0%)      +36 B  (+0.0%)
settings-security              +225 B  (+0.1%)      +24 B  (+0.0%)
help                           +215 B  (+0.0%)      +58 B  (+0.0%)
account-close                  +195 B  (+0.1%)      +37 B  (+0.0%)
site-blocks                    +181 B  (+0.1%)      +26 B  (+0.0%)
security                       +181 B  (+0.0%)      +26 B  (+0.0%)
privacy                        +181 B  (+0.1%)      +26 B  (+0.0%)
notification-settings          +181 B  (+0.1%)      +26 B  (+0.0%)
me                             +181 B  (+0.1%)      +26 B  (+0.0%)
happychat                      +181 B  (+0.1%)      +26 B  (+0.0%)
domain-connect-authorize       +181 B  (+1.4%)      +43 B  (+1.1%)
google-my-business             +127 B  (+0.0%)       +9 B  (+0.0%)
posts-pages                    +118 B  (+0.0%)      +25 B  (+0.0%)
posts-custom                   +118 B  (+0.0%)      +18 B  (+0.0%)
marketing                      +118 B  (+0.0%)      +25 B  (+0.0%)
signup                          -58 B  (-0.0%)       -6 B  (-0.0%)
sites                           +52 B  (+0.1%)       +9 B  (+0.0%)
preview                         +52 B  (+0.1%)      +10 B  (+0.0%)
feature-upsell                  +52 B  (+0.0%)       +9 B  (+0.0%)
customize                       +52 B  (+0.0%)       +5 B  (+0.0%)
checklist                       +52 B  (+0.0%)       +9 B  (+0.0%)
jetpack-onboarding              +38 B  (+0.1%)      -11 B  (-0.1%)
gutenboarding                   -35 B  (-0.0%)      +60 B  (+0.0%)
reader                          +11 B  (+0.0%)       +9 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~4595 bytes added 📈 [gzipped])

name                                                         parsed_size           gzip_size
async-load-emoji-text                                           +10766 B  (+9.1%)     +160 B  (+0.7%)
async-load-design-blocks                                         +2896 B  (+0.1%)     +737 B  (+0.1%)
async-load-design                                                +2768 B  (+0.1%)     +673 B  (+0.2%)
async-load-design-playground                                     +2754 B  (+0.2%)     +654 B  (+0.2%)
async-load-post-editor-media-modal                               +2232 B  (+0.8%)     +608 B  (+0.8%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx      +2135 B  (+1.6%)     +647 B  (+1.9%)
async-load-signup-steps-domains                                  +2121 B  (+1.1%)     +682 B  (+1.5%)
async-load-signup-steps-clone-point                               +597 B  (+0.4%)      +49 B  (+0.1%)
async-load-signup-steps-theme-selection                           +343 B  (+0.9%)      +70 B  (+0.7%)
async-load-layout-guided-tours                                    +292 B  (+0.8%)      +56 B  (+0.6%)
async-load-components-web-preview-component                       -285 B  (-0.1%)      -10 B  (-0.0%)
async-load-apps-notifications-index-jsx                           -218 B  (-0.2%)       +9 B  (+0.0%)
async-load-blocks-inline-help-popover                             +215 B  (+0.1%)      +57 B  (+0.1%)
async-load-my-sites-current-site-domain-warnings                  +181 B  (+0.4%)      +24 B  (+0.2%)
async-load-layout-masterbar-drafts-popover                        +181 B  (+2.4%)      +32 B  (+1.3%)
async-load-signup-steps-plans-atomic-store                        +180 B  (+0.2%)      +29 B  (+0.1%)
async-load-signup-steps-plans                                     +180 B  (+0.1%)      +29 B  (+0.1%)
async-load-signup-steps-clone-credentials                         +173 B  (+0.4%)      +15 B  (+0.1%)
async-load-lib-abtest-test-helper                                 +166 B  (+1.8%)      +53 B  (+1.7%)
async-load-blocks-calendar-popover                                 +20 B  (+0.0%)      +21 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

sirbrillig added 2 commits October 17, 2019 20:31

Add initial work on wp-checkout package

aa66082

This will be a new package that can be used to replace the checkout process in Calypso, CrowdSignal, Jetpack, and Akismet.

Replace isVisible prop by deriving from summary

184b1a9

This makes it more declarative and allows more freedom to the component.

fditrapani requested a review from a team as a code owner October 18, 2019 15:08

fditrapani requested a review from sirbrillig October 18, 2019 15:10

Merge branch 'add/wp-checkout-component' of https://github.com/Automa…

85b3a9d

…ttic/wp-calypso into add/wp-checkout-component

fditrapani force-pushed the fix/outline-color branch from 70b2e12 to 00a0a5d Compare October 18, 2019 15:12

Change outline colour

ae4a5a4

fditrapani force-pushed the fix/outline-color branch from 00a0a5d to ae4a5a4 Compare October 18, 2019 15:15

sirbrillig reviewed Oct 18, 2019

View reviewed changes

Move global outline to parent container

982aa9e

sirbrillig approved these changes Oct 18, 2019

View reviewed changes

sirbrillig closed this Oct 18, 2019

sirbrillig deleted the fix/outline-color branch October 18, 2019 19:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix the outline colour for the wp-checkout component #36887

Fix the outline colour for the wp-checkout component #36887

fditrapani commented Oct 18, 2019

matticbot commented Oct 18, 2019

sirbrillig Oct 18, 2019

sirbrillig Oct 18, 2019

fditrapani Oct 18, 2019

sirbrillig left a comment

sirbrillig commented Oct 18, 2019

matticbot commented Oct 21, 2019 •

edited

Loading

Fix the outline colour for the wp-checkout component #36887

Fix the outline colour for the wp-checkout component #36887

Conversation

fditrapani commented Oct 18, 2019

Changes proposed in this Pull Request

Testing instructions

matticbot commented Oct 18, 2019

sirbrillig Oct 18, 2019

Choose a reason for hiding this comment

sirbrillig Oct 18, 2019

Choose a reason for hiding this comment

fditrapani Oct 18, 2019

Choose a reason for hiding this comment

sirbrillig left a comment

Choose a reason for hiding this comment

sirbrillig commented Oct 18, 2019

matticbot commented Oct 21, 2019 • edited Loading

matticbot commented Oct 21, 2019 •

edited

Loading