feat(svelte-ds-app-launchpad): upstream Link & Breadcrumbs components by goulinkh · Pull Request #438 · canonical/pragma

goulinkh · 2026-02-25T19:35:01Z

Fixes LP-3722

PR readiness check

PR should have one of the following labels:
- Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
PR title follows the Conventional Commits format.
All packages define the required scripts in package.json:
- All packages: check, check:fix, and test.
- Packages with build steps: build to build the package for development or distribution, build:all to build all artifacts. See CONTRIBUTING.md for details.

Screenshots

Breadcrumbs

Upstream the Link component from launchpad-ui with semantic tokens and separated CSS. Also fix component tokens in styles/index.css.

Upstream the Breadcrumbs component from launchpad-ui with semantic tokens, separated CSS, and sub-components (CollapsedItems, ExpandedItems, Item). WebKit focus tests marked as todo due to macOS TabsToLinks preference.

Copilot

Pull request overview

This PR upstreams the Link and Breadcrumbs components to the ds-app-launchpad package. These components were generated using @canonical/summon:component-svelte v0.1.0 and follow established patterns in the codebase. The Link component is a styled anchor element with an optional soft variant that inherits the parent's color. The Breadcrumbs component is a navigation component with intelligent collapsing behavior when space is limited, featuring progressive enhancement for non-JavaScript environments.

Changes:

Added Link component with support for soft styling and comprehensive test coverage
Added Breadcrumbs component with smart collapsing mechanism and accessibility features
Updated CSS variables from --dimension-* to --lp-dimension-* prefix for consistency

Reviewed changes

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

File	Description
packages/svelte/ds-app-launchpad/src/lib/styles/index.css	Updated CSS variable names to use `--lp-` prefix for consistency
packages/svelte/ds-app-launchpad/src/lib/components/index.ts	Added exports for Link and Breadcrumbs components
packages/svelte/ds-app-launchpad/src/lib/components/Link/*	New Link component with types, styles, tests, and stories
packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/*	New Breadcrumbs component with collapsing logic, sub-components, comprehensive tests

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

packages/svelte/ds-app-launchpad/src/lib/components/Link/styles.css

packages/svelte/ds-app-launchpad/src/lib/components/Link/types.ts

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/common/ExpandedItems/styles.css

...ages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/common/CollapsedItems/styles.css

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/Breadcrumbs.stories.svelte

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 4 comments.

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

packages/svelte/ds-app-launchpad/src/lib/components/Link/Link.stories.svelte

packages/svelte/ds-app-launchpad/src/lib/components/Link/styles.css

packages/svelte/ds-app-launchpad/src/lib/components/Link/Link.svelte.test.ts

packages/svelte/ds-app-launchpad/src/lib/components/Link/Link.ssr.test.ts

packages/svelte/ds-app-launchpad/src/lib/components/Link/Link.svelte

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/types.ts

advl · 2026-02-26T12:12:38Z

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/common/common/Item/index.ts

You have two nested common folders, I am unsure this is intentional

yes since Item is only consumed by parent level CollaspedItems and ExpandedItems it is by definition a common component for these two components and it should be placed inside a nested common folder.

...te/ds-app-launchpad/src/lib/components/Breadcrumbs/common/ExpandedItems/ExpandedItems.svelte

advl

I left a couple comments passing by - I would also recuse myself from a full review here as I'm not a svelte specialist.

I would nevertheless recommend strongly to split the PR into two (or do this for future ones) - as smaller PRs are easier - and faster to review.

This is likely something to document in the issues template as well.

goulinkh · 2026-02-26T17:51:21Z

I would nevertheless recommend strongly to split the PR into two (or do this for future ones) - as smaller PRs are easier - and faster to review.
This is likely something to document in the issues template as well.

@advl I agree with you 100% but I would say this PR fits into a medium sized PR rather than big.

1200 lines added is not a lot to review in one PR. But if we check by number of files changed, 30 files is a lot. However 30 files for 5 total components (3 sub components) and all of them are fully connected since each component requires at least 4 files it adds up (index, styles, stories, ssr test, client test, svelte file).

advl · 2026-02-26T19:27:39Z

@goulinkh Yes ! however I would add small size beats medium size - there are companies where this advice is applied as a principle and really help smoothen the dev process - I'd be keen to discuss this more. In all cases it would be great to set the expectations on this together for the monorepo

jmuzina

Reviewed the rest of it - looking good. Just leaving some non-blocking comments. Thanks!

jmuzina · 2026-02-26T22:16:31Z

.../ds-app-launchpad/src/lib/components/Breadcrumbs/common/CollapsedItems/CollapsedItems.svelte

+    collapseClickOpened = !collapseClickOpened;
+  }}
+>
+  <ol role="none" data-testid="collapsed-segments">


We shouldn't need to hard code data-testid inside the core implementation of the component

Not sure what a good alternative would be here, though, as this is a roleless element, which does not provide a way to pass arbitrary props (can't pass testid from the test), and selecting it is heavily relied on for auto-collapsing tests.

jmuzina · 2026-02-26T22:18:16Z

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/Breadcrumbs.svelte

+  const maxNumCollapsed = $derived(
+    minNumExpanded === "all"
+      ? 0
+      : Math.max(0, segments.length - Math.max(0, minNumExpanded)),
+  );
+  let containerWidth = $state<number>();
+  let segmentWidths = $state<number[]>([]);


This auto-collapsing/expanding behavior is really really impressive and intuitive..... first implementation of this new requirement for Breadcrumbs. Great work LP folks!!

jmuzina · 2026-02-26T22:22:13Z

.../ds-app-launchpad/src/lib/components/Breadcrumbs/common/CollapsedItems/CollapsedItems.svelte

+    collapseClickOpened = !collapseClickOpened;
+  }}
+>
+  <ol role="none" data-testid="collapsed-segments">


Just curious, why role="none"? Likely worth a comment at least

This lets us expose all the segments (both collapsed and shown) as one flat, coherent list to assistive technologies.

I'll add a comment about this :)

jmuzina · 2026-02-26T22:24:22Z

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/types.ts

+type LinkSegment = Omit<LinkProps, "children" | "href"> & {
+  label: string;
+  href: string;
+};


Why Omit href if you're going to add it back in the type here? Is there some type incompatibility?

To make sure it is required for the LinkSegment as this is eventually used to differentiate between the members of the Segment discriminated union (in the Item component).

macOS WebKit only tabs to form controls by default; Option+Tab is needed to include links. Extract shared tabToNextFocusable helper into src/lib/test-utils.ts so other components can reuse it.

goulinkh added 2 commits February 25, 2026 20:32

feat(svelte-ds-app-launchpad): upstream Link component

d3e3f3b

Upstream the Link component from launchpad-ui with semantic tokens and separated CSS. Also fix component tokens in styles/index.css.

feat(svelte-ds-app-launchpad): upstream Breadcrumbs component

8c9e08c

Upstream the Breadcrumbs component from launchpad-ui with semantic tokens, separated CSS, and sub-components (CollapsedItems, ExpandedItems, Item). WebKit focus tests marked as todo due to macOS TabsToLinks preference.

goulinkh requested a review from jmuzina February 25, 2026 19:35

goulinkh assigned steciuk Feb 25, 2026

jmuzina requested review from Copilot February 25, 2026 22:49

Copilot started reviewing on behalf of jmuzina February 25, 2026 22:50 View session

jmuzina added Review: QA +1 labels Feb 25, 2026

Copilot AI reviewed Feb 25, 2026

View reviewed changes

jmuzina reviewed Feb 25, 2026

View reviewed changes

packages/svelte/ds-app-launchpad/src/lib/components/Link/Link.svelte Show resolved Hide resolved

packages/svelte/ds-app-launchpad/src/lib/components/Breadcrumbs/types.ts Outdated Show resolved Hide resolved

Merge branch 'main' into feat/upstream-link-and-breadcrumbs

f1a2a66

advl reviewed Feb 26, 2026

View reviewed changes

...te/ds-app-launchpad/src/lib/components/Breadcrumbs/common/ExpandedItems/ExpandedItems.svelte Outdated Show resolved Hide resolved

advl requested changes Feb 26, 2026

View reviewed changes

steciuk added 3 commits February 26, 2026 15:33

feat(svelte-ds-app-launchpad): Add soft link tests and story

c6c7cba

fix(Breadcrumbs): correct typos in story names and comments

069cdb6

feat(Breadcrumbs): Forward props to individual segments

9ae9b4d

jmuzina approved these changes Feb 26, 2026

View reviewed changes

steciuk and others added 3 commits February 27, 2026 08:30

fix(Breadcrumbs): update componentLocator to use role instead of testId

890d68e

chore(Breadcrumbs): Add comments for role="none" usage

22c092b

fix(Breadcrumbs): use Alt+Tab for link focus tests on macOS WebKit

3f059a2

macOS WebKit only tabs to form controls by default; Option+Tab is needed to include links. Extract shared tabToNextFocusable helper into src/lib/test-utils.ts so other components can reuse it.

Conversation

goulinkh commented Feb 25, 2026

PR readiness check

Screenshots

Breadcrumbs

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

advl left a comment

Choose a reason for hiding this comment

Uh oh!

goulinkh commented Feb 26, 2026

Uh oh!

advl commented Feb 26, 2026

Uh oh!

jmuzina left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants