-
Notifications
You must be signed in to change notification settings - Fork 100
feat: add dropdown widget #6982
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR introduces a reusable dropdown widget component that will be used for an upcoming export feature. The implementation includes styling, Lua widget modules, JavaScript functionality, and comprehensive test coverage.
Changes:
- Added a dropdown widget with toggle button and menu capabilities
- Implemented styling for both light and dark themes with appropriate hover states
- Added three new icon definitions (share, copy, download) for export functionality
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| stylesheets/commons/Dropdown.scss | Defines dropdown widget styles with theme support and interactive states |
| stylesheets/Main.scss | Imports the new dropdown stylesheet |
| lua/wikis/commons/Widget/Basic/DropdownItem.lua | Implements individual dropdown item widget with icon and link support |
| lua/wikis/commons/Widget/Basic/Dropdown.lua | Implements main dropdown wrapper widget with toggle button |
| lua/wikis/commons/Icon/Data.lua | Adds icon definitions for export-related actions |
| lua/spec/dropdown_spec.lua | Provides comprehensive test coverage for dropdown functionality |
| javascript/commons/Dropdown.js | Implements click handling to toggle dropdown visibility |
| javascript/Main.js | Registers the dropdown JavaScript module |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com>
| table.insert(content, self.props.text) | ||
|
|
||
| local item = Div{ | ||
| classes = Array.extend({'dropdown-widget__item'}, self.props.classes or {}), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| classes = Array.extend({'dropdown-widget__item'}, self.props.classes or {}), | |
| classes = Array.extend('dropdown-widget__item', self.props.classes), |
| ---@class DropdownItemWidgetParameters | ||
| ---@field icon string|Widget? | ||
| ---@field text string | ||
| ---@field link string? | ||
| ---@field linktype 'internal'|'external'|nil | ||
| ---@field classes table? | ||
| ---@field attributes table? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ---@class DropdownItemWidgetParameters | |
| ---@field icon string|Widget? | |
| ---@field text string | |
| ---@field link string? | |
| ---@field linktype 'internal'|'external'|nil | |
| ---@field classes table? | |
| ---@field attributes table? | |
| ---@class DropdownItemWidgetParameters | |
| ---@field icon string|Widget? | |
| ---@field children string|number|Widget|Html|(string|number|Widget|Html)[] | |
| ---@field link string? | |
| ---@field linktype 'internal'|'external'|nil | |
| ---@field classes string[]? | |
| ---@field attributes table? |
| local item = Div{ | ||
| classes = Array.extend({'dropdown-widget__item'}, self.props.classes or {}), | ||
| attributes = self.props.attributes, | ||
| children = content |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| children = content | |
| children = WidgetUtil.collect(getIcon(), self props.children) |
| local content = {} | ||
| if self.props.icon then | ||
| local iconWidget | ||
| if type(self.props.icon) == 'string' then | ||
| iconWidget = Icon{iconName = self.props.icon, size = 'sm'} | ||
| else | ||
| iconWidget = self.props.icon | ||
| end | ||
| table.insert(content, iconWidget) | ||
| end | ||
| table.insert(content, self.props.text) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| local content = {} | |
| if self.props.icon then | |
| local iconWidget | |
| if type(self.props.icon) == 'string' then | |
| iconWidget = Icon{iconName = self.props.icon, size = 'sm'} | |
| else | |
| iconWidget = self.props.icon | |
| end | |
| table.insert(content, iconWidget) | |
| end | |
| table.insert(content, self.props.text) | |
| ---@return Widget? | |
| local function getIcon() | |
| if Logic.isEmpty(self.props.icon) then | |
| return | |
| elseif type(self.props.icon) == 'string' then | |
| return Icon{iconName = self.props.icon, size = 'sm'} | |
| end | |
| return self.props.icon | |
| end |
written on phone; untested
Summary
Adds a basic dropdown widget. Will be used for an upcoming export feature.
How did you test this change?
https://liquipedia.net/leagueoflegends/User:Eetwalt + css & js