Balloon

Support for Balloon notification is divided into two parts. Components for decoratively rendering a Balloon, and an API for showing balloon notifications imperatively (e.g. in response to events).

Remaining features

• BalloonActions component for rendering actions links where non-fitting ones are moved into a dropdown.

• Support for error style notification (used for IDE errors)

Declarative API

Components used for rendering a Balloon notification:

Balloon

Renders a single Balloon notification. Different parts of the balloon are passed as props. Timeout for hiding the balloon is not supported at this level. See useBalloonManager for that.

BalloonActionLink

A tiny wrapper around Link component, to be used for actions in Balloon. It closes the balloon when pressed.

Note

How balloon notifications are stacked and positioned in bottom right, and an imperative API for triggering notifications is outside the scope of what this component is about. Use BalloonManager and useBalloonManager for that.

Live example

Result

Loading...

Live Editor

<> {/* prettier-ignore */} <Balloon // try "Error", "Warning", or a custom icon: <PlatformIcon icon="expui/fileTypes/docker.svg" /> icon={"Info"} // try changing title to something too long title="Maven Projects need to be imported" // depending on how big body is, it may becomes expandable body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly." actions={ <> <BalloonActionLink>Import changes</BalloonActionLink> <BalloonActionLink>Enable auto-import</BalloonActionLink> </> } // close button is shown only if onClose is passed onClose={console.log} // header actions are placed next to the close button in the header headerActions={ <AutoHoverPlatformIcon icon="ide/notification/gear" role="button" /> } /> </>

<>
  {/* prettier-ignore */}
  <Balloon
    // try "Error", "Warning", or a custom icon: <PlatformIcon icon="expui/fileTypes/docker.svg" />
    icon={"Info"}
    // try changing title to something too long
    title="Maven Projects need to be imported"
    // depending on how big body is, it may becomes expandable
    body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly."
    actions={
      <>
        <BalloonActionLink>Import changes</BalloonActionLink>
        <BalloonActionLink>Enable auto-import</BalloonActionLink>
      </>
    }
    // close button is shown only if onClose is passed
    onClose={console.log}
    // header actions are placed next to the close button in the header
    headerActions={
      <AutoHoverPlatformIcon icon="ide/notification/gear" role="button" />
    }
   />
</>

Expandable body

Body becomes expandable only if the content doesn't fit within the allowed number of lines. The expanded state can optionally be controlled.

Result

Loading...

Live Editor

<> {/* prettier-ignore */} <Balloon body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly." // expanded /> </>

<>
  {/* prettier-ignore */}
  <Balloon
    body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly."
    //     expanded
   />
</>

Imperative API

BalloonManager

BalloonManager renders the necessary context for using useBalloonManager, as well as the stack of the notifications. By default it renders the notifications stack as a portal appended to body. This can be disabled by setting disablePortal to true. Either way, the notifications stack is an overlay placed at the bottom right of where it's rendered. If portal is disabled, position will be absolute, otherwise fixed.

useBalloonManager

useBalloonManager gives access to the imperative API for showing balloon notifications.

const { show, showSticky } = useBalloonManager();

Result

Loading...

Live Editor

const App = () => ( <BalloonManager> <SomeComponent /> </BalloonManager> ); const SomeComponent = () => { const { show } = useBalloonManager(); const showNotification = () => { show({ title: "Maven projects need to be imported", body: "Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly. Otherwise, code analysis, completion and other features might work incorrectly.", actions: ( <> <BalloonActionLink>Import changes</BalloonActionLink> <BalloonActionLink>Enable auto-import</BalloonActionLink> </> ), }); }; return <Button onPress={showNotification}>Show balloon notification</Button>; }; render(<App />);

const App = () => (
  <BalloonManager>
    <SomeComponent />
  </BalloonManager>
);
const SomeComponent = () => {
  const { show } = useBalloonManager();
  const showNotification = () => {
    show({
      title: "Maven projects need to be imported",
      body: "Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly. Otherwise, code analysis, completion and other features might work incorrectly.",
      actions: (
        <>
          <BalloonActionLink>Import changes</BalloonActionLink>
          <BalloonActionLink>Enable auto-import</BalloonActionLink>
        </>
      ),
    });
  };
  return <Button onPress={showNotification}>Show balloon notification</Button>;
};

render(<App />);