Rework Panel API #1769

jquense · 2016-04-03T19:29:35Z

First pass at fixing #983.

I started with the most verbose version of the API. I really hope we can offer something closer to the current API for simple cases, because this is really verbose. In particular the accordion code feels silly, verbose.

Things I don't like about this currently:

needs a less verbose option for common use cases, I want to keep some of the body inference stuff, with the option to drop down to the verbose one.
A11y is ugly again, essentially copies the TabContainer
panel-title feels dumb, but an extra component feels worse. If there was anyway to guess the right component to use I would just use that...perhaps we just default it to a div and add titleComponentClass?

taion · 2016-04-04T01:07:33Z

Worth noting, BTW, that .panel is dead in Bootstrap 4.

jquense · 2016-04-04T01:59:57Z

true tho Card is philosophically similar...I am hoping it lends itself to a better API more tho

taion · 2016-04-05T19:26:33Z

Can we do something with bsRole here?

I'm thinking we have bsRole of heading, body, footer.

If no bsRole is set for anything, automatically wrap in Panel.Body. If a user doesn't want this behavior, he or she can just set his or her own <CustomPanelBody bsRole="body"> and do whatever in there.

For a <Panel collapse>, automatically wrap the element with bsRole="body" in <Panel.Collapse>.

As for the heading API, maybe <Panel.Title toggle> could automatically set up the Panel.Toggle? Then for users who want the entire heading to toggle can do a <Panel.Heading toggle>. For the accordion case, it'd maybe look like:

<Panel collapse>
  <Panel.Heading>
    <Panel.Title toggle>
      Panel title
    </Panel.Title>
  </Panel.Heading>
  <Panel.Body>
    Panel body
  </Panel.Body>
</Panel>

jquense · 2016-04-08T15:42:59Z

I'm thinking we have bsRole of heading, body, footer.

that seems like a good idea, though we still need a way to say "don't wrap this table or ListGroup", maybe just have them add bsRole='body'? am I over thinking that?

As for the heading API, maybe <Panel.Title toggle> could automatically set up the Panel.Toggle?

I like that, however there is no good default component for Panel.Title since the <hX> ones are so semantic...maybe just <header>?

taion · 2016-04-08T15:46:14Z

I do think

If no bsRole is set for anything, automatically wrap in Panel.Body. If a user doesn't want this behavior, he or she can just set his or her own <CustomPanelBody bsRole="body"> and do whatever in there.

is reasonable and will probably be good enough in practice.

That title thing is messy, I dunno.

jquense · 2016-04-17T16:18:54Z

how do we feel about this APi as it stands? the Title thing is a bit annoying but seems like defaulting to a <div> is the least problematic approach.

I will fix up docs and examples if ya'll feel good about it.

ctxhou · 2016-04-25T04:00:59Z

The new panel feature will add at next version?

I like this new customized panel title and really need it! 😄

timkendrick · 2016-05-11T20:42:05Z

Really nice work on this PR! I've been banging my head against the wall trying to inject an icon and some controls into accordion panel headers, this makes it a piece of cake.

As somebody brand new to react-bootstrap, I personally don't find the API overly verbose – everything does exactly what you'd expect, especially if you're coming from the HTML version of Bootstrap.

Do you know if this is going to make it into master?

BowlingX · 2016-06-01T13:57:37Z

What's the status for this pull-request? Is there any help needed? Right now you can't customize the toggle element in the header and this looks quite complete :).

jquense · 2016-06-27T22:30:35Z

I should rebase this...

taion · 2016-06-27T22:31:59Z

👍

Siyfion · 2016-07-29T15:15:21Z

@jquense & @taion It's a shame that the Bootstrap API is more flexible than react-bootstrap currently. This is awesome, exactly what is needed in my mind. Any idea of if/when this is likely to get merged in?

zelias500 · 2016-09-02T19:55:57Z

any update on this?

jquense · 2016-09-07T15:44:25Z

Anyone want to fix the tests?

Siyfion · 2016-09-08T11:44:23Z

Wow, good work @jquense but I'm afraid I'm not going to be much help, I don't understand it all well enough. All I know is that I'd like to be able to style my panel headers to make them clickable in their entirety rather than just the heading titles!

chilijung · 2016-09-18T09:49:46Z

@jquense I've been working on the tests! #2217

btw, is this branch is going to merge back to master after the tests is done? Cause I am using this feature in my projects. Thanks!

Extra-lightwill · 2016-12-16T18:50:40Z

What's the progress on this?

Laggii · 2017-01-09T21:58:16Z

Same question, any updates? I see the panel branch has updated docs just the tests are failing.

Siyfion · 2017-01-16T13:58:27Z

@jquense Any idea if/when this is going to get merged, the underlying issue is responsible for about 90% of my UI "bugs" list at the moment, it's getting annoying! :/

jquense · 2017-01-16T14:14:58Z

@Siyfion it will, thanks for the ping on this.

Siyfion · 2017-01-16T14:16:25Z

@jquense Cheers, like I said, I think this is really my only "main" issue with React-Bootstrap at the moment, so it'd be great to get it all merged in. 👍

jquense · 2017-01-16T14:25:54Z

this should be goood to go for review @react-bootstrap/collaborators .

Me and @taion don't actually use the Panel components often (one reason why this is been so slow) so any other input is greatly appreciated on the API and on the code quality. @Siyfion if you want to jump in as well and make sure it addresses your use cases and bugs 👍

ramarivera · 2017-01-18T18:05:58Z

Awesome!!
Can´t wait for this making it to master!

jquense · 2017-05-17T13:40:41Z

done

taion · 2017-05-20T00:31:59Z

docs/examples/PanelCollapsible.js

+          id="collapsible-panel-example-1"
+          expanded={this.state.open}
+        >
+          <Panel.Collapse>


taion · 2017-05-20T00:32:05Z

docs/examples/PanelGroupControlled.js

+          <Panel.Heading>
+            <Panel.Title toggle>Panel heading 1</Panel.Title>
+          </Panel.Heading>
+          <Panel.Body collapsible >


taion · 2017-05-20T00:33:24Z

test/utils/bootstrapUtilsSpec.js

@@ -120,9 +120,9 @@ describe('bootstrapUtils', () => {
      shouldWarn('expected one of ["minimal","boss","plaid","tweed"]');

      const Component = bsStyles(['minimal', 'boss', 'plaid', 'tweed'], 'plaid')(
-        class extends React.Component {


this was a bad refactor somewhere, just fixing it

taion · 2017-05-20T00:34:17Z

src/Panel.js

-  defaultExpanded: PropTypes.bool,
+  /**
+   * Controls the collapsed/expanded state ofthe Panel. Requires a `Panel.Collapse` or `<Panel.Body collapsible>` child component
+   * in order to actually animate out or in,


taion · 2017-05-20T00:42:30Z

src/PanelHeading.js

+PanelHeading.defaultProps = defaultProps;
+PanelHeading.contextTypes = contextTypes;
+
+export default bsClass('panel', PanelHeading);


arguably this (and the others) should be like <TabPane> where the bsClass is tab-pane

lets defer that, we should do do big rethink of this api anyway, and reach some consistent policy for child components

taion · 2017-05-20T00:44:03Z

src/utils/bootstrapUtils.js

@@ -15,12 +15,18 @@ function curry(fn) {
  };
 }

-export function prefix(props, variant) {
+export function prefix(props, context, variant) {


i don't see our using the 3-arg form of this anywhere any more

taion · 2017-06-24T00:05:46Z

I've been swamped. Will try to look over the weekend.

* Upgrade `uncontrollable` dependency * remove createClass in tests (react-bootstrap#2586) * remove createClass in tests * fix-lint * update changelog * Release v0.31.0 * Add toggle button components (react-bootstrap#2252) I’m tried of rewriting this component all the time :P * Update Dropdown.js (react-bootstrap#2615) fix typo * switch to new one (react-bootstrap#2621) * Rework Panel API * update * fix up the branch, fix examples * Finish tests * Update PanelHeading.js * prop-types clean up * change collapsible API, finish examples and docs * lint: * clean up nits * nits

taion · 2017-09-13T03:30:10Z

test/helpers.js

@@ -1,5 +1,11 @@
 import { cloneElement } from 'react';
 import ReactDOM from 'react-dom';
+import tsp from 'teaspoon';
+
+tsp.fn.log = function log() {


@jquense Was this addition intentional?

hitchcockwill · 2017-10-08T15:51:17Z

What's the latest on this? Anything I can do to help out here?

* Rework Panel API (#1769) * Upgrade `uncontrollable` dependency * remove createClass in tests (#2586) * remove createClass in tests * fix-lint * update changelog * Release v0.31.0 * Add toggle button components (#2252) I’m tried of rewriting this component all the time :P * Update Dropdown.js (#2615) fix typo * switch to new one (#2621) * Rework Panel API * update * fix up the branch, fix examples * Finish tests * Update PanelHeading.js * prop-types clean up * change collapsible API, finish examples and docs * lint: * clean up nits * nits * remove pagination logic (#2587) * remove pagination logic * Add upgrade path. * Transition group (#2676) * switch to react transition group * Update Modal api * fix tests * bump and fix test * Update package.json * update wording * preventDefault specified to work only for disabled && onSelect; it is a fix for issue #2711 * removing prevent defaults from any onSelect logic for NavItem, Panel, and PanelGroup * adding tests for Panel and NavItem changes. testing for whether preventDefault is clicked and for whether the navbar collapses when it is clicked. * part of the fix for #2711, removing preventDefault for onSelect. also modifying code so it only will preventDefault if element is disabled * refactoring the fix for issue #2711 * figured this test was unnecessary. also fixed some linting errors. for #2711 * merge issues * fix lint

* Rework Panel API (#1769) * Upgrade `uncontrollable` dependency * remove createClass in tests (#2586) * remove createClass in tests * fix-lint * update changelog * Release v0.31.0 * Add toggle button components (#2252) I’m tried of rewriting this component all the time :P * Update Dropdown.js (#2615) fix typo * switch to new one (#2621) * Rework Panel API * update * fix up the branch, fix examples * Finish tests * Update PanelHeading.js * prop-types clean up * change collapsible API, finish examples and docs * lint: * clean up nits * nits * remove pagination logic (#2587) * remove pagination logic * Add upgrade path. * Transition group (#2676) * switch to react transition group * Update Modal api * fix tests * bump and fix test * Update package.json * update wording * preventDefault specified to work only for disabled && onSelect; it is a fix for issue #2711 * removing prevent defaults from any onSelect logic for NavItem, Panel, and PanelGroup * adding tests for Panel and NavItem changes. testing for whether preventDefault is clicked and for whether the navbar collapses when it is clicked. * part of the fix for #2711, removing preventDefault for onSelect. also modifying code so it only will preventDefault if element is disabled * refactoring the fix for issue #2711 * figured this test was unnecessary. also fixed some linting errors. for #2711 * merge issues * fix lint * Add up-to-date Bootstrap stylesheets * Add btn-link to storybook, precommit format * Fix toggle buttons * Update toggle prop on ButtonGroup * Use npm registry

shawnbissell · 2018-06-13T17:22:45Z

I know I'm late to the game here ... but this was a nasty breaking change. We have over 300 usages of in our app so it looks like we are stuck of version 0.31.5 for the foreseeable future. How are other people upgrading to v0.32.0? Is there a jscodeshift script for this change?

timkendrick mentioned this pull request May 11, 2016

Change Panel and ListGroupItem API #983

Closed

taion mentioned this pull request Jul 8, 2016

Root item of panel header should not get "panel-title" #2032

Closed

jquense force-pushed the panel branch from 37f6500 to af1cabf Compare September 7, 2016 15:44

taion mentioned this pull request Sep 26, 2016

Item between header and body in Panel #2235

Closed

jquense force-pushed the panel branch from af1cabf to ba0967a Compare November 22, 2016 02:59

jquense mentioned this pull request Dec 6, 2016

Panel title class should only be added to a heading element #2375

Closed

jquense force-pushed the panel branch from 72adb16 to 6fead37 Compare January 16, 2017 14:19

jquense added 5 commits May 17, 2017 09:16

Update PanelHeading.js

a87f633

prop-types clean up

271b5e5

change collapsible API, finish examples and docs

0c81897

lint:

d1bab11

clean up nits

71beb55

jquense force-pushed the panel branch from 63aa012 to 71beb55 Compare May 17, 2017 13:40

taion reviewed May 20, 2017

View reviewed changes

taion mentioned this pull request Jun 8, 2017

React Component in Panel header #2659

Closed

nits

5ff1962

taion approved these changes Jun 25, 2017

View reviewed changes

jquense merged commit 78d700d into next Jun 26, 2017

jquense deleted the panel branch June 26, 2017 12:12

taion reviewed Sep 13, 2017

View reviewed changes

taion mentioned this pull request Sep 13, 2017

preventDefault specified to work only for disabled && onSelect; it is… #2790

Merged

kenzouno1 mentioned this pull request Nov 20, 2017

[BUG] Child element Panel #2887

Closed

renovate bot mentioned this pull request Mar 22, 2018

Update react-bootstrap to ^0.32.0 - autoclosed sbardian/DebtTrackerAPI#29

Closed

rloomans mentioned this pull request Aug 21, 2018

Bump react-bootstrap from 0.31.5 to 0.32.3 rloomans/measure-mate#106

Closed

This was referenced Oct 10, 2018

Update dependency react-bootstrap to ^0.33.0 neolanders/redux-min-starter#4

Open

Update dependency react-bootstrap to ^0.33.0 - abandoned neolanders/min-starter-react-redux-axios#13

Open

This was referenced Jan 8, 2019

Update dependency react-bootstrap to v0.32.4 SonyaMoisset/Meme-Generator_REACT-REDUX#11

Merged

Update dependency react-bootstrap to v0.32.4 - autoclosed SonyaMoisset/RecipeFinder_REACT-REDUX#10

Closed

islemaster mentioned this pull request Sep 6, 2019

Upgrade react-bootstrap for React 16 code-dot-org/code-dot-org#30628

Merged

Rework Panel API #1769

Rework Panel API #1769

Conversation

jquense commented Apr 3, 2016

taion commented Apr 4, 2016

jquense commented Apr 4, 2016

taion commented Apr 5, 2016

jquense commented Apr 8, 2016

taion commented Apr 8, 2016

jquense commented Apr 17, 2016

ctxhou commented Apr 25, 2016

timkendrick commented May 11, 2016

BowlingX commented Jun 1, 2016

jquense commented Jun 27, 2016

taion commented Jun 27, 2016

Siyfion commented Jul 29, 2016

zelias500 commented Sep 2, 2016

jquense commented Sep 7, 2016

Siyfion commented Sep 8, 2016

chilijung commented Sep 18, 2016 • edited Loading

Extra-lightwill commented Dec 16, 2016 • edited Loading

Laggii commented Jan 9, 2017

Siyfion commented Jan 16, 2017

jquense commented Jan 16, 2017

Siyfion commented Jan 16, 2017

jquense commented Jan 16, 2017

ramarivera commented Jan 18, 2017

jquense commented May 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taion commented Jun 24, 2017

Choose a reason for hiding this comment

hitchcockwill commented Oct 8, 2017

shawnbissell commented Jun 13, 2018

chilijung commented Sep 18, 2016 •

edited

Loading

Extra-lightwill commented Dec 16, 2016 •

edited

Loading