Comments (14)
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.
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:
Your semantic-release bot š¦š
from components.
Related Issues (20)
- Type '{ children: string; eventKey: string; }' is not assignable to type 'IntrinsicAttributes & Props'. HOT 1
- Add Logout icon HOT 4
- How Observable call HOT 1
- New Patient Icons HOT 9
- Select should show all options when opened regardless of filter HOT 6
- Any NavLink label should be able to be any React component HOT 6
- Add markdown support on homepages of Storybook HOT 9
- Provide callbacks for filter/search capabilities on table column HOT 16
- Table component should use generics HOT 3
- Callout css does not work when importing to frontend HOT 9
- Basic authentication prompt HOT 12
- v2.0.1 fails build of @hospitalrun/frontend HOT 4
- Modal Dialog Form: UX improvements relating to closing of component HOT 1
- Add Integration Testing during build pipeline
- Upgrade to React 17.0.x HOT 8
- Add Billing and Inventory icons HOT 2
- Add a billing icon HOT 4
- Add an inventory icon HOT 8
- Add tests and Storybook components for arrow icons HOT 3
- Select - add the ability to display error messages HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.