Add Spacers

[hrules6872]

📑 What does this PR do?

Add Spacers to start creating our own design language

✅ Checklist

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed

🧪 How can this PR been tested?

🧾 Tasks Remaining: (List of tasks remaining to be implemented)

🖼️ Screenshots (if applicable):

[exallium]

This took me more than a while to reconcile with myself on, because when I see a bunch of top-level functions like this the first thing I think is that we're going to end up polluting our class-space very quickly.

Are there opinions on utilizing some kind of namespacing here?

object Spacers {
  @Composable
  fun XLarge(modifier: Modifier = Modifier) {} // ...
}

// Usage
Spacers.XLarge()

This has the upside of making it easier to find things. If I want a specific spacer I can do Spacers. and get a nice list.

I can be convinced either way, just a random musing.

[thebino]

Can we avoid wildcard imports?
https://sergiomartins8.medium.com/avoid-using-auto-asterisk-imports-on-intellij-idea-278b9a6f148c

[crocsandcoffee]

+1

[hrules6872]

@exallium although I see your point, I can't decide for myself at the current stage of the project. Let's see what the community says 😀

[crocsandcoffee]

In general - I think it's best to not couple components with scopes, unless there's a lot of useful reusable logic for that commonly used scope. Both weight spacers here are simple enough that IMO they can just be inlined. If you wanted a weight beyond fill (1f) then it's the same amount of code to call this component then to just use the Spacer composable directly. Also - not something I care about or feel strongly, just thinking out loud here in case this was overlooked

[hrules6872]

You can't use weight() outside of those scopes.
For me it has is more readable and cleaner this:

Row() {
  Text()
  WeightSpacer()
  Text()
}

than that:

Row() {
  Text()
  Spacer(modifier = modifier.weight(1f))
  Text()
}

[crocsandcoffee]

Yes agreed, but that's why I mentioned anything besides default weight will make it moot.

WeightSpacer(modifier = Modifier.weight(2f))

Spacer(modifier = Modifier.weight(2f))

[rafsanjani]

I personally don't see anything wrong with using hardcoded DP values in compose for spacing instead of wrapping them in another composable, as long as the values conform to the 4 dp material grid sizing.

[hrules6872]

Keep in mind that this is a cross-platform project :)
Hard-coded dimensions are not an option, even for a simple Android app, if you want it to be compatible with all kinds of devices.

[petitJAM]

I'd recommend adding a doc comment with the actual spacing size in it to all of these.

/**
 * Size: `2.dp`
 */
@Composable
fun XSmallSpacer(...) {
  // ...
}

[krizzu]

Agreed, that'd come useful 👍

[hrules6872]

#66 (comment)

[petitJAM]

#66 (comment)

I'm not sure what you're trying to say with this link? Using pixel dimensions is not good of course, but DP are totally fine (which is what you have here anyway). Admittedly, I haven't worked very much with Compose Desktop, but I have used dp dimension values when I did.

[hrules6872]

This PR is a first approximation so I hardcoded all the dimensions.

Dimensions (like paddings) must be defined in the Theme in order to support all kind of devices/platforms.
So, we shouldn't put this kind of comments because they can be a lie :)

[crocsandcoffee]

It's not entirely clear to me what these custom Spacers are really solving, I think it might make more sense to have these implemented as modifiers instead.

However, I don't feel super strongly and I don't see any harm in getting them merged in for now. With that being said - I think adding some paddings to the theme and having these Spacers (or Modifiers if you choose to go that route) update to pull the padding from the theme instead of hardcoded dp would be a good POC to hopefully showcase the benefit a bit more.

Approving anyway, as it can be done in a follow-up PR.

Thanks and nice work 🚀

[hrules6872]

@crocsandcoffee I started to use that kind of custom Spacers in one of my side projects, so I thought it was a good and easy PR to start contributing to this project. Then it has become not as good and easy as I thought at the beginning 😅

The good thing is that I have started using namespaces for this kind of functions (as you have pointed out to me in the comments). I am very grateful to learn from you guys 🫶

That said, I have no strong feelings about this PR and I guess it's best to close it and forget it.