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?
There was a problem hiding this comment.
Yes, I lean towards it especially seeing that Chakra does that. I do wonder if we should split it into row-gap and column-gap but we can cross that bridge if we get a request for it so gap works for me.
There was a problem hiding this comment.
Added support for gap here: d494fab
I think if we wanted to support column & row we could just make it accept two values rather than doing two separate properties. I don't know, something to consider later.
There was a problem hiding this comment.
We need to figure out the file structure. We have some files that separate by periods (gallery.spec.ts) and other by hyphens (gallery-interface.ts). Currently, ionic-modular is converting the interface files to periods (gallery-interface.ts -> gallery.interface.ts)
There was a problem hiding this comment.
I think it's fine to separate them with periods. I was just following the interface naming.
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Looks good to me! I had some nits/questions, but I don't consider them blocking honestly. Just food for thought, I guess
3 participants
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)printIonWarningxs–xxlvalues (e.g.{}or only mistyped keys) are treated as invalid and warnedgapproperty:columnsfor scalar values and breakpoint maps (including empty / non-matching maps)Test Coverage
columns/gapfallback, normalization, and invalid breakpoint maps (including empty objects and maps with only unrecognized keys)layout/ 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.7-dev.11778680417.1f9234bd