@patternfly/patternfly 4.212.1 → 4.214.1

package/components/FormControl/form-control.css

@@ -43,6 +43,8 @@
   --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
   --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+  --pf-c-form-control--readonly--m-plain--inset--base: 0;
   --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
   --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -163,6 +165,11 @@
   --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
   --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
 }
+.pf-c-form-control[readonly].pf-m-plain {
+  --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
+  --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
+  border-color: transparent;
+}
 .pf-c-form-control:hover {
   --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
 }

package/components/FormControl/form-control.scss

@@ -77,6 +77,10 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
 
+  // input readonly plain style
+  --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
+  --pf-c-form-control--readonly--m-plain--inset--base: 0;
+
   // Input m-success -- rename vars to m-success in breaking change release
   --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
@@ -241,6 +245,13 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
         --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
       }
     }
+
+    &.pf-m-plain {
+      --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
+      --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
+
+      border-color: transparent;
+    }
   }
 
   &:hover {

package/components/Icon/icon.css

@@ -0,0 +1,119 @@
+.pf-c-icon {
+  --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-inline--Width: 1em;
+  --pf-c-icon--m-inline--Height: 1em;
+  --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
+  --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
+  --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
+  --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
+  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
+  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
+  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
+  --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
+  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-inline__content--FontSize: 1em;
+  --pf-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pf-c-icon--Width);
+  height: var(--pf-c-icon--Height);
+}
+.pf-c-icon.pf-m-inline {
+  --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
+  --pf-c-icon__content--Color: currentcolor;
+  line-height: 1;
+}
+.pf-c-icon.pf-m-inline .pf-c-spinner {
+  --pf-c-spinner--diameter: 1em;
+}
+.pf-c-icon.pf-m-sm {
+  --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+}
+.pf-c-icon.pf-m-md {
+  --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+}
+.pf-c-icon.pf-m-lg {
+  --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+}
+.pf-c-icon.pf-m-xl {
+  --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
+  --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+}
+.pf-c-icon.pf-m-in-progress {
+  --pf-c-icon__content--Opacity: 0;
+  --pf-c-icon__progress--Opacity: 1;
+}
+
+.pf-c-icon__content,
+.pf-c-icon__progress {
+  font-size: var(--pf-c-icon__content--FontSize);
+}
+.pf-c-icon__content svg,
+.pf-c-icon__progress svg {
+  vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
+}
+.pf-c-icon__content.pf-m-sm,
+.pf-c-icon__progress.pf-m-sm {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+}
+.pf-c-icon__content.pf-m-md,
+.pf-c-icon__progress.pf-m-md {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+}
+.pf-c-icon__content.pf-m-lg,
+.pf-c-icon__progress.pf-m-lg {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+}
+.pf-c-icon__content.pf-m-xl,
+.pf-c-icon__progress.pf-m-xl {
+  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+}
+
+.pf-c-icon__content {
+  color: var(--pf-c-icon__content--Color);
+  opacity: var(--pf-c-icon__content--Opacity, 1);
+}
+.pf-c-icon__content.pf-m-danger {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
+}
+.pf-c-icon__content.pf-m-warning {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
+}
+.pf-c-icon__content.pf-m-success {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
+}
+.pf-c-icon__content.pf-m-info {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
+}
+.pf-c-icon__content.pf-m-default {
+  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
+}
+
+.pf-c-icon__progress {
+  position: absolute;
+  top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
+  opacity: var(--pf-c-icon__progress--Opacity, 0);
+  transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
+}

package/components/Icon/icon.scss

@@ -0,0 +1,149 @@
+.pf-c-icon {
+  // Size
+  --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
+
+  // When inline, use the parent's size
+  --pf-c-icon--m-inline--Width: 1em;
+  --pf-c-icon--m-inline--Height: 1em;
+
+  // Size modifiers
+  --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
+  --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
+
+  // Content variables
+  --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
+
+  // Content status
+  --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
+  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
+  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
+  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
+  --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
+  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-inline__content--FontSize: 1em;
+  --pf-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
+  --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
+  --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pf-c-icon--Width);
+  height: var(--pf-c-icon--Height);
+
+  // Inline modifier
+  &.pf-m-inline {
+    --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
+    --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
+    --pf-c-icon__content--Color: currentcolor;
+
+    line-height: 1;
+
+    .pf-c-spinner {
+      --pf-c-spinner--diameter: 1em;
+    }
+  }
+
+  // Size modifiers
+  &.pf-m-sm {
+    --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
+    --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+  }
+
+  &.pf-m-md {
+    --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
+    --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+  }
+
+  &.pf-m-lg {
+    --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
+    --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+  }
+
+  &.pf-m-xl {
+    --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
+    --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+  }
+
+  &.pf-m-in-progress {
+    --pf-c-icon__content--Opacity: 0;
+    --pf-c-icon__progress--Opacity: 1;
+  }
+}
+
+// Content and progress both have size modifiers
+.pf-c-icon__content,
+.pf-c-icon__progress {
+  font-size: var(--pf-c-icon__content--FontSize);
+
+  svg {
+    vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
+  }
+
+  // Size modifiers
+  &.pf-m-sm {
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+  }
+
+  &.pf-m-md {
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+  }
+
+  &.pf-m-lg {
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+  }
+
+  &.pf-m-xl {
+    --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+  }
+}
+
+// Content element
+.pf-c-icon__content {
+  color: var(--pf-c-icon__content--Color);
+  opacity: var(--pf-c-icon__content--Opacity, 1);
+
+  // Status modifiers
+  &.pf-m-danger {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
+  }
+
+  &.pf-m-warning {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
+  }
+
+  &.pf-m-success {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
+  }
+
+  &.pf-m-info {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
+  }
+
+  &.pf-m-default {
+    --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
+  }
+}
+
+// Progress element
+.pf-c-icon__progress {
+  position: absolute;
+  top: calc(50% + calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
+  opacity: var(--pf-c-icon__progress--Opacity, 0);
+  transform: translateY(calc(-50% - calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign))));
+}

package/components/ProgressStepper/progress-stepper.css

@@ -53,8 +53,7 @@
   --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
   --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
-  --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
+  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
   --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -148,10 +147,11 @@
   --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
   --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
   --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
-  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
+  --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
+  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
   --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
   --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
-  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
+  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
   --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
   --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
   grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -279,7 +279,10 @@
 }
 
 .pf-c-progress-stepper__step-main {
+  min-width: 0;
   margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
+  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
+  overflow-wrap: anywhere;
 }
 .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
   position: absolute;

package/components/ProgressStepper/progress-stepper.scss

@@ -124,8 +124,7 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
   --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
-  --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
+  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
   --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
 
@@ -201,10 +200,11 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
     --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
     --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
-    --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
+    --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
+    --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
     --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
     --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
-    --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
+    --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
     --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
     --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
 
@@ -366,7 +366,10 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
 // Step main
 .pf-c-progress-stepper__step-main {
+  min-width: 0;
   margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
+  text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
+  overflow-wrap: anywhere;
 
   // Draw a new border for vertical alignment using step main
   .pf-c-progress-stepper__step:not(:last-of-type) > &::before {

package/components/_all.scss

@@ -39,6 +39,7 @@
 @import "./FormControl/form-control";
 @import "./Hint/hint";
 @import "./HelperText/helper-text";
+@import "./Icon/icon";
 @import "./InlineEdit/inline-edit";
 @import "./InputGroup/input-group";
 @import "./JumpLinks/jump-links";

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -2808,18 +2808,7 @@ cssPrefix: pf-c-dual-list-selector
         <li class="pf-c-dual-list-selector__list-item" role="option">
           <div class="pf-c-dual-list-selector__list-item-row">
             <div class="pf-c-dual-list-selector__draggable">
-              <button
-                class="pf-c-button pf-m-plain"
-                type="button"
-                disabled
-                aria-pressed="false"
-                aria-label="Reorder"
-                id="draggable-list-item-2-draggable-button"
-                aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
-                aria-describedby="draggable-help"
-              >
-                <i class="fas fa-grip-vertical" aria-hidden="true"></i>
-              </button>
+              <i class="fas fa-grip-vertical" aria-hidden="true"></i>
             </div>
             <span class="pf-c-dual-list-selector__item">
               <span class="pf-c-dual-list-selector__item-main">
@@ -2837,17 +2826,7 @@ cssPrefix: pf-c-dual-list-selector
         <li class="pf-c-dual-list-selector__list-item" role="option">
           <div class="pf-c-dual-list-selector__list-item-row">
             <div class="pf-c-dual-list-selector__draggable">
-              <button
-                class="pf-c-button pf-m-plain"
-                type="button"
-                aria-pressed="false"
-                aria-label="Reorder"
-                id="draggable-list-item-3-draggable-button"
-                aria-labelledby="draggable-list-item-3-draggable-button draggable-list-item-3-item-text"
-                aria-describedby="draggable-help"
-              >
-                <i class="fas fa-grip-vertical" aria-hidden="true"></i>
-              </button>
+              <i class="fas fa-grip-vertical" aria-hidden="true"></i>
             </div>
             <span class="pf-c-dual-list-selector__item">
               <span class="pf-c-dual-list-selector__item-main">
@@ -2865,18 +2844,7 @@ cssPrefix: pf-c-dual-list-selector
         <li class="pf-c-dual-list-selector__list-item" role="option">
           <div class="pf-c-dual-list-selector__list-item-row pf-m-ghost-row">
             <div class="pf-c-dual-list-selector__draggable">
-              <button
-                class="pf-c-button pf-m-plain"
-                type="button"
-                disabled
-                aria-pressed="false"
-                aria-label="Reorder"
-                id="draggable-list-item-5-draggable-button"
-                aria-labelledby="draggable-list-item-5-draggable-button draggable-list-item-5-item-text"
-                aria-describedby="draggable-help"
-              >
-                <i class="fas fa-grip-vertical" aria-hidden="true"></i>
-              </button>
+              <i class="fas fa-grip-vertical" aria-hidden="true"></i>
             </div>
             <span class="pf-c-dual-list-selector__item">
               <span class="pf-c-dual-list-selector__item-main">
@@ -2894,17 +2862,7 @@ cssPrefix: pf-c-dual-list-selector
         <li class="pf-c-dual-list-selector__list-item" role="option">
           <div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
             <div class="pf-c-dual-list-selector__draggable">
-              <button
-                class="pf-c-button pf-m-plain"
-                type="button"
-                aria-pressed="false"
-                aria-label="Reorder"
-                id="draggable-list-item-7-draggable-button"
-                aria-labelledby="draggable-list-item-7-draggable-button draggable-list-item-7-item-text"
-                aria-describedby="draggable-help"
-              >
-                <i class="fas fa-grip-vertical" aria-hidden="true"></i>
-              </button>
+              <i class="fas fa-grip-vertical" aria-hidden="true"></i>
             </div>
             <span class="pf-c-dual-list-selector__item">
               <span class="pf-c-dual-list-selector__item-main">

package/docs/components/FileUpload/examples/FileUpload.md

@@ -152,7 +152,7 @@ cssPrefix: pf-c-file-upload
 ### File upload in form with error
 
 ```html
-<form novalidate class="pf-c-form">
+<form class="pf-c-form" novalidate>
   <div class="pf-c-form__group">
     <div class="pf-c-file-upload">
       <div class="pf-c-file-upload__file-select">