@atlaskit/inline-dialog

Inline Dialog

The Inline Dialog is a container for secondary content and controls that are displayed on user request.

Try it out

Interact with a live demo of the @atlaskit/inline-dialog component.

Installation

npm install @atlaskit/inline-dialog

Using the component

@atlaskit/inline-dialog is a React component that can wrap content and then toggle the display of an aligned dialog box.

Example usage:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import AKInlineDialog from '@atlaskit/inline-dialog';

class ButtonActivatedDialog extends PureComponent {
  static propTypes = {
    content: PropTypes.node,
    position: PropTypes.string,
  }

  state = {
    isOpen: false,
  };

  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  handleOnClose = ({ isOpen }) => {
    this.setState({ isOpen });
  }

  render() {
    return (
      <AKInlineDialog
        content={this.props.content}
        position={this.props.position}
        isOpen={this.state.isOpen}
        onClose={this.handleOnClose}
      >
        <AKButton
          onClick={this.handleClick}
          iconBefore={<BitbucketAdminIcon />}
          isSelected
        />
      </AKInlineDialog>
    );
  }
}

This would allow you to use the ButtonActivatedDialog class to render something similar to the example gif above.

* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Are you in trouble? Read through our contribution guidelines and raise an issue to us.