Error Bubble

Displays an error bubble near the wrapped input component when a non-empty string is passed to the error prop.
Passes any prop except className down to the input.

Error Bubble

Example

<div id="container"></div>

import {render} from 'react-dom';
import React from 'react';

import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';

const container = document.getElementById('container');
const renderBubbleDemo = value => (
  <ErrorBubble
    error={value ? null : 'Value is required'}
    onSelect={value => render(renderBubbleDemo(value), container)}
    placeholder="enter something"
  >
    <Select type={Select.Type.BUTTON} size={Select.Size.M} data={[{label: 'One'}, {label: 'Two'}]} />
  </ErrorBubble>
);

render(renderBubbleDemo(), container);

Error Bubble In Dialog Form

Example

<div id="container"></div>

import {render} from 'react-dom';
import React from 'react';

import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble';
import Select from '@jetbrains/ring-ui/components/select/select';
import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
import '@jetbrains/ring-ui/components/form/form.scss';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';

const container = document.getElementById('container');
const renderBubbleDemo = value => (
<Dialog show>
  <Header>Dialog example</Header>
  <Content>
    <form className="ring-form">
      <div className="ring-form__group">
        <label className="ring-form__label">Field name</label>
        <div className="ring-form__control ring-form__control_small">
          <ErrorBubble
            error={value ? null : 'Value is required'}
            onSelect={value => render(renderBubbleDemo(value), container)}
            placeholder="enter something"
          >
            <Select type={Select.Type.BUTTON} size={Select.Size.M} data={[{label: 'One'}, {label: 'Two'}]} />
          </ErrorBubble>
        </div>
      </div>
    </form>
  </Content>
</Dialog>
);

render(renderBubbleDemo(), container);