@patternfly/patternfly 5.0.0-alpha.67 → 5.0.0-alpha.68

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -377,13 +377,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   <div class="pf-v5-c-inline-edit__value">Static value</div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required pf-m-error">
         <input
           required
           value="Invalid state"
           aria-invalid="true"
           aria-label="Error state input example"
         />
+        <div class="pf-v5-c-form-control__utilities">
+          <div class="pf-v5-c-form-control__icon pf-m-status">
+            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+          </div>
+        </div>
       </div>
     </div>
     <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
@@ -464,13 +469,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-disabled">
               <input
+                disabled
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-1-text-input-disabled"
                 aria-label="Disabled text input"
-                disabled
               />
             </div>
           </div>
@@ -673,13 +678,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-disabled">
               <input
+                disabled
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-2-text-input-disabled"
                 aria-label="Disabled text input"
-                disabled
               />
             </div>
           </div>
@@ -895,154 +900,4 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
 | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
 
-<!--
-### Bulk edit dl (default)
-```hbs
-{{#> inline-edit inline-edit--type="form" inline-edit--id="bulk-edit-dl-example-default"}}
-  {{#> inline-edit-dl}}{{/inline-edit-dl}}
-{{/inline-edit}}
-```
-
-### Bulk edit dl (active)
-```hbs
-{{#> inline-edit inline-edit--type="form" inline-edit--id="bulk-edit-dl-example-active" inline-edit--modifier="pf-m-inline-editable"}}
-  {{#> inline-edit-dl}}{{/inline-edit-dl}}
-{{/inline-edit}}
-```
-
-### Inline edit dl example
-```hbs
-{{#> list list--type="dl" list--modifier="pf-m-2-col" list--attribute=(concat 'aria-label="Inline edit description list example"')}}
-  <div>
-    <dt>Name</dt>
-    <dd>main</dd>
-  </div>
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-1"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Description
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        test cluster
-      {{/inline-edit-value}}
-      {{#> inline-edit-input}}
-        {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="Text input description content" id="' inline-edit--id '-input"')}}
-      {{/inline-edit-input}}
-    </dd>
-  {{/inline-edit}}
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-2" inline-edit--modifier="pf-m-inline-editable"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Description (editable)
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        Text input description content
-      {{/inline-edit-value}}
-      {{#> inline-edit-input}}
-        {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="Text input description content" id="' inline-edit--id '-input"')}}
-      {{/inline-edit-input}}
-    </dd>
-  {{/inline-edit}}
-
-  <div>
-    <dt>Tags</dt>
-    <dd>
-      {{#> chip chip--type="div" chip--modifier="pf-m-read-only"}}
-        {{#> chip-content}}
-          {{#> chip-text}}
-            alertmanager=main
-          {{/chip-text}}
-        {{/chip-content}}
-      {{/chip}}
-    </dd>
-  </div>
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-3"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Value
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        True
-      {{/inline-edit-value}}
-      {{#> inline-edit-group inline-edit-group--attribute='role="radiogroup" aria-label="Radio group example"' inline-edit-group--modifier="pf-m-column"}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio1" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio1"')}}True{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio2" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio2"')}}False{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-      {{/inline-edit-group}}
-    </dd>
-  {{/inline-edit}}
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-4" inline-edit--modifier="pf-m-inline-editable"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Value
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        True
-      {{/inline-edit-value}}
-      {{#> inline-edit-group inline-edit-group--attribute='role="radiogroup" aria-label="Radio group example"' inline-edit-group--modifier="pf-m-column"}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio1" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio1"')}}True{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio2" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio2"')}}False{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-      {{/inline-edit-group}}
-    </dd>
-  {{/inline-edit}}
-{{/list}}
-```
--->
+    -->

package/docs/components/InputGroup/examples/InputGroup.md

@@ -20,7 +20,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     >Button</button>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-resize-both">
       <textarea
         name="textarea1"
         id="textarea1"
@@ -36,7 +36,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <div class="pf-v5-c-input-group">
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-resize-both">
       <textarea
         name="textarea2"
         id="textarea2"
@@ -66,7 +66,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-resize-both">
       <textarea
         name="textarea3"
         id="textarea3"
@@ -203,7 +203,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <div class="pf-v5-c-input-group__item pf-m-fill">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-required pf-m-error">
       <input
         required
         type="email"
@@ -212,6 +212,11 @@ Use the input group to extend form controls by adding text, buttons, selects, et
         aria-invalid="true"
         aria-label="Error state username example"
       />
+      <div class="pf-v5-c-form-control__utilities">
+        <div class="pf-v5-c-form-control__icon pf-m-status">
+          <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+        </div>
+      </div>
     </div>
   </div>
 </div>

package/docs/components/Login/examples/Login.md

@@ -48,7 +48,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
                 input="true"
@@ -64,10 +64,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="password"
                 id="login-demo-form-password"
                 name="login-demo-form-password"
@@ -261,7 +260,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required pf-m-error">
               <input
                 required
                 type="text"
@@ -269,6 +268,11 @@ wrapperTag: div
                 name="invalid-login-demo-form-username"
                 aria-invalid="true"
               />
+              <div class="pf-v5-c-form-control__utilities">
+                <div class="pf-v5-c-form-control__icon pf-m-status">
+                  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                </div>
+              </div>
             </div>
           </div>
           <div class="pf-v5-c-form__group"><label
@@ -280,7 +284,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required pf-m-error">
               <input
                 required
                 type="password"
@@ -288,6 +292,11 @@ wrapperTag: div
                 name="invalid-login-demo-form-password"
                 aria-invalid="true"
               />
+              <div class="pf-v5-c-form-control__utilities">
+                <div class="pf-v5-c-form-control__icon pf-m-status">
+                  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                </div>
+              </div>
             </div>
           </div>
           <div class="pf-v5-c-form__group">
@@ -474,10 +483,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -491,10 +499,9 @@ wrapperTag: div
               >&#42;</span></label>
 
             <div class="pf-v5-c-input-group">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
                   required
-                  input="true"
                   type="password"
                   id="login-demo-form-password"
                   name="login-demo-form-password"
@@ -702,10 +709,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -719,10 +725,9 @@ wrapperTag: div
               >&#42;</span></label>
 
             <div class="pf-v5-c-input-group">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
                   required
-                  input="true"
                   type="text"
                   id="login-demo-form-password"
                   name="login-demo-form-password"
@@ -969,10 +974,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -985,10 +989,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="password"
                 id="login-demo-form-password"
                 name="login-demo-form-password"

package/docs/components/NumberInput/examples/NumberInput.md

@@ -237,13 +237,13 @@ cssPrefix: pf-v5-c-number-input
       </button>
     </div>
     <div class="pf-v5-c-input-group__item pf-m-fill">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-disabled">
         <input
+          disabled
           type="number"
           value="100"
           name="number-input-disabled-name"
           aria-label="Number input"
-          disabled
         />
       </div>
     </div>
@@ -327,6 +327,11 @@ cssPrefix: pf-v5-c-number-input
           name="number-input-status-warning-name"
           aria-label="Number input"
         />
+        <div class="pf-v5-c-form-control__utilities">
+          <div class="pf-v5-c-form-control__icon pf-m-status">
+            <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+          </div>
+        </div>
       </div>
     </div>
     <div class="pf-v5-c-input-group__item">

package/docs/components/Pagination/examples/Pagination.md

@@ -732,7 +732,7 @@ cssPrefix: pf-v5-c-pagination
       </button>
     </div>
     <div class="pf-v5-c-pagination__nav-page-select">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-disabled">
         <input
           disabled
           aria-label="Current page"

package/docs/components/Select/examples/Select.md

@@ -764,13 +764,15 @@ The single select should be used when the user is selecting an option from a lis
 
   <div class="pf-v5-c-select__toggle pf-m-typeahead pf-m-disabled">
     <div class="pf-v5-c-select__toggle-wrapper">
-      <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
+      <div
+        class="pf-v5-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead"
+      >
         <input
+          disabled
           type="text"
           id="select-single-typeahead-disabled-typeahead"
           aria-label="Type to filter"
           placeholder="Choose a state"
-          disabled
         />
       </div>
     </div>