Update components

Author: davejcameron

sample-apps/payment-customizations/app/routes/app._index.jsx

@@ -99,12 +99,8 @@ export default function Index() {
   const generateProduct = () => fetcher.submit({}, { method: "POST" });
 
   return (
-    <s-page>
-      <TitleBar title="React Router app template">
-        <button variant="primary" onClick={generateProduct}>
-          Generate a product
-        </button>
-      </TitleBar>
+    <s-page heading="React Router app template">
+      <s-button variant="primary" onClick={generateProduct} slot="primary-action">Generate a product</s-button>
       <s-section heading="Congrats on creating a new Shopify app 🎉">
         <s-paragraph>
           This embedded app template uses{" "}
@@ -245,4 +241,4 @@ export default function Index() {
 
 export const headers = (headersArgs) => {
   return boundary.headers(headersArgs);
-}; 
+};

sample-apps/payment-customizations/app/routes/app.additional.jsx

@@ -2,8 +2,7 @@ import { TitleBar } from "@shopify/app-bridge-react";
 
 export default function AdditionalPage() {
   return (
-    <s-page>
-      <TitleBar title="Additional page"></TitleBar>
+    <s-page heading="Additional page">
       <s-section heading="Multiple pages">
         <s-paragraph>
           The app template comes with an additional page which demonstrates how
@@ -19,7 +18,7 @@ export default function AdditionalPage() {
         <s-paragraph>
           To create your own page and have it show up in the app navigation, add
           a page inside <code>app/routes</code>, and a link to it in the{" "}
-          <code>&lt;NavMenu&gt;</code> component found in{" "}
+          <code>&lt;s-app-nav&gt;</code> component found in{" "}
           <code>app/routes/app.jsx</code>.
         </s-paragraph>
       </s-section>
@@ -37,4 +36,4 @@ export default function AdditionalPage() {
       </s-section>
     </s-page>
   );
-} 
+}

sample-apps/payment-customizations/app/routes/app.jsx

@@ -16,12 +16,10 @@ export default function App() {
 
   return (
     <AppProvider embedded apiKey={apiKey}>
-      <NavMenu>
-        <Link to="/app" rel="home">
-          Home
-        </Link>
-        <Link to="/app/additional">Additional page</Link>
-      </NavMenu>
+      <s-app-nav>
+        <s-link href="/app" rel="home">Home</s-link>
+        <s-link href="/app/additional">Additional page</s-link>
+      </s-app-nav>
       <Outlet />
     </AppProvider>
   );
@@ -34,4 +32,4 @@ export function ErrorBoundary() {
 
 export const headers = (headersArgs) => {
   return boundary.headers(headersArgs);
-}; 
+};

sample-apps/payment-customizations/app/routes/app.payment-customization.$functionId.$id.jsx

@@ -171,20 +171,15 @@ export default function PaymentCustomization() {
 
   return (
     <form data-save-bar onSubmit={handleSubmit} onReset={handleReset}>
-      <s-page>
-        <ui-title-bar title="Hide payment method">
-          <button variant="breadcrumb" href="shopify:admin/settings/payments/customizations">
-            Payment customizations
-          </button>
-        </ui-title-bar>
+      <s-page heading="Hide payment method">
+        <s-link href="shopify:admin/settings/payments/customizations" variant="breadcrumb" slot="breadcrumb-actions">Payment customizations</s-link>
 
         {errorBanner}
 
         <s-section>
-          <s-grid gap="base">
+          <s-grid gap="base" gridTemplateColumns="1fr 1fr">
             <s-text-field
               name="paymentMethodName"
-              type="text"
               label="Payment method"
               value={paymentMethodName}
               onInput={(e) => setPaymentMethodName(e.target.value)}

sample-apps/payment-customizations/package.json

@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@shopify/api-codegen-preset": "^1.1.1",
+    "@shopify/polaris-types": "^1.0.1",
     "eslint": "^8.38.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",

sample-apps/payment-customizations/tsconfig.json

@@ -16,7 +16,7 @@
       "moduleResolution": "Bundler",
       "target": "ES2022",
       "baseUrl": ".",
-      "types": ["@react-router/node", "vite/client"],
+      "types": ["@react-router/node", "vite/client", "@shopify/polaris-types"],
       "rootDirs": [".", "./.react-router/types"]
     }
-  }
+  }