Bar with one side rounded rectangle

[sladomic]

The current Bar uses an SVG rect and therefore only supports two sides and four sides rounded rectangles (with the rx and ry attributes).

To have a one side rounded rectangle we have to use another SVG shape like path https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90

The implementation would break the API, since the path shape has only one dedicated attribute "d".

There are several options of how to implement:

1. Change the Bar shape and map rect attributes like height and width to path commands
2. Create new shape like BarRounded or RoundedBar and use path commands

We already use option 1 and would like to know, if we can open a pull request for it or have to change something in advance?

[rafaeldsousa]

@sladomic any chance I could get a snippet of how you're getting the rect/path map to get just one side bit the border rounded ?

[sladomic]

hey @rafaeldsousa. I just implemented it the way described in the Medium post above. But I never opened a pull request because right after that everything got rewritten to typescript and I'd have to rewrite it and the tests again.

[rafaeldsousa]

Thanks @sladomic. Yep, I've realised that the article was the way to go and did the same. (:

[williaster]

I wonder if this could be a new component called PathBar, that way there'd be no breaking changes and folks could use whichever is better for their use case?

Happy to review any PRs and get this in if anyone is interested in adding it so all could benefit 😄