@patternfly/patternfly 5.1.0-prerelease.28 → 5.1.0-prerelease.29

package/components/Button/button.css

@@ -432,6 +432,9 @@
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);

package/components/Button/button.scss

@@ -559,6 +559,10 @@
     color: var(--#{$button}--m-plain--Color);
     background-color: var(--#{$button}--m-plain--BackgroundColor);
 
+    &.pf-m-no-padding {
+      padding: 0;
+    }
+
     &:hover {
       --#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
       --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);

package/components/Card/card.css

@@ -36,7 +36,7 @@
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);

package/components/Card/card.scss

@@ -58,7 +58,7 @@
   --#{$card}--m-selectable--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
 
   // Selected selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --#{$card}--m-selectable--m-clickable--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
 
   // Clicked (pf-m-current) selectable AND clickable card

package/docs/components/Button/examples/Button.md

@@ -50,10 +50,20 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
 <br />
 <br />
+<span>Default plain button:</span>
 <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 <br />
+<span>No padding plain button:</span>
+<button
+  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+  type="button"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+<br />
 <br />
 <button class="pf-v5-c-button pf-m-control" type="button">Control</button>
 
@@ -65,10 +75,11 @@ cssPrefix: pf-v5-c-button
   <i class="fas fa-copy" aria-hidden="true"></i>
 </button>
 
-<br />
-<br />
-<br />
+```
+
+### Small buttons
 
+```html
 <button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">Primary</button>
 
 <button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">Secondary</button>
@@ -533,6 +544,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
 | `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
 | `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-no-padding` | `.pf-v5-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
 | `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
 | `.pf-m-block` | `.pf-v5-c-button` | Creates a block level button. |
 | `.pf-m-control` | `.pf-v5-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |

package/docs/components/Card/examples/Card.md

@@ -510,7 +510,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Single Selectable
+### Single selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -748,7 +748,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Clickable and Selectable
+### Clickable and selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -212,6 +212,112 @@ cssPrefix: pf-v5-c-clipboard-copy
     id="expandable-expanded-readonly-content"
   >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
 </div>
+<br />
+<h4>Code</h4>
+<div class="pf-v5-c-clipboard-copy">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      id="expandable-not-expanded-code-toggle"
+      aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
+      aria-controls="expandable-not-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control">
+      <input
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-not-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-not-expanded-code-copy-button"
+      aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    hidden
+    id="expandable-not-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} 
+  </pre>
+  </div>
+</div>
+<br />
+<div class="pf-v5-c-clipboard-copy pf-m-expanded">
+  <div class="pf-v5-c-clipboard-copy__group">
+    <button
+      class="pf-v5-c-button pf-m-control pf-m-expanded"
+      type="button"
+      id="expandable-expanded-code-toggle"
+      aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
+      aria-controls="expandable-expanded-code-content"
+    >
+      <div class="pf-v5-c-clipboard-copy__toggle-icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </div>
+    </button>
+    <span class="pf-v5-c-form-control pf-m-readonly">
+      <input
+        readonly
+        dir="ltr"
+        type="text"
+        value="{ &quot;menu&quot;: {     &quot;id&quot;: &quot;file&quot;,     &quot;value&quot;: &quot;File&quot;,     &quot;popup&quot;: {       &quot;menuitem&quot;: [         {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;},         {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;},         {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;}       ]     }   }} "
+        id="expandable-expanded-code-text-input"
+        aria-label="Copyable input"
+      />
+    </span>
+    <button
+      class="pf-v5-c-button pf-m-control"
+      type="button"
+      aria-label="Copy to clipboard"
+      id="expandable-expanded-code-copy-button"
+      aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-clipboard-copy__expandable-content"
+    contenteditable="true"
+    id="expandable-expanded-code-content"
+  >
+    <pre dir="ltr">{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }}
+  </pre>
+  </div>
+</div>
 
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.28",
+  "version": "5.1.0-prerelease.29",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.2.0",
+    "@patternfly/documentation-framework": "5.2.3",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.1",
     "@patternfly/react-core": "5.0.1",

package/patternfly-no-globals.css

@@ -7422,6 +7422,9 @@ button.pf-v5-c-breadcrumb__link {
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7821,7 +7824,7 @@ button.pf-v5-c-breadcrumb__link {
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);

package/patternfly-theme-dark-unversioned.css

@@ -7539,6 +7539,9 @@ button.pf-v5-c-breadcrumb__link {
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7938,7 +7941,7 @@ button.pf-v5-c-breadcrumb__link {
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);

package/patternfly.css

@@ -7539,6 +7539,9 @@ button.pf-v5-c-breadcrumb__link {
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7938,7 +7941,7 @@ button.pf-v5-c-breadcrumb__link {
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);