refactor: update prototype app to use SDK components by aaronlee777 · Pull Request #1557 · Gusto/embedded-react-sdk

aaronlee777 · 2026-04-14T22:38:08Z

Copilot

Pull request overview

Refactors the prototype app pages to use the SDK’s shared layout and UI components (via the component adapter), reducing bespoke inline styling and aligning the prototype UI with SDK patterns.

Changes:

Replaced multiple inline-styled layouts with SDK Grid/Flex primitives in the Home page and Component Showcase prototype.
Updated Sidebar search to use the SDK TextInput and replaced the category caret glyph with an SVG icon.
Reworked the Home “Prototypes” list to render SDK Box cards with a button-driven navigation affordance.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
prototype-app/src/prototypes/component-showcase/index.tsx	Converts sections to SDK `Grid`/`Flex` layout primitives for the component showcase.
prototype-app/src/Sidebar.tsx	Uses SDK `TextInput` for search and swaps the caret glyph for an SVG icon.
prototype-app/src/Sidebar.module.scss	Adjusts caret styling/rotation for the new SVG icon and removes old input styling.
prototype-app/src/Home.tsx	Rebuilds Home using SDK components (`Heading`, `Text`, `Box`, `Button`, `Grid`/`Flex`) and button navigation.
prototype-app/src/Home.module.scss	Removes previous page-specific typography/card styles and keeps only `<code>` styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-15T15:43:50Z

  margin-right: 0.375rem;
+  transform: rotate(90deg);
+  position: relative;
+  top: toRem(5);


.categoryArrow sets font-size, but the caret is an SVG with fixed width/height, so the icon size won’t be affected and may look oversized/misaligned. Consider styling the nested svg (width/height) or switching the SVG to size via em so it tracks font-size.

Suggested change

top: toRem(5);

top: toRem(5);

svg {

width: 1em;

height: 1em;

}

Copilot · 2026-04-15T15:43:50Z

@@ -28,13 +30,12 @@ export function ComponentShowcase() {
          <Components.Button variant="primary" isLoading>
            Loading
          </Components.Button>
-        </div>
-      </section>
+        </Flex>


The Buttons row no longer wraps (previously flexWrap: 'wrap'), and Flex doesn’t support flex-wrap. On narrower screens this can cause horizontal overflow. Consider using a Grid layout for the button examples or a simple wrapper that enables wrapping.

Copilot · 2026-04-15T15:43:51Z

-      </div>
+      <Grid gap={32}>
+        <Flex flexDirection="column" gap={4}>
+          <Components.Heading as="h1">Embeddedd React SDK Design Sandbox</Components.Heading>


The page title has a typo: “Embeddedd”. This will be user-visible on the Home page; please correct it to “Embedded”.

Suggested change

<Components.Heading as="h1">Embeddedd React SDK Design Sandbox</Components.Heading>

<Components.Heading as="h1">Embedded React SDK Design Sandbox</Components.Heading>

Copilot · 2026-04-15T15:43:51Z

+              >
+                <Components.Text size="sm" variant="supporting">
+                  {description}
+                </Components.Text>
+              </Components.Box>


The prototype card renders description twice (once in the Box header and again in the Box body), which results in duplicated content in the UI. Consider removing one of these or using the body for different content (e.g., metadata, tags, or a shorter summary).

Suggested change

>

<Components.Text size="sm" variant="supporting">

{description}

</Components.Text>

</Components.Box>

/>

Copilot · 2026-04-15T15:43:51Z

+          <Flex flexDirection="column" gap={4}>
+            <Components.Text>
+              1. Create a directory in <code>prototype-app/src/prototypes/your-feature/</code>
+            </Components.Text>
+            <Components.Text>
+              2. Add an <code>index.tsx</code> — for single-page prototypes this is all you need
+            </Components.Text>
+            <Components.Text>
+              3. For multi-page prototypes, add an <code>{'<Outlet />'}</code> in your index and
+              create sub-page components
+            </Components.Text>
+            <Components.Text>
+              4. Register routes in <code>prototype-app/src/main.tsx</code>
+            </Components.Text>
+            <Components.Text>
+              5. Add an entry to <code>categorizedRegistry</code> in{' '}
+              <code>prototype-app/src/registry.ts</code>
+            </Components.Text>
+          </Flex>


“How to add a new prototype” was changed from a semantic ordered list to a set of paragraphs with manual numbering. This reduces accessibility/semantics for screen readers. Consider using Components.OrderedList (available in the adapter) or restoring an <ol><li> structure.

Suggested change

<Flex flexDirection="column" gap={4}>

<Components.Text>

1. Create a directory in <code>prototype-app/src/prototypes/your-feature/</code>

</Components.Text>

<Components.Text>

2. Add an <code>index.tsx</code> — for single-page prototypes this is all you need

</Components.Text>

<Components.Text>

3. For multi-page prototypes, add an <code>{'<Outlet />'}</code> in your index and

create sub-page components

</Components.Text>

<Components.Text>

4. Register routes in <code>prototype-app/src/main.tsx</code>

</Components.Text>

<Components.Text>

5. Add an entry to <code>categorizedRegistry</code> in{' '}

<code>prototype-app/src/registry.ts</code>

</Components.Text>

</Flex>

<ol>

<li>

<Components.Text>

Create a directory in <code>prototype-app/src/prototypes/your-feature/</code>

</Components.Text>

</li>

<li>

<Components.Text>

Add an <code>index.tsx</code> — for single-page prototypes this is all you need

</Components.Text>

</li>

<li>

<Components.Text>

For multi-page prototypes, add an <code>{'<Outlet />'}</code> in your index and

create sub-page components

</Components.Text>

</li>

<li>

<Components.Text>

Register routes in <code>prototype-app/src/main.tsx</code>

</Components.Text>

</li>

<li>

<Components.Text>

Add an entry to <code>categorizedRegistry</code> in{' '}

<code>prototype-app/src/registry.ts</code>

</Components.Text>

</li>

</ol>

Copilot · 2026-04-15T15:43:52Z

+code {
+  background: #e9ecef;
+  padding: toRem(2) toRem(6);
+  border-radius: toRem(4);
+  font-family: monospace;
+  font-size: toRem(13);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
 }


In a CSS Module, a bare code { ... } selector is global and will style all <code> elements app-wide, not just on the Home page. If the intent is to scope this styling to Home, nest it under .root (e.g., .root code { ... }) or use :global explicitly if global is intended.

Copilot · 2026-04-15T15:43:52Z

+      <Flex flexDirection="column" gap={12}>
        <Components.Heading as="h2">Badges</Components.Heading>
-        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+        <Flex gap={8} alignItems="center">
          <Components.Badge status="info">Info</Components.Badge>
          <Components.Badge status="success">Success</Components.Badge>
          <Components.Badge status="warning">Warning</Components.Badge>
          <Components.Badge status="error">Error</Components.Badge>
-        </div>
-      </section>
+        </Flex>


The Badges row no longer wraps (previously used flexWrap: 'wrap'), and Flex doesn’t expose a wrap option. This may overflow on small widths; consider switching this example to Grid or another layout that supports wrapping.

Copilot · 2026-04-15T15:43:52Z

+                }
+                footer={
+                  <Components.Button variant="secondary" onClick={() => navigate(path)}>
+                    Go <ArrowRightIcon />


ArrowRightIcon is decorative inside the button label; it should be marked aria-hidden (and optionally focusable={false}) to avoid adding noise to the accessibility tree.

Suggested change

Go <ArrowRightIcon />

Go <ArrowRightIcon aria-hidden={true} focusable={false} />

Copilot · 2026-04-15T15:43:52Z

            className={`${styles.categoryArrow} ${collapsed ? styles.categoryArrowCollapsed : ''}`}
          >
-            ▾
+            <CaretRightIcon />


CaretRightIcon is decorative; add aria-hidden (and optionally focusable={false}) to keep it out of the accessibility tree. Also consider explicitly setting width/height since the SVG defaults to 20x20 and won’t respond to the .categoryArrow font-size.

Suggested change

<CaretRightIcon />

<CaretRightIcon aria-hidden="true" focusable={false} width="1em" height="1em" />

aaronlee777 changed the title ~~WIP fix: change custom cards on homepage to use box component~~ refactor: update prototype app to use SDK components Apr 15, 2026

aaronlee777 force-pushed the al/prototype-style-updates branch from 0996d52 to b7d5770 Compare April 15, 2026 15:30

serikjensen approved these changes Apr 15, 2026

View reviewed changes

aaronlee777 added 2 commits April 15, 2026 11:37

fix: change custom cards on homepage to use box component

5fbb9ea

refactor: construct pages using SDK components

98e7954

aaronlee777 force-pushed the al/prototype-style-updates branch from caeafb9 to 98e7954 Compare April 15, 2026 15:37

aaronlee777 marked this pull request as ready for review April 15, 2026 15:37

aaronlee777 requested review from dmortal, hukid, jeffredodd and krisxcrash as code owners April 15, 2026 15:37

Copilot AI review requested due to automatic review settings April 15, 2026 15:37

Copilot started reviewing on behalf of aaronlee777 April 15, 2026 15:38 View session

aaronlee777 enabled auto-merge (squash) April 15, 2026 15:42

Merge branch 'main' into al/prototype-style-updates

2731178

Copilot AI reviewed Apr 15, 2026

View reviewed changes

aaronlee777 merged commit a0cd426 into main Apr 15, 2026
17 checks passed

aaronlee777 deleted the al/prototype-style-updates branch April 15, 2026 15:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: update prototype app to use SDK components#1557

refactor: update prototype app to use SDK components#1557
aaronlee777 merged 3 commits intomainfrom
al/prototype-style-updates

aaronlee777 commented Apr 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<Components.Heading as="h1">Embeddedd React SDK Design Sandbox</Components.Heading>
	<Components.Heading as="h1">Embedded React SDK Design Sandbox</Components.Heading>

	Go <ArrowRightIcon />
	Go <ArrowRightIcon aria-hidden={true} focusable={false} />

	<CaretRightIcon />
	<CaretRightIcon aria-hidden="true" focusable={false} width="1em" height="1em" />

Conversation

aaronlee777 commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aaronlee777 commented Apr 14, 2026 •

edited

Loading