feat(FluidGrid): implement material-ui inspired grid

[betaboon]

first of thanks for this great package.

I added a grid that is inspired by reacts material-ui.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/thecomputerm/svelte-materialify/arhniw0fc
✅ Preview: https://svelte-materialify-git-fork-betaboon-feature-fluidgrid.thecomputerm.vercel.app

[Florian-Schoenherr]

(unofficial reviewer here, says code+feature is good)

[TheComputerM]

Can you specify the difference between FluidGrid and the other Grid system in the description?

[betaboon]

Can you specify the difference between FluidGrid and the other Grid system in the description?

Yes. the documentation has to be fleshed out some more.
I wanted to get feedback on the feature as such before putting the time in for that first :)

[betaboon]

I'm unsure about the number | boolean types.
actually the number only accepts a certain range (1 through $grid-columns).
and the boolean only accepts true.
can that be expressed somehow? I'm new to typescript ;)

[betaboon]

at least one of container or item has to be set to true.
can that be expressed somehow ?

[meticoeus]

You can use discriminated unions/algebraic data types when you want to declare mutually exclusive states.

interface FluidGridSharedProps {
  // all common props go here
}

interface FluidGridContainerProps extends FluidGridSharedProps {
  container: true;
  item?: false;
}

interface FluidGridItemProps extends FluidGridSharedProps {
  item: true;
  container?: false;
}

type FluidGridProps = FluidGridContainerProps | FluidGridItemProps

Be aware that as a union type rather than an interface there are more limitations placed on FluidGridProps so this approach has drawbacks to consider. One such drawback is that you cannot extend it with a new child interface:

interface MyCustomGridProps extends FluidGridProps {
  foo: string;
}

^^^ this will throw a compiler error

Instead you must declare a child as a type instead

type MyCustomGridProps = FluidGridProps & {
  foo: string
}

^^^ this will compile

I haven't reviewed much of the code base to check if this approach is being used for this project but hopefully this answers your question.

[betaboon]

I'm unsure of height: 100% (and maybe align-items: center) has to go into FluidGrid.scss for stretch to work properly.

[Florian-Schoenherr]

I don't see any difference without it, also it would be an easy change if someone has problems with it :)

[betaboon]

these newly added settings duplicate the defaults of Slider which feels wrong as they might diverge.

[Florian-Schoenherr]

works for now, or what would you do instead? 😄

[betaboon]

marked this PR as draft until I'm done :)

[betaboon]

i just pushed a separate commit that removes the requirement of using global for the style.
I would very much like to get feedback on the approach chosen.

[nateshmbhat]

any update on this PR ?