In step 1 we saw that the modifier was set on the "block" class, but let’s look at a more complex component to see how the modifier classes are applied to different elements in the component.

In this step we will modify the Dropdown component. You can explore the documentation and classes for the Dropdown component at this (link)[https://www.patternfly.org/v4/documentation/core/components/dropdown]. At the bottom of the page, under the "Usage" section table, you will see the documentation for the modifier classes under “class” and the classes they apply to under “applied”.

Task: Modify the Dropdown for the expanded state, then change the dropdown toggle to the plain variation

1) Copy code to the editor.

Click the Copy to Editor button below to add html for a Dropdown to the index.html file.

<div class="pf-c-dropdown">
  <button class="pf-c-dropdown__toggle">
  <span class="pf-c-dropdown__toggle-text">
    Collapsed dropdown
  </span>
  <i class="fas fa-caret-down pf-c-dropdown__toggle-icon"></i>
  </button>
  <ul class="pf-c-dropdown__menu">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled action</button>
    </li>
    </li>
  </ul>
</div>

2) Search for the pf-c-dropdown class. Add pf-m-expanded beside that class name and inside the quotation marks.

Hint: <div class="pf-c-dropdown pf-m-expanded">

You’ll see that the the bottom-border has changed to a blue line.

3) Let’s try another modifier. Add pf-m-plain to pf-c-dropdown__toggle so that it’s modified to display the toggle modifier with no border. You may need to right-click on the iframe to reload the browser.

Hint: <button class="pf-c-dropdown__toggle pf-m-plain">

Pro Tip: Now try adding pf-m-plain to pf-c-dropdown__menu. What happens? Nothing should happen because the modifier class does not apply to pf-c-dropdown__menu, it only applies to pf-c-dropdown__toggle. Always remember to refer to the documentation!

Let’s continue to practice how to add modifier classes to components.

In this workshop we will apply visual modifiers and state modifiers to the same component or element. Using the documentation at this link https://www.patternfly.org/v4/documentation/core/components/alert, follow the instructions to modify the three Alert components.

Task: Apply visual and state modifiers to the Alert component.

1) Copy code to the editor.

Click the Copy to Editor button below to add html for three Alert components to the index.html file.

<div class="pf-c-alert">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <h4 class="pf-c-alert__title">
    Alert one
  </h4>
</div>

<div class="pf-c-alert">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <h4 class="pf-c-alert__title">
    Alert two
  </h4>
</div>

<div class="pf-c-alert">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <h4 class="pf-c-alert__title">
    Alert three
  </h4>
</div>

2) Using the documentation from the "Usage" table at the link above modify the first Alert to be a “success” variation.

Hint: <div class="pf-c-alert pf-m-success">

3) Modify the second Alert to have “inline” and “warning” variations.

Hint: <div class="pf-c-alert pf-m-inline pf-m-warning">

4) Modify the third Alert to have “danger” and "info" variations.

Hint: <div class="pf-c-alert pf-m-info pf-m-danger">

Pro Tip: You should notice that the color of the third Alert changes to blue. What about the pf-m-danger modifier, Why didn't it change to red for danger? The reason is because pf-m-info and pf-m-danger both modify the color of an Alert and pf-m-info comes before pf-m-danger in the code. You should only every apply one modifier class to an element class when those modifier classes change the same styles.

Making your own modifier class is easy and will save you time. Choose which component you would like to add a modifier class and then select an element that you wish to modify. Create a modifier class name that represents the new style, and add the new styles to the stylesheet, as well as the new modifier class to the html. Here is a list of modifiers that we have in PatternFly: https://pf4.patternfly.org/modifiers

Task: Create a modifier class for the Label component

Let’s create a “warning” variation of the label component by creating a suitable modifier class.

1) Copy code to the editor.

Click the Copy to Editor button below to add html for a Label to the index.html file.

<span class="pf-c-label">
  Default Label
</span>
<span class="pf-c-label">
  Warning Label
</span>

2) Copy more code to the editor.

Click the Copy to Editor button below to add the template for your new styles.

.pf-c-label {
  // Styles go here
}

3) In myapp.scss add a new block inside of the .pf-c-label class that will add styles for the warning modifier:

&.pf-m-warning {
  //Add styles here
}

Pro Tip: When creating new styles for a modifier think about which styles you want to override. E.g. in this case, we want to override the variable for the component's background color and assign it to a new global variable.

4) In order to do this, you need to declare the variable. Add the declaration inside of pf-c-label and above &.pf-m-warning:

Add: --pf-c-label--m-warning--BackgroundColor: var(--pf-global--warning-color--100);

5) Now we need to override the original background color variable by setting its value to the new modifier variable you just created. Add this line inside of &.pf-m-warning{}:

--pf-c-label--BackgroundColor: var(--pf-c-label--m-warning--BackgroundColor);

6) Now in index.html lets add the modifier class that we just created to the second label example.

Hint:

<span class=”pf-c-label pf-m-warning”>
  Warning Label
</span>