@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.20

package/docs/components/Content/examples/Content.md

@@ -75,6 +75,33 @@ cssPrefix: pf-c-content
     <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
   </p>
   <hr />
+  <h3>Plain list example</h3>
+  <ol class="pf-m-plain">
+    <li>Donec blandit a lorem id convallis.</li>
+    <li>Cras gravida arcu at diam gravida gravida.</li>
+    <li>Integer in volutpat libero.</li>
+    <li>Donec a diam tellus.</li>
+    <li>
+      Etiam auctor nisl et.
+      <ul>
+        <li>Regular list</li>
+        <li>Donec blandit a lorem id convallis.</li>
+        <li>Cras gravida arcu at diam gravida gravida.</li>
+        <li>
+          Integer in volutpat libero.
+          <ol class="pf-m-plain">
+            <li>Nested plain list</li>
+            <li>Donec blandit a lorem id convallis.</li>
+            <li>Cras gravida arcu at diam gravida gravida.</li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li>Aenean nec tortor orci.</li>
+    <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+    <li>Vivamus maximus ultricies pulvinar.</li>
+  </ol>
+  <hr />
   <h3>Visited link example</h3>
   <p>
     <a class="pf-m-visited" href>Visited link</a>
@@ -136,11 +163,11 @@ cssPrefix: pf-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-c-content` as container. It can handle almost any HTML tag:
 
--   `<p>` paragraphs
--   `<ul>` `<ol>` `<dl>` lists
--   `<h1>` to `<h6>` headings
--   `<blockquote>` quotes
--   `<em>` and `<strong>`
+*   `<p>` paragraphs
+*   `<ul>` `<ol>` `<dl>` lists
+*   `<h1>` to `<h6>` headings
+*   `<blockquote>` quotes
+*   `<em>` and `<strong>`
 
 This `pf-c-content` class can be used in any context where you just want to (or can only) write some text.
 
@@ -148,7 +175,8 @@ This component is an exception to the variable system since we style type select
 
 ### Usage
 
-| Class           | Applied to                           | Outcome                                                                                                                   |
-| --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements.                                                     |
-| `.pf-m-visited` | `.pf-c-content`, `<a>`               | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
+| `.pf-m-visited` | `.pf-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
+| `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |

package/docs/components/ContextSelector/examples/context-selector.css

@@ -1,3 +1,7 @@
-#ws-core-c-context-selector-basic, #ws-core-c-context-selector-with-footer, #ws-core-c-context-selector-plain-with-text {
+#ws-core-c-context-selector-basic, #ws-core-c-context-selector-plain-with-text {
   min-height: 380px;
 }
+
+#ws-core-c-context-selector-with-footer {
+  min-height: 420px;
+}

package/docs/components/ContextSelector/examples/context-selector.md

@@ -24,23 +24,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -138,23 +139,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -260,23 +262,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -377,23 +380,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -496,23 +500,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -617,23 +622,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <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-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -729,32 +735,32 @@ cssPrefix: pf-c-context-selector
 
 ### Accessibility
 
-| Class                   | Applied to                                | Outcome                                                                                                        |
-| ----------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `aria-expanded="false"` | `.pf-c-context-selector__toggle`          | Indicates that the menu is hidden.                                                                             |
-| `aria-expanded="true"`  | `.pf-c-context-selector__toggle`          | Indicates that the menu is visible.                                                                            |
-| `aria-hidden="true"`    | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies.                                                                    |
-| `disabled`              | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
-| `aria-disabled="true"`  | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, indicates that it is unavailable.                                      |
-| `tabindex="-1"`         | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, removes it from keyboard focus.                                        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="false"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is visible. |
+| `aria-hidden="true"` | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies. |
+| `disabled` | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
 
 ### Usage
 
-| Class                                    | Applied to                                | Outcome                                                                         |
-| ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-context-selector`                 | `<div>`                                   | Initiates a context selector.                                                   |
-| `.pf-c-context-selector__toggle`         | `<button>`                                | Initiates a toggle.                                                             |
-| `.pf-c-context-selector__toggle-text`    | `<span>`                                  | Initiates text inside the toggle.                                               |
-| `.pf-c-context-selector__toggle-icon`    | `<span>`                                  | Inititiates the toggle icon wrapper.                                            |
-| `.pf-c-context-selector__menu`           | `<div>`                                   | Initiaties a menu.                                                              |
-| `.pf-c-context-selector__menu-search`    | `<div>`                                   | Initiates a container for the search input group.                               |
-| `.pf-c-context-selector__menu-list`      | `<ul>`                                    | Initiaties an unordered list of menu items that sits under the input container. |
-| `.pf-c-context-selector__menu-footer`    | `<div>`                                   | Initiaties a menu footer.                                                       |
-| `.pf-c-context-selector__menu-list-item` | `<li>`                                    | Initiaties a menu item.                                                         |
-| `.pf-m-expanded`                         | `.pf-c-context-selector`                  | Modifies for the expanded state.                                                |
-| `.pf-m-active`                           | `.pf-c-context-selector__toggle`          | Forces display of the active state of the toggle.                               |
-| `.pf-m-plain.pf-m-text`                  | `.pf-c-context-selector__toggle`          | Modifies the context selector toggle for plain text styles.                     |
-| `.pf-m-disabled`                         | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.                                        |
-| `.pf-m-full-height`                      | `.pf-c-context-selector`                  | Modifies a context selector to full height of parent. See masthead for use.     |
-| `.pf-m-large`                            | `.pf-c-context-selector`                  | Modifies toggle height to be large.                                             |
-| `.pf-m-page-insets`                      | `.pf-c-context-selector`                  | Modifies toggle and menu insets to match the responsive page chrome insets.     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-context-selector` | `<div>` | Initiates a context selector.|
+| `.pf-c-context-selector__toggle` | `<button>` | Initiates a toggle. |
+| `.pf-c-context-selector__toggle-text` | `<span>` | Initiates text inside the toggle. |
+| `.pf-c-context-selector__toggle-icon` | `<span>` | Inititiates the toggle icon wrapper. |
+| `.pf-c-context-selector__menu` | `<div>` | Initiaties a menu. |
+| `.pf-c-context-selector__menu-search` | `<div>` | Initiates a container for the search input group. |
+| `.pf-c-context-selector__menu-list` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
+| `.pf-c-context-selector__menu-footer` | `<div>` | Initiaties a menu footer. |
+| `.pf-c-context-selector__menu-list-item` | `<li>` | Initiaties a menu item. |
+| `.pf-m-expanded` | `.pf-c-context-selector` | Modifies for the expanded state. |
+| `.pf-m-active` | `.pf-c-context-selector__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-plain.pf-m-text` | `.pf-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
+| `.pf-m-disabled` | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.|
+| `.pf-m-full-height` | `.pf-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
+| `.pf-m-large` | `.pf-c-context-selector` | Modifies toggle height to be large. |
+| `.pf-m-page-insets` | `.pf-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |