feat(gallery): add new gallery component#31101
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
There was a problem hiding this comment.
I updated this because this rule prevented the images in my assets/ directory from being served on Vercel.
| // -------------------------------------------------- | ||
|
|
||
| :host(.gallery-layout-uniform) { | ||
| gap: var(--ion-gallery-gap, 16px); |
There was a problem hiding this comment.
Gap currently can only be changed by CSS. Should this be a property that can be updated based on breakpoint, like columns?
|
|
||
| await page.setContent( | ||
| ` | ||
| <ion-gallery style="--internal-gallery-columns: 2;"> |
There was a problem hiding this comment.
Overriding the internal CSS variable for columns should have no effect since the columns property takes priority.
| // This should match the default columns defined by the gallery component. | ||
| // It is hardcoded here instead of grabbing the value from the gallery so | ||
| // that changing it there without updating it here will break the tests. | ||
| const DEFAULT_COLUMNS_BY_BREAKPOINT = { |
There was a problem hiding this comment.
I chose to define these here to catch any changes in the component but I can pull them from there if we want.
| warningSpy.mockRestore(); | ||
| }); | ||
|
|
||
| it('should properly set columns for the md breakpoint but fallback to the default columns for all others when the columns property is set to an object with one valid breakpoint and the rest invalid', () => { |
There was a problem hiding this comment.
I decided to accept the valid breakpoint value and fallback for all the invalid ones, but I can change this behavior if something else is expected.
| // Reset the default margin for slotted elements so wrapper elements | ||
| // (such as <figure>) align properly with other gallery items. | ||
| ::slotted(*) { | ||
| @include margin(0); |
There was a problem hiding this comment.
This is required to be here because if the user wraps the img in something with default margin (like figure) it will not properly align the element, even if they override the margin on their side. I will have to document that the top-level item in a gallery should not have margin to avoid issues with this.
1 participant
Issue number: internal
What is the current behavior?
Developers who want to use a masonry layout must rely on third-party solutions or implement their own.
What is the new behavior?
Adds a new
ion-gallerycomponent.Features
layoutproperty:uniform- evenly sized grid rowsmasonry- stacked masonry layoutorderproperty (masonryonly):sequential- preserves DOM orderbest-fit- places items in the shortest columncolumnsproperty:xs,sm,md,lg,xl,xxl)Test Coverage
columnsfallback and normalization caseslayoutwatcher, masonry scheduling, and load-event behaviororderplacement logic (sequentialandbest-fit)Does this introduce a breaking change?
Other information
Basic Preview
Layout Preview
Dev build:
8.8.6-dev.11777569278.1613db2e