Skip to content

feat: Added breadcrumb container and breadcrumbs elements - #1881

Draft
rkaraivanov wants to merge 9 commits into
masterfrom
rkaraivanov/breadcrumbs
Draft

feat: Added breadcrumb container and breadcrumbs elements#1881
rkaraivanov wants to merge 9 commits into
masterfrom
rkaraivanov/breadcrumbs

Conversation

@rkaraivanov

Copy link
Copy Markdown
Member

No description provided.

@rkaraivanov
rkaraivanov force-pushed the rkaraivanov/breadcrumbs branch from a633173 to 7d8b7e9 Compare April 28, 2026 14:18
Copilot AI review requested due to automatic review settings August 4, 2026 11:49

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR introduces new Breadcrumbs UI components to the Ignite UI Web Components library, including Storybook documentation, styling scaffolding, and unit tests.

Changes:

  • Added igc-breadcrumbs (container) and igc-breadcrumb (item) components with ARIA roles and separator propagation via Lit context.
  • Added Storybook stories demonstrating default usage, custom separators, prefix/suffix slots, and long wrapping trails.
  • Added initial SCSS base styles, theming aggregator stub, tests, and public exports.

Reviewed changes

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

Show a summary per file
File Description
stories/breadcrumbs.stories.ts Adds Storybook stories and docs for Breadcrumbs variants.
src/index.ts Exports the new breadcrumb components from the package entrypoint.
src/components/common/context.ts Adds a new Lit context used to propagate breadcrumb separator configuration.
src/components/breadcrumb/themes/themes.ts Introduces the breadcrumb theme aggregator (currently minimal).
src/components/breadcrumb/themes/breadcrumbs.base.scss Base styles for the breadcrumbs container layout.
src/components/breadcrumb/themes/breadcrumb.base.scss Base styles for breadcrumb items, separator, current state, and RTL handling.
src/components/breadcrumb/breadcrumbs.ts Implements the breadcrumbs container and provides separator context + list semantics.
src/components/breadcrumb/breadcrumbs.spec.ts Adds accessibility + behavior tests for breadcrumb and breadcrumbs behavior.
src/components/breadcrumb/breadcrumb.ts Implements an individual breadcrumb item with slots and separator rendering.

Comment thread stories/breadcrumbs.stories.ts
Comment thread src/components/breadcrumb/breadcrumb.ts
Comment thread src/components/breadcrumb/themes/breadcrumb.base.scss
Comment thread src/components/breadcrumb/themes/themes.ts Outdated
@sbayreva

sbayreva commented Sep 2, 2026

Copy link
Copy Markdown

Material

  1. The color of the separator should be gray 700 in Light and Dark Mode
  2. There is something strange in this example with the icon color of the last item:
Screenshot 2026-09-02 at 12 21 04



Relevant for all Themes

  1. There should be gap between the label and the prefix/suffix (Relevant for all Themes)
  • S size 2px
  • M size 4px
  • L size 8px
  1. Please, check again the typography for all sizes and themes.

@sbayreva

sbayreva commented Sep 2, 2026

Copy link
Copy Markdown

Fluent

  1. The color of the separator should be gray 700 in Light and Dark Mode

@sbayreva

sbayreva commented Sep 3, 2026

Copy link
Copy Markdown

Bootstrap

  1. The color of the separator should be gray 700 in Light and Dark Mode

Indigo

  1. The color of the separator should be gray 700 in Light and Dark Mode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants