Grommet: Allow setting custom individual borders

Created on 17 Jul 2019 · 4Comments · Source: grommet/grommet

Could you please add a possibility to set custom individual borders with the Box component? E.g. with margin prop it is possible to set different vertical, horizontal margins, but with the border props one can only set a fixed styling for all the borders.
Ideally, I would like to have different borders with the same Box.

enhancement in progress

Source

nomadus

Most helpful comment

That's how I'd do it. Sounds good to me.

ericsoderberghp on 19 Sep 2019

🚀1 👍1

All 4 comments

Can you share a markup of how you'd think you'd like to consume it?

ShimiSun on 17 Jul 2019

Essentially, I would like to achieve the following.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: white;
  width: 300px;
  border: 15px solid blue;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The box</p>

<div>Box with top border</div>

</body>
</html>

nomadus on 18 Jul 2019

👍1

I was thinking of trying to tackle this issue by enhancing the border prop to also accept an array of "border styling".
The current border styling:
```"top"
"left"
"bottom"
"right"
"horizontal"
"vertical"
"all"
{
"color": "border",
"size": "medium",
"style": "dashed",
"side": "all"
}

Will be enhanced with the additional support of:

[
{
"color": "border",
"size": "medium",
"style": "dashed",
"side": "all"
},
{
"color": "border",
"size": "medium",
"style": "dashed",
"side": "all"
},
...
]
``for backward compatibility you can still use: