feat(lib): Add List item component - #3618
Conversation
louismaximepiton
added
⚛️ component
📖 documentation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
There was a problem hiding this comment.
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.scsscomponent 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. |
| </div> | ||
| </div>`} /> | ||
|
|
||
| ### Sizes |
There was a problem hiding this comment.
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 ?
There was a problem hiding this comment.
Yes maybe, let's discuss it with other people
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
left a comment
MaxLardenois
left a comment
There was a problem hiding this comment.
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
| @@ -39,6 +39,7 @@ | |||
| @import "@ouds/web-common/scss/alert"; | |||
| @import "@ouds/web-common/scss/progress"; | |||
| @import "@ouds/web-common/scss/list-group"; | |||
There was a problem hiding this comment.
Don't we remove list group?
| @@ -0,0 +1,1061 @@ | |||
| --- | |||
| title: List item | |||
There was a problem hiding this comment.
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...)
4c2ad89 to
3d1d201
Compare
Types of change
Related issues
Closes #2783.
Context & Motivation
Add the list-item to the component we officially support.
Description
TODO
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews