diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md index d0e436b633..cf4a672fcd 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md @@ -12,71 +12,73 @@ Clipboard copy has 3 main components. ![Elements of the clipboard copy component.](./img/clipboard-copy-elements.svg) -1. **Copy content:** the content that will be copied to the user’s clipboard. -2. **Clipboard button:** completes the copy action when clicked. -3. **Tooltip:** informs users that clicking the button will copy the content to their clipboard, or that the content has successfully been copied. +1. **Copy content:** The content that will be copied to the user’s clipboard. +2. **Clipboard button:** Completes the copy action when clicked. +3. **Tooltip:** Informs users that clicking the button will copy the content to their clipboard. Once a user has clicked this button, this tooltip will update to convey success. ## Usage -Use clipboard copy to allow users to quickly and easily copy content to their clipboard to paste it in another location. Copy content can vary but is usually a line or block of text or code. This is useful for copying system generated key values, to both reduce user effort and the occurrence of entry errors, for example. The clipboard copy has a few features that can be used to customize the component to fit different use cases. +Use clipboard copy to allow users to quickly and easily copy content to their clipboard to paste it in another location. Copy content can vary but is usually a line or block of text or code. This is useful for copying system generated key values, to both reduce user effort and the occurrence of entry errors, for example. -### Features -The clipboard copy component can be editable or read-only and both types can optionally be expandable. - -**Editable** +### Examples +Clipboard copy can be used almost anywhere in a UI. It is commonly used in forms and definition lists. -An editable clipboard copy allows users to copy an editable text input box. +**Clipboard copy in a form**
-![Example of an editable clipboard copy component.](./img/clipboard-copy-editable.svg) +![Example of clipboard copy in a form.](./img/clipboard-copy-form.svg)
-**Read-only** - -A read-only clipboard copy only allows the user to copy a predefined line of text that is not editable by the user. +**Clipboard copy in a description list**
-![Example of a read-only clipboard copy component.](./img/clipboard-copy-readonly.svg) +![Example of clipboard copy in a description list.](./img/clipboard-copy-description-list.svg)
-**Expandable** - -An expandable clipboard copy allows for long lines of text to be stored in an expansion panel. Expanding the clipboard copy allows the user to view the full string that they can copy. +**Inline compact clipboard copy in context**
-![Example of an expandable clipboard copy component.](./img/clipboard-copy-expandable.svg) +![Example of an inline compact clipboard copy in context.](./img/clipboard-copy-inline-compact-4.svg)
-**Inline compact** +## Variations +The clipboard copy component has a few features that can be used to customize the component to fit different use cases. For example, it can be editable or read-only, with options for expansion. -An inline compact clipboard copy is placed directly inline with other text or used on its own when you want a lighter weight clipboard copy treatment. +### Editable + +An editable clipboard copy allows users to edit the text input. Their edited text will be copied when the clipboard button is clicked.
-![Example of an inline clipboard copy component with one action.](./img/clipboard-copy-inline-compact-1.svg) +![Example of an editable clipboard copy component.](./img/clipboard-copy-editable.svg)
-An inline compact clipboard copy can include one or two action buttons next to it. The second action is customizable and optional. +### Read-only + +A read-only clipboard copy only allows the user to copy a predefined line of text that is not editable by the user.
-![Example of an inline clipboard copy component with two actions.](./img/clipboard-copy-inline-compact-2.svg) +![Example of a read-only clipboard copy component.](./img/clipboard-copy-readonly.svg)
-### Clipboard copy in context -Clipboard copy can be used almost anywhere in a UI. It is commonly used in forms and definition lists. +### Expandable -**Clipboard copy in a form** +An expandable clipboard copy allows for long lines of text to be stored in an expansion panel. Expanding the clipboard copy allows the user to view the full string that they can copy.
-![Example of clipboard copy in a form.](./img/clipboard-copy-form.svg) +![Example of an expandable clipboard copy component.](./img/clipboard-copy-expandable.svg)
-**Clipboard copy in a description list** +When collapsed, users can edit the text input. When expanded, the text input becomes read-only and users can instead edit the text in the expansion panel. + +### Inline compact + +An inline compact clipboard copy is placed directly inline with other text or used on its own when you want a lighter weight clipboard copy treatment.
-![Example of clipboard copy in a description list.](./img/clipboard-copy-description-list.svg) +![Example of an inline clipboard copy component with one action.](./img/clipboard-copy-inline-compact-1.svg)
-**Inline compact clipboard copy in context** +An inline compact clipboard copy can include 1 or 2 action buttons next to it. The second action is customizable and optional.
-![Example of an inline compact clipboard copy in context.](./img/clipboard-copy-inline-compact-4.svg) +![Example of an inline clipboard copy component with two actions.](./img/clipboard-copy-inline-compact-2.svg)
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.png deleted file mode 100644 index 09c11ea362..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-url.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-url.png deleted file mode 100644 index 4f8942e729..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-url.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/description-list.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/description-list.png deleted file mode 100644 index cad1005266..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/description-list.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/editable.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/editable.png deleted file mode 100644 index 387d1ebfff..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/editable.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/expandable.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/expandable.png deleted file mode 100644 index 3104656415..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/expandable.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/form.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/form.png deleted file mode 100644 index 78c49fe660..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/form.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-in-context.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-in-context.png deleted file mode 100644 index d022d0cd39..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-in-context.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-one-action.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-one-action.png deleted file mode 100644 index 5e46d9a74b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-one-action.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-two-actions.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-two-actions.png deleted file mode 100644 index c621b08a87..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/inline-two-actions.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/read-only.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/read-only.png deleted file mode 100644 index f1c92a2811..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/read-only.png and /dev/null differ