alert

v4.15.0

STATUS

Passing

DOWNLOADS

327

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

163 KB

The Alert and InlineAlert components are used to give feedback to the user about an action or state.

1 contributor

Install alert as a package?

Copied

npm i @bit/segmentio.evergreen.alert

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Snapshot report for `src/alert/test/index.js`

The actual snapshot is saved in index.js.snap.

Generated by AVA.

appearance snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_17bru36 p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&bblr_3px p&bbrr_3px p&btlr_3px p&btrr_3px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

basic snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        A simple general message
      </h4>
    </div>
  </div>
</div>

hasTrim=false snapshot

Snapshot 1

<div
  className="p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

hasTrim=true snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

type snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
  type="danger"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

Properties

Name	Type	Default value	Description
children	`string \| node`		The content of the alert. When a string is passed it is wrapped in a `<Text size={400} />` component.
intent	`'none' \| 'success' \| 'warning' \| 'danger'`	`'none'`	The intent of the alert.
title	`node`		The title of the alert.
hasTrim	`bool`	`true`	When true, show a border on the left matching the type.
hasIcon	`bool`	`true`	When true, show a icon on the left matching the type,
isRemoveable	`bool`	`false`	When true, show a remove icon button.
onRemove	`function`		Function called when the remove button is clicked.
appearance	`'default' \| 'card'`	`'default'`	The appearance of the alert.
theme (required)	`object`		Theme provided by ThemeProvider.
children	`string \| node`		The content of the alert.
intent	`'none' \| 'success' \| 'warning' \| 'danger'`	`'none'`	The intent of the alert. This should always be set explicitly.
hasIcon	`bool`	`true`	When true, show a icon on the left matching the type. There is no point not showing this.
size	`number`	`400`	The size of the Text.
theme (required)	`object`		Theme provided by ThemeProvider.

alert

Snapshot report for src/alert/test/index.js

appearance snapshot

basic snapshot

hasTrim=false snapshot

hasTrim=true snapshot

type snapshot

Snapshot report for `src/alert/test/index.js`