feat(lib): Add List item component by louismaximepiton · Pull Request #3618 · Orange-OpenSource/Orange-Boosted-Bootstrap

louismaximepiton · 2026-06-24T09:17:17Z

Types of change

Non-breaking change
Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #2783.

Context & Motivation

Add the list-item to the component we officially support.

Description

TODO

Checklists

Checklist (for Core Team only)

The changes need to be in the migration guide
The changes are well displayed in Storybook (be careful if example order has changed for DSM)
The changes are compatible with RTL
Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Code review
Design review
A11y review
Commit on ouds/main following conventional commit

Live previews

https://deploy-preview-3618--boosted.netlify.app/orange/docs/components/list-item

netlify · 2026-06-24T09:19:33Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`4c2ad89`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6a5e2da472e4d4000804e193
😎 Deploy Preview	https://deploy-preview-3618--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

…d-list-item

Copilot

Pull request overview

This PR introduces the new List item component to OUDS Web, including its core SCSS implementation, brand token additions (icons), and the documentation page + site plumbing needed to surface it in the docs.

Changes:

Added the new scss/_list-item.scss component and wired it into all 3 brand entrypoints.
Added documentation for List item (new MDX page) and new Astro shortcodes to render “asset” tabs in the docs.
Updated skeleton styling/docs and adjusted docs-site configuration (anchors depth, sidebar/cards, bundlewatch thresholds).

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
site/src/types/auto-import.d.ts	Registers new shortcodes for auto-import in MDX/docs.
site/src/scss/_component-examples.scss	Adds docs-only chip styling for tab UI (currently duplicates chip selected styles).
site/src/content/docs/components/skeleton.mdx	Adds List item markup to skeleton documentation examples.
site/src/content/docs/components/list-item.mdx	New List item documentation page and examples.
site/src/components/shortcodes/AssetsTab.astro	New shortcode representing a single tab panel section.
site/src/components/shortcodes/AssetsNavTab.astro	New shortcode rendering the tablist + tabpanels and hash navigation behavior.
site/data/sidebar-components.yml	Adds “List item” to the components sidebar.
site/data/components-details.ts	Adds component cards/snippets for List item variants.
site/data/_components-versions.yml	Updates component “added in version” data (currently missing list-item types).
scss/_skeleton.scss	Extends skeleton placeholder styling to `.item-wrapper`.
scss/_list-item.scss	New SCSS implementation of the List item component.
packages/sosh/scss/tokens/_composite.scss	Adds list-item navigation icons (brand-specific SVG data URLs).
packages/sosh/scss/ouds-web.scss	Imports the new list-item component into the Sosh bundle.
packages/sosh/config.yml	Increases docs anchors max depth to 6.
packages/orange/scss/tokens/_composite.scss	Adds list-item navigation icons (brand-specific SVG data URLs).
packages/orange/scss/tokens/_component.scss	Modifies auto-generated token output (should not be edited manually).
packages/orange/scss/ouds-web.scss	Imports the new list-item component into the Orange bundle.
packages/orange/config.yml	Increases docs anchors max depth to 6.
packages/orange-compact/scss/tokens/_composite.scss	Adds list-item navigation icons (brand-specific SVG data URLs).
packages/orange-compact/scss/ouds-web.scss	Imports the new list-item component into the Orange Compact bundle.
packages/orange-compact/config.yml	Increases docs anchors max depth to 6.
.bundlewatch.config.json	Raises bundle size limits to account for added CSS.

duvalale · 2026-07-10T12:20:31Z

+You can navigate through the different assets using the tabs below.
+
+<Callout type="warning" title="Small list item">
+  Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size.


I think there is a typo, shouldn't it be "the assets below" ?

I really meant the different sizing classes, the rule is the following:

The size of the assets is only small when the list item is in small size.

Then I suggest clarifying this, that's not what I understand from the callout.

Suggested change

Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size.

Please note that the sizes below shouldn't be used in a [small list item](#sizes), only small assets may be used with small list items. The slot shouldn't be used as well in this size.

duvalale · 2026-07-10T12:23:23Z

+    </div>
+  </div>`} />
+
+### Sizes


I know there is a common template to component pages.
However, sizes section is mentioned repeatedly before being read.
Maybe we should invert sizes and variants section to clarify the available sizes ?

Yes maybe, let's discuss it with other people

I'm not sure, in the Sizes paragraph we reference other variant so we would have the same problem but reversed... Although Sizes are always short paragraphs compared to Variants so it could make sense to switch

MaxLardenois

Just some comment on my first pass, I have opinions ;)
I will try to suggest something for the approach section

I definitely think this group is not named correctly, it should be Items

MaxLardenois · 2026-07-10T11:42:38Z

@@ -39,6 +39,7 @@
 @import "@ouds/web-common/scss/alert";
 @import "@ouds/web-common/scss/progress";
 @import "@ouds/web-common/scss/list-group";


Don't we remove list group?

MaxLardenois · 2026-07-10T14:12:48Z

@@ -0,0 +1,1061 @@
+---
+title: List item


In the end, I think the name of the group should be Items

Yes it is not very descriptive but it's the common thing with these components.

Right now we have list item components that can be outside a list ! This is not understandable.

I understand the name of the design group is List item but I think we should still rename this page to Items without changing the design name (even though I think we should try to convince Maxime)

In any case we should have a plural like we determined for groups pages (like Badges, Buttons...)

MaxLardenois · 2026-07-10T14:14:22Z

@@ -0,0 +1,1061 @@
+---
+title: List item
+description: List items are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.


The thing is, card items do not necessarily display in a list so where is the series of content?

All descriptions should be updated.

MaxLardenois · 2026-07-10T14:44:52Z

+
+### Component types
+
+<ul class="list-unstyled row row-cols-1 sm:row-cols-2">


Maybe in this case we should opt for a 2x2 grid to show all the component types (Static card item, static list item, navigation card item, navigation list item)
Also maybe for the lists showing two elements would help?

This would help make the users understand the inherent multiple facets of these components

Tried something

MaxLardenois · 2026-07-10T14:55:23Z

+
+The card item is the default item when the item components are used.
+
+Its behavior changes once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default.


Does its behavior changes or does it becomes a list item? I think we should delete the first sentence

Tried something

MaxLardenois · 2026-07-10T14:56:17Z

+    </div>
+  </div>`} />
+
+### Approach


I feel like most of this paragraph could be better represented in a table I will try to come up with something

Tried something

boosted-bot and others added 3 commits June 24, 2026 08:58

chore: update tokens

58fef26

make it compile and test

4d0f608

feat(lib): Add List item component

18a5f83

louismaximepiton added ⚛️ component 📖 documentation Improvements or additions to documentation css 🧰 library labels Jun 24, 2026

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Jun 24, 2026

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Jun 24, 2026

louismaximepiton linked an issue Jun 24, 2026 that may be closed by this pull request

[OUDS] Create component - List Item #2783

Open

louismaximepiton added 7 commits June 25, 2026 09:02

.

92e5b02

.

6f13894

.

dc39d3b

First draft for Static list-item

37e6be3

Better UX

1ce3f58

.

d7f4e06

Final CSS + better doc

a4f7a52

Base automatically changed from tokenator-update-tokens-20260624085816 to ouds/main July 3, 2026 12:12

louismaximepiton added 3 commits July 5, 2026 17:15

.

b8a0a6a

First final touch

6db8ab5

Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-ad…

e5a6f56

…d-list-item

louismaximepiton marked this pull request as ready for review July 8, 2026 10:13

Copilot AI review requested due to automatic review settings July 8, 2026 10:13

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

Copilot started reviewing on behalf of louismaximepiton July 8, 2026 10:14 View session

Copilot AI reviewed Jul 8, 2026

View reviewed changes

louismaximepiton added 3 commits July 10, 2026 10:01

.

8038924

Merge branch 'main' into ouds/main-lmp-add-list-item

a321668

.

894949a

louismaximepiton added 2 commits July 10, 2026 10:39

fix review

de08c9e

.

901e66f

duvalale reviewed Jul 10, 2026

View reviewed changes

MaxLardenois reviewed Jul 10, 2026

View reviewed changes

feat: reorganize Overview to list every components of the group

4c2ad89

	Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size.
	Please note that the sizes below shouldn't be used in a [small list item](#sizes), only small assets may be used with small list items. The slot shouldn't be used as well in this size.


		### Component types

		<ul class="list-unstyled row row-cols-1 sm:row-cols-2">


		The card item is the default item when the item components are used.

		Its behavior changes once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default.

Uh oh!

Conversation

louismaximepiton commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

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!

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!

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!

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

Uh oh!

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

louismaximepiton commented Jun 24, 2026 •

edited

Loading

netlify Bot commented Jun 24, 2026 •

edited

Loading