From 8b551e8a83e9cd1d00e5ff83e22d28e4078715c7 Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Fri, 3 Apr 2020 13:54:37 -0400
Subject: [PATCH 1/5] fix(clipboardcopy): replace copy button with button
 component

---
 .../clipboard-copy-group-copy.hbs             |  9 ---
 .../ClipboardCopy/clipboard-copy.scss         | 57 -------------------
 .../ClipboardCopy/examples/ClipboardCopy.md   | 43 +++++++-------
 3 files changed, 24 insertions(+), 85 deletions(-)
 delete mode 100644 src/patternfly/components/ClipboardCopy/clipboard-copy-group-copy.hbs

diff --git a/src/patternfly/components/ClipboardCopy/clipboard-copy-group-copy.hbs b/src/patternfly/components/ClipboardCopy/clipboard-copy-group-copy.hbs
deleted file mode 100644
index 1c0e1f1c8a..0000000000
--- a/src/patternfly/components/ClipboardCopy/clipboard-copy-group-copy.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<button class="pf-c-clipboard-copy__group-copy{{#if clipboard-copy-group-copy--modifier}} {{clipboard-copy-group-copy--modifier}}{{/if}}"
-  aria-label="Copy to clipboard"
-  type="button"
-  {{#if clipboard-copy-group-copy--attribute}}
-    {{{clipboard-copy-group-copy--attribute}}}
-  {{/if}}>
-  {{> @partial-block}}
-  <i class="fas fa-copy"></i>
-</button>
diff --git a/src/patternfly/components/ClipboardCopy/clipboard-copy.scss b/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
index 93aee2a8f7..fed46a3f31 100644
--- a/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
+++ b/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
@@ -20,20 +20,6 @@
   --pf-c-clipboard-copy__group-toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform: rotate(90deg);
 
-  // Clipboard copy copy
-  --pf-c-clipboard-copy__group-copy--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__group-copy--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__group-copy--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-clipboard-copy__group-copy--BorderTopColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-copy--BorderRightColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-global--BorderColor--200);
-  --pf-c-clipboard-copy__group-copy--BorderLeftColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-copy--hover--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-copy--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-clipboard-copy__group-copy--active--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-copy--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-clipboard-copy__group-copy--focus--BorderBottomColor: var(--pf-global--active-color--100);
-
   // Clipboard copy expanded content
   --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md);
@@ -119,49 +105,6 @@
   }
 }
 
-.pf-c-clipboard-copy__group-copy {
-  position: relative;
-  padding-right: var(--pf-c-clipboard-copy__group-copy--PaddingRight);
-  padding-left: var(--pf-c-clipboard-copy__group-copy--PaddingLeft);
-  border: none;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: "";
-    border: var(--pf-c-clipboard-copy__group-copy--BorderWidth) solid;
-    border-color: var(--pf-c-clipboard-copy__group-copy--BorderTopColor) var(--pf-c-clipboard-copy__group-copy--BorderRightColor) var(--pf-c-clipboard-copy__group-copy--BorderBottomColor) var(--pf-c-clipboard-copy__group-copy--BorderLeftColor);
-  }
-
-  &:hover,
-  &.pf-m-hover {
-    &::before {
-      --pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--hover--BorderBottomColor);
-    }
-  }
-
-  &:active,
-  &.pf-m-active {
-    &::before {
-      --pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--active--BorderBottomColor);
-
-      border-bottom-width: var(--pf-c-clipboard-copy__group-copy--active--BorderBottomWidth);
-    }
-  }
-
-  &:focus,
-  &.pf-m-focus {
-    &::before {
-      --pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--focus--BorderBottomColor);
-
-      border-bottom-width: var(--pf-c-clipboard-copy__group-copy--focus--BorderBottomWidth);
-    }
-  }
-}
-
 .pf-c-clipboard-copy__expandable-content {
   padding: var(--pf-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
   word-wrap: break-word;
diff --git a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
index 14f0b6696b..a0ce6fb2c3 100644
--- a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
+++ b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -10,8 +10,9 @@ cssPrefix: pf-c-clipboard-copy
   {{#> clipboard-copy-group}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="This is editable" id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
 {{/clipboard-copy}}
 <br />
@@ -19,8 +20,9 @@ cssPrefix: pf-c-clipboard-copy
   {{#> clipboard-copy-group}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="This is read-only" id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
 {{/clipboard-copy}}
 ```
@@ -33,8 +35,9 @@ cssPrefix: pf-c-clipboard-copy
     {{/clipboard-copy-group-toggle}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
   {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
     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.
@@ -47,8 +50,9 @@ cssPrefix: pf-c-clipboard-copy
     {{/clipboard-copy-group-toggle}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
   {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'contenteditable="true" id="content-' clipboard-copy--id '"')}}
     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.
@@ -62,8 +66,9 @@ cssPrefix: pf-c-clipboard-copy
     {{/clipboard-copy-group-toggle}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
   {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
     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.
@@ -76,8 +81,9 @@ cssPrefix: pf-c-clipboard-copy
     {{/clipboard-copy-group-toggle}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> clipboard-copy-group-copy clipboard-copy-group-copy--attribute=(concat 'id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-copy}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    {{/button}}
   {{/clipboard-copy-group}}
   {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
     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.
@@ -90,15 +96,15 @@ cssPrefix: pf-c-clipboard-copy
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
 | `aria-label="Show content"` | `.pf-c-clipboard-copy__group-toggle` |  Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
-| `aria-label="Copy to clipboard"` | `.pf-c-clipboard-copy__group-copy` |  Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
+| `aria-label="Copy to clipboard"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
 | `aria-label="[input label text]"` | `.pf-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
 | `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies.
 | `aria-controls="[id of expandable element]"` | `.pf-c-clipboard-copy__group-toggle` | Identifies the element controlled by the toggle button. **Required** |
 | `aria-expanded="true"` | `.pf-c-clipboard-copy__group-toggle` | Indicates that the expandable content is visible. |
 | `aria-expanded="false"` | `.pf-c-clipboard-copy__group-toggle` | Indicates that the expandable content is hidden. |
 | `hidden` | `.pf-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-clipboard-copy__group-copy`, `.pf-c-clipboard-copy__group-toggle` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
-| `type="button"` | `.pf-c-clipboard-copy__group-toggle`, `.pf-c-clipboard-copy__group-copy` | Prevents a form submission on click in the case that the component is placed inside of a `<form>`.
+| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-button.pf-m-control`, `.pf-c-clipboard-copy__group-toggle` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
+| `type="button"` | `.pf-c-clipboard-copy__group-toggle` | Prevents a form submission on click in the case that the component is placed inside of a `<form>`.
 
 ### Usage
 | Class | Applied to | Outcome |
@@ -107,9 +113,8 @@ cssPrefix: pf-c-clipboard-copy
 | `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
 | `.pf-c-clipboard-copy__group-toggle` | `<button>` | Initiates a toggle button that expands content. |
 | `.pf-c-clipboard-copy__group-toggle-icon` | `<i>` | Initiates a toggle button icon. |
-| `.pf-c-clipboard-copy__group-copy` | `<button>` | Initiates a copy button with the clipboard icon. **Required** |
 | `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
-| `.pf-m-hover` | `.pf-c-clipboard-copy__group-toggle`, `.pf-c-clipboard-copy__group-copy`| Modifies buttons for the hover state. |
-| `.pf-m-active` | `.pf-c-clipboard-copy__group-toggle`, `.pf-c-clipboard-copy__group-copy`| Modifies toggle button for the active state. |
-| `.pf-m-focus` | `.pf-c-clipboard-copy__group-toggle`, `.pf-c-clipboard-copy__group-copy`| Modifies toggle button for the focus state. |
+| `.pf-m-hover` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the hover state. |
+| `.pf-m-active` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the active state. |
+| `.pf-m-focus` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the focus state. |
 | `.pf-m-expanded` | `.pf-c-clipboard-copy__group-toggle` | Modifies toggle button for the expanded state. |

From 326f13dcba6604be334deb50f260d46b15955aa0 Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Tue, 7 Apr 2020 16:36:26 -0400
Subject: [PATCH 2/5] fix(clipboardcopy): replace toggle

---
 src/patternfly/components/Button/button.hbs   |  3 +
 .../components/Button/examples/Button.md      |  3 +-
 .../clipboard-copy-group-toggle.hbs           | 14 ----
 .../clipboard-copy-toggle-icon.hbs            |  6 ++
 .../ClipboardCopy/clipboard-copy.scss         | 83 ++-----------------
 .../ClipboardCopy/examples/ClipboardCopy.md   | 27 +++---
 6 files changed, 31 insertions(+), 105 deletions(-)
 delete mode 100644 src/patternfly/components/ClipboardCopy/clipboard-copy-group-toggle.hbs
 create mode 100644 src/patternfly/components/ClipboardCopy/clipboard-copy-toggle-icon.hbs

diff --git a/src/patternfly/components/Button/button.hbs b/src/patternfly/components/Button/button.hbs
index 3ff7718744..80ae244147 100644
--- a/src/patternfly/components/Button/button.hbs
+++ b/src/patternfly/components/Button/button.hbs
@@ -6,6 +6,9 @@
   {{else}}
     type="button"
   {{/if}}
+  {{#if button--IsExpanded}}
+    aria-expanded="true"
+  {{/if}}
   {{#if button--attribute}}
     {{{button--attribute}}}
   {{/if}}>
diff --git a/src/patternfly/components/Button/examples/Button.md b/src/patternfly/components/Button/examples/Button.md
index a231022c4d..8ef802fa8b 100644
--- a/src/patternfly/components/Button/examples/Button.md
+++ b/src/patternfly/components/Button/examples/Button.md
@@ -197,7 +197,7 @@ import './Button.css'
   Control active
 {{/button}}
 
-{{#> button button--modifier="pf-m-control pf-m-expanded"}}
+{{#> button button--IsExpanded="true" button--modifier="pf-m-control"}}
   Control expanded
 {{/button}}
 
@@ -255,6 +255,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `aria-label="[link description]"` | `a.pf-c-button` | The link text should adequately describe the link's purpose. If it does not, aria-label can provide more detailed interaction information. |
 | `disabled` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
 | `aria-disabled="true"` | `a.pf-c-button` | When a link element is used, indicates that it is unavailable. **Required when link is disabled** |
+| `aria-expanded="true"` | `.pf-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required**|
 | `tabindex="-1"` | `a.pf-c-button` | When a link element is used, removes it from keyboard focus. **Required when link is disabled** |
 
 ### Usage
diff --git a/src/patternfly/components/ClipboardCopy/clipboard-copy-group-toggle.hbs b/src/patternfly/components/ClipboardCopy/clipboard-copy-group-toggle.hbs
deleted file mode 100644
index 841d510905..0000000000
--- a/src/patternfly/components/ClipboardCopy/clipboard-copy-group-toggle.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<button class="pf-c-clipboard-copy__group-toggle{{#if clipboard-copy-group-toggle--modifier}} {{clipboard-copy-group-toggle--modifier}}{{/if}}"
-  aria-label="Show content"
-  type="button"
-  {{#if clipboard-copy--IsExpanded}}
-    aria-expanded="true"
-  {{else}}
-    aria-expanded="false"
-  {{/if}}
-  {{#if clipboard-copy-group-toggle--attribute}}
-    {{{clipboard-copy-group-toggle--attribute}}}
-  {{/if}}>
-  {{> @partial-block}}
-  <i class="fas fa-angle-right pf-c-clipboard-copy__group-toggle-icon" aria-hidden="true"></i>
-</button>
diff --git a/src/patternfly/components/ClipboardCopy/clipboard-copy-toggle-icon.hbs b/src/patternfly/components/ClipboardCopy/clipboard-copy-toggle-icon.hbs
new file mode 100644
index 0000000000..e914757955
--- /dev/null
+++ b/src/patternfly/components/ClipboardCopy/clipboard-copy-toggle-icon.hbs
@@ -0,0 +1,6 @@
+<div class="pf-c-clipboard-copy__toggle-icon{{#if clipboard-copy-toggle-icon--modifier}} {{clipboard-copy-toggle-icon--modifier}}{{/if}}"
+  {{#if clipboard-copy-toggle-icon--attribute}}
+    {{{clipboard-copy-toggle-icon--attribute}}}
+  {{/if}}>
+  <i class="fas fa-angle-right" aria-hidden="true"></i>
+</div>
diff --git a/src/patternfly/components/ClipboardCopy/clipboard-copy.scss b/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
index fed46a3f31..9d6b7f2cae 100644
--- a/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
+++ b/src/patternfly/components/ClipboardCopy/clipboard-copy.scss
@@ -1,24 +1,7 @@
 .pf-c-clipboard-copy {
-  // Clipboard copy toggle
-  --pf-c-clipboard-copy__group-toggle--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-clipboard-copy__group-toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-clipboard-copy__group-toggle--BorderTopColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-toggle--BorderRightColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
-  --pf-c-clipboard-copy__group-toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
-  --pf-c-clipboard-copy__group-toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-clipboard-copy__group-toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-clipboard-copy__group-toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-clipboard-copy__group-toggle--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-
-  // Icon
-  --pf-c-clipboard-copy__group-toggle-icon--Transition: .2s ease-in 0s;
-  --pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform: rotate(90deg);
+  // Toggle icon
+  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-c-clipboard-copy--m-expanded__toggle-icon--Transform: rotate(90deg);
 
   // Clipboard copy expanded content
   --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
@@ -35,16 +18,8 @@
 
   // Toggle button expanded
   &.pf-m-expanded {
-    .pf-c-clipboard-copy__group-toggle {
-      &::before {
-        --pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColor);
-
-        border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidth);
-      }
-
-      .pf-c-clipboard-copy__group-toggle-icon {
-        transform: var(--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform);
-      }
+    .pf-c-clipboard-copy__toggle-icon {
+      transform: var(--pf-c-clipboard-copy--m-expanded__toggle-icon--Transform);
     }
   }
 }
@@ -57,52 +32,8 @@
   }
 }
 
-.pf-c-clipboard-copy__group-toggle {
-  position: relative;
-  padding-right: var(--pf-c-clipboard-copy__group-toggle--PaddingRight);
-  padding-left: var(--pf-c-clipboard-copy__group-toggle--PaddingLeft);
-  border: none;
-  outline-offset: var(--pf-c-clipboard-copy__group-toggle--OutlineOffset);
-
-  .pf-c-clipboard-copy__group-toggle-icon {
-    transition: var(--pf-c-clipboard-copy__group-toggle-icon--Transition);
-  }
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: "";
-    border: var(--pf-c-clipboard-copy__group-toggle--BorderWidth) solid;
-    border-color: var(--pf-c-clipboard-copy__group-toggle--BorderTopColor) var(--pf-c-clipboard-copy__group-toggle--BorderRightColor) var(--pf-c-clipboard-copy__group-toggle--BorderBottomColor) var(--pf-c-clipboard-copy__group-toggle--BorderLeftColor);
-  }
-
-  &:hover,
-  &.pf-m-hover {
-    &::before {
-      --pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--hover--BorderBottomColor);
-    }
-  }
-
-  &:active,
-  &.pf-m-active {
-    &::before {
-      --pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--active--BorderBottomColor);
-
-      border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--active--BorderBottomWidth);
-    }
-  }
-
-  &:focus,
-  &.pf-m-focus {
-    &::before {
-      --pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--focus--BorderBottomColor);
-
-      border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidth);
-    }
-  }
+.pf-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-c-clipboard-copy__toggle-icon--Transition);
 }
 
 .pf-c-clipboard-copy__expandable-content {
diff --git a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
index a0ce6fb2c3..4951020f03 100644
--- a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
+++ b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -31,8 +31,9 @@ cssPrefix: pf-c-clipboard-copy
 <h4>Editable</h4>
 {{#> clipboard-copy clipboard-copy--id="3"}}
   {{#> clipboard-copy-group}}
-    {{#> clipboard-copy-group-toggle clipboard-copy-group-toggle--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-toggle}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+      {{> clipboard-copy-toggle-icon}}
+    {{/button}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
     {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
@@ -46,8 +47,9 @@ cssPrefix: pf-c-clipboard-copy
 <br>
 {{#> clipboard-copy clipboard-copy--id="4" clipboard-copy--IsExpanded="true"}}
   {{#> clipboard-copy-group}}
-    {{#> clipboard-copy-group-toggle clipboard-copy-group-toggle--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-toggle}}
+    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+      {{> clipboard-copy-toggle-icon}}
+    {{/button}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
     {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
@@ -62,8 +64,9 @@ cssPrefix: pf-c-clipboard-copy
 <h4>Read-only</h4>
 {{#> clipboard-copy clipboard-copy--id="5"}}
   {{#> clipboard-copy-group}}
-    {{#> clipboard-copy-group-toggle clipboard-copy-group-toggle--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-toggle}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+      {{> clipboard-copy-toggle-icon}}
+    {{/button}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
     {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
@@ -77,8 +80,9 @@ cssPrefix: pf-c-clipboard-copy
 <br>
 {{#> clipboard-copy clipboard-copy--id="6" clipboard-copy--IsExpanded="true"}}
   {{#> clipboard-copy-group}}
-    {{#> clipboard-copy-group-toggle clipboard-copy-group-toggle--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
-    {{/clipboard-copy-group-toggle}}
+    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+      {{> clipboard-copy-toggle-icon}}
+    {{/button}}
     {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
     {{/form-control}}
     {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
@@ -111,10 +115,5 @@ cssPrefix: pf-c-clipboard-copy
 | -- | -- | -- |
 | `.pf-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
 | `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
-| `.pf-c-clipboard-copy__group-toggle` | `<button>` | Initiates a toggle button that expands content. |
-| `.pf-c-clipboard-copy__group-toggle-icon` | `<i>` | Initiates a toggle button icon. |
+| `.pf-c-clipboard-copy__toggle-icon` | `<span>` | Initiates a toggle button icon. |
 | `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
-| `.pf-m-hover` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the hover state. |
-| `.pf-m-active` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the active state. |
-| `.pf-m-focus` | `.pf-c-clipboard-copy__group-toggle`| Modifies toggle button for the focus state. |
-| `.pf-m-expanded` | `.pf-c-clipboard-copy__group-toggle` | Modifies toggle button for the expanded state. |

From c3d0fb7ecca8b92ba0f54ba3dd1629c32fa4a0bc Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Tue, 7 Apr 2020 16:52:34 -0400
Subject: [PATCH 3/5] fix(clipboardcopy): make more updates

---
 src/patternfly/components/Button/button.hbs        |  2 +-
 .../ClipboardCopy/examples/ClipboardCopy.md        | 14 +++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/patternfly/components/Button/button.hbs b/src/patternfly/components/Button/button.hbs
index 80ae244147..1090d0f7f1 100644
--- a/src/patternfly/components/Button/button.hbs
+++ b/src/patternfly/components/Button/button.hbs
@@ -1,4 +1,4 @@
-<button class="pf-c-button{{#if button--modifier}} {{button--modifier}}{{/if}}"
+<button class="pf-c-button{{#if button--IsExpanded}} pf-m-expanded{{/if}}{{#if button--modifier}} {{button--modifier}}{{/if}}"
   {{#if button--IsSubmit}} 
     type="submit"
   {{else if button--IsReset}}
diff --git a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
index 4951020f03..f3dbcbbd2f 100644
--- a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
+++ b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -99,21 +99,17 @@ cssPrefix: pf-c-clipboard-copy
 ### Accessibility
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="Show content"` | `.pf-c-clipboard-copy__group-toggle` |  Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
-| `aria-label="Copy to clipboard"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
+| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
 | `aria-label="[input label text]"` | `.pf-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
-| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies.
-| `aria-controls="[id of expandable element]"` | `.pf-c-clipboard-copy__group-toggle` | Identifies the element controlled by the toggle button. **Required** |
-| `aria-expanded="true"` | `.pf-c-clipboard-copy__group-toggle` | Indicates that the expandable content is visible. |
-| `aria-expanded="false"` | `.pf-c-clipboard-copy__group-toggle` | Indicates that the expandable content is hidden. |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
+| `aria-controls="[id of expandable element]"` | `.pf-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
 | `hidden` | `.pf-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-button.pf-m-control`, `.pf-c-clipboard-copy__group-toggle` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
-| `type="button"` | `.pf-c-clipboard-copy__group-toggle` | Prevents a form submission on click in the case that the component is placed inside of a `<form>`.
+| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
 
 ### Usage
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
 | `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
-| `.pf-c-clipboard-copy__toggle-icon` | `<span>` | Initiates a toggle button icon. |
+| `.pf-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
 | `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |

From 8915a3343a8bb9a7b9fbf12553119d1f99b575d3 Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Wed, 8 Apr 2020 09:24:22 -0400
Subject: [PATCH 4/5] fix(clipboardcopy): add expanded to documentation

---
 .../components/ClipboardCopy/examples/ClipboardCopy.md          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
index f3dbcbbd2f..4f6b28b62d 100644
--- a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
+++ b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -113,3 +113,5 @@ cssPrefix: pf-c-clipboard-copy
 | `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
 | `.pf-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
 | `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
+| `.pf-m-expanded` | `.pf-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
+| `.pf-m-expanded` | `.pf-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
\ No newline at end of file

From 2d7c340ededcb043a48d9bf8c1f65a1d048a9c1d Mon Sep 17 00:00:00 2001
From: Christie Molloy <cmolloy@redhat.com>
Date: Wed, 8 Apr 2020 11:05:24 -0400
Subject: [PATCH 5/5] fix(clipboardcopy): fix all ids

---
 .../ClipboardCopy/examples/ClipboardCopy.md   | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
index 4f6b28b62d..703db1e32d 100644
--- a/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
+++ b/src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
@@ -5,91 +5,91 @@ cssPrefix: pf-c-clipboard-copy
 ---
 
 ## Examples
-```hbs title=Collapsed
-{{#> clipboard-copy clipboard-copy--id="1"}}
+```hbs title=Basic
+{{#> clipboard-copy clipboard-copy--id="basic-editable"}}
   {{#> clipboard-copy-group}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="This is editable" id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="This is editable" id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
 {{/clipboard-copy}}
 <br />
-{{#> clipboard-copy clipboard-copy--id="2"}}
+{{#> clipboard-copy clipboard-copy--id="basic-readonly"}}
   {{#> clipboard-copy-group}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="This is read-only" id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="This is read-only" id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
 {{/clipboard-copy}}
 ```
 
-```hbs title=Expanded
+```hbs title=Expandable
 <h4>Editable</h4>
-{{#> clipboard-copy clipboard-copy--id="3"}}
+{{#> clipboard-copy clipboard-copy--id="expandable-not-expanded-editable"}}
   {{#> clipboard-copy-group}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="' clipboard-copy--id '-toggle" aria-labelledby="' clipboard-copy--id '-toggle ' clipboard-copy--id '-text-input" aria-controls="' clipboard-copy--id '-content"')}}
       {{> clipboard-copy-toggle-icon}}
     {{/button}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="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." id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
-  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
+  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="' clipboard-copy--id '-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.
   {{/clipboard-copy-expandable-content}}
 {{/clipboard-copy}}
 <br>
-{{#> clipboard-copy clipboard-copy--id="4" clipboard-copy--IsExpanded="true"}}
+{{#> clipboard-copy clipboard-copy--id="expandable-expanded-editable" clipboard-copy--IsExpanded="true"}}
   {{#> clipboard-copy-group}}
-    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="' clipboard-copy--id '-toggle" aria-labelledby="' clipboard-copy--id '-toggle ' clipboard-copy--id '-text-input" aria-controls="' clipboard-copy--id '-content"')}}
       {{> clipboard-copy-toggle-icon}}
     {{/button}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
-  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'contenteditable="true" id="content-' clipboard-copy--id '"')}}
+  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'contenteditable="true" id="' clipboard-copy--id '-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.
   {{/clipboard-copy-expandable-content}}
 {{/clipboard-copy}}
 <br />
 <h4>Read-only</h4>
-{{#> clipboard-copy clipboard-copy--id="5"}}
+{{#> clipboard-copy clipboard-copy--id="expandable-not-expanded-readonly"}}
   {{#> clipboard-copy-group}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'id="' clipboard-copy--id '-toggle" aria-labelledby="' clipboard-copy--id '-toggle ' clipboard-copy--id '-text-input" aria-controls="' clipboard-copy--id '-content"')}}
       {{> clipboard-copy-toggle-icon}}
     {{/button}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
-  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
+  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="' clipboard-copy--id '-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.
   {{/clipboard-copy-expandable-content}}
 {{/clipboard-copy}}
 <br>
-{{#> clipboard-copy clipboard-copy--id="6" clipboard-copy--IsExpanded="true"}}
+{{#> clipboard-copy clipboard-copy--id="expandable-expanded-readonly" clipboard-copy--IsExpanded="true"}}
   {{#> clipboard-copy-group}}
-    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="toggle-' clipboard-copy--id '" aria-labelledby="toggle-' clipboard-copy--id ' text-input-' clipboard-copy--id '" aria-controls="content-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control pf-m-expanded" button--attribute=(concat 'id="' clipboard-copy--id '-toggle" aria-labelledby="' clipboard-copy--id '-toggle ' clipboard-copy--id '-text-input" aria-controls="' clipboard-copy--id '-content"')}}
       {{> clipboard-copy-toggle-icon}}
     {{/button}}
-    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="text-input-' clipboard-copy--id '" aria-label="Copyable input"')}}
+    {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'readonly type="text" value="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." id="' clipboard-copy--id '-text-input" aria-label="Copyable input"')}}
     {{/form-control}}
-    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="copy-button-' clipboard-copy--id '" aria-labelledby="copy-button-' clipboard-copy--id ' text-input-' clipboard-copy--id '"')}}
+    {{#> button button--modifier="pf-m-control" button--attribute=(concat 'aria-label="Copy to clipboard" id="' clipboard-copy--id '-copy-button" aria-labelledby="' clipboard-copy--id '-copy-button ' clipboard-copy--id '-text-input"')}}
       <i class="fas fa-copy" aria-hidden="true"></i>
     {{/button}}
   {{/clipboard-copy-group}}
-  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="content-' clipboard-copy--id '"')}}
+  {{#> clipboard-copy-expandable-content clipboard-copy-expandable-content--attribute=(concat 'id="' clipboard-copy--id '-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.
   {{/clipboard-copy-expandable-content}}
 {{/clipboard-copy}}