PF Next

Alert Upgrade Examples

Patternfly3 Alert

Preview

Great job! This is really working out great for us.
Hey there is a problem! Yeah this is really messed up and you should know about it.
There might be a problem here! We are not really sure, but it might be bad.
This is some general information. You should know about this.
<div class="alert alert-success">
  <span class="pficon pficon-ok"></span>
  <strong>Great job!</strong> This is really working out
  <a href="#" class="alert-link">great for us</a>.
</div>
<div class="alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span>
  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should
  <a href="#" class="alert-link">know about it</a>.
</div>
<div class="alert alert-warning">
  <span class="pficon pficon-warning-triangle-o"></span>
  <strong>There might be a problem here!</strong> We are not really sure, but
  <a href="#" class="alert-link">it might be bad</a>.
</div>
<div class="alert alert-info">
  <span class="pficon pficon-info"></span>
  <strong>This is some general information.</strong> You should
  <a href="#" class="alert-link">know about this</a>.
</div>

Patternfly4 Alert

Preview




<div class="pf-c-alert pf-m-success" aria-label="Success Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Success: </span> Great Job!
    </h4>
    <p>
      This is really working out
      <a href="#">great for us.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-danger" aria-label="Danger Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Danger: </span> Hey there is a problem!
    </h4>
    <p>
      Yeah this is really messed up and you should
      <a href="#">know about it.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-warning" aria-label="Warning Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Warning: </span> There might be a problem here!
    </h4>
    <p>
      We are not really sure, but it
      <a href="#">might be bad.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-info" aria-label="Information Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Info: </span> This is some general information.
    </h4>
    <p>
      You should
      <a href="#">know about this.</a>
    </p>
  </div>
</div>

Patternfly3 Toast Notification

Preview

The server configuration changed.

Failed to add server_abc.

The server configuration changed.

Great job! This is really working out.
<div class="toast-pf alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <span class="pficon pficon-ok"></span> The server configuration changed.
</div>
<br>
<div class="toast-pf alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span> Failed to add <strong>server_abc</strong>.
</div>
<br>
<div class="toast-pf alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <div class="pull-right toast-pf-action">
    <a href="#">Reload Server</a>
  </div>
  <span class="pficon pficon-warning-triangle-o"></span> The server configuration changed.
</div>
<br>
<div class="toast-pf alert alert-info">
  <div class="dropdown pull-right dropdown-kebab-pf">
    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
      <li>
        <a href="#">Action</a>
      </li>
      <li>
        <a href="#">Another Action</a>
      </li>
      <li>
        <a href="#">Something Else Here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li>
        <a href="#">Separated Link</a>
      </li>
    </ul>
  </div>
  <div class="pull-right toast-pf-action">
    <a href="#">Reload Server</a>
  </div>
  <span class="pficon pficon-info"></span>
  <strong>Great job!</strong> This is really working out.
</div>

Patternfly4 Toast Notification

Preview




<div class="pf-c-alert pf-m-success" aria-label="Success Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <p>
      The server configuration changed.
    </p>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-plain" aria-label="Remove">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-danger" aria-label="Danger Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <p>
      Failed to add server_abc.
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-warning" aria-label="Warning Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <p>
      The server configuration changed.
    </p>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-link">
      Reload server
    </button>
    <button class="pf-c-button pf-m-plain" aria-label="Remove">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-info" aria-label="Information Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <p>
      Great job! This is really working out.
    </p>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-link">
      Reload server
    </button>
    <button class="pf-c-button pf-m-plain" aria-label="Remove">
      <i class="fas fa-ellipsis-v"></i>
    </button>
  </div>
</div>

Documentation

Overview

When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

PF3 Class Applied To PF4 Class Applied To Outcome
.alert <div> .pf-c-alert <div> Applies default alert styling. Always use with a modifier class. Required.
.alert-success <div> .pf-m-success .pf-c-alert Applies success styling.
.alert-danger <div> .pf-m-danger .pf-c-alert Applies danger styling.
.alert-warning <div> .pf-m-warning .pf-c-alert Applies warning styling.
.alert-info <div> .pf-m-info .pf-c-alert Applies info styling.
.alert-link <a> -- -- Applies link styling.
.pficon <div> .pf-c-alert__icon <div> Defines the alert icon. Required.
-- -- .pf-c-alert__title <div> Defines the alert title. Required.
-- -- .pf-c-alert__body <div> Defines the alert body. Required.