Skip to content
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

Enhancement/9643 one tap copy #9686

Merged
merged 9 commits into from
Nov 14, 2024
Merged

Conversation

zutigrm
Copy link
Collaborator

@zutigrm zutigrm commented Nov 14, 2024

Summary

Addresses issue:

Relevant technical choices

There were a lot of details on the edit form that do not match with the Figma design, so I polished it here, together with learn more change, to avoid delaying SiWG epic, since we have bug bash coming in few days

PR Author Checklist

  • My code is tested and passes existing unit tests.
  • My code has an appropriate set of unit tests which all pass.
  • My code is backward-compatible with WordPress 5.2 and PHP 7.4.
  • My code follows the WordPress coding standards.
  • My code has proper inline documentation.
  • I have added a QA Brief on the issue linked above.
  • I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

Do not alter or remove anything below. The following sections will be managed by moderators only.

Code Reviewer Checklist

  • Run the code.
  • Ensure the acceptance criteria are satisfied.
  • Reassess the implementation with the IB.
  • Ensure no unrelated changes are included.
  • Ensure CI checks pass.
  • Check Storybook where applicable.
  • Ensure there is a QA Brief.
  • Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

  • Ensure the PR has the correct target branch.
  • Double-check that the PR is okay to be merged.
  • Ensure the corresponding issue has a ZenHub release assigned.
  • Add a changelog message to the issue.

Copy link

github-actions bot commented Nov 14, 2024

Build files for 201d54c have been deleted.

Copy link

github-actions bot commented Nov 14, 2024

Size Change: +438 B (+0.02%)

Total Size: 1.88 MB

Filename Size Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css 60.3 kB +284 B (+0.47%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js 55 kB +1 B (0%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js 161 kB -1 B (0%)
./dist/assets/js/googlesitekit-modules-ads-********************.js 33.4 kB -1 B (0%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js 117 kB +2 B (0%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js 184 kB +1 B (0%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js 64.9 kB -1 B (0%)
./dist/assets/js/googlesitekit-modules-sign-in-with-google-********************.js 24.5 kB +153 B (+0.63%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js 32.2 kB -4 B (-0.01%)
./dist/assets/js/googlesitekit-settings-********************.js 126 kB +3 B (0%)
./dist/assets/js/googlesitekit-vendor-********************.js 322 kB -2 B (0%)
./dist/assets/js/googlesitekit-widgets-********************.js 96.2 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css 11.8 kB
./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css 846 B
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css 8.2 kB
./dist/assets/js/32-********************.js 2.76 kB
./dist/assets/js/33-********************.js 2.25 kB
./dist/assets/js/34-********************.js 3.64 kB
./dist/assets/js/35-********************.js 935 B
./dist/assets/js/36-********************.js 893 B
./dist/assets/js/37-********************.js 1.61 kB
./dist/assets/js/38-********************.js 1.57 kB
./dist/assets/js/39-********************.js 1.61 kB
./dist/assets/js/40-********************.js 1.59 kB
./dist/assets/js/41-********************.js 1.83 kB
./dist/assets/js/42-********************.js 3.11 kB
./dist/assets/js/analytics-advanced-tracking-********************.js 901 B
./dist/assets/js/googlesitekit-activation-********************.js 24 kB
./dist/assets/js/googlesitekit-adminbar-********************.js 34.6 kB
./dist/assets/js/googlesitekit-api-********************.js 10.1 kB
./dist/assets/js/googlesitekit-components-gm2-********************.js 6.17 kB
./dist/assets/js/googlesitekit-components-gm3-********************.js 10.1 kB
./dist/assets/js/googlesitekit-consent-mode-********************.js 25.6 kB
./dist/assets/js/googlesitekit-data-********************.js 2.37 kB
./dist/assets/js/googlesitekit-datastore-forms-********************.js 8.97 kB
./dist/assets/js/googlesitekit-datastore-location-********************.js 2.08 kB
./dist/assets/js/googlesitekit-datastore-site-********************.js 20.5 kB
./dist/assets/js/googlesitekit-datastore-ui-********************.js 10.1 kB
./dist/assets/js/googlesitekit-datastore-user-********************.js 27.3 kB
./dist/assets/js/googlesitekit-entity-dashboard-********************.js 81.8 kB
./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js 646 B
./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js 624 B
./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js 630 B
./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js 712 B
./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js 675 B
./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js 634 B
./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js 657 B
./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js 633 B
./dist/assets/js/googlesitekit-i18n-********************.js 3.93 kB
./dist/assets/js/googlesitekit-modules-********************.js 22.2 kB
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js 22.8 kB
./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js 40.8 kB
./dist/assets/js/googlesitekit-notifications-********************.js 22.8 kB
./dist/assets/js/googlesitekit-polyfills-********************.js 377 B
./dist/assets/js/googlesitekit-splash-********************.js 68.9 kB
./dist/assets/js/googlesitekit-user-input-********************.js 43.7 kB
./dist/assets/js/googlesitekit-wp-dashboard-********************.js 62.6 kB
./dist/assets/js/runtime-********************.js 1.4 kB

compressed-size-action

@zutigrm
Copy link
Collaborator Author

zutigrm commented Nov 14, 2024

Note: 3 KMW VRT updated are not related to this change, but seems to be originating from develop merged previously from other PR, I fixed it here

Copy link
Collaborator

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed the isSmallScreen code because it didn't seem necessary, but I'll make the changes and confirm it doesn't break VRTs.

If so I'll get this merged with my changes.

Comment on lines 50 to 121
{ isSmallScreen ? (
<Grid>
<Row>
<Cell size={ 8 }>
<Grid>
<Row>
<Cell size={ 12 }>
<ClientIDTextField />
</Cell>
</Row>
<Row>
<Cell size={ 4 }>
<ButtonTextSelect />
</Cell>
<Cell size={ 4 }>
<ButtonThemeSelect />
</Cell>
<Cell size={ 4 }>
<ButtonShapeSelect />
</Cell>
</Row>
<Row>
<Cell size={ 12 }>
<OneTapToggle />
</Cell>
</Row>
</Grid>
</Cell>
<Cell size={ 4 }>
<Preview />
</Cell>
</Row>
</Grid>
) : (
<Grid>
<Row>
<Cell size={ 8 }>
<Grid className="googlesitekit-sign-in-with-google-settings-fields__stretch-form">
<Row>
<Cell size={ 12 }>
<ClientIDTextField />
</Cell>
</Row>
<Row>
<Cell size={ 4 }>
<ButtonTextSelect />
</Cell>
<Cell size={ 4 }>
<ButtonThemeSelect />
</Cell>
<Cell size={ 4 }>
<ButtonShapeSelect />
</Cell>
</Row>
</Grid>
</Cell>
<Cell
size={ 4 }
className="googlesitekit-sign-in-with-google-settings-fields__button-preview"
>
<Row>
<Cell size={ 12 }>
<OneTapToggle />
<Preview />
</Cell>
</Row>
</Grid>
</Cell>
<Cell size={ 4 }>
<Preview />
</Cell>
</Row>
</Grid>
</Cell>
<Cell size={ 12 }>
<OneTapToggle />
</Cell>
</Row>
</Grid>
) }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not use ternaries for big components like this: they get quite hard-to-follow/place.

I'll make the change here, but just a note going forward 🙂

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also though: this seems like something we can handle with CSS, this seems a bit complicated/has a lot of duplication. Let's find a CSS-only approach. 🤔

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the reason for this component split based on viewport size? I removed it and it worked just fine with the "large" viewport code.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The order of the elements within the grid, in new layout is showing well for desktop, but layout change was needed to re-order one tap toggle on mobile and tablet, so they are above the preview box

@tofumatt tofumatt dismissed their stale review November 14, 2024 20:42

Changes made by me 🙂

@tofumatt tofumatt merged commit de521af into develop Nov 14, 2024
21 of 22 checks passed
@tofumatt tofumatt deleted the enhancement/9643-one-tap-copy branch November 14, 2024 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants