@patternfly/patternfly 4.162.1 → 4.164.1

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -0,0 +1,214 @@
+.pf-c-multiple-file-upload {
+  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
+  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
+
+  // main
+  --pf-c-multiple-file-upload__main--TextAlign: center;
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateAreas:
+    "title"
+    "upload"
+    "info";
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
+  --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__main--BorderStyle: dashed;
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+
+  // title
+  --pf-c-multiple-file-upload__title--Display: grid;
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
+
+  // title icon
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
+
+  // title text separator
+  --pf-c-multiple-file-upload__title-text-separator--Display: block;
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
+
+  // info
+  --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
+
+  // drag-over
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
+
+  // horizontal
+  --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+  --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+    "title upload"
+    "info upload";
+  --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
+  --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+
+  // status progress
+  --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
+
+  // status progress icon
+  --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
+
+  // status item
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+  --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
+
+  // status item icon
+  --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
+
+  // status item close
+  --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+
+  // status item progress
+  --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+  --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
+
+  // status item progress text
+  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
+
+  // status item progress size
+  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
+
+  display: grid;
+  gap: var(--pf-c-multiple-file-upload--Gap);
+  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+
+  &.pf-m-horizontal {
+    --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+    --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
+    --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+    --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+    --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
+    --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
+    --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+    --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
+    --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+    --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+    --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
+  }
+
+  &.pf-m-drag-over {
+    --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+    --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
+    --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
+    --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
+    --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
+    --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
+  }
+}
+
+.pf-c-multiple-file-upload__main {
+  display: grid;
+  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
+  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
+  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
+  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
+}
+
+.pf-c-multiple-file-upload__title {
+  display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__title--Gap);
+  grid-area: title;
+}
+
+.pf-c-multiple-file-upload__title-icon {
+  color: var(--pf-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-c-multiple-file-upload__title-text {
+  color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-c-multiple-file-upload__title-text-separator {
+  display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
+  margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
+}
+
+.pf-c-multiple-file-upload__upload {
+  grid-area: upload;
+}
+
+.pf-c-multiple-file-upload__info {
+  grid-area: info;
+  margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
+  font-size: var(--pf-c-multiple-file-upload__info--FontSize);
+  color: var(--pf-c-multiple-file-upload__info--Color);
+}
+
+.pf-c-multiple-file-upload__status,
+.pf-c-multiple-file-upload__status-item-main {
+  min-width: 0;
+}
+
+.pf-c-multiple-file-upload__status-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-progress-icon {
+  color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item--Gap);
+  padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
+  padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
+  border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
+
+  &:first-child {
+    --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
+  }
+}
+
+.pf-c-multiple-file-upload__status-item-icon {
+  color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-close {
+  margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
+}
+
+.pf-c-multiple-file-upload__status-item-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-text {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-size {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
+}

package/components/Truncate/truncate.css

@@ -0,0 +1,46 @@
+.pf-c-truncate {
+  --pf-c-truncate--FontSize: 1rem;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+  text-align: left;
+}
+
+@supports (text-overflow: "") {
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    text-overflow: "";
+  }
+}
+@supports not (text-overflow: "") {
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    font-size: 0;
+  }
+  .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
+    font-size: var(--pf-c-truncate--FontSize);
+  }
+}
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}

package/components/Truncate/truncate.scss

@@ -0,0 +1,56 @@
+.pf-c-truncate {
+  --pf-c-truncate--FontSize: 1rem;
+
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+
+// Start, end
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// End
+.pf-c-truncate__end {
+  direction: rtl;
+  text-align: left;
+}
+
+// text-overflow: <string>
+@supports (text-overflow: "") {
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    text-overflow: "";
+  }
+}
+
+// text-overflow: ellipsis
+@supports not (text-overflow: "") {
+  // Start + end = middle truncation
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    font-size: 0; // shrink ellipsis size to zero
+
+    .pf-c-truncate__text {
+      font-size: var(--pf-c-truncate--FontSize);
+    }
+  }
+}
+
+// safari not supported
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}

package/components/_all.scss

@@ -51,6 +51,7 @@
 @import "./Menu/menu";
 @import "./MenuToggle/menu-toggle";
 @import "./ModalBox/modal-box";
+@import "./MultipleFileUpload/multiple-file-upload";
 @import "./Nav/nav";
 @import "./NotificationBadge/notification-badge";
 @import "./NotificationDrawer/notification-drawer";
@@ -83,6 +84,7 @@
 @import "./Title/title";
 @import "./ToggleGroup/toggle-group";
 @import "./Tooltip/tooltip";
+@import "./Truncate/truncate";
 @import "./NumberInput/number-input";
 @import "./TreeView/tree-view";
 @import "./Wizard/wizard";

package/docs/components/Dropdown/examples/Dropdown.css

@@ -9,7 +9,8 @@
 #ws-core-c-dropdown-primary-toggle,
 #ws-core-c-dropdown-secondary-toggle,
 #ws-core-c-dropdown-menu-item-icons,
-#ws-core-c-dropdown-aria-disabled-items {
+#ws-core-c-dropdown-aria-disabled-items,
+#ws-core-c-dropdown-plain-with-text {
   min-height: 310px;
 }
 

package/docs/components/Dropdown/examples/Dropdown.md

@@ -571,6 +571,144 @@ cssPrefix: pf-c-dropdown
 
 ```
 
+### Plain with text
+
+```html
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
+    id="plain-with-text-example-disabled-button"
+    aria-expanded="false"
+    type="button"
+    disabled
+  >
+    <span class="pf-c-dropdown__toggle-text">Custom text</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="plain-with-text-example-disabled-button"
+    hidden
+  >
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+    </li>
+    <li>
+      <a
+        class="pf-c-dropdown__menu-item pf-m-disabled"
+        href="#"
+        aria-disabled="true"
+        tabindex="-1"
+      >Disabled link</a>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li class="pf-c-divider" role="separator"></li>
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+    </li>
+  </ul>
+</div>&nbsp;
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
+    id="plain-with-text-example-button"
+    aria-expanded="false"
+    type="button"
+  >
+    <span class="pf-c-dropdown__toggle-text">Custom text</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="plain-with-text-example-button"
+    hidden
+  >
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+    </li>
+    <li>
+      <a
+        class="pf-c-dropdown__menu-item pf-m-disabled"
+        href="#"
+        aria-disabled="true"
+        tabindex="-1"
+      >Disabled link</a>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li class="pf-c-divider" role="separator"></li>
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+    </li>
+  </ul>
+</div>&nbsp;
+<div class="pf-c-dropdown pf-m-expanded">
+  <button
+    class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
+    id="plain-with-text-example-expanded-button"
+    aria-expanded="true"
+    type="button"
+  >
+    <span class="pf-c-dropdown__toggle-text">Custom text (expanded)</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="plain-with-text-example-expanded-button"
+  >
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+    </li>
+    <li>
+      <a
+        class="pf-c-dropdown__menu-item pf-m-disabled"
+        href="#"
+        aria-disabled="true"
+        tabindex="-1"
+      >Disabled link</a>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li class="pf-c-divider" role="separator"></li>
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+    </li>
+  </ul>
+</div>
+
+```
+
 ### Badge toggle
 
 ```html
@@ -1434,6 +1572,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
     </li>
   </ul>
 </div>
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-primary"
+    id="dropdown-primary-toggle-disabled-button"
+    aria-expanded="false"
+    type="button"
+    disabled
+  >
+    <span class="pf-c-dropdown__toggle-text">Disabled</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="dropdown-primary-toggle-disabled-button"
+    hidden
+  >
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+    </li>
+    <li>
+      <a
+        class="pf-c-dropdown__menu-item pf-m-disabled"
+        href="#"
+        aria-disabled="true"
+        tabindex="-1"
+      >Disabled link</a>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li class="pf-c-divider" role="separator"></li>
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+    </li>
+  </ul>
+</div>
 
 ```
 
@@ -1527,6 +1710,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
     </li>
   </ul>
 </div>
+<div class="pf-c-dropdown">
+  <button
+    class="pf-c-dropdown__toggle pf-m-secondary"
+    id="dropdown-secondary-toggle-disabled-button"
+    aria-expanded="false"
+    type="button"
+    disabled
+  >
+    <span class="pf-c-dropdown__toggle-text">Disabled</span>
+    <span class="pf-c-dropdown__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </button>
+  <ul
+    class="pf-c-dropdown__menu"
+    aria-labelledby="dropdown-secondary-toggle-disabled-button"
+    hidden
+  >
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+    </li>
+    <li>
+      <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+    </li>
+    <li>
+      <a
+        class="pf-c-dropdown__menu-item pf-m-disabled"
+        href="#"
+        aria-disabled="true"
+        tabindex="-1"
+      >Disabled link</a>
+    </li>
+    <li>
+      <button
+        class="pf-c-dropdown__menu-item"
+        type="button"
+        disabled
+      >Disabled action</button>
+    </li>
+    <li class="pf-c-divider" role="separator"></li>
+    <li>
+      <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+    </li>
+  </ul>
+</div>
 
 ```
 
@@ -1704,6 +1932,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
 | `.pf-m-action`                          | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown.                                                                                                                                                                                           |
 | `.pf-m-text`                            | `.pf-c-dropdown__menu-item`                | Modifies a menu item to be non-interactive text.                                                                                                                                                                                                                                                       |
 | `.pf-m-plain`                           | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with no border.                                                                                                                                                                                                                                                         |
+| `.pf-m-text`                            | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle for the text variation.                                                                                                                                                                                                                                                   |
 | `.pf-m-primary`                         | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with primary styles.                                                                                                                                                                                                                                                    |
 | `.pf-m-secondary`                       | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with secondary styles.                                                                                                                                                                                                                                                  |
 | `.pf-m-full-height`                     | `.pf-c-dropdown`                           | Modifies a dropdown to full height of parent. See masthead for use.                                                                                                                                                                                                                                    |