feat(tournaments-ticker): add new redesigned ticker with variants for AB testing#7303
feat(tournaments-ticker): add new redesigned ticker with variants for AB testing#7303
Conversation
The tournament list ticker should always reset to Ongoing on page load. Removes syncLevel from ContentSwitch entirely and sets storeValue=false in the List widget so no tab state is persisted to localStorage.
There was a problem hiding this comment.
Pull request overview
Introduces a redesigned tournaments ticker for main pages, adding a new list-based widget (tabs + collapsible variants) and refactoring tournament data fetching into a shared module, while updating several wikis to use the new ticker.
Changes:
- Added
Widget/Tournaments/Ticker/List(withListItem+PhaseCollapsible) and supporting mainpage styles for the new ticker UI. - Extracted tournament retrieval/sorting into reusable
Widget/Tournaments/Ticker/Data, and refactored the existing ticker to use it. - Added a new
subtleTierPillvariant with optionalcolorSchemeand movedChevronTogglefor broader reuse; updated several wiki mainpages to use the new ticker.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| stylesheets/commons/TournamentTags.scss | Adds styling for the new subtle tier pill variant and top3 color scheme. |
| stylesheets/commons/Mainpage.scss | Adds styles for the tournaments list items and the tabs/collapsible layouts. |
| lua/wikis/trackmania/MainPageLayout/data.lua | Switches Trackmania mainpage to the new ticker list widget and configures collapsible/top3 scheme. |
| lua/wikis/pubgmobile/MainPageLayout/data.lua | Switches PUBG Mobile mainpage to the new ticker list widget. |
| lua/wikis/leagueoflegends/MainPageLayout/data.lua | Switches LoL mainpage to the new ticker list widget and sets top3 scheme. |
| lua/wikis/fortnite/MainPageLayout/data.lua | Switches Fortnite mainpage to the new ticker list widget and enables collapsible variant. |
| lua/wikis/apexlegends/MainPageLayout/data.lua | Switches Apex Legends mainpage to the new ticker list widget and sets top3 scheme. |
| lua/wikis/commons/Widget/Tournaments/Ticker/PhaseCollapsible.lua | New collapsible phase container widget for the ticker. |
| lua/wikis/commons/Widget/Tournaments/Ticker/ListItem.lua | New list row widget rendering icon, tier pill, optional game icon, and date range. |
| lua/wikis/commons/Widget/Tournaments/Ticker/List.lua | New tabs/collapsible tournaments ticker list widget using shared data fetching. |
| lua/wikis/commons/Widget/Tournaments/Ticker/Data.lua | New shared data retrieval + filtering/sorting for ticker(s). |
| lua/wikis/commons/Widget/Tournaments/Ticker.lua | Refactors existing ticker to use Ticker/Data instead of inline fetching/sorting. |
| lua/wikis/commons/Widget/Tournament/TierPill.lua | Adds subtle variant + configurable color scheme for tier pill display. |
| lua/wikis/commons/Widget/Participants/Team/Header.lua | Updates ChevronToggle import to the new shared location. |
| lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua | Updates module header to reflect new shared module path. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ---@return Widget | ||
| function TournamentsTickerListWidget:render() | ||
| local data = TickerData.get(self.props) | ||
| local displayGameIcons = Logic.readBool(self.props.displayGameIcons) |
There was a problem hiding this comment.
| local displayGameIcons = Logic.readBool(self.props.displayGameIcons) | |
| local displayGameIcons = self.props.displayGameIcons |
(never going to be called from wikicode directly, annotations define as boolean already)
ElectricalBoy
left a comment
There was a problem hiding this comment.
lgtm; comments are optional
There was a problem hiding this comment.
optional:
- I personally think that
Module:TournamentsTicker/Queryis a better name - maybe extract local functions to table level?
| display: none; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0.125rem; | ||
| width: 1.25rem; | ||
| height: 1.25rem; | ||
| background-color: var( --clr-on-surface-light-primary-4 ); | ||
| border-radius: 0.25rem; | ||
| flex-shrink: 0; | ||
| overflow: hidden; | ||
|
|
||
| @media ( max-width: 359px ) { | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.125rem; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: var( --clr-on-surface-light-primary-4 ); | |
| border-radius: 0.25rem; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| @media ( max-width: 359px ) { | |
| display: flex; | |
| } | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.125rem; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: var( --clr-on-surface-light-primary-4 ); | |
| border-radius: 0.25rem; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| @media ( min-width: 360px ) { | |
| display: none; | |
| } |
optional; I think this is more readable
Summary
This PR introduces the redesigned tournament ticker for mainpages. We're rolling this out on a couple wikis first, so we're not going to replace the existing ticker before it's rolled out everywhere. This PR:
Widget/Tournaments/Ticker/Listwith a tab-based phase navigation variant (default) and a collapsible variant (AB test - will most likely settle for one)subtletier pill variant with configurablecolorScheme(full/top3) (Tier colors is AB test - will most likely settle for one)Widget/Tournaments/Ticker/DatamoduleChevronTogglefromWidget/Participants/Team/toWidget/GeneralCollapsible/for broader reuseNotes
stylesheets/commons/TournamentTags.scsshas hardcoded hex values. My thinking was doing the AB test like this, and make variables to skin when we settle on the approach to avoid double work.How did you test this change?
|dev=ntlon the mainpages of wikis listed below + devtoolsVariants: