Skip to content

feat(lib): Add List item component #3618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
louismaximepiton wants to merge 19 commits into
base: main
Choose a base branch
from
Open

feat(lib): Add List item component #3618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
58fef26
chore: update tokens
boosted-bot Jun 24, 2026
4d0f608
make it compile and test
MaxLardenois Jun 24, 2026
18a5f83
feat(lib): Add List item component
louismaximepiton Jun 24, 2026
92e5b02
.
louismaximepiton Jun 25, 2026
6f13894
.
louismaximepiton Jun 26, 2026
dc39d3b
.
louismaximepiton Jun 29, 2026
37e6be3
First draft for Static list-item
louismaximepiton Jun 30, 2026
1ce3f58
Better UX
louismaximepiton Jun 30, 2026
d7f4e06
.
louismaximepiton Jun 30, 2026
a4f7a52
Final CSS + better doc
louismaximepiton Jul 3, 2026
b8a0a6a
.
louismaximepiton Jul 5, 2026
6db8ab5
First final touch
louismaximepiton Jul 8, 2026
e5a6f56
Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-ad…
louismaximepiton Jul 8, 2026
8038924
.
louismaximepiton Jul 10, 2026
a321668
Merge branch 'main' into ouds/main-lmp-add-list-item
louismaximepiton Jul 10, 2026
894949a
.
louismaximepiton Jul 10, 2026
de08c9e
fix review
louismaximepiton Jul 10, 2026
901e66f
.
louismaximepiton Jul 10, 2026
4c2ad89
feat: reorganize Overview to list every components of the group
MaxLardenois Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
"maxSize": "83.25 kB"
"maxSize": "85.25 kB"
},
{
"path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
"maxSize": "79.75 kB"
"maxSize": "81.5 kB"
},
{
"path": "./packages/orange/dist/css/ouds-web-grid.css",
Expand Down Expand Up @@ -34,11 +34,11 @@
},
{
"path": "./packages/orange/dist/css/ouds-web.css",
"maxSize": "67.0 kB"
"maxSize": "68.75 kB"
},
{
"path": "./packages/orange/dist/css/ouds-web.min.css",
"maxSize": "62.75 kB"
"maxSize": "64.75 kB"
},
{
"path": "./dist/js/ouds-web.bundle.js",
Expand Down Expand Up @@ -70,4 +70,4 @@
"main"
]
}
}
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --ignore-pattern \"__snapshots__\" --cache --cache-location .cache/.stylelintcache",
"css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"",
"css-snapshot-refresh": "npm run css && cp packages/orange/dist/css/ouds-web.css scss/tests/snapshot-tests/__snapshots__/ouds-web.css && cp packages/orange/dist/css/ouds-web-bootstrap.css scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css && git restore packages/*/dist",
"css-snapshot-refresh": "npm run css-dev-orange && cp packages/orange/dist/css/ouds-web.css scss/tests/snapshot-tests/__snapshots__/ouds-web.css && cp packages/orange/dist/css/ouds-web-bootstrap.css scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css && git restore packages/**/dist",
"css-test": "jasmine --config=scss/tests/jasmine.js",
"css-snapshot-test": "vitest --config=scss/tests/snapshot-tests/vitest.config.ts",
"js": "npm-run-all js-compile js-minify",
Expand Down
2 changes: 1 addition & 1 deletion packages/orange-compact/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ cdn:

anchors:
min: 2
max: 5
max: 6

toc:
min: 2
Expand Down
1 change: 1 addition & 0 deletions packages/orange-compact/scss/ouds-web.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
@import "@ouds/web-common/scss/alert";
@import "@ouds/web-common/scss/progress";
@import "@ouds/web-common/scss/list-group";

@MaxLardenois MaxLardenois Jul 10, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Don't we remove list group?

@import "@ouds/web-common/scss/list-item";
// OUDS mod: no @import "@ouds/web-common/scss/close";
@import "@ouds/web-common/scss/toasts";
@import "@ouds/web-common/scss/modal";
Expand Down
5 changes: 5 additions & 0 deletions packages/orange-compact/scss/tokens/_composite.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.
// badge-icon error-fill v1.6
$badge-icon-negative: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g clip-path='url(#a)'><path d='M12 0C5.372 0 0 5.373 0 12c0 6.628 5.372 12 12 12s12-5.372 12-12c0-6.627-5.372-12-12-12Zm5.133 17.134c-.707.707-1.578.543-2.627-.506L12 14.122l-2.52 2.52c-1.05 1.049-1.906 1.2-2.613.492-.707-.707-.556-1.564.493-2.613l2.52-2.52L7.357 9.48c-1.05-1.05-1.2-1.907-.493-2.614.707-.706 1.564-.556 2.613.493L12 9.881l2.509-2.509c1.05-1.05 1.907-1.227 2.627-.507.707.707.542 1.578-.507 2.628L14.12 12l2.506 2.506c1.05 1.05 1.228 1.907.507 2.627Z'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h24v24H0z'/></clipPath></defs></svg>") !default;

// Navigation list item
$list-item-external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M17.3 16.967a.936.936 0 0 1-.933.933H7.033a.936.936 0 0 1-.933-.933V7.633a.936.936 0 0 1 .933-.933h5.741l1.6-1.6H6.42c-1.056 0-1.92.864-1.92 1.92v10.56c0 1.056.864 1.92 1.92 1.92h10.56c1.056 0 1.92-.864 1.92-1.92V9.625l-1.6 1.6v5.742ZM19.334 3.5H14.09l1.75 1.75-3.528 3.527c-.46.46-.46 1.204 0 1.664l1.248 1.248c.46.46 1.204.46 1.664 0L18.75 8.16l1.75 1.75V4.666c0-.644-.522-1.166-1.166-1.166Z'/></svg>") !default;
$list-item-next-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='m10.461 18.1 6.235-6.1-6.235-6.1L8.68 7.642 13.134 12 8.68 16.356l1.781 1.744Z'/></svg>") !default;
$list-item-previous-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M13.534 5.9 7.3 12l6.234 6.1 1.782-1.742L10.862 12l4.454-4.356L13.534 5.9Z'/></svg>") !default;

//// SVG used several times
$svg-as-custom-props: (
"chevron": $chevron-icon,
Expand Down
2 changes: 1 addition & 1 deletion packages/orange/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ cdn:

anchors:
min: 2
max: 5
max: 6

toc:
min: 2
Expand Down
1 change: 1 addition & 0 deletions packages/orange/scss/ouds-web.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
@import "@ouds/web-common/scss/alert";
@import "@ouds/web-common/scss/progress";
@import "@ouds/web-common/scss/list-group";
@import "@ouds/web-common/scss/list-item";
// OUDS mod: no @import "@ouds/web-common/scss/close";
@import "@ouds/web-common/scss/toasts";
@import "@ouds/web-common/scss/modal";
Expand Down
5 changes: 5 additions & 0 deletions packages/orange/scss/tokens/_composite.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.
// badge-icon error-fill v1.6
$badge-icon-negative: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g clip-path='url(#a)'><path d='M12 0C5.372 0 0 5.373 0 12c0 6.628 5.372 12 12 12s12-5.372 12-12c0-6.627-5.372-12-12-12Zm5.133 17.134c-.707.707-1.578.543-2.627-.506L12 14.122l-2.52 2.52c-1.05 1.049-1.906 1.2-2.613.492-.707-.707-.556-1.564.493-2.613l2.52-2.52L7.357 9.48c-1.05-1.05-1.2-1.907-.493-2.614.707-.706 1.564-.556 2.613.493L12 9.881l2.509-2.509c1.05-1.05 1.907-1.227 2.627-.507.707.707.542 1.578-.507 2.628L14.12 12l2.506 2.506c1.05 1.05 1.228 1.907.507 2.627Z'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h24v24H0z'/></clipPath></defs></svg>") !default;

// Navigation list item
$list-item-external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M17.3 16.967a.936.936 0 0 1-.933.933H7.033a.936.936 0 0 1-.933-.933V7.633a.936.936 0 0 1 .933-.933h5.741l1.6-1.6H6.42c-1.056 0-1.92.864-1.92 1.92v10.56c0 1.056.864 1.92 1.92 1.92h10.56c1.056 0 1.92-.864 1.92-1.92V9.625l-1.6 1.6v5.742ZM19.334 3.5H14.09l1.75 1.75-3.528 3.527c-.46.46-.46 1.204 0 1.664l1.248 1.248c.46.46 1.204.46 1.664 0L18.75 8.16l1.75 1.75V4.666c0-.644-.522-1.166-1.166-1.166Z'/></svg>") !default;
$list-item-next-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='m10.461 18.1 6.235-6.1-6.235-6.1L8.68 7.642 13.134 12 8.68 16.356l1.781 1.744Z'/></svg>") !default;
$list-item-previous-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M13.534 5.9 7.3 12l6.234 6.1 1.782-1.742L10.862 12l4.454-4.356L13.534 5.9Z'/></svg>") !default;

//// SVG used several times
$svg-as-custom-props: (
"chevron": $chevron-icon,
Expand Down
2 changes: 1 addition & 1 deletion packages/sosh/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ cdn:

anchors:
min: 2
max: 5
max: 6

toc:
min: 2
Expand Down
1 change: 1 addition & 0 deletions packages/sosh/scss/ouds-web.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
@import "@ouds/web-common/scss/alert";
@import "@ouds/web-common/scss/progress";
@import "@ouds/web-common/scss/list-group";
@import "@ouds/web-common/scss/list-item";
// OUDS mod: no @import "@ouds/web-common/scss/close";
@import "@ouds/web-common/scss/toasts";
@import "@ouds/web-common/scss/modal";
Expand Down
5 changes: 5 additions & 0 deletions packages/sosh/scss/tokens/_composite.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.
// badge-icon error-fill v1.6
$badge-icon-negative: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g clip-path='url(#a)'><path fill-rule='evenodd' d='M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12s5.373 12 12 12 12-5.372 12-12Zm-7.875 4.13a1.087 1.087 0 0 1-1.552 0L12 13.524 9.426 16.13a1.087 1.087 0 0 1-1.55 0 1.12 1.12 0 0 1 0-1.57l2.573-2.606L7.967 9.44a1.12 1.12 0 0 1 0-1.57 1.088 1.088 0 0 1 1.551 0L12 10.382l2.482-2.513a1.088 1.088 0 0 1 1.551 0 1.12 1.12 0 0 1 0 1.57l-2.482 2.514 2.574 2.605a1.12 1.12 0 0 1 0 1.57Z' clip-rule='evenodd'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h24v24H0z'/></clipPath></defs></svg>") !default;

// Navigation list item
$list-item-external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M20.253 3a.492.492 0 0 0-.076.006l-3.187.5a.498.498 0 0 0 .154.986l1.98-.31-5.925 6.113a.5.5 0 0 0 .357.848c.13 0 .26-.05.357-.152l3.033-3.13v9.441a.699.699 0 0 1-.697.7H5.997V7.714c0-.385.312-.699.696-.699h7.148a.499.499 0 0 0 0-.998H6.692A1.698 1.698 0 0 0 5 7.715v10.786c0 .275.223.499.498.499H16.25c.933 0 1.692-.762 1.692-1.698V7.11a.49.49 0 0 0-.053-.22l2.033-2.098-.165 2.116a.499.499 0 1 0 .992.077L21 3.788A.749.749 0 0 0 20.253 3Z'/></svg>") !default;
$list-item-next-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M8.87 7.882c-.017-.013.012.013 0 0l4.753 4.19-4.754 4.11c-.53.526-.433 1.186 0 1.635-.016-.013.013.016 0 0 .485.458 1.24.432 1.745-.007l5.746-4.966c.472-.41.434-1.098 0-1.544l-5.746-5.027c-.614-.611-1.324-.49-1.745-.08-.42.41-.559 1.144 0 1.689Z'/></svg>") !default;
$list-item-previous-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M15.13 16.118c-.012-.013.017.013 0 0l-4.754-4.19 4.755-4.11c.53-.526.433-1.186 0-1.635-.013-.016.016.013 0 0-.486-.458-1.24-.432-1.745.007L7.64 11.156c-.473.41-.434 1.098 0 1.544l5.746 5.027c.614.611 1.324.49 1.745.08.42-.41.559-1.144 0-1.689Z'/></svg>") !default;

//// SVG used several times
$svg-as-custom-props: (
"chevron": $chevron-icon,
Expand Down
Loading
Loading