Change Details

== 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 == Design # Current experience {F43054594}{F42301932} # Proposed experience {F43449858} {F43679974} [[ https://www.figma.com/file/Og4IQcJIjIwedsEL1L0O4u/night-mode-minerva-search?type=design&node-id=0%3A1&mode=dev | 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

== 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 UI Elements Visibility and Consistency Scenario: Display placeholder in articles without images in all themes Given an article has no images When the article is viewed in either light or night theme Then a placeholder should be visible Scenario: Ensure article search icon is visible Given the user is on the Wikipedia platform When the user views any page requiring the search icon Then the search icon should be consistently visible Scenario: Replace noimage.svg with Codex icon Given the user is on an article page without images When the page is loaded Then the noimage.svg should be replaced with a Codex icon image Scenario: Align icons to designer's satisfaction Given new icons have been implemented When the designer reviews the icons' alignment Then all icons should be aligned according to the designer’s specifications Scenario: Maintain search icon color on focus Given the user is interacting with the search icon When the search icon is focused Then the color of the search icon should not change Scenario: Replace search in pages icon with Codex articlesSearch icon Given the user is using the search functionality When the user accesses the search in pages feature Then the icon for search in pages should be a Codex articlesSearch icon Scenario: Use iconbuttonOnly variant for the Codex search bar Given the Codex search bar is displayed When the user views the search bar Then the iconbuttonOnly variant of the Codex icon should be used Scenario: Update visual styles according to Codex standards Given the user is interacting with UI elements that have visual styles When the UI elements are displayed Then inner shadow effects are replaced with bottom borders and colors use Codex design tokens ``` == Test Steps Test Steps: __Test Case 1: Placeholder Visibility__ Access an imageless article in Light Theme: Open an article without images in light theme. AC1: Confirm a placeholder is visible. Switch to Night Theme: Without leaving the article, switch to night theme. AC2: Confirm the same placeholder is still visible. __Test Case 2: Article Search Icon Visibility__ Navigate to Search Page: Access any Wikipedia page that should have a search icon. AC3: Ensure the article search icon is visible. __Test Case 3: Replace noimage.svg__ Load an Imageless Article: Open an article that typically shows a noimage.svg. AC4: Verify that a Codex icon image replaces the noimage.svg. __Test Case 4: Icon Alignment__ Check New Icon Alignment: Review the alignment of all newly implemented icons. AC5: Confirm alignment meets the designer's specifications. __Test Case 5: Search Icon Color Consistency__ Focus on Search Icon: Click or tab to focus on the search icon. AC6: Check that the icon's color does not change upon being focused. __Test Case 6: Search in Pages Icon Replacement__ Use Search Function: Engage the search function that brings up the search in pages feature. AC7: Confirm the presence of the Codex articlesSearch icon. __Test Case 7: Codex Search Bar Variant__ View Codex Search Bar: Navigate to the search bar utilizing the Codex design. AC8: Ensure the iconbuttonOnly variant is employed. __Test Case 8: Visual Style Updates__ Interact with Updated UI Elements: Focus on elements like dropdowns or input fields that had inner shadows. AC9: Confirm that all such elements now feature bottom borders and utilize Codex design tokens for color. == Design # Current experience {F43054594}{F42301932} # Proposed experience {F43449858} {F43679974} [[ https://www.figma.com/file/Og4IQcJIjIwedsEL1L0O4u/night-mode-minerva-search?type=design&node-id=0%3A1&mode=dev | 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

== 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 UI Elements Visibility and Consistency Scenario: Display placeholder in articles without images in all themes Given an article has no images When the article is viewed in either light or night theme Then a placeholder should be visible Scenario: Ensure article search icon is visible Given the user is on the Wikipedia platform When the user views any page requiring the search icon Then the search icon should be consistently visible Scenario: Replace noimage.svg with Codex icon Given the user is on an article page without images When the page is loaded Then the noimage.svg should be replaced with a Codex icon image Scenario: Align icons to designer's satisfaction Given new icons have been implemented When the designer reviews the icons' alignment Then all icons should be aligned according to the designer’s specifications Scenario: Maintain search icon color on focus Given the user is interacting with the search icon When the search icon is focused Then the color of the search icon should not change Scenario: Replace search in pages icon with Codex articlesSearch icon Given the user is using the search functionality When the user accesses the search in pages feature Then the icon for search in pages should be a Codex articlesSearch icon Scenario: Use iconbuttonOnly variant for the Codex search bar Given the Codex search bar is displayed When the user views the search bar Then the iconbuttonOnly variant of the Codex icon should be used Scenario: Update visual styles according to Codex standards Given the user is interacting with UI elements that have visual styles When the UI elements are displayed Then inner shadow effects are replaced with bottom borders and colors use Codex design tokens ``` == Test Steps Test Steps: __Test Case 1: Placeholder Visibility__ Access an imageless article in Light Theme: Open an article without images in light theme. AC1: Confirm a placeholder is visible. Switch to Night Theme: Without leaving the article, switch to night theme. AC2: Confirm the same placeholder is still visible. __Test Case 2: Article Search Icon Visibility__ Navigate to Search Page: Access any Wikipedia page that should have a search icon. AC3: Ensure the article search icon is visible. __Test Case 3: Replace noimage.svg__ Load an Imageless Article: Open an article that typically shows a noimage.svg. AC4: Verify that a Codex icon image replaces the noimage.svg. __Test Case 4: Icon Alignment__ Check New Icon Alignment: Review the alignment of all newly implemented icons. AC5: Confirm alignment meets the designer's specifications. __Test Case 5: Search Icon Color Consistency__ Focus on Search Icon: Click or tab to focus on the search icon. AC6: Check that the icon's color does not change upon being focused. __Test Case 6: Search in Pages Icon Replacement__ Use Search Function: Engage the search function that brings up the search in pages feature. AC7: Confirm the presence of the Codex articlesSearch icon. __Test Case 7: Codex Search Bar Variant__ View Codex Search Bar: Navigate to the search bar utilizing the Codex design. AC8: Ensure the iconbuttonOnly variant is employed. __Test Case 8: Visual Style Updates__ Interact with Updated UI Elements: Focus on elements like dropdowns or input fields that had inner shadows. AC9: Confirm that all such elements now feature bottom borders and utilize Codex design tokens for color. == Design # Current experience {F43054594}{F42301932} # Proposed experience {F43449858} {F43679974} [[ https://www.figma.com/file/Og4IQcJIjIwedsEL1L0O4u/night-mode-minerva-search?type=design&node-id=0%3A1&mode=dev | 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