-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Hosting Config: Describe premium features in the upsell nudge #71750
Conversation
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~27 bytes added 📈 [gzipped])
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Sections (~3368 bytes added 📈 [gzipped])
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 (~60 bytes added 📈 [gzipped])
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. Generated by performance advisor bot at iscalypsofastyet.com. |
6c24b03
to
8b33c0a
Compare
This PR modifies the release build for odyssey-stats To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PejTkB-3N-p2 |
Typescript trys to infer the prop type components written in JS, however it doesn't know that most of these props are optional.
The code is nice and clean, as is the UI! I couldn't test it, though (I sent a message on Slack). My only comment is about the icons - ideally, we'd have one of each, but some of the icons used on the banner are slightly different to those used on the hosting features. Regarding CSS specificity: very specific CSS is a good thing in this code base IMO. 😄 A nice start to 2023, @p-jackson! |
Yeah good point I hadn't noticed that. The problem is that the cards don't line up 1-to-1 with features. The credentials card at the top is needed to use SFTP, SSH or CLI; so which icon should it match with? And sometimes the card refers to SSH and sometimes it doesn't. So it's not just a matter of lining them up. Since the first card is the only situation when this clash of icons is apparent (since the overlay fades out the rest of the cards) I think I can just come up with a fix for this one. Since it's the credentials card I'll try using a key icon or something. |
This PR changes the icon to a key #71828 |
Looks good to me and can be merged. If I were being ultra picky I would say some icons could be flipped in RTL mode: Using (I am curious to know how the PHP would even look to a person that reads RTL). I tested with Firefox and Chrome on mobile, tablet and desktop. You should consider updating the Calypso examples to include a banner in this style. It was updated in #71597 but only to show simple list items. I am a big fan of rich content like this and think we should promote it. |
Thanks for testing RTL! |
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7727672 Thank you @p-jackson for including a screenshot in the description! This is really helpful for our translators. |
Translation for this Pull Request has now been finished. |
Proposed Changes
Users in the
treatment
cohort of thecalypso_hosting_configuration_upsell_list_features
experiment see an updated upsell nudge on the/hosting-config
page.<Experiment>
component to switch between the two banner variations (read more pbxNRc-2f8-p2)Implementation Discussion
The
<UpsellBanner>
and<Banner>
components feel like god-classes. They have a lot of properties to toggle between all their different modes. Ideally these components would be more composable rather than have lots of modes e.g rather than exposing aprimaryButton
prop it would allow users to provide their own button.Rather than adding yet more flags to the shared components I've been able to achieve most of the re-styling in CSS. However the CSS selectors need to be very specific (especially overloading specific media queries) which is not ideal. I suppose it's arguable which is better for long-term maintainability: god-components vs. fragile CSS overrides. I'd be interested in your thoughts.
Out of scope for this PR
This PR doesn't:
Testing Instructions
treatment
bookmarklet to your bookmark bartreatment
cohort (tutorial video p1673249013170409/1673241333.083479-slack-C04H4NY6STW)calypso.localhost:3000/hosting-config
in a site with no business planPre-merge Checklist
Have you written new tests for your changes?Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to DataHave we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?Related to #71598