Add Panel Component about components HOT 14 CLOSED

Hello @jackcmeyer ! I'd love to try and give this a go!

from components.

@neilong31 I've assigned this to you!

from components.

Hey! So I'm having issues trying to commit. When I try to commit the linter goes and tries to "fix" the code but actually goes in breaks it. You can see this below.

But when I run npm run lint it seems fine and shows me this.

Any suggestions?

from components.

Also, I'm using rsuite's panel, which can be seen here.
I'm using this dependency since the new version of bootstrap that you guys are using right now doesn't have a panel component currently. Maybe, in future updates?

from components.

Hey! So I'm having issues trying to commit. When I try to commit the linter goes and tries to "fix" the code but actually goes in breaks it. You can see this below.

Hey @neilong31.

Could you open a pull request with the "broken" code? We can collaborate on fixing it there.

To get around the linting issues, you can get around the commit validations by adding --no-verify to the commit.

For example, you can commit like:

git commit -m "feat(panels): adds panel component" --no-verify.

Once you've opened the pull request, I'd love to help debug this issue.

from components.

Also, I'm using rsuite's panel, which can be seen here.

@neilong31

Also, Bootstrap v4 removed the "panel" component, however, the same functionality can be achieved through a card.

I think that we would be able to make a similar interface to to the existing panel for our component; but then have it be backed by the bootstrap card component.

See the following: https://react-bootstrap.netlify.com/components/cards/#header-and-footer.

from components.

I'll definitely take a look at the card workaround. To be honest, rsuite's panel's aren't working as they should. I'm not sure if I'm not doing it correctly or its a rsuite thing, but as you can see below it should show a border, but nothing pops up.

I'm also a little newer to React so please bare with me.

from components.

I took a look at doing this with react-bootstrap card. How would we want the header to look? In the example image, the "Panel title" part would actually be the Card.Header. (If you use Card.Title, it renders that title inside the card body where you have "panel content")

So would we want an optional header to be rendered inside that header underneath the title, or inside the card body but separated from the rest of the body?

EDIT: or is "Panel title" itself intended to be the optional header?

from components.

@MatthewDorner I’m thinking we want it rendered in the Header using Card.Header.

Then the body can be a node which can render any react node.

What do you think?

from components.

I guess the question is whether there should be a title string prop that's separate from header prop, or if there should just be one prop and whether that one should be a string or a ReactNode.

Most of the time, header will just contain a title string, and if you have to pass in the title as a ReactNode, it's more difficult to use. On the other hand it may need to be able to render more complex stuff in Card.Header than just the title, at some point.

I'm not used to writing components in this way, without having the immediate need to use it, so I guess I would just err on the side of making it simpler for the time being.

from components.

@MatthewDorner I agree. We can keep it simple for now until a more complicated use case arises.

from components.

Styling will be different from the example. Color variants can be either the entire panel/card https://react-bootstrap.netlify.com/components/cards/#background-color and make text white on some of them, or just the border https://react-bootstrap.netlify.com/components/cards/#border-color, can't see a way to set the header and border but leave body white. Any preference?

from components.

My preference is to do just the border.

from components.

🎉 This issue has been resolved in version 0.25.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from components.