Background
The mobile search overlay, in particular the image placeholder is not friendly with night mode. Given our work making Codex night mode friendly rather than revising the code to make it work in night mode, I think it is a good idea to align our designs for desktop and mobile a little more.
Rather than re-implementing the whole thing in mobile, I think it would be a good idea to revise the existing PageList markup to use Codex.
User story
As a user on mobile I want a working consistent search experience with the desktop site that works in night mode.
Requirements
- When an article has no image the placeholder should be visible in both light and night themes.
- The article search icon should be visible (currently not shown at all)
- resources/mobile.pagesummary.styles/noimage.svg should be removed in favor of a Codex icon image
- The designer should be happy with the alignment of icons
- The search icon should not change color when focused (context: T356822#9614063)
- The search in pages icon should be replaced with codex icon articlesSearch
[] The codex search bar iconbuttonOnly variant should be used
- Inner shadow effects should be replaced with bottom borders
- Overlay component colours should use codex design tokens
BDD
Feature: Enhance Search Overlay with Proper Visuals and Functionality in Mobile (Minerva) Scenario: Display placeholder in search overlay for articles without images Given the user is performing a search on Wikipedia When the search overlay appears And the article in the search results does not have an image Then a placeholder image should be visible in both light and night themes for that article Scenario: Ensure visibility of the article search icon in the search field Given the user is on any Wikipedia page with a search field When the user focuses on the search field Then the search icon should be consistently visible Scenario: Replace noimage.svg with a codex icon in search results Given the user has initiated a search and results are displayed When an article without an image appears in the results Then the noimage.svg placeholder should be replaced with a codex icon image in the search overlay Scenario: Maintain search icon color on focus Given the user has clicked into the search field on Wikipedia When the search field is in focus Then the color of the search icon should not change Scenario: Replace 'search in pages' icon with 'articlesSearch' Codex icon Given the user is using the search functionality on Wikipedia When the search overlay is active Then the 'search in pages' icon should be replaced with the 'articlesSearch' Codex icon in the overlay Scenario: Update search overlay icons to be properly aligned Given new icons are used in the search overlay When the search overlay is displayed Then all icons should be properly aligned as per the design specifications Scenario: Replace inner shadow effects with bottom borders in search overlay Given the search overlay is visible When the user examines the overlay elements Then inner shadows should be replaced with bottom borders Scenario: Use codex design tokens for overlay component colors Given the search overlay is active When the overlay is displayed Then all overlay component colors should utilize codex design tokens
Test Steps
Test Case 1: Placeholder Visibility in Search Overlay
Open Wikipedia in mobile (Minerva skin) click search and type a query that includes articles known to lack images.
AC1: Confirm that a placeholder image is visible for each article without images in light theme.
Switch to night theme and perform the same search.
AC2: Confirm the same placeholder is still visible in the search overlay for each article without images.
Test Case 2: Article Search Icon Visibility
Access any Wikipedia page that includes a search field.
AC3: Ensure the article search icon is visible when the search field is focused.
Test Case 3: Replace noimage.svg with Codex Icon
Perform a search to generate results that include articles without images.
AC4: Verify that in the search overlay, the noimage.svg is replaced with a Codex icon for articles without images.
Test Case 4: Maintain Search Icon Color on Focus
Click into the search field at the top of any Wikipedia page.
AC5: Check that the color of the search icon does not change upon being focused.
Test Case 5: Replace 'Search in Pages' Icon
Use the search field on Wikipedia to perform a search.
AC6: Confirm that the 'search in pages' icon in the search overlay is replaced with the 'articlesSearch' Codex icon.
Test Case 6: Proper Alignment of Icons in Search Overlay
Trigger the search overlay by performing a search.
AC7: Inspect the alignment of all icons within the overlay, including search and placeholder icons, ensuring they are aligned properly as per design specifications.
Test Case 7: Inner Shadow Effects Replaced with Bottom Borders
Activate the search overlay by using the search function.
AC8: Confirm that all UI elements that previously had inner shadow effects now feature bottom borders.
Test Case 8: Codex Design Tokens for Overlay Component Colors
Engage the search overlay through a search action.
AC9: Ensure that the colors of all overlay components utilize Codex design tokens, reflecting the updated design standards.
Design
Current experience
Proposed experience
Dev-mode Figma file for inspecting colours
Acceptance criteria
- resources/mobile.pagesummary.styles/noimage.svg should be removed in favor of a Codex icon image
- Colours match design spec
- no colour contrast errors
Communication criteria - does this need an announcement or discussion?
- Add communication criteria
QA Results - Beta
AC | Status | Details |
---|---|---|
1 | ✅ | T358904#9728414 |
2 | ✅ | T358904#9728414 |
3 | ✅ | T358904#9728414 |
4 | ✅ | T358904#9728423 |
5 | ✅ | T358904#9728414 |
6 | ✅ | T358904#9728423 |
7 | ✅ | T358904#9728414 |
8 | ✅ | T358904#9728414 |
9 | ❓ | T358904#9728423 |
QA Results - Prod
AC | Status | Details |
---|---|---|
1 | ✅ | T358904#9741720 |
2 | ✅ | T358904#9741720 |
3 | ✅ | T358904#9741720 |
4 | ✅ | T358904#9741720 |
5 | ❌ | T358904#9741720 |
6 | ✅ | T358904#9741720 |
7 | ✅ | T358904#9741720 |
8 | ✅ | T358904#9741720 |
9 | ❓ | T358904#9741720 |