-
Notifications
You must be signed in to change notification settings - Fork 293
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
Conversation
Build files for 201d54c have been deleted. |
Size Change: +438 B (+0.02%) Total Size: 1.88 MB
ℹ️ View Unchanged
|
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 |
There was a problem hiding this 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.
{ 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> | ||
) } |
There was a problem hiding this comment.
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 🙂
There was a problem hiding this comment.
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. 🤔
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
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
Do not alter or remove anything below. The following sections will be managed by moderators only.
Code Reviewer Checklist
Merge Reviewer Checklist