In the previous step, the modifier was set on the block class. This step will demonstrate how modifier classes are applied to different elements in the component.

Modify the dropdown component so that it is in the expanded state, then change the dropdown toggle to the plain variation.

1) Copy code to the index.html file.

Click the Copy to Editor button below to add HTML for a dropdown component.

<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) Add the expanded modifier to the dropdown.

a) Locate the pf-c-dropdown class.

b) Add pf-m-expanded next to the pf-c-dropdown class and inside the quotation marks.

It should look like this: <div class="pf-c-dropdown pf-m-expanded">

Note: The bottom border on the dropdown toggle should have changed to a blue line.

3) Add the plain modifier to the dropdown toggle.

a) Locate the pf-c-dropdown__toggle class.

b) Add pf-m-plain next to the pf-c-dropdown__toggle class and inside the quotation marks.

This will style the pf-c-dropdown__toggle class to have no border.

It should look like this: <button class="pf-c-dropdown__toggle pf-m-plain">

Note: Now try adding pf-m-plain to pf-c-dropdown__menu. Notice that nothing happens. This is because the modifier class does not apply to pf-c-dropdown__menu, it only applies to pf-c-dropdown__toggle. When applying modifier classes always refer to the documentation.

Practice adding modifier classes to components. Apply visual modifiers and state modifiers to the alert component.

1) Copy code to the index.html file.

Click the Copy to Editor button below to add HTML for three alert components.

<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) Modify the first alert to be the success variation.

To find the modifier class, use the documentation. Scroll down to the "usage" table and find the class that styles the success variation.

When the class is found, add it next to the first pf-c-alert class.

It should look like this: <div class="pf-c-alert pf-m-success">

3) Modify the second alert to have inline and warning variations.

Use the documentation to find the classes that will modify the alert to have these variations.

It should look like this: <div class="pf-c-alert pf-m-inline pf-m-warning">

4) Modify the third alert to have danger and info variations.

Use the documentation to find the classes that will modify the alert to have these variations.

It should look like this: <div class="pf-c-alert pf-m-info pf-m-danger">

Note: Notice that the color of the third alert changes to blue. It didn't change to read because the pf-m-danger modifier wasn't applied. The reason is that 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 codebase.

Note: Only every apply one modifier class to an element class when two modifier classes change the same styles.

In this step, create a custom warning variation for the label component. First, choose which component to add a modifier class to and then select an element to be modified. Second, create a modifier class name that represents the new style. Third, add the new modifier class to the HTML. Fourth, add the new styles to the stylesheet.

1) Copy code to the index.html file.

Click the Copy to Editor button below to add HTML for two label components.

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

2) Set up the styles file in myapp.css.

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

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

3) Decide on which styles to override for the component.

When adding new style overrides for a component, decide on which properties to change. For example, in the case of the label, you might choose to override the background color because the component already styles the background color.

4) Write a custom property to target the warning variation.

Add the custom property inside of the .pf-c-label{} block.

The custom property should follow the general formula discussed in the variable naming principles tutorial: --pf-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase.

In this case, it should be: --pf-c-label--m-warning--BackgroundColor

5) Assign the custom property to a global variable.

On the same line as the custom property added in step 5, assign the property to the global variable for warning color, which is --pf-global--warning-color--100.

The declaration inside of the .pf-c-label{} block should look like: --pf-c-label--m-warning--BackgroundColor: var(--pf-global--warning-color--100);

6) Add a new block to target styles for the warning variation.

In myapp.scss nest the block &.pf-m-warning{} inside of the .pf-c-label{} class, using the SCSS &.

It should look like this:

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

7) Override the original background color variable by setting its value to the new modifier variable that was created.

Inside of &.pf-m-warning{} add this line:

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

8) Add the warning modifier class to index.html.

a) Locate the second pf-c-label class in index.html.

b) Add the new modifier class next to the pf-c-label class, inside of the quotation marks.

It should look like this:

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