feat(component): Add Breadcrumb component by MaxLardenois · Pull Request #2930 · Orange-OpenSource/Orange-Boosted-Bootstrap

MaxLardenois · 2025-03-27T10:12:20Z

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

closes #2896

Description

Motivation & Context

Types of change

New feature (non-breaking change which adds functionality)

Live previews

https://deploy-preview-2930--boosted.netlify.app/docs/components/breadcrumb/

Checklist

Contribution

I have read the contributing guidelines

Accessibility

My change follows accessibility good practices; I have at least run axe

Design

My change respects the design guidelines defined in Orange Design System
My change is compatible with a responsive display

Development

My change follows the developer guide
I have added JavaScript unit tests to cover my changes
I have added SCSS unit tests to cover my changes

Documentation

My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

My change introduces changes to the migration guide
My new component is well displayed in Storybook
My new component is compatible with RTL
Manually run BrowserStack tests
Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
Code review
Design review
A11y review

After the merge

Manually launch Percy tests

netlify · 2025-03-27T10:14:00Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`0e4a666`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/681b20497736d800089aadc7
😎 Deploy Preview	https://deploy-preview-2930--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

louismaximepiton

I didn't finished the review of the CSS yet, but here is a first draft of the review

scss/_variables-dark.scss

scss/_variables.scss

scss/_breadcrumb.scss

site/content/docs/0.4/components/breadcrumb.md

site/content/docs/0.4/migration-from-boosted.md

scss/_breadcrumb.scss

louismaximepiton

Finished the review on my side.
I'm still convinced we could do better for the CSS by avoiding repeating the svg acall, however, as a first version, I'm fine landig it as-is.
Just small changes for me and wait for a11y review maybe ?

louismaximepiton · 2025-04-16T12:50:26Z

scss/_variables-dark.scss

-//
-
-$breadcrumb-divider-filter-dark:      $invert-filter !default; // OUDS mod
+// OUDS mod: no $accordion-button-icon-dark


louismaximepiton · 2025-04-17T10:18:04Z

scss/_breadcrumb.scss

+    flex-shrink: 0;
+    width: $ouds-breadcrumb-size-icon;
+    height: $ouds-breadcrumb-size-icon;
+    margin-right: var(--#{$prefix}breadcrumb-item-padding-links) #{"/* rtl:ignore */"}; // OUDS mod


Suggested change

margin-right: var(--#{$prefix}breadcrumb-item-padding-links) #{"/* rtl:ignore */"}; // OUDS mod

margin-right: var(--#{$prefix}breadcrumb-item-padding-links); // OUDS mod

louismaximepiton · 2025-04-17T10:24:29Z

site/content/docs/0.4/components/breadcrumb.md

 ---

-{{< callout-soon >}}
+## Example


Align with other pages

Suggested change

## Example

## Basic example

louismaximepiton · 2025-04-17T10:25:52Z

site/content/docs/0.4/components/breadcrumb.md

+{{< /example >}}
+
+
+## Responsive behavior


It's quite not the responsive behavior, but I can't find better words

"Behaviour on smaller screens" ?

tried something

louismaximepiton · 2025-04-17T10:26:19Z

site/content/docs/0.4/components/breadcrumb.md

+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb">


Maybe we should find different labels for the a11y of the page ?

…crumb

vprothais · 2025-05-06T07:28:29Z

site/content/docs/0.4/components/breadcrumb.md

+Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb.
+
+{{< example >}}
+<nav aria-label="breadcrumb-basic">


aria-label must contain a string that will be read by the vocal assistant. It is not a reference to an id or another element, so I think we can remove the hyphen in each aria-label of this page to get better vocalization.

vprothais · 2025-05-06T13:59:14Z

scss/_breadcrumb.scss

+@mixin has-separator() {
+  padding-left: var(--#{$prefix}breadcrumb-item-padding-icon);
+
+  &::before {


As talked together, we could change for an after pseudo element, so we could display it for every item but the last, and don't have to add it only for the first shown element. It would be simpler to manage the "responsive" part and reduce duplicated generated code related to the placehoder.

…crumb

MaxLardenois added the ⚛️ component label Mar 27, 2025

MaxLardenois added the 📖 documentation Improvements or additions to documentation label Mar 27, 2025

MaxLardenois force-pushed the ouds/main-2896-create-component---breadcrumb branch from 00ec9d2 to 2303ca1 Compare March 27, 2025 14:33

louismaximepiton added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 1, 2025

github-project-automation bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 1, 2025

louismaximepiton linked an issue Apr 4, 2025 that may be closed by this pull request

[OUDS] Create component - Breadcrumb #2896

Closed

MaxLardenois force-pushed the ouds/main-2896-create-component---breadcrumb branch 2 times, most recently from 6710038 to bf0f317 Compare April 8, 2025 12:56

MaxLardenois added 10 commits April 9, 2025 09:22

feat: add Breadcrumb component

e77e1a0

refactor: use OUDS tokens for breadcrumb

bc4b85f

doc: add todo for question

b533c35

reafactor: remove unused custom prop/scss vars for Breadcrumb

93d2f5b

feat: try hard no js responsive

682e751

feat: responsive proposition

291ea23

feat: add a11y help

90cfd72

fix: define custom prop with divider once

e00a369

feat: remove container queries, all elements links

6a3080e

docs: add information on responsive behavior

f5d1ec8

MaxLardenois force-pushed the ouds/main-2896-create-component---breadcrumb branch from bf0f317 to f5d1ec8 Compare April 9, 2025 12:17

docs: add migration information

cb81566

MaxLardenois marked this pull request as ready for review April 9, 2025 13:13

boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 9, 2025

MaxLardenois requested a review from louismaximepiton April 9, 2025 13:13

refactor: explain a comment

2341dd3

louismaximepiton requested changes Apr 11, 2025

View reviewed changes

boosted-bot moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 11, 2025

MaxLardenois added 3 commits April 14, 2025 10:17

fix: some review updates

cfbea26

fix: svgo, rtl

078f7b3

style: add a comment for flexbox and ellipsis

bca5106

louismaximepiton reviewed Apr 17, 2025

View reviewed changes

MaxLardenois added 5 commits April 17, 2025 16:10

fix: review edit

ca738cb

last item is a span

b40ad20

Merge branch 'ouds/main' into ouds/main-2896-create-component---bread…

0d6ac05

…crumb

docs: title renaming

7138137

fix: use escape svg

bb6d948

vprothais self-assigned this Apr 29, 2025

vprothais requested changes May 6, 2025

View reviewed changes

MaxLardenois added 3 commits May 7, 2025 10:51

refactor: use after pseudo-element instead of before

4d6f14f

Merge branch 'ouds/main' into ouds/main-2896-create-component---bread…

5a17329

…crumb

fix: remove missing mixin

0e4a666

vprothais approved these changes May 7, 2025

View reviewed changes

boosted-bot moved this from Dev Review In Progress to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 7, 2025

vprothais merged commit 2db9f98 into ouds/main May 7, 2025
13 checks passed

vprothais deleted the ouds/main-2896-create-component---breadcrumb branch May 7, 2025 09:46

github-project-automation bot moved this from Need Lead Dev Review to Done in 🟣 [Orange-Boosted-Bootstrap] PRs Board May 7, 2025

	margin-right: var(--#{$prefix}breadcrumb-item-padding-links) #{"/* rtl:ignore */"}; // OUDS mod
	margin-right: var(--#{$prefix}breadcrumb-item-padding-links); // OUDS mod

Conversation

MaxLardenois commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Description

Motivation & Context

Types of change

Live previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Checklist (for Core Team only)

After the merge

Uh oh!

netlify bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louismaximepiton 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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MaxLardenois commented Mar 27, 2025 •

edited

Loading

netlify bot commented Mar 27, 2025 •

edited

Loading