Attached Panels

FabButton 1.6.0 lets each section open an attached panel from floating mode. This is useful for compact action surfaces such as compose forms, upload queues, or settings panels.

React Example

<FabButton
  floating
  floatingPosition="bottom-right"
  floatingOffset="24px"
  floatingMenuLabel="Actions"
  sections={[
    {
      key: "compose",
      content: "Compose",
      panelTitle: "Compose",
      panel: ({ close }) => (
        <form onSubmit={(event) => {
          event.preventDefault()
          close()
        }}>
          <input aria-label="Subject" placeholder="Subject" />
          <textarea aria-label="Message" placeholder="Write a message" />
          <button type="submit">Save Draft</button>
        </form>
      )
    },
    {
      key: "upload",
      content: "Upload",
      panelTitle: "Upload",
      panel: <div>Upload queue content can live here.</div>
    },
    { key: "share", content: "Share", onClick: () => {} }
  ]}
/>

Section Panel API

Field	Purpose
`panel`	Panel body content or render function
`panelTitle`	Optional title rendered in the attached panel header
`panelClassName`	Custom class for the panel container
`panelStyle`	Inline style for the panel container
`panelAriaLabel`	Accessible label when no visible title is enough

Adapter Notes

React: panel can be a ReactNode or a function receiving { close, key }.
Vue: panel can be VNodeChild or a function receiving { close, key }.
Svelte: panel supports simple content according to the current package API.
Web Component: attached panels are not built in.

Interaction Behavior

Escape closes the open panel.
Clicking outside closes the open panel.
A section can use panel and onClick together.
The floating menu closes when a panel opens.

Styling Hooks

Attached panels expose stable class names for custom styling:

.fab-button__attached-panel {}
.fab-button__attached-panel-header {}
.fab-button__attached-panel-title {}
.fab-button__attached-panel-close {}
.fab-button__attached-panel-body {}

In 1.6.0, floating dropdown radius handling was also updated so shape="pill" does not turn dropdown menus into oversized pills that cover text.