Way to increase separator width?

[michaelbdavid]

Hi @johnwalley,

Thanks for writing such a great component! Just started playing around with it and a couple things I'm having issues figuring out.

1. Is there a way to increase the separator width, I'd like the width to match some other components widths, currently it looks like I'm not able to set this width?
2. Also, is there a way to attach a top level container class? Think it would be nice if you could declare your overrides class when you create the component something like:

<Allotment className="my-component">...

.my-component { --focus-border: darken(#454c55, 3%); --separator-border: #454c55; }

Otherwise I found that I needed to wrap the Allotment component within another div to provide overrides? Sorry if I'm missing something and there is a better way.

<div className="my-component"><Allotment>...</div>
3. I've also noticed the focus-border behaves differently when using darken or lighten. Maybe something to look at?

Thanks again for this library,
Michael

[johnwalley]

Hi @michaelbdavid. Thanks for the feedback.

The latest release v1.10.0 should now support a className prop on the Allotment component.

For point 1 you're right that there is no way to change the separator size. I'll have to put some thought into this because it's not as simple as letting the css property be customisable.

Feb-20-2022.17-54-11.mp4

The element is positioned absolutely so has not effect on the surrounding panes which is probably not what anyone wants. There are plenty of options, I just have to pick one and implement it!

For point 3 I will check it out when I next get the chance.

[michaelbdavid]

Hi @johnwalley,

Thanks for adding classname so quick, and feedback for the other issues I was running into. I'll keep a watch for the separator fix :)

Thanks again for the help,
Michael