feat(component): add enhancements to panel component

[davelinke]

What?

Add enhancements to Panel component

Why?

With the introduction of the Lozenge component, the panel also needs to surface this new feature.
The action property does now also accept dropdown properties.
Besides, a new PanelContents component is introduced to bridge the gap of a few long missing features such as ability to expand to the panel content boundaries horizontally (for tables) and scroller functionality for certain scenarios.

Screenshots/Screen Recordings

Testing/Proof

dev.tsx code

import { Flex, Panel, PanelContents, Table, Text } from '@bigcommerce/big-design';
import { MoreHorizIcon } from '@bigcommerce/big-design-icons';
import { Header, Page } from '@bigcommerce/big-design-patterns';
import React, { FunctionComponent } from 'react';

const PagePanels: FunctionComponent = () => {
  return (
    <Page
      header={<Header description="A sample of new panel features" title="New panel features" />}
    >
      <Flex flexDirection="column" flexGap="2rem">
        <Panel
          action={{
            items: [
              { content: 'Option 1', onItemClick: (item) => item },
              { content: 'Option 2', onItemClick: (item) => item },
            ],
            toggle: {
              variant: 'utility',
              iconOnly: <MoreHorizIcon />,
            },
          }}
          badge={{ label: 'Active', variant: 'success' }}
          description="Now you can also add lozenges and dropdowns to the panel."
          header="A panel with a lozenge and a dropdown"
          lozenge={{ label: 'Early Access', variant: 'new' }}
        >
          <PanelContents>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
          </PanelContents>
        </Panel>
        <Panel
          description="Now tables can reach the boundaries of the panels as they should."
          header="A panel with a table"
        >
          <PanelContents padded={false}>
            <Table
              columns={[
                {
                  header: 'Sku',
                  hash: 'sku',
                  tooltip: 'Header tooltip',
                  render: ({ sku }) => sku,
                },
                { header: 'Name', hash: 'name', render: ({ name }) => name },
                { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
              ]}
              items={[
                { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
                { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
                { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
                { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
                { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
              ]}
            />
          </PanelContents>
        </Panel>
        <Panel
          description="With the PanelContents component you can now add scrolling to panels."
          header="A panel with a scroller"
        >
          <PanelContents height="300px" scrollable>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
          </PanelContents>
        </Panel>
      </Flex>
    </Page>
  );
};

export default PagePanels;

[changeset-bot]

🦋 Changeset detected

Latest commit: 488f719

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@bigcommerce/big-design	Minor
@bigcommerce/docs	Minor
@bigcommerce/big-design-patterns	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[leeBigCommerce]

these minus margins are a bit awkward

both the technique, plus they're trying to undo the Panel's padding, without referencing the Panel's padding value
so the values could get out of sync

I'm also guessing that we wouldn't want PanelContents ever being used outside of a Panel
So I'm wondering why not hide it as an implementation detail, rather than expose it as its own component

e.g.

<Panel
  header="Panel header"
  fullWidthContents
>
  <Text>
    Hello there
  </Text>
</Panel>

or with a contents namespace to absorb the other new settings (scroll behaviour etc)

<Panel
  header="Panel header"
  contents={{ fullWidth: true }}
>
  <Text>
    Hello there
  </Text>
</Panel>

[leeBigCommerce]

we normally just do negative boolean checks like !padded

[leeBigCommerce]

would we ever want to support a scenario where the height is fixed, but scrolling is disabled?

would this just result in content being abruptly cropped and unreachable?

[leeBigCommerce]

why not just stick to DropdownProps entirely? What benefit are we looking for by overwriting the concept of the toggle?

[leeBigCommerce]

anything we can do with these 0.5rem magic numbers?