RC #49 #50
Merged
RC #49 #50
Conversation
This file contains hidden or 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
- update _customAlign method to always return a callback function - remove extra calc in slide width styles - add null check to _createWidthProp
…lied in full bleed mode
…ency across examples #37
Reviewer's GuideThis release candidate adds a full-bleed display mode to the slideshow with custom alignment and dynamic width, refactors spacing and transition handling, standardizes the autoScroll attribute casing across code and docs, updates demos/README with refreshed metadata and stylesheet references, tweaks icon sizing in the component template, and bumps several package versions along with build scripts. Entity relationship diagram for auro-slideshow propertieserDiagram
AURO_SLIDESHOW {
boolean autoScroll
boolean autoplay
number delay
boolean fullBleed
boolean loop
boolean navigation
boolean pagination
}
AURO_SLIDESHOW ||--o| SLIDE : contains
Updated class diagram for AuroSlideshow with fullBleed property and methodsclassDiagram
class AuroSlideshow {
-playLabel: string
-pauseLabel: string
-playBtnLabel: string
+fullBleed: boolean
+initializeEmbla()
+_createWidthProp()
+_customAlign
+_slideshowWrapperNode
+_slideshowPaddingSize
}
AuroSlideshow <|-- LitElement
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Closed
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/auro-slideshow.js:304` </location>
<code_context>
+ * Calculate the width of the slideshow-wrapper and attach a css property to the host element '--slideshow-width'
+ * @returns {void}
+ */
+ _createWidthProp = () => {
+ if (this._slideshowWrapperNode) {
+ const { width } = this._slideshowWrapperNode.getBoundingClientRect();
+
+ this.style.setProperty("--slideshow-width", `${width}px`);
+ }
+ };
+
</code_context>
<issue_to_address>
Consider debouncing _createWidthProp for resize events.
Frequent updates during rapid resize can degrade performance. Debounce or throttle _createWidthProp to reduce unnecessary DOM changes.
Suggested implementation:
```javascript
/**
* Debounce utility function
* @param {Function} func
* @param {number} wait
* @returns {Function}
*/
_debounce(func, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
/**
* Calculate the width of the slideshow-wrapper and attach a css property to the host element '--slideshow-width'
* @returns {void}
*/
_createWidthProp = () => {
if (this._slideshowWrapperNode) {
const { width } = this._slideshowWrapperNode.getBoundingClientRect();
this.style.setProperty("--slideshow-width", `${width}px`);
}
};
/**
* Debounced version of _createWidthProp for resize events
*/
_debouncedCreateWidthProp = this._debounce(this._createWidthProp, 100);
```
```javascript
/** @private */
this.playBtnLabel = this.playLabel;
// Attach debounced resize event listener
window.addEventListener('resize', this._debouncedCreateWidthProp);
```
- If you already have a debounce utility in your codebase, use that instead of the provided `_debounce` implementation.
- Make sure to remove or update any existing resize event listeners that use `_createWidthProp` directly.
- Consider cleaning up the event listener in the component's disconnectedCallback or equivalent teardown method to avoid memory leaks.
</issue_to_address>
### Comment 2
<location> `src/style.scss:207` </location>
<code_context>
}
}
+
+:host([loop]) {
+ .embla__container {
+ gap: unset;
+ }
+
+ .embla__slide {
</code_context>
<issue_to_address>
Unsetting gap for loop mode may cause inconsistent spacing.
Ensure only one spacing property is used at a time to prevent layout inconsistencies.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
:host([loop]) {
.embla__container {
gap: unset;
}
.embla__slide {
=======
:host([loop]) {
.embla__container {
gap: 0; // Ensure gap is explicitly set to 0 for loop mode
}
.embla__slide {
margin-right: var(--slide-spacing, 0); // Use margin for spacing if needed, otherwise 0
}
>>>>>>> REPLACE
</suggested_fix>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
jyang81
approved these changes
Sep 8, 2025
|
🎉 This PR is included in version 1.2.1 🎉 The release is available on: 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
RC release #49
Checklist:
By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.
Thank you for your submission!
-- Auro Design System Team
Summary by Sourcery
Implement fullBleed mode for auro-slideshow with custom alignment, dynamic width styling, and enhanced spacing, update API demos and documentation to reflect autoScroll naming and usage guidelines, and bump dependencies and build scripts for the RC #49 release
New Features:
Enhancements:
Build:
Documentation: