Skip to content

[DO NOT MERGE] Update template to use RR7 app template and Polaris web components #639

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

lizkenyon
Copy link

@lizkenyon lizkenyon commented Jul 15, 2025

What is this PR doing

  • Updates the payment customization sample app to use the latest version of the Shopify React Router Template
  • Migrate UI from Polaris React to Polaris Web Components

Functions UI Before

image

Functions UI After

image

@lizkenyon lizkenyon force-pushed the update-payment-customization-rr7-template branch from ba457d0 to 037a781 Compare July 15, 2025 23:38
Copy link

@byrichardpowell byrichardpowell left a comment

Choose a reason for hiding this comment

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

@davejcameron please can you or team review the UI/UX changes?

Comment on lines +10 to +13
<link
rel="stylesheet"
href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
/>

Choose a reason for hiding this comment

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

Why this addition?

display: block;
}

li {
.list > li {

Choose a reason for hiding this comment

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

Why change from element selectors to classes? I get why it's better, but just want to understand if thisis related/unrelated to RR. I think unrelated?

@davejcameron
Copy link
Contributor

The weird part is the button on the title bar with Payment customizations, I don't think that'd be what we want.

Text,
VerticalStack,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we use https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar instead then at least we are all web components

Copy link
Author

Choose a reason for hiding this comment

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

Yes, I actually just brought this up to Richard. I think it makes sense for us to use all web components. @byrichardpowell if you are aligned I will update here and in the template.

@@ -54,10 +39,10 @@ export const loader = async ({ params, request }) => {
responseJson.data.paymentCustomization?.metafield?.value &&
Copy link
Contributor

Choose a reason for hiding this comment

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

Unrelated to your work, but I wish this used jsonValue rather than .value

@lizkenyon lizkenyon force-pushed the update-payment-customization-rr7-template branch from 037a781 to a16b5ee Compare July 17, 2025 15:04
@lizkenyon
Copy link
Author

lizkenyon commented Jul 18, 2025

The weird part is the button on the title bar with Payment customizations, I don't think that'd be what we want.

@davejcameron I updated it to use the contextual save bar, with bread crumbs. Which I more inline with what is outlined in the patterns doc.

image

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.

3 participants