@hackplan/polaris/esnext/components/Connected/Connected.js

Shopify’s product component library

import React from 'react';
import { Item, ItemPosition } from './components';
import styles from './Connected.scss';
export default function Connected({ children, left, right }) {
    if (left == null && right == null) {
        return <React.Fragment>{children}</React.Fragment>;
    }
    const leftConnectionMarkup = left ? (<Item position={ItemPosition.Left}>{left}</Item>) : null;
    const rightConnectionMarkup = right ? (<Item position={ItemPosition.Right}>{right}</Item>) : null;
    return (<div className={styles.Connected}>
      {leftConnectionMarkup}
      <Item position={ItemPosition.Primary}>{children}</Item>
      {rightConnectionMarkup}
    </div>);
}