Skip to content

POC adding new ul and li renderers#89162

Merged
roryabraham merged 11 commits into
Expensify:mainfrom
software-mansion-labs:fix/add-ul-li-renderer-poc
May 7, 2026
Merged

POC adding new ul and li renderers#89162
roryabraham merged 11 commits into
Expensify:mainfrom
software-mansion-labs:fix/add-ul-li-renderer-poc

Conversation

@jmusial

@jmusial jmusial commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Explanation of Change

Concierge sends HTML bullet lists using standard <ul> / <li> tags, sometimes with an orphaned <br/> inside the <ul> (e.g. <ul><li>One</li><li>Two</li><br/></ul>). Two problems resulted:

  1. The orphaned <br/> rendered as an extra empty bullet at the end of the list.
  2. The library's default ul renderer wraps each child in MarkedListItem, which doesn't match how our existing <bullet-list> / <bullet-item> markup is rendered, and the spacing felt off.

This PR fixes both:

  • Adds custom HTMLElementModels for ul and li in BaseHTMLEngineProvider (mirroring the existing bullet-list / bullet-item models), and applies marginVertical: 12 to <ul> for consistent spacing.
  • Adds a new ULRenderer that renders <ul> as a plain block container (a <View> wrapping TNodeChildrenRenderer), bypassing the library's default MarkedListItem wrapping. The bullet markers are drawn by the <li> renderer.
  • Reuses the existing BulletItemRenderer for <li>, so standard <li> and the legacy <bullet-item> render identically.
  • In RenderHTML, strips orphaned <br/> tags that are direct children of <ul> (both the <br/> immediately before </ul> and any <br/> between </li> and the next <li>) before handing the HTML to react-native-render-html. This prevents the extra empty bullet without touching <br/> usage outside of lists.

Fixed Issues

$ #89039
PROPOSAL:

Tests

  1. Sign in and open the Concierge chat.
  2. Trigger a Concierge response that contains a bulleted list — for example, send "What can you do? Use the list format" or any prompt that returns a list of options.
  3. Verify the rendered bullet list:
  • Each item is preceded by a single bullet ().
  • There is no extra empty bullet at the end of the list.
  • The list has comfortable vertical spacing above and below it.

Offline tests

N/A

QA Steps

Same as tests

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
      • If any non-english text was added/modified, I used JaimeGPT to get English > Spanish translation. I then posted it in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • If new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari image

@melvin-bot

melvin-bot Bot commented Apr 29, 2026

Copy link
Copy Markdown

Hey, I noticed you changed src/languages/en.ts in a PR from a fork. For security reasons, translations are not generated automatically for PRs from forks.

If you want to automatically generate translations for other locales, an Expensify employee will have to:

  1. Look at the code and make sure there are no malicious changes.
  2. Run the Generate static translations GitHub workflow. If you have write access and the K2 extension, you can simply click: [this button]

Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running:

npx ts-node ./scripts/generateTranslations.ts --help

Typically, you'd want to translate only what you changed by running npx ts-node ./scripts/generateTranslations.ts --compare-ref main

@codecov

codecov Bot commented Apr 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines Coverage Δ
...ents/HTMLEngineProvider/BaseHTMLEngineProvider.tsx 81.42% <100.00%> (+0.26%) ⬆️
...ngineProvider/HTMLRenderers/BulletItemRenderer.tsx 100.00% <100.00%> (+100.00%) ⬆️
...ts/HTMLEngineProvider/HTMLRenderers/ULRenderer.tsx 100.00% <100.00%> (ø)
...mponents/HTMLEngineProvider/HTMLRenderers/index.ts 100.00% <ø> (ø)
src/components/RenderHTML.tsx 100.00% <100.00%> (ø)
... and 25 files with indirect coverage changes

@war-in

This comment was marked as duplicate.

@war-in

war-in commented May 6, 2026

Copy link
Copy Markdown
Contributor

@roryabraham PR is ready for review! However, I'm not able to update the description, so I posted a comment. Could you please paste it? 🙏

Also, I can't mark the PR as opened. Could you also do that, please?

@roryabraham roryabraham marked this pull request as ready for review May 7, 2026 00:18
@roryabraham roryabraham requested review from a team as code owners May 7, 2026 00:18
@melvin-bot melvin-bot Bot requested review from aimane-chnaif and joekaufmanexpensify and removed request for a team May 7, 2026 00:18
@melvin-bot

melvin-bot Bot commented May 7, 2026

Copy link
Copy Markdown

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@melvin-bot melvin-bot Bot requested review from a team and trjExpensify and removed request for a team May 7, 2026 00:18
@roryabraham

Copy link
Copy Markdown
Contributor

done @war-in. Looks like ESLint is failing though

@chatgpt-codex-connector chatgpt-codex-connector Bot 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d46cead464

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

a: AnchorRenderer,
code: CodeRenderer,
img: ImageRenderer,
li: BulletItemRenderer,

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Preserve ordered-list numbering

Registering BulletItemRenderer for every standard li means it also runs for ordered lists, because this renderer always emits CONST.DOT_SEPARATOR. In any HTML passed to RenderHTMLSource like <ol><li>First</li><li>Second</li></ol>, the built-in ordered-list marker is bypassed and the items render as bullets instead of 1., 2., which regresses standard HTML list rendering while adding <ul> support.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

It's very useful. I'm fixing this now

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

fixed

*/
function ULRenderer({tnode, style}: CustomRendererProps<TBlock>) {
return (
<View style={[style, {gap: 8}]}>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

❌ CONSISTENCY-2 (docs)

The magic number 8 is used for gap styling without a named constant or comment explaining the design intent. This makes it harder to maintain consistent spacing across the codebase.

Extract this value into a named constant or use an existing spacing variable from the theme/variables system:

// e.g., in CONST or variables
const BULLET_LIST_ITEM_GAP = 8;

// Then in the component:
<View style={[style, {gap: BULLET_LIST_ITEM_GAP}]}>

Reviewed at: d46cead | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

fixed

ul: HTMLElementModel.fromCustomModel({
tagName: 'ul',
contentModel: HTMLContentModel.block,
mixedUAStyles: {marginVertical: 12},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

❌ CONSISTENCY-2 (docs)

The magic number 12 is used for marginVertical styling without a named constant or comment explaining the design intent.

Extract this value into a named constant or use an existing spacing variable from the theme/variables system:

// e.g., in CONST or variables
const UL_MARGIN_VERTICAL = 12;

// Then in the model definition:
mixedUAStyles: {marginVertical: UL_MARGIN_VERTICAL},

Reviewed at: d46cead | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

and also fixed

@trjExpensify

Copy link
Copy Markdown
Contributor

PR doesn’t need product input as a refactor PR. Unassigning and unsubscribing myself.

@trjExpensify trjExpensify removed their request for review May 7, 2026 01:40
@aimane-chnaif

Copy link
Copy Markdown
Contributor
  • Before:
Screenshot 2026-05-07 at 6 32 07 am
  • After:
web
  • Before:
Screenshot 2026-05-07 at 6 24 57 am
  • After:
Screenshot 2026-05-07 at 6 22 35 am

@aimane-chnaif

aimane-chnaif commented May 7, 2026

Copy link
Copy Markdown
Contributor

Reviewer Checklist

  • I have verified the author checklist is complete (all boxes are checked off).
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I checked that screenshots or videos are included for tests on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
  • I verified tests pass on all platforms & I tested again on:
    • Android: HybridApp
    • Android: mWeb Chrome
    • iOS: HybridApp
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
    • MacOS: Desktop
  • If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
  • I verified there are no new alerts related to the canBeMissing param for useOnyx
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp
Android: mWeb Chrome
iOS: HybridApp
ios.mov
iOS: mWeb Safari
msafari.mov
MacOS: Chrome / Safari

#89162 (comment)

Note to myself:

import {useEffect} from 'react';
import Onyx from 'react-native-onyx';

    useEffect(() => {
        setTimeout(() => {
            Onyx.merge('reportActions_7779067723124970', {
                '3834599462744614': {
                    message: [
                        {
                            html: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.<br/><br><br><br/><strong>1. Via your company’s Uber for Business integration (fully automatic)</strong><br><br/>If your company uses <strong>Uber for Business</strong> and your workspace admin has connected it to Expensify:<ul><li>You’ll be invited/linked to your company’s Uber for Business program.</li><li>When you take rides or place Uber Eats orders on that <strong>business profile</strong>, Uber sends the trip data to Expensify.</li><li>Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.</li><br/></ul><br/>The admin-side setup is documented here: <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.<br/><br><br><br/><strong>2. By forwarding Uber receipt emails to Expensify (personal fallback)</strong><br><br/>If your company doesn’t have Uber for Business connected, you can still automate things using email receipts:<ul><li>Make sure your Uber receipts go to an email that’s listed as a <strong>contact method</strong> on your Expensify account.</li><li>Forward those emails (or set an auto‑forward rule) to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>.</li><li>Each forwarded receipt is SmartScanned into an expense automatically, as described in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</li><br/></ul><br/>There isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.<followup-list><followup><followup-text>Once it’s connected, how do Uber receipts show up in Expensify?</followup-text><followup-response>You don’t need to do anything special in the Uber app itself once your company has connected Uber for Business to Expensify.<br><br>When the integration is enabled on your workspace and you’ve been invited/linked on the Uber side, your eligible Uber Rides and Uber Eats trips will automatically generate expenses in Expensify:<br><ul><li>A SmartScanned receipt image is created for each trip</li><li>An expense is created with the correct merchant, date, and amount</li><li>The expense is added to your next report according to your workspace’s rules</li></ul>You can read more about how the integration works in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup><followup><followup-text>What if my company doesn’t use Uber for Business? Can I still automate Uber receipts?</followup-text><followup-response>If your company doesn’t use Uber for Business, or if the integration isn’t enabled on your workspace, you can still get Uber rides into Expensify automatically by using SmartScan:<br><br><ul><li>Make sure your Uber receipts go to an email address that’s added as a contact method on your Expensify account</li><li>Forward your Uber receipt emails to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>, or set up an auto‑forward rule in your email client</li><li>Each forwarded email will create a SmartScanned expense in Expensify</li></ul>The general receipt‑to‑expense flow is outlined in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</followup-response></followup><followup><followup-text>Why aren’t my Uber rides showing up in Expensify?</followup-text><followup-response>If an Uber ride or meal isn’t appearing in Expensify as expected, try the following:<br><ul><li>Confirm whether your company actually has the Uber for Business integration enabled and that you’ve been invited/linked in that program</li><li>Check that the Uber trip used the email address your company expects (for U4B) or an email that’s on your Expensify account if you’re forwarding receipts</li><li>Look on your Expenses/Spend page for Unreported expenses that may not have hit a report yet</li></ul>If the integration is definitely enabled and you’re linked but trips are still missing, your workspace admin can review the connection and invites as described in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup></followup-list>',
                            text: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.\n\n\n\n1. Via your company’s Uber for Business integration (fully automatic)\n\nIf your company uses Uber for Business and your workspace admin has connected it to Expensify:You’ll be invited/linked to your company’s Uber for Business program.When you take rides or place Uber Eats orders on that business profile, Uber sends the trip data to Expensify.Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.\n\nThe admin-side setup is documented here: Uber for Business.\n\n\n\n2. By forwarding Uber receipt emails to Expensify (personal fallback)\n\nIf your company doesn’t have Uber for Business connected, you can still automate things using email receipts:Make sure your Uber receipts go to an email that’s listed as a contact method on your Expensify account.Forward those emails (or set an auto‑forward rule) to receipts@expensify.com.Each forwarded receipt is SmartScanned into an expense automatically, as described in Create an Expense.\n\nThere isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.',
                            type: 'COMMENT',
                            whisperedTo: [],
                        },
                    ],
                    originalMessage: {
                        html: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.<br/><br><br><br/><strong>1. Via your company’s Uber for Business integration (fully automatic)</strong><br><br/>If your company uses <strong>Uber for Business</strong> and your workspace admin has connected it to Expensify:<ul><li>You’ll be invited/linked to your company’s Uber for Business program.</li><li>When you take rides or place Uber Eats orders on that <strong>business profile</strong>, Uber sends the trip data to Expensify.</li><li>Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.</li><br/></ul><br/>The admin-side setup is documented here: <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.<br/><br><br><br/><strong>2. By forwarding Uber receipt emails to Expensify (personal fallback)</strong><br><br/>If your company doesn’t have Uber for Business connected, you can still automate things using email receipts:<ul><li>Make sure your Uber receipts go to an email that’s listed as a <strong>contact method</strong> on your Expensify account.</li><li>Forward those emails (or set an auto‑forward rule) to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>.</li><li>Each forwarded receipt is SmartScanned into an expense automatically, as described in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</li><br/></ul><br/>There isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.<followup-list><followup><followup-text>Once it’s connected, how do Uber receipts show up in Expensify?</followup-text><followup-response>You don’t need to do anything special in the Uber app itself once your company has connected Uber for Business to Expensify.<br><br>When the integration is enabled on your workspace and you’ve been invited/linked on the Uber side, your eligible Uber Rides and Uber Eats trips will automatically generate expenses in Expensify:<br><ul><li>A SmartScanned receipt image is created for each trip</li><li>An expense is created with the correct merchant, date, and amount</li><li>The expense is added to your next report according to your workspace’s rules</li></ul>You can read more about how the integration works in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup><followup><followup-text>What if my company doesn’t use Uber for Business? Can I still automate Uber receipts?</followup-text><followup-response>If your company doesn’t use Uber for Business, or if the integration isn’t enabled on your workspace, you can still get Uber rides into Expensify automatically by using SmartScan:<br><br><ul><li>Make sure your Uber receipts go to an email address that’s added as a contact method on your Expensify account</li><li>Forward your Uber receipt emails to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>, or set up an auto‑forward rule in your email client</li><li>Each forwarded email will create a SmartScanned expense in Expensify</li></ul>The general receipt‑to‑expense flow is outlined in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</followup-response></followup><followup><followup-text>Why aren’t my Uber rides showing up in Expensify?</followup-text><followup-response>If an Uber ride or meal isn’t appearing in Expensify as expected, try the following:<br><ul><li>Confirm whether your company actually has the Uber for Business integration enabled and that you’ve been invited/linked in that program</li><li>Check that the Uber trip used the email address your company expects (for U4B) or an email that’s on your Expensify account if you’re forwarding receipts</li><li>Look on your Expenses/Spend page for Unreported expenses that may not have hit a report yet</li></ul>If the integration is definitely enabled and you’re linked but trips are still missing, your workspace admin can review the connection and invites as described in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup></followup-list>',
                    },
                },
            });
        }, 3000);
    });

@aimane-chnaif

Copy link
Copy Markdown
Contributor

Not working on native

Screenshot 2026-05-07 at 6 47 05 am Screenshot 2026-05-07 at 6 47 33 am

@MelvinBot

Copy link
Copy Markdown
Contributor

The bullet-list tag has no built-in behavior in react-native-render-html — it's a custom element Expensify invented, so the library just renders whatever we tell it to.

<ul>, on the other hand, is a standard HTML tag that the library already handles internally by wrapping children in MarkedListItem. That default wrapping produces incorrect spacing and double-bullet rendering. The ULRenderer exists specifically to override that built-in library behavior and render <ul> as a plain block container instead.

In short: bullet-list doesn't need an override because the library has no opinion about it. <ul> does need one because the library's default ul handling conflicts with how Expensify renders bullet lists. The items themselves already share the same renderer (BulletItemRenderer is reused for both <bullet-item> and <li>).

@war-in

war-in commented May 7, 2026

Copy link
Copy Markdown
Contributor

Not working on native

On it, I'll try to investigate the issue 🫡

@war-in

war-in commented May 7, 2026

Copy link
Copy Markdown
Contributor

@aimane-chnaif mobile platforms should be working now, sorry for the oversight
I also fixed the ordered list because previously every numbered item contained an additional dot

@joekaufmanexpensify joekaufmanexpensify left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Good for product

@MelvinBot

Copy link
Copy Markdown
Contributor

Code Review

Overall this is a well-structured fix. The approach of overriding the library's default <ul> renderer to match existing <bullet-list>/<bullet-item> behavior is sound, the <br/> stripping regex is correctly scoped, and the test coverage is good. CI is green (only failing check is checklist which is expected).

A few observations:

1. Magic number in BulletItemRenderer (pre-existing, minor)

paddingHorizontal: 8 on line 17 of BulletItemRenderer.tsx is a magic number. Since this file was touched by the PR (type signature change + w100 addition), it would be a good opportunity to replace it with a style constant — but not blocking.

2. renderers object in RenderHTML.tsx is not memoized (pre-existing)

The renderers object (lines 58–63) is recreated on every render. This was true before this PR (for bullet-item and sparkles-icon), but worth noting since adding ul extends the pattern. A useMemo wrapper would prevent unnecessary re-renders of the HTML tree. Not blocking since it's a pre-existing pattern.

3. Consistency note: bullet-list vs ul element models

bullet-list uses a hardcoded {marginVertical: 12} while ul correctly uses styles.mv3. These resolve to the same value, but it would be slightly cleaner if bullet-list also used styles.mv3 for consistency. Again, pre-existing — not blocking.

Looks good overall — the regex stripping correctly targets only orphaned <br/> between </li> boundaries, <li> is intentionally left unregistered globally to preserve <ol> numbering, and the tests cover the key edge cases (nested <br/> inside <li>, <br/> outside lists).

@MelvinBot

Copy link
Copy Markdown
Contributor

Regression Analysis

No high-risk regressions found. One minor edge case worth noting.

Areas investigated

Area Risk Verdict
<ol> (ordered list) rendering None Library resolves renderers per-tag independently (Custom || Default). Since only ul has a custom renderer, <ol> continues using the library's built-in OLRenderer with numbered markers. Confirmed <ol> is used in production content.
BulletItemRenderer type change None All 3 callers (index.ts:41, RenderHTML.tsx:60, ULRenderer.tsx:22) only pass tnode. Widening from TBlockTNode improves type correctness for ULRenderer's usage. w100 is correct — parent is already block-level.
<br/> stripping regex Low See edge case below
Dual ULRenderer registration None Two independent rendering paths (BaseHTMLEngineProvider vs RenderHTML.tsx's own RenderHTMLConfigProvider). Inner provider overrides outer via React context — no merging, no duplication. Dual registration is necessary because RenderHTML.tsx's provider replaces (not merges) the parent's renderers.

Edge case: consecutive <br/> tags

The second regex strips one <br/> between </li> and <li>, but replaceAll scans left-to-right without re-examining consumed text. For </li><br/><br/><li>:

  1. First match consumes </li><br/>, replaces with </li>, scanner advances past it
  2. Remaining <br/><li> lacks the </li> anchor — no match, one orphan <br/> survives

Result: </li><br/><li> — which would still render an empty item between bullets.

This is unlikely in practice (Concierge responses typically have a single <br/>), but a test case for </li><br/><br/><li> would confirm the expected behavior.

Missing test coverage (non-blocking)

  • Nested lists: <ul><li><ul><li>inner</li></ul></li></ul>
  • Multiple consecutive <br/>: </li><br/><br/><li>

@aimane-chnaif

aimane-chnaif commented May 7, 2026

Copy link
Copy Markdown
Contributor

@war-in can we apply same fix to ordered list?

Screenshot 2026-05-07 at 6 28 58 pm

Use this for example data:

            Onyx.merge('reportActions_xxx', {
                'zzz': {
                    message: [
                        {
                            html: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.<br/><br><br><br/><strong>1. Via your company’s Uber for Business integration (fully automatic)</strong><br><br/>If your company uses <strong>Uber for Business</strong> and your workspace admin has connected it to Expensify:<ol><li>You’ll be invited/linked to your company’s Uber for Business program.</li><li>When you take rides or place Uber Eats orders on that <strong>business profile</strong>, Uber sends the trip data to Expensify.</li><li>Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.</li><br/></ol><br/>The admin-side setup is documented here: <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.<br/><br><br><br/><strong>2. By forwarding Uber receipt emails to Expensify (personal fallback)</strong><br><br/>If your company doesn’t have Uber for Business connected, you can still automate things using email receipts:<ol><li>Make sure your Uber receipts go to an email that’s listed as a <strong>contact method</strong> on your Expensify account.</li><li>Forward those emails (or set an auto‑forward rule) to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>.</li><li>Each forwarded receipt is SmartScanned into an expense automatically, as described in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</li><br/></ol><br/>There isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.<followup-list><followup><followup-text>Once it’s connected, how do Uber receipts show up in Expensify?</followup-text><followup-response>You don’t need to do anything special in the Uber app itself once your company has connected Uber for Business to Expensify.<br><br>When the integration is enabled on your workspace and you’ve been invited/linked on the Uber side, your eligible Uber Rides and Uber Eats trips will automatically generate expenses in Expensify:<br><ol><li>A SmartScanned receipt image is created for each trip</li><li>An expense is created with the correct merchant, date, and amount</li><li>The expense is added to your next report according to your workspace’s rules</li></ol>You can read more about how the integration works in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup><followup><followup-text>What if my company doesn’t use Uber for Business? Can I still automate Uber receipts?</followup-text><followup-response>If your company doesn’t use Uber for Business, or if the integration isn’t enabled on your workspace, you can still get Uber rides into Expensify automatically by using SmartScan:<br><br><ol><li>Make sure your Uber receipts go to an email address that’s added as a contact method on your Expensify account</li><li>Forward your Uber receipt emails to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>, or set up an auto‑forward rule in your email client</li><li>Each forwarded email will create a SmartScanned expense in Expensify</li></ol>The general receipt‑to‑expense flow is outlined in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</followup-response></followup><followup><followup-text>Why aren’t my Uber rides showing up in Expensify?</followup-text><followup-response>If an Uber ride or meal isn’t appearing in Expensify as expected, try the following:<br><ol><li>Confirm whether your company actually has the Uber for Business integration enabled and that you’ve been invited/linked in that program</li><li>Check that the Uber trip used the email address your company expects (for U4B) or an email that’s on your Expensify account if you’re forwarding receipts</li><li>Look on your Expenses/Spend page for Unreported expenses that may not have hit a report yet</li></ol>If the integration is definitely enabled and you’re linked but trips are still missing, your workspace admin can review the connection and invites as described in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup></followup-list>',
                            text: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.\n\n\n\n1. Via your company’s Uber for Business integration (fully automatic)\n\nIf your company uses Uber for Business and your workspace admin has connected it to Expensify:You’ll be invited/linked to your company’s Uber for Business program.When you take rides or place Uber Eats orders on that business profile, Uber sends the trip data to Expensify.Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.\n\nThe admin-side setup is documented here: Uber for Business.\n\n\n\n2. By forwarding Uber receipt emails to Expensify (personal fallback)\n\nIf your company doesn’t have Uber for Business connected, you can still automate things using email receipts:Make sure your Uber receipts go to an email that’s listed as a contact method on your Expensify account.Forward those emails (or set an auto‑forward rule) to receipts@expensify.com.Each forwarded receipt is SmartScanned into an expense automatically, as described in Create an Expense.\n\nThere isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.',
                            type: 'COMMENT',
                            whisperedTo: [],
                        },
                    ],
                    originalMessage: {
                        html: 'You can’t directly “pair” your personal Uber app with your individual Expensify account in a way that I can see or manage from here; automatic imports work in one of two supported ways.<br/><br><br><br/><strong>1. Via your company’s Uber for Business integration (fully automatic)</strong><br><br/>If your company uses <strong>Uber for Business</strong> and your workspace admin has connected it to Expensify:<ol><li>You’ll be invited/linked to your company’s Uber for Business program.</li><li>When you take rides or place Uber Eats orders on that <strong>business profile</strong>, Uber sends the trip data to Expensify.</li><li>Expensify automatically creates expenses with SmartScanned receipts and adds them to your reports according to your workspace rules.</li><br/></ol><br/>The admin-side setup is documented here: <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.<br/><br><br><br/><strong>2. By forwarding Uber receipt emails to Expensify (personal fallback)</strong><br><br/>If your company doesn’t have Uber for Business connected, you can still automate things using email receipts:<ol><li>Make sure your Uber receipts go to an email that’s listed as a <strong>contact method</strong> on your Expensify account.</li><li>Forward those emails (or set an auto‑forward rule) to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>.</li><li>Each forwarded receipt is SmartScanned into an expense automatically, as described in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</li><br/></ol><br/>There isn’t a separate “connect my Expensify account in the Uber app” toggle that I can walk you through step‑by‑step today; it’s either the workspace‑level Uber for Business integration or receipt‑forwarding. If you tell me whether EXFY has Uber for Business turned on for you, I can help you sanity‑check which of these paths should apply in your case.<followup-list><followup><followup-text>Once it’s connected, how do Uber receipts show up in Expensify?</followup-text><followup-response>You don’t need to do anything special in the Uber app itself once your company has connected Uber for Business to Expensify.<br><br>When the integration is enabled on your workspace and you’ve been invited/linked on the Uber side, your eligible Uber Rides and Uber Eats trips will automatically generate expenses in Expensify:<br><ol><li>A SmartScanned receipt image is created for each trip</li><li>An expense is created with the correct merchant, date, and amount</li><li>The expense is added to your next report according to your workspace’s rules</li></ol>You can read more about how the integration works in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup><followup><followup-text>What if my company doesn’t use Uber for Business? Can I still automate Uber receipts?</followup-text><followup-response>If your company doesn’t use Uber for Business, or if the integration isn’t enabled on your workspace, you can still get Uber rides into Expensify automatically by using SmartScan:<br><br><ol><li>Make sure your Uber receipts go to an email address that’s added as a contact method on your Expensify account</li><li>Forward your Uber receipt emails to <a href="mailto:receipts@expensify.com">receipts@expensify.com</a>, or set up an auto‑forward rule in your email client</li><li>Each forwarded email will create a SmartScanned expense in Expensify</li></ol>The general receipt‑to‑expense flow is outlined in <a href="https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense">Create an Expense</a>.</followup-response></followup><followup><followup-text>Why aren’t my Uber rides showing up in Expensify?</followup-text><followup-response>If an Uber ride or meal isn’t appearing in Expensify as expected, try the following:<br><ol><li>Confirm whether your company actually has the Uber for Business integration enabled and that you’ve been invited/linked in that program</li><li>Check that the Uber trip used the email address your company expects (for U4B) or an email that’s on your Expensify account if you’re forwarding receipts</li><li>Look on your Expenses/Spend page for Unreported expenses that may not have hit a report yet</li></ol>If the integration is definitely enabled and you’re linked but trips are still missing, your workspace admin can review the connection and invites as described in <a href="https://help.expensify.com/articles/new-expensify/connections/Uber-for-Business">Uber for Business</a>.</followup-response></followup></followup-list>',
                    },
                },
            });

Btw not blocker sine this is happening on production. I am fine to fix as follow-up, limiting the scope of PR to <ul> only.

@melvin-bot melvin-bot Bot requested a review from roryabraham May 7, 2026 17:41
@roryabraham roryabraham merged commit 7670402 into Expensify:main May 7, 2026
44 of 47 checks passed
@melvin-bot melvin-bot Bot added the Emergency label May 7, 2026
@melvin-bot

melvin-bot Bot commented May 7, 2026

Copy link
Copy Markdown

@roryabraham looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

@roryabraham

Copy link
Copy Markdown
Contributor

tests were passing?

@OSBotify

OSBotify commented May 7, 2026

Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@github-actions

github-actions Bot commented May 7, 2026

Copy link
Copy Markdown
Contributor

🚧 @roryabraham has triggered a test Expensify/App build. You can view the workflow run here.

@OSBotify

OSBotify commented May 8, 2026

Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.69-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

Bundle Size Analysis (Sentry):

@MelvinBot

Copy link
Copy Markdown
Contributor

No help site changes are required for this PR.

This is a technical rendering fix for how <ul>/<li> HTML tags display in Concierge chat messages (removing an extra empty bullet and fixing spacing). It doesn't change any user-facing features, workflows, settings, or terminology documented on the help site.

@OSBotify

Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/Beamanator in version: 9.3.69-18 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@jmusial jmusial mentioned this pull request May 13, 2026
50 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants