feat(unordered-list): add support for marker types

[SandeepBaskaran]

Description

Add support for different list marker types (disc, circle, square, hyphen, custom) to the UnorderedList component in both React and Web Components packages.

This change allows users to customize list markers beyond the default hyphen (top-level) and square (nested) styles. The implementation uses native CSS list-style-type for disc/circle/square markers and custom ::before pseudo-elements for hyphen and custom markers.

Issue

Closes #16937

Changes Made

Features

• New type prop accepting: 'disc' | 'circle' | 'square' | 'hyphen' | 'custom'
• New customMarker prop for custom marker content (requires type="custom")
• Default behavior: hyphen for top-level, square for nested lists (with deprecation warning)
• Fully backward compatible with existing lists

React Component

• Added type and customMarker props to UnorderedListProps interface
• Deprecation warning for nested lists without explicit type prop
• Dynamic CSS class application based on marker type

Web Components

• Added type and customMarker properties with attribute reflection
• Parent inheritance for nested lists (inherits parent's type when not specified)
• Deprecation warning pattern matching React implementation

SCSS Changes

• Added marker type classes: .cds--list--marker-{type}
• Native list-style-type support for disc/circle/square
• Custom marker support via CSS custom property --cds--list--marker-content
• Comprehensive nested list handling for all marker types

Examples

React

// Disc markers

  Disc bullet


// Custom markers

  Custom arrow marker

Web Components

  Circle bullet




  Custom star marker

Marker Types Reference

Type	Renders	Use Case
disc	•	Filled circle bullets
circle	○	Hollow circle bullets
square	▪	Filled square bullets
hyphen	–	En dash (default for top-level)
custom	Custom	User-defined marker (e.g., →, ★, ◆)

Testing

• Tested in Storybook for both React and Web Components
• All marker types render correctly
• Custom markers work as expected
• Nested lists display correctly with proper defaults
• Backward compatible with existing code
• All unit tests passing
• No console warnings in development mode (except intentional deprecation warnings)

Checklist

• Reviewed every line of the diff
• Updated Storybook examples and controls
• Tests added/updated and all passing
• Changes are backward compatible
• Cross-browser tested
• Accessibility considerations reviewed
• Code follows Carbon's style guidelines

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	428b1db
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/691d49d9b0a37000089f4580
😎 Deploy Preview	https://deploy-preview-20871--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	428b1db
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/691d49d977e39e0007351083
😎 Deploy Preview	https://deploy-preview-20871--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	428b1db
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/691d49d92b4f8a0008e457a4
😎 Deploy Preview	https://deploy-preview-20871--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[SandeepBaskaran]

I have read the DCO document and I hereby sign the DCO.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.56%. Comparing base (9a1475a) to head (bb11cd2).
⚠️ Report is 7 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (9a1475a) and HEAD (bb11cd2). Click for more details.

HEAD has 3 uploads less than BASE

Flag	BASE (9a1475a)	HEAD (bb11cd2)
web-components	2	0
main-packages	2	1

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #20871      +/-   ##
==========================================
- Coverage   92.45%   85.56%   -6.89%     
==========================================
  Files         515      357     -158     
  Lines       37601    14503   -23098     
  Branches     5780     4900     -880     
==========================================
- Hits        34764    12410   -22354     
+ Misses       2688     1954     -734     
+ Partials      149      139      -10     

Flag	Coverage Δ
main-packages	85.56% <100.00%> (+0.01%)	⬆️
web-components	?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.