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.
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.11777490150.1970e4f2