Explore Additional Optional Parameters for Panels

[pivotal-plech]

I've found that we're designing the same custom panel component a lot in PivNet and see patterns in AppsMan as well.

It would be really nice to have Optional Parameters to pass through:

• Title
• Sub-Title (Description)
• Actions

---

Real Life Examples (Note: this was before we had button-groups):

[charleshansen]

@pivotal-plech we have pull request #337 that allows custom Panel Titles. We could provide a PanelTitleWithActions component or something if you want, but it should not allow much customization. I've had bad luck making a component API for action buttons. Using the API for making the buttons is actually more work than just making the buttons (in addition to text and click callback for each button, you usually need an optional icon and the ability to swap out which button type you are using, and then often the ability to sub-group the buttons).

Let me know if you want the limited customization action title (with subtitle) or if you think custom Panel Titles are fine here.

[pivotal-plech]

@charleshansen I think Custom Tile headers solve the majority of the problems. However, I would like provide a way to show consumers of PUI how to implement "PanelTitleWithActions". I'm not opinionated whether it's a full-blown-react-component or just simple documentation for how to achieve the style.

To clarify, to achieve the styled result you have to provide markup that involves some weird media object "trickery". As a developer, you have to know that you must apply two media-bodys and have a txt-r modifier to achieve the desired result:

<div class="media pal">
  <div class="media-body media-middle">
    <p class="mvn type-dark-1">Manage Release Files</p>
  </div>
  <div class="media-body media-middle txt-r">
    <div class="btn-group">
      <a class="btn btn-sm btn-default-alt panel-button type-xs" data-target="#addFiles" data-toggle="modal"><i class="fa fa-chain type-shadow-1 mrm"></i> Attach / Dettach</a> <a class="btn btn-sm btn-default-alt panel-button type-xs" data-target="#sortFiles" data-toggle="modal"><i class="fa fa-sort-numeric-asc type-shadow-1 mrm"></i> <span>Sort</span></a>
    </div>
  </div>
</div>

As this particular style has come up in AppsManager, APM and PivNet I would like to provide a better way to achieve the desired result other than just having to know how to hack it together.

[charleshansen]

I see, it looks worth automating that layout. I prioritized the story https://www.pivotaltracker.com/story/show/106214888