Skip to content

Docs updates for E/A#90029 Update Spend page filter popover UI docs#91759

Open
MelvinBot wants to merge 1 commit into
mainfrom
docs/update-spend-page-filter-ui-90029
Open

Docs updates for E/A#90029 Update Spend page filter popover UI docs#91759
MelvinBot wants to merge 1 commit into
mainfrom
docs/update-spend-page-filter-ui-90029

Conversation

@MelvinBot
Copy link
Copy Markdown
Contributor

Summary

  • Updates the Getting Started with the Spend Page help article to reflect the new advanced filter UI introduced in Update advanced filters button to open filters popover #90029
  • Documents the new popover-based filter experience on web (hover to see options, Apply for text/date/amount filters)
  • Documents the full-screen filter experience on mobile with Apply and Reset buttons
  • Adds separate web and mobile step-by-step instructions per HelpDot naming conventions
  • Updates keywords to include new filter-related terms

Changes

  • docs/articles/new-expensify/reports-and-expenses/Getting-Started-with-the-Spend-Page.md: Updated the "How to Use Filters" section with platform-specific instructions for the new advanced filter UI, added cross-link to search operators article, and updated heading to be task-based per authoring guidelines.

@bernhardoj, please review the files changed and confirm they reflect the current behavior. Then mark this PR Ready for review.

Reflects the changes from E/A#90029 which updates the advanced filters
button to open a popover on web and a full-screen view on mobile, with
Apply and Reset buttons.

Co-authored-by: Bernhard Owen Josephus <bernhardoj@users.noreply.github.com>
@MelvinBot MelvinBot added the HelpDot Apply this label if the issue relates to ExpensifyHelp label May 26, 2026
@stephanieelliott stephanieelliott marked this pull request as ready for review May 29, 2026 01:23
@stephanieelliott stephanieelliott self-requested a review as a code owner May 29, 2026 01:23
@github-actions
Copy link
Copy Markdown
Contributor

HelpDot Documentation Review

Overall Assessment

This PR updates the "Getting Started with the Spend Page" article to document the new advanced filter popover UI introduced in PR #90029. It adds platform-specific (Web/Mobile) step-by-step instructions, updates keywords, improves a heading to be task-based, and adds a cross-link to the search operators article. The changes are well-scoped and generally align with governance standards, with a few items to address.

Scores Summary

  • Readability: 8/10 - Steps are clear, sequential, and action-oriented. The Web/Mobile split is easy to follow. Minor concern: step 3 on web ("A popover opens showing available filters") is descriptive rather than action-oriented, which slightly breaks the step flow.
  • AI Readiness: 7/10 - The new heading "How to apply advanced filters in New Expensify" is well-formed and task-based. However, the file is missing the internalScope YAML field required by HELP_AUTHORING_GUIDELINES.md Section 3. Additionally, there is no ## Who can use section, though this may be acceptable given the article pre-dates this PR. The heading "How filtering works on the Spend page" starts with an action verb and includes the feature name, which is good.
  • Style Compliance: 8/10 - UI elements are properly bolded (e.g., Filters, Apply, Reset, Spend). The Web/Mobile split follows HELPSITE_NAMING_CONVENTIONS.md navigation rules. The cross-link uses descriptive anchor text and a relative link placed outside of numbered steps, per cross-linking standards.

Key Findings

Positive aspects:

  • Correctly separates Web and Mobile instructions per governance navigation standards rather than merging them
  • New heading "How to apply advanced filters in New Expensify" is properly task-based with the feature name included
  • Keywords updated with relevant filter-related terms (filter popover, apply filters, reset filters, advanced filters)
  • Cross-link to search operators article uses proper descriptive anchor text and relative path
  • Steps are sequential and action-oriented

Items to address:

  • The internalScope YAML metadata field is missing. Per HELP_AUTHORING_GUIDELINES.md Section 3, every article must include this field. While this was already missing before this PR, this is a good opportunity to add it.
  • Web step 3 ("A popover opens showing available filters") is a system response description, not a user action. Consider removing it or integrating the information into step 2 (e.g., "Click the Filters button to open the filter popover.").
  • The heading was changed from ## How Filtering Works to ## How filtering works on the Spend page -- good improvement adding the feature name, but note lowercase "filtering" vs the capitalized version. This is correct per sentence case rules.

Recommendations

  1. Add internalScope to YAML frontmatter - e.g., internalScope: Audience is all Members and Admins. Covers viewing, filtering, and managing expenses on the Spend page. Does not cover creating expenses or configuring workspace settings.
  2. Revise Web step 3 to be action-oriented rather than descriptive, or merge the popover detail into step 2.
  3. Consider whether "advanced filters" is the exact UI terminology used in the product. If the UI simply says "Filters," the heading and body text should match precisely per HELPSITE_NAMING_CONVENTIONS.md core rules.

Files Reviewed

  • docs/articles/new-expensify/reports-and-expenses/Getting-Started-with-the-Spend-Page.md - Updated filter section with platform-specific instructions, improved heading, added keywords and cross-link. Generally well-written with minor items noted above.

Review based on governance files: HELPSITE_NAMING_CONVENTIONS.md, HELP_AUTHORING_GUIDELINES.md, and TEMPLATE.md.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

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: 6acb03f406

ℹ️ 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".

Comment on lines +98 to +100
2. Click the **Filters** button.
3. A popover opens showing available filters.
4. Hover over a filter to see its options.
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 Describe the desktop Filters button as a page

On desktop/web, clicking the Filters button does not open a popover that users can hover through; SearchAdvancedFiltersButton navigates to ROUTES.SEARCH_ADVANCED_FILTERS, which renders the SearchAdvancedFiltersPage right-modal/list flow. The popover components are used for already-applied filter chips in the filters bar, so these steps send users looking for a hover popover that never appears when starting from the Filters button.

Useful? React with 👍 / 👎.

Comment on lines +112 to +114
5. Set a value and tap **Apply** to confirm the selection.
6. Tap **Apply** again on the filter list to apply your filters.
7. To clear active filters, tap **Reset** at the bottom of the filter list.
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 Use the actual mobile filter button labels

In the mobile/narrow advanced filter flow, filter detail pages save selections with Save, then the filter list applies them with View results, and reset is exposed as the Reset filters header link when filters are active. There is no second Apply button or bottom Reset on the filter list, so users following these steps will not find the documented controls.

Useful? React with 👍 / 👎.

1. Go to the **Spend** page.
2. Click the **Filters** button.
3. A popover opens showing available filters.
4. Hover over a filter to see its options.
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.

Step formatting / deterministic writing: "Hover over a filter to see its options" is vague. Consider specifying which filter types support hover behavior, or merge this with step 5 since the next steps already describe each filter type individually.

3. The advanced filters open in a full-screen view.
4. Tap any filter to see its options.
5. Set a value and tap **Apply** to confirm the selection.
6. Tap **Apply** again on the filter list to apply your filters.
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.

Step clarity: Steps 5 and 6 both say "tap Apply" but for different purposes. This can confuse users. Consider making step 6 more explicit, e.g., "Tap Apply at the top of the filter list to confirm all selected filters and return to the filtered results."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

HelpDot Apply this label if the issue relates to ExpensifyHelp

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants