Skip to content

[#265] Add list item component#1538

Draft
ludovic35 wants to merge 18 commits into
developfrom
265-in-library-add-list-item-component
Draft

[#265] Add list item component#1538
ludovic35 wants to merge 18 commits into
developfrom
265-in-library-add-list-item-component

Conversation

@ludovic35

@ludovic35 ludovic35 commented Jun 2, 2026

Copy link
Copy Markdown
Member

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

Related issues

#265

Description

Motivation & Context

Types of change

  • New feature (non-breaking change which adds functionality)

Previews

Checklist

Contribution

Accessibility

  • My change follows accessibility good practices

Design

  • My change respects the design guidelines of Orange Unified Design System

Development

  • My change follows the developer guide
  • I checked my changes do not add new SwiftLint warnings
  • I have added unit tests to cover my changes (optional)

Documentation

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

Checklist (for Core Team only)

  • The evolution have been tested and the project builds for iPhones and iPads
  • Code review has been done by reviewers according to CODEOWNERS file
  • Design review has been done
  • Accessibility review has been done
  • Q/A team has tested the evolution
  • Documentation has been updated if relevant
  • Internal files have been updated if relevant (like CONTRIBUTING, DEVELOP, THIRD_PARTY, CONTRIBUTORS, NOTICE)
  • CHANGELOG has been updated respecting keep a changelog rules and reference the issues
  • The wiki has been updated if needed (optional)

pylapp and others added 16 commits May 27, 2026 14:18
@pylapp @ludovic35
fix: selector and divider of tab bar component still displayed even…
2a8f705 
… if tab bar hidden (no Liquid Glass) (#1434) (#1436)

Use tricks to get the tab bar hidden status from UIKit layer to then use it and hide the selected tab indicator and the top tab bar divider.

Closes #1434

Assisted-by: GitHub Copilot
Assisted-by: Claude Sonnet 4.6 (OpenCode, LLMProxy)
Reported-by: Thomas Martin <thomas2.martin@orange.com>
Reviewed-by: Ludovic Pinel <ludovic.pinel@orange.com>
Reviewed-by: Copilot <198982749+Copilot@users.noreply.github.com>
Reviewed-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
@ludovic35
feat: refactor control item to support list item
9b8b5a3
@ludovic35
refactor: rollback ControlItem and creaate a ListContolItem to keep p…
ede0ed9 
…revious behaviour of Switch/checkbox/radio items

Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
refactor: rollback ControlItem and creaate a ListContolItem to keep p…
f3d5187 
…revious behaviour of Switch/checkbox/radio items

Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
feat: add ecternal icon and update static api
ed2abed 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
feat: fisrt version with leading element
6e91004 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
feat: add trailing and trailing elments
9246bce 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
feat: add rounded corners on media
4eba642 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
feat: add text type for trailing text
bbf4586 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
chore: add some doc
0fec658
@ludovic35
feat: add avatar
803f9e8
@ludovic35
feat: Add icon with badge
e7908c9 
Signed-off-by: Ludovic PINEL <ludovic.pinel@orange.com>
@ludovic35
refactor: add modifier to apply site on item
76f4c41
@ludovic35
docs: add documentation
5a0e812
@ludovic35
feat: add doc and illustartions
a405eea
@ludovic35
chore: make list item available for tvos
bd66a0a
@ludovic35 ludovic35 linked an issue Jun 2, 2026 that may be closed by this pull request
In library, add list item component #265
Open
@pylapp pylapp requested a review from Copilot June 4, 2026 08:23
Copilot AI reviewed Jun 4, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR introduces the new List Item SwiftUI component family to OUDS Components (static + navigable variants), along with supporting styling APIs, theme tuning, documentation, and required icon assets across themes.

Changes:

  • Added OUDSListStaticItem and OUDSListItemNavigation plus supporting models (leading/trailing/content, avatar, icon) and internal layout/modifier implementations.
  • Extended theme tuning with hasRoundedListItems and propagated it through themes/tests/docs.
  • Added new icon assets (e.g. external link + communication icons) and updated DocC/tutorial samples + NOTICE entries.

Reviewed changes

Copilot reviewed 49 out of 75 changed files in this pull request and generated 18 comments.

Show a summary per file
File Description
OUDS/Core/ThemesContract/Tests/OUDSThemeTuningTests.swift Adds coverage for new hasRoundedListItems tuning defaults/variants.
OUDS/Core/ThemesContract/Sources/OUDSTheme/OUDSThemeTuning.swift Introduces hasRoundedListItems and updates predefined tunings/docs.
OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-8.swift Updates sample to include hasRoundedListItems.
OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-9.swift Updates sample to include hasRoundedListItems.
OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-10.swift Updates sample to include hasRoundedListItems.
OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery (solution).swift Updates solution sample to include hasRoundedListItems + formatting tweak.
OUDS/Core/Themes/Wireframe/Tests/WireframeThemeTests.swift Updates tests for tuning + safer casts.
OUDS/Core/Themes/Wireframe/Sources/WireframeTheme.swift Propagates hasRoundedListItems into Wireframe tuning.
OUDS/Core/Themes/Wireframe/Sources/Values/ComponentTokens/WireframeTheme+ControlItemComponentTokens.swift Formatting/structure updates in control item tokens provider.
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/ic_functional_action_external_link.svg Adds external-link icon SVG (Wireframe).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/Contents.json Adds asset catalog metadata (Wireframe external-link).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/ic_communication_security_and_safety_lock.svg Adds communication lock icon SVG (Wireframe).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/Contents.json Adds asset catalog metadata (Wireframe lock).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/ic_communication_people_avatar.svg Adds people avatar icon SVG (Wireframe).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/Contents.json Adds asset catalog metadata (Wireframe avatar).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/ic_communication_accessibility_vision.svg Adds accessibility vision icon SVG (Wireframe).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/Contents.json Adds asset catalog metadata (Wireframe vision).
OUDS/Core/Themes/Wireframe/Sources/Resources/Icons.xcassets/Communication/Contents.json Adds communication asset catalog folder metadata (Wireframe).
OUDS/Core/Themes/Sosh/Tests/SoshThemeTests.swift Updates tests for tuning + safer casts.
OUDS/Core/Themes/Sosh/Sources/Values/ComponentTokens/SoshTheme+ControlItemComponentTokens.swift Formatting/structure updates in control item tokens provider.
OUDS/Core/Themes/Sosh/Sources/SoshTheme.swift Propagates hasRoundedListItems into Sosh tuning.
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/ic_functional_action_external_link.svg Adds external-link icon SVG (Sosh).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/Contents.json Adds asset catalog metadata (Sosh external-link).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/ic_communication_security_and_safety_lock.svg Adds communication lock icon SVG (Sosh).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/Contents.json Adds asset catalog metadata (Sosh lock).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/ic_communication_people_avatar.svg Adds people avatar icon SVG (Sosh).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/Contents.json Adds asset catalog metadata (Sosh avatar).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/ic_communication_accessibility_vision.svg Adds accessibility vision icon SVG (Sosh).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/Contents.json Adds asset catalog metadata (Sosh vision).
OUDS/Core/Themes/Sosh/Sources/Resources/Icons.xcassets/Communication/Contents.json Adds communication asset catalog folder metadata (Sosh).
OUDS/Core/Themes/OrangeCompact/Sources/Values/ComponentTokens/OrangeCompactTheme+ControlItemComponentTokens.swift Formatting/structure updates in control item tokens provider.
OUDS/Core/Themes/OrangeCompact/Sources/OrangeCompactTheme.swift Updates docs/examples to include hasRoundedListItems.
OUDS/Core/Themes/OrangeCompact/Sources/_OUDSThemesOrangeCompact.docc/OUDSThemesOrangeCompact.md Updates DocC tuning docs to include list item rounding.
OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/ThemeOverrideOfControlItemComponentTokensTests.swift Adjusts tests (throws removal) consistent with other test updates.
OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/MockTheme/MockTheme+AllControlItemComponentTokens.swift Formatting/structure updates in mock provider overrides.
OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+ControlItemComponentTokens.swift Formatting/structure updates in control item tokens provider.
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/ic_functional_action_external_link.svg Adds external-link icon SVG (Orange).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Functional/ic_functional_action_external_link.imageset/Contents.json Adds asset catalog metadata (Orange external-link).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/ic_communication_security_and_safety_lock.svg Adds communication lock icon SVG (Orange).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_security_and_safety_lock.imageset/Contents.json Adds asset catalog metadata (Orange lock).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/ic_communication_people_avatar.svg Adds people avatar icon SVG (Orange).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_people_avatar.imageset/Contents.json Adds asset catalog metadata (Orange avatar).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/ic_communication_accessibility_vision.svg Adds accessibility vision icon SVG (Orange).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/ic_communication_accessibility_vision.imageset/Contents.json Adds asset catalog metadata (Orange vision).
OUDS/Core/Themes/Orange/Sources/Resources/Icons.xcassets/Communication/Contents.json Adds communication asset catalog folder metadata (Orange).
OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift Updates docs/examples to include hasRoundedListItems.
OUDS/Core/Themes/Orange/Sources/_OUDSThemesOrange.docc/OUDSThemesOrange.md Updates DocC tuning docs to include list item rounding.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListStyles.swift Adds list-item style APIs (env keys + view modifiers).
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListStaticItem.swift Adds the static list item component + DocC.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemTrailing.swift Defines trailing content model and variants.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemNavigation.swift Adds the navigable list item component + affordance type API.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemLeading.swift Defines leading content model and variants.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSLIstItemIcon.swift Adds list-item icon view implementation.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemData.swift Adds the textual data model for list items.
OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemAvatar.swift Adds list-item avatar implementation.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemTrailingContainer.swift Internal layout for trailing content.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemTextContainer.swift Internal layout for text content.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemLeadingContainer.swift Internal layout for leading content.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemHelperTextContainer.swift Internal helper text rendering.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemContent.swift Core list-item layout composition.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemBordersModifier.swift Border/divider/outline rendering logic.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemBackgroundModifier.swift Background rendering logic based on style/state.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemAffordanceContainer.swift Affordance (chevron/external) rendering logic.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/LeadingAndTrailing/ListItemTrailingTexts.swift Internal rendering for trailing text variants.
OUDS/Core/Components/Sources/Navigations/ListItem/Internal/LeadingAndTrailing/ListItemMedia.swift Internal rendering for image/flag/video media.
OUDS/Core/Components/Sources/_OUDSComponents.docc/Navigations.md Adds list item documentation to the Navigations section.
NOTICE.txt Updates third-party notice entries for newly added assets.

Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemContent.swift
Comment on lines +66 to +70
nil
}

ListItemHelperTextContainer(text: helperTextContent, interactionState: interactionState)
}
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemLeadingContainer.swift
Comment on lines +14 to +16
import AVKit
import OUDSTokensSemantic
import SwiftUI
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/Internal/ListItemTrailingContainer.swift
Comment on lines +14 to +16
import AVKit
import OUDSTokensSemantic
import SwiftUI
Comment thread ...ponents/Sources/Navigations/ListItem/Internal/LeadingAndTrailing/ListItemTrailingTexts.swift
Comment on lines +14 to +16
import AVKit
import OUDSTokensSemantic
import SwiftUI
Comment thread ...Core/Components/Sources/Navigations/ListItem/Internal/LeadingAndTrailing/ListItemMedia.swift
Comment on lines +14 to +16
import AVKit
import OUDSTokensSemantic
import SwiftUI
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemLeading.swift
/// leading elements such as avatars and icons are rendered in their smallest available size.
///
/// - Since: 2.0.0
@frozen public enum OOUDSListItemLeading {
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/OUDSLIstItemIcon.swift
/// with the theme's `actionDisabled` color instead of their semantic color.
///
/// - Since: 2.0.0
public struct OUDSLIstItemIcon: View {
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListStyles.swift
Comment on lines +138 to +142
public func oudsListCardStyle(hasDdivider: Bool = false,
hasBackground: Bool = true) -> some View
{
environment(\.oudsListItemContentStyle, .standard(divider: hasDdivider, background: hasBackground))
}
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListStaticItem.swift
Comment on lines +116 to +117
@Environment(\.isEnabled) private var isEnabled
@Environment(\.theme) private var theme
Comment thread OUDS/Core/Components/Sources/Navigations/ListItem/OUDSListItemNavigation.swift
Comment on lines +140 to +142
@Environment(\.isEnabled) private var isEnabled
@Environment(\.theme) private var theme
@Environment(\.layoutDirection) private var layoutDirection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@pylapp pylapp Awaiting requested review from pylapp pylapp will be requested when the pull request is marked ready for review pylapp is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

In library, add list item component

3 participants

@ludovic35 @pylapp