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	`09d027a`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6a7594ca515ac5000817d5e1
😎 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.

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: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

I understand the reasons, but we should keep the same order everywhere.
I have the intuition that when we develop, we rather choose first the variant and then the size ? Though I have a small preference for keeping the current order.

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?

I agree with Maxime

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...)

It's a problem to break the plural rule that we had until now... And yes, the name is hard to understand.

…t-item

hannahiss

I had to stop at #leading-container but it appears there that the texts about sizes is not very clear...

hannahiss · 2026-08-06T14:32:00Z

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


I agree with Maxime

hannahiss · 2026-08-06T14:34:05Z

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


It's a problem to break the plural rule that we had until now... And yes, the name is hard to understand.

hannahiss · 2026-08-06T14:35:07Z

+- Navigation items, which allow navigation.
+- Static items, which are not interactive.


Should have static items first to respect the presentation order? (and static is simpler than interactive)

hannahiss · 2026-08-07T07:15:01Z

+The following table summarizes the different types of items and their categories.
+
+<BsTable>
+  | Categories     | Card                 | List                 |
+  | -------------- | -------------------- | -------------------- |
+  | *Static*       | [Static card item](#static-card-item)     | [Static list item](#static-list-item)     |
+  | *Navigation*   | [Navigation card item](#navigation-card-item) | [Navigation list item](#navigation-list-item) |
+</BsTable>


Ins't it redundant with the text just above?

hannahiss · 2026-08-07T08:39:07Z

+
+For navigation items, a wrapping `<nav>` element can be added if it is an important navigation in the page.
+
+In case of a complex navigation list item, you probably should link all the texts and components together by adding `[aria-describedby]` on the link in order to provide a valid accessible name for the link. The `[aria-describedby]` should point to the id of the element that contains the texts of the link.


Suggested change

In case of a complex navigation list item, you probably should link all the texts and components together by adding `[aria-describedby]` on the link in order to provide a valid accessible name for the link. The `[aria-describedby]` should point to the id of the element that contains the texts of the link.

In case of a complex navigation list item, you probably should link all the texts and components together by adding `[aria-describedby]` on the link in order to provide a valid accessible name for the link. The `[aria-describedby]` should point to the ids of the elements that contain the texts of the link.

hannahiss · 2026-08-07T08:58:30Z

+Add `.item-external` to the `.item-navigation` to indicate that the item is an external link. This will add an external link icon to the end of the item.
+
+<Callout type="info">
+  For accessibility reasons, it is recommended to add a visually hidden text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at [some more complete accessibility guidelines](https://a11y-guidelines.orange.com/en/web/develop/common-navigation/#warn-the-user-when-opening-a-new-window).


Suggested change

For accessibility reasons, it is recommended to add a visually hidden text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at [some more complete accessibility guidelines](https://a11y-guidelines.orange.com/en/web/develop/common-navigation/#warn-the-user-when-opening-a-new-window).

For accessibility reasons, it is recommended to add a `.visually-hidden` text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at [some more complete accessibility guidelines](https://a11y-guidelines.orange.com/en/web/develop/common-navigation/#warn-the-user-when-opening-a-new-window).

hannahiss · 2026-08-07T08:58:43Z

+Optionally, the `<a>` element can wrap the entire `.item` instead of just the label.
+
+<Callout type="info" title="Accessibility">
+  ATs will read the entire item as a link. You can use the visually hidden text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).


Suggested change

ATs will read the entire item as a link. You can use the visually hidden text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).

Screen readers will read the entire item as a link. You can use the `.visually-hidden` text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).

hannahiss · 2026-08-07T09:02:46Z

+<Callout type="info" title="Accessibility">
+  ATs will read the entire item as a link. You can use the visually hidden text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).
+
+  Make sure to not use any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.


Suggested change

Make sure to not use any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.

Make sure not to use any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.

hannahiss · 2026-08-07T09:27:54Z

+
+Navigation card item is a UI element that displays a unit of information in an interactive, self-contained card, taking users to an internal or external destination.
+
+The navigation card item is used when the content requires stronger visual grouping or prominence than a standard [navigation list item](#navigation-list-item). It may be displayed independently or within a card-based layout. Each card acts as a single navigation target and supports the necessary hover, pressed, and keyboard focus states.


I did not understand this phrase... I thought navigation card item was for single usage whereas navigation list item was for a list?

hannahiss · 2026-08-07T09:37:56Z

+
+Here is a list of the different assets that we support in the leading container, along with their corresponding classes and notes.
+
+You can navigate through the different assets using the tabs below.


Suggested change

You can navigate through the different assets using the tabs below.

You can navigate through the different assets using the filters below.

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

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

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

duvalale reviewed Jul 10, 2026

View reviewed changes

MaxLardenois reviewed Jul 10, 2026

View reviewed changes

boosted-bot and others added 14 commits July 22, 2026 11:39

chore: update tokens

325da0f

fix CI

3cfb454

fix CI

33e09d6

feat(lib): Add List item component

c234a71

.

2523430

.

ee7faa5

.

889048a

First draft for Static list-item

8c766ee

Better UX

6eeaf73

.

b5e9176

Final CSS + better doc

cb9dd4f

.

725c5df

First final touch

9f09760

.

4dbc16a

louismaximepiton and others added 5 commits July 29, 2026 08:28

.

934b573

fix review

5e5542c

.

4dac598

feat: reorganize Overview to list every components of the group

979c355

fix after merge

3d1d201

louismaximepiton force-pushed the ouds/main-lmp-add-list-item branch from 4c2ad89 to 3d1d201 Compare July 29, 2026 09:34

louismaximepiton changed the base branch from main to tokenator-update-tokens-20260722113803 July 29, 2026 09:35

louismaximepiton added 3 commits July 29, 2026 11:48

.

3472d48

Add accessibility

0d66f1e

Make the focused list item as rounded as the theme

bc17c06

Base automatically changed from tokenator-update-tokens-20260722113803 to main August 6, 2026 14:38

louismaximepiton added 2 commits August 7, 2026 10:15

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

6f1e8da

…t-item

.

09d027a

hannahiss reviewed Aug 7, 2026

View reviewed changes

		- Navigation items, which allow navigation.
		- Static items, which are not interactive.


		For navigation items, a wrapping `<nav>` element can be added if it is an important navigation in the page.

		In case of a complex navigation list item, you probably should link all the texts and components together by adding `[aria-describedby]` on the link in order to provide a valid accessible name for the link. The `[aria-describedby]` should point to the id of the element that contains the texts of the link.

	For accessibility reasons, it is recommended to add a visually hidden text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at [some more complete accessibility guidelines](https://a11y-guidelines.orange.com/en/web/develop/common-navigation/#warn-the-user-when-opening-a-new-window).
	For accessibility reasons, it is recommended to add a `.visually-hidden` text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at [some more complete accessibility guidelines](https://a11y-guidelines.orange.com/en/web/develop/common-navigation/#warn-the-user-when-opening-a-new-window).

	ATs will read the entire item as a link. You can use the visually hidden text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).
	Screen readers will read the entire item as a link. You can use the `.visually-hidden` text to provide additional context if needed. You won't need any `[aria-describedby]` as stated in our [accessibility section](#accessibility).

	Make sure to not use any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.
	Make sure not to use any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.


		Navigation card item is a UI element that displays a unit of information in an interactive, self-contained card, taking users to an internal or external destination.

		The navigation card item is used when the content requires stronger visual grouping or prominence than a standard [navigation list item](#navigation-list-item). It may be displayed independently or within a card-based layout. Each card acts as a single navigation target and supports the necessary hover, pressed, and keyboard focus states.


		Here is a list of the different assets that we support in the leading container, along with their corresponding classes and notes.

		You can navigate through the different assets using the tabs below.

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!

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

hannahiss Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louismaximepiton commented Jun 24, 2026 •

edited

Loading

netlify Bot commented Jun 24, 2026 •

edited

Loading

hannahiss Aug 7, 2026 •

edited

Loading