feat(atomic): add disable-collapse attribute to breadbox components

[alexprudhomme]

KIT-5702

Problem

From a Discuss post (SUPPORT-00137506): a client wants selected facets to always be displayed in full in the breadbox. They don't want the "+1" / "Show more" button to appear when longer facet values are selected.

The atomic-breadbox and atomic-commerce-breadbox components always collapse breadcrumbs into a single row with a "+ N" show more button when they overflow. There is no property to disable this behavior, and CSS workarounds don't work because the overflow detection and hiding is JavaScript-based (display: none on <li> elements).

Solution

Added a disable-collapse boolean attribute to both atomic-breadbox and atomic-commerce-breadbox components.

• Absent (default): Breadcrumbs collapse into a single row with a + N "Show more" button (current behavior).
• Present: All breadcrumbs are always shown in a wrapping layout — no collapsing, no show more/less buttons.

When disable-collapse is set:

• The isCollapsed state is initialized to false (wrapping layout)
• The ResizeObserver is not created (no overflow detection needed)
• The adaptBreadcrumbs() method is a no-op
• The show more and show less buttons are not rendered

Usage:

<atomic-breadbox disable-collapse></atomic-breadbox>
<atomic-commerce-breadbox disable-collapse></atomic-commerce-breadbox>

[changeset-bot]

🦋 Changeset detected

Latest commit: 57b463d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@coveo/atomic	Minor
@coveo/atomic-react	Patch
@coveo/atomic-angular	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[svcsnykcoveo]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[chromatic-com]

Tip

All tests passed and all changes approved!

🟢 UI Tests: 356 tests unchanged
🟢 UI Review: 356 stories published -- no changes
Storybook Publish: 356 stories published

[pkg-pr-new]

• coveo-atomic-pkg-new-template

@coveo/atomic

npm i https://pkg.pr.new/@coveo/atomic@7577

@coveo/atomic-hosted-page

npm i https://pkg.pr.new/@coveo/atomic-hosted-page@7577

@coveo/atomic-legacy

npm i https://pkg.pr.new/@coveo/atomic-legacy@7577

@coveo/atomic-react

npm i https://pkg.pr.new/@coveo/atomic-react@7577

@coveo/auth

npm i https://pkg.pr.new/@coveo/auth@7577

@coveo/bueno

npm i https://pkg.pr.new/@coveo/bueno@7577

@coveo/create-atomic

npm i https://pkg.pr.new/@coveo/create-atomic@7577

@coveo/create-atomic-component

npm i https://pkg.pr.new/@coveo/create-atomic-component@7577

@coveo/create-atomic-component-project

npm i https://pkg.pr.new/@coveo/create-atomic-component-project@7577

@coveo/create-atomic-result-component

npm i https://pkg.pr.new/@coveo/create-atomic-result-component@7577

@coveo/create-atomic-rollup-plugin

npm i https://pkg.pr.new/@coveo/create-atomic-rollup-plugin@7577

@coveo/headless

npm i https://pkg.pr.new/@coveo/headless@7577

@coveo/headless-react

npm i https://pkg.pr.new/@coveo/headless-react@7577

@coveo/shopify

npm i https://pkg.pr.new/@coveo/shopify@7577

commit: 57b463d

[Copilot]

Pull request overview

Adds an opt-out for the breadbox overflow/collapsing behavior so consumers can force all breadcrumbs to remain visible (wrapping) without the “+ N / show more” UI.

Changes:

• Added disable-collapse boolean attribute to atomic-breadbox and atomic-commerce-breadbox, skipping ResizeObserver-based overflow logic when enabled.
• Updated rendering logic to omit show-more/show-less controls when disable-collapse is set.
• Added unit tests covering the non-collapsing behavior for both components, plus a changeset for @coveo/atomic.

Reviewed changes

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

Show a summary per file

File	Description
packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.ts	Adds disable-collapse prop and bypasses collapse/overflow logic + hides show more/less UI when enabled.
packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.spec.ts	Adds tests verifying all breadcrumbs remain visible and wrapping is used when disable-collapse is enabled.
packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.ts	Adds disable-collapse prop and bypasses collapse/overflow logic + hides show more/less UI when enabled.
packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.spec.ts	Adds tests verifying all breadcrumbs remain visible and wrapping is used when disable-collapse is enabled.
.changeset/breadbox-disable-collapse.md	Declares a minor release for @coveo/atomic documenting the new attribute.

[louis-bompart]

Can't we wrap that in a single ternary?