npm - @patternfly/patternfly - Versions diffs - 4.206.3 → 4.208.1 - Mend

@patternfly/patternfly 4.206.3 → 4.208.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/base/_base.scss +2 -0
package/base/_common.scss +3 -1
package/base/_fonts.scss +1 -1
package/base/patternfly-common.css +1 -1
package/components/Button/button.css +20 -0
package/components/Button/button.scss +23 -0
package/components/Button/themes/dark/button.scss +1 -0
package/components/Check/check.css +9 -0
package/components/Check/check.scss +11 -0
package/components/ContextSelector/context-selector.css +6 -0
package/components/ContextSelector/context-selector.scss +7 -1
package/components/Dropdown/dropdown.css +6 -0
package/components/Dropdown/dropdown.scss +7 -0
package/components/ExpandableSection/expandable-section.css +18 -1
package/components/ExpandableSection/expandable-section.scss +25 -1
package/components/InputGroup/input-group.css +3 -0
package/components/InputGroup/input-group.scss +4 -0
package/components/Masthead/masthead.css +6 -3
package/components/Masthead/masthead.scss +4 -0
package/components/Menu/menu.css +0 -4
package/components/Menu/menu.scss +0 -4
package/components/Page/page.css +4 -0
package/components/Page/page.scss +6 -0
package/components/Select/select.css +6 -0
package/components/Select/select.scss +7 -0
package/components/Wizard/themes/dark/wizard.scss +2 -2
package/components/Wizard/wizard.css +2 -2
package/docs/components/Avatar/examples/Avatar.md +10 -10
package/docs/components/Button/examples/Button.md +19 -0
package/docs/components/Card/examples/Card.css +3 -3
package/docs/components/Check/examples/Check.md +33 -12
package/docs/components/CodeBlock/examples/CodeBlock.md +8 -6
package/docs/components/Dropdown/examples/Dropdown.md +2 -1
package/docs/components/ExpandableSection/examples/ExpandableSection.md +51 -13
package/docs/components/InputGroup/examples/InputGroup.md +1 -0
package/docs/components/Masthead/examples/masthead.md +5 -6
package/docs/components/MenuToggle/examples/MenuToggle.md +6 -6
package/docs/components/Page/examples/Page.md +1 -0
package/docs/components/TextInputGroup/examples/TextInputGroup.md +38 -0
package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
package/docs/demos/Alert/examples/Alert.md +3 -3
package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
package/docs/demos/Banner/examples/Banner.md +2 -2
package/docs/demos/CardView/examples/CardView.md +1 -1
package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
package/docs/demos/DataList/examples/DataList.md +4 -4
package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
package/docs/demos/Drawer/examples/Drawer.md +5 -5
package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
package/docs/demos/Masthead/examples/Masthead.md +388 -2
package/docs/demos/Modal/examples/Modal.md +6 -6
package/docs/demos/Nav/examples/Nav.md +8 -8
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
package/docs/demos/Page/examples/Page.md +933 -9
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
package/docs/demos/Table/examples/Table.md +14 -14
package/docs/demos/Tabs/examples/Tabs.md +8 -8
package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
package/docs/demos/Wizard/examples/Wizard.md +8 -8
package/package.json +3 -3
package/patternfly-base-no-reset.css +1 -1
package/patternfly-base.css +1 -1
package/patternfly-no-reset.css +81 -11
package/patternfly.css +81 -11
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED Viewed

@@ -761,8 +761,8 @@ cssPrefix: pf-d-description-list
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -1744,8 +1744,8 @@ cssPrefix: pf-d-description-list
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -3010,8 +3010,8 @@ cssPrefix: pf-d-description-list
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>

package/docs/demos/Drawer/examples/Drawer.md CHANGED Viewed

@@ -760,8 +760,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -1871,8 +1871,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -2808,8 +2808,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -3745,8 +3745,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -4695,8 +4695,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>

package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED Viewed

@@ -762,8 +762,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -1757,8 +1757,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -2752,8 +2752,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -3744,8 +3744,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -4688,8 +4688,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -5638,8 +5638,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>

package/docs/demos/Masthead/examples/Masthead.md CHANGED Viewed

@@ -1289,6 +1289,392 @@ wrapperTag: div
 ```
+### With expandable search, collapsed
+```html isFullscreen
+<div class="pf-c-page" id="masthead-expandable-search-example">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-masthead-expandable-search-example"
+  >Skip to content</a>
+  <header
+    class="pf-c-masthead"
+    id="masthead-expandable-search-example-masthead"
+  >
+    <span class="pf-c-masthead__toggle">
+      <button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        aria-label="Global navigation"
+      >
+        <i class="fas fa-bars" aria-hidden="true"></i>
+      </button>
+    </span>
+    <div class="pf-c-masthead__main">
+      <a class="pf-c-masthead__brand" href="#">
+        <picture
+          class="pf-c-brand pf-m-picture"
+          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+        >
+          <source
+            media="(min-width: 768px)"
+            srcset="/assets/images/logo__pf--reverse-on-md.svg"
+          />
+          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+          <img
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          />
+        </picture>
+      </a>
+    </div>
+    <div class="pf-c-masthead__content">
+      <div
+        class="pf-c-toolbar pf-m-full-height pf-m-static"
+        id="masthead-expandable-search-example-masthead-toolbar"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section">
+            <div class="pf-c-toolbar__group pf-m-align-right">
+              <div class="pf-c-toolbar__item">
+                <div class="pf-c-input-group pf-m-plain">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-label="Open search"
+                  >
+                    <i class="fas fa-fw fa-search" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="masthead-expandable-search-example-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-masthead-expandable-search-example"
+  >
+    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+          <ol class="pf-c-breadcrumb__list">
+            <li class="pf-c-breadcrumb__item">
+              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a
+                href="#"
+                class="pf-c-breadcrumb__link pf-m-current"
+                aria-current="page"
+              >Section landing</a>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <div class="pf-l-gallery pf-m-gutter">
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+```
+### With expandable search, expanded
+```html isFullscreen
+<div class="pf-c-page" id="masthead-expandable-search-expanded-example">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-masthead-expandable-search-expanded-example"
+  >Skip to content</a>
+  <header
+    class="pf-c-masthead"
+    id="masthead-expandable-search-expanded-example-masthead"
+  >
+    <span class="pf-c-masthead__toggle">
+      <button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        aria-label="Global navigation"
+      >
+        <i class="fas fa-bars" aria-hidden="true"></i>
+      </button>
+    </span>
+    <div class="pf-c-masthead__main">
+      <a class="pf-c-masthead__brand" href="#">
+        <picture
+          class="pf-c-brand pf-m-picture"
+          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+        >
+          <source
+            media="(min-width: 768px)"
+            srcset="/assets/images/logo__pf--reverse-on-md.svg"
+          />
+          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+          <img
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          />
+        </picture>
+      </a>
+    </div>
+    <div class="pf-c-masthead__content">
+      <div
+        class="pf-c-toolbar pf-m-full-height pf-m-static"
+        id="masthead-expandable-search-expanded-example-masthead-toolbar"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section">
+            <div class="pf-c-toolbar__group pf-m-align-right">
+              <div class="pf-c-toolbar__item">
+                <div class="pf-c-input-group pf-m-plain">
+                  <div class="pf-c-text-input-group">
+                    <div class="pf-c-text-input-group__main pf-m-icon">
+                      <span class="pf-c-text-input-group__text">
+                        <span class="pf-c-text-input-group__icon">
+                          <i class="fas fa-fw fa-search"></i>
+                        </span>
+                        <input
+                          class="pf-c-text-input-group__text-input"
+                          type="text"
+                          value
+                          aria-label="Type to filter"
+                          placeholder="Search"
+                        />
+                      </span>
+                    </div>
+                  </div>
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-label="Close"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="masthead-expandable-search-expanded-example-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-masthead-expandable-search-expanded-example"
+  >
+    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+          <ol class="pf-c-breadcrumb__list">
+            <li class="pf-c-breadcrumb__item">
+              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+              <a
+                href="#"
+                class="pf-c-breadcrumb__link pf-m-current"
+                aria-current="page"
+              >Section landing</a>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <div class="pf-l-gallery pf-m-gutter">
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+          <div class="pf-c-card">
+            <div class="pf-c-card__body">This is a card</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+```
 ### Advanced integration with menu options
 ```html isFullscreen
@@ -2048,8 +2434,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -3006,8 +3392,8 @@ wrapperTag: div
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>

package/docs/demos/Modal/examples/Modal.md CHANGED Viewed

@@ -759,8 +759,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -1717,8 +1717,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -2684,8 +2684,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -3641,8 +3641,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -4598,8 +4598,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>
@@ -5555,8 +5555,8 @@ section: components
                   <span class="pf-c-dropdown__toggle-image">
                     <img
                       class="pf-c-avatar"
-                      src="/assets/images/img_avatar.svg"
                       alt="Avatar image"
+                      src="/assets/images/img_avatar-light.svg"
                     />
                   </span>
                   <span class="pf-c-dropdown__toggle-text">Ned Username</span>