add a feature for dropdown to stretch out to fullscreen on mobile #65
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's Guide by SourceryThis PR implements a fullscreen dropdown feature for mobile views and refactors the dropdown's sizing behavior. The implementation moves styling control to CSS parts, introduces a new mobile breakpoint feature, and restructures the component's DOM manipulation for better performance. Class Diagram for AuroDropdown and AuroFloatingUIclassDiagram
class AuroDropdown {
+String mobileFullscreenBreakpoint
+void firstUpdated()
+void notifyReady()
}
class AuroFloatingUI {
+void mirrorSize(Boolean fullscreen)
+void position()
+void handleMobileFullscreen(Boolean isMobile)
+void updateState()
+void configure(Element elem)
}
AuroDropdown --> AuroFloatingUI : uses
note for AuroDropdown "Added mobileFullscreenBreakpoint attribute"
note for AuroFloatingUI "Added methods for handling fullscreen mode"
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
5ceda97 to
7222ccc
Compare
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @sun-mota - I've reviewed your changes - here's some feedback:
Overall Comments:
- There are inconsistencies in the documentation - 'mobileFullscreenBreakpoint' vs 'fullscreenOnMobile'. Please standardize on one attribute name throughout the documentation.
Here's what I looked at during the review
- 🟡 General issues: 2 issues found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟡 Complexity: 1 issue found
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
7222ccc to
80f5af8
Compare
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
91afade to
32557f1
Compare
jason-capsule42
requested changes
Dec 2, 2024
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
32557f1 to
126a643
Compare
|
@sourcery-ai review |
There was a problem hiding this comment.
Hey @sun-mota - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider adding test coverage for the new mobile fullscreen functionality, particularly around breakpoint handling and size transitions
Here's what I looked at during the review
- 🟡 General issues: 2 issues found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟡 Complexity: 1 issue found
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
jason-capsule42
requested changes
Dec 2, 2024
jason-capsule42
requested changes
Dec 2, 2024
jason-capsule42
requested changes
Dec 2, 2024
| @@ -16,6 +16,13 @@ | |||
| position: relative; | |||
| } | |||
|
|
|||
| #bibSizer { | |||
| position: absolute; | |||
| z-index: -1; | |||
There was a problem hiding this comment.
Do we need this? It's not an element that you can focus, right?
There was a problem hiding this comment.
In fact... do we need the pointer events rule either?
There was a problem hiding this comment.
z-index:-1 will help the performance by putting the layer to be the most back so that other layer would get any cursor events first. pointer-events rule would also help the performance for the browser to skip(not remove from the interaction queue) the cursor events on this layer.
IMO, I think adding these ruler wont hurt and rather help a little bit.
jason-capsule42
approved these changes
Dec 3, 2024
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
f90f3a5 to
1f4e69f
Compare
…o improve code organization
sun-mota
force-pushed
the
sunMota/dropdown-mobile-fullscreen/#55
branch
from
1f4e69f to
faa6005
Compare
|
🎉 This PR is included in version 1.6.0-beta.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Alaska Airlines Pull Request
Width and Sizing Behavior
Width: The
auro-dropdowncomponent will automatically consume the full width of its parent container. To make it narrower, you can style thebibSizerpart.Styling Options: Only the following styles can be applied to the
bibpart:widthheightmaxWidthmaxHeightFullscreen Effect on Mobile View
On mobile view, adding the
mobileFullscreenBreakpoint="{breakpoint-token}"will switch the dropdown to fullscreen mode.By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.
Summary by Sourcery
Add a feature to control dropdown fullscreen behavior on mobile devices using a breakpoint attribute, enhance dropdown styling options, and update documentation accordingly.
New Features:
Enhancements:
Build:
Documentation:
Summary by Sourcery
Add a feature to control dropdown fullscreen behavior on mobile devices using a breakpoint attribute, enhance dropdown styling options, and update documentation accordingly.
New Features:
Enhancements:
Build:
Documentation: