docs(tooltips): Creates separate tooltips writing guide.

packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md

@@ -34,11 +34,7 @@ Both tooltips and [popovers](/components/popover/design-guidelines) provide more
 - Tooltips appear on hover, while popovers appear on click.   
 
 ## Content considerations
-- Keep your tooltips clear and concise. Use the fewest number of words without sacrificing meaning.
-- If the tooltip is a full sentence, include a period at the end. If the tooltip is a fragment, do not include a period at the end.
-- Use tooltips for additional information. Don’t use tooltips for information critical to a user completing a task, such as password character requirements.  
-- Tooltips should provide new and valuable information. Never use a tooltip to repeat information already available in the UI.
-- Don’t use tooltips with question-circle icons to present contextual information in forms and other areas. Instead, use a [popover](/components/popover/design-guidelines).  
+For content guidance, refer to [our tooltip writing guide.](/ux-writing/tooltips)
 
 ## Accessibility
 
@@ -49,4 +45,3 @@ For information regarding accessibility, visit the [tooltip accessibility](/comp
 
 
 
-

packages/documentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md

@@ -0,0 +1,85 @@
+---
+id: Tooltips
+section: UX writing
+---
+
+import ArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-up-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import SearchMinusIcon from '@patternfly/react-icons/dist/esm/icons/search-minus-icon';
+import SearchPlusIcon from '@patternfly/react-icons/dist/esm/icons/search-plus-icon';
+import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import ExportIcon from '@patternfly/react-icons/dist/esm/icons/export-icon';
+import TaskIcon from '@patternfly/react-icons/dist/esm/icons/task-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { Button, Icon, Tooltip, Split, SplitItem } from '@patternfly/react-core'
+
+A **tooltip** is a message box that is shown when a UI element, like a button or an icon, is in a hover state. They contain short descriptions that offer additional information to help users better understand elements within a UI.
+
+<Tooltip content={"This is a tooltip. It contains useful information that solves all your problems."} aria="describedby" >
+      <Button>I'm a button with a tooltip!</Button>
+</Tooltip>
+<br />
+<br />
+
+When writing tooltips, follow these general recommendations:
+
+<div class="ws-content-table">
+
+| **Don't** | **Do** |
+|----------------------------------------|---------------------|
+| Don't repeat information that is already available in the UI. | Do write content that is succinct, clear, and effective. |
+| Don't use tooltips for critical information. | Do use tooltips for additional, non-essential information. |
+| Don't end sentence fragments in a period. | Do end full sentences in a period. |
+| Don’t place tooltips on question-circle icons (<QuestionCircleIcon />). Instead, use a [popover](/components/popover).   | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.|
+
+</div>
+
+You can find additional guidance in [the tooltip design guidelines.](/components/tooltip/design-guidelines)
+
+## Icon tooltips 
+Icons allow you to save space in a UI and provide users with another recognition method.
+
+It's often important to place tooltips on icons, especially when they aren't accompanied by a text label. This helps ensure that your users can hover over an icon to understand the action that it is linked to. When you use a tooltip with an icon, limit the content to 1 or 2 words that identify the icon accurately and clearly. 
+
+For example: 
+
+<Split>
+<SplitItem>
+<Tooltip content={"Settings"} aria="labelledby"> <Button variant="plain"> <CogIcon /></Button> </Tooltip>
+</SplitItem>
+<SplitItem>
+<Tooltip content={"Copy"} aria="labelledby"> <Button variant="plain"> <CopyIcon /></Button> </Tooltip>
+</SplitItem>
+<SplitItem>
+<Tooltip content={"Search"} aria="labelledby"> <Button variant="plain"> <SearchIcon /></Button> </Tooltip>
+</SplitItem>
+</Split>
+<br />
+
+In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table: 
+
+|**Icon**  | **Name** | **Tooltip content** | **Note** |
+|------------|-----------|-----------|---- |
+| <ArrowCircleUpIcon /> | fa-arrow-circle-up | Upgrade |
+| <BellIcon />  | fa-bell | Notifications |
+| <CogIcon />  | fa-cog | Settings |
+| <CopyIcon />  | fa-copy | Copy |
+| <DownloadIcon />  | fa-download | Download |
+| <EllipsisVIcon />  | fa-ellipsis-v | More options | 
+| <PencilAltIcon />  | fa-pencil-alt | Edit |
+| <SearchIcon />  | fa-search | Search |
+| <SearchMinusIcon />  | fa-search-minus | Search minus | 
+| <SearchPlusIcon />  | fa-search-plus | Search plus |
+| <SyncAltIcon />  | fa-sync-alt | Sync, Refresh, or Running | Choose the best fit for your scenario.|
+| <TrashIcon />  | fa-trash | Delete | 
+| <ExportIcon />  | pficon-export | Export |
+| <TaskIcon />  | pficon-task | Tasks | 
+
+You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons)

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js

@@ -29,7 +29,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import * as iconUnicodes from '@patternfly/patternfly/assets/icons/iconUnicodes.json';
 
 export const IconsTable = () => {
-  const columns = ['Icon', 'Name', 'Style', 'React', 'Usage/tooltip', 'Unicode'];
+  const columns = ['Icon', 'Name', 'Style', 'React', 'Usage', 'Unicode'];
   const [searchValue, setSearchValue] = React.useState('');
   const [isCopied, setCopied] = React.useState(false);
   const [sortByIndex, setSortByIndex] = React.useState(1);
@@ -74,7 +74,6 @@ export const IconsTable = () => {
       return icon.Name.toLowerCase().includes(searchValue.toLowerCase()) ||
         icon.Contextual_usage?.toLowerCase().includes(searchValue.toLowerCase()) ||
         icon.Extra_context?.toLowerCase().includes(searchValue.toLowerCase()) ||
-        icon.Label?.toLowerCase().includes(searchValue.toLowerCase()) ||
         icon.React_name.toLowerCase().includes(searchValue.toLowerCase()) ||
         (typeof icon.Type === "string" && icon.Type.toLowerCase().includes(searchValue.toLowerCase())) ||
         (Array.isArray(icon.Type) && icon.Type.filter((type) => type.toLowerCase().includes(searchValue.toLowerCase())).length > 0)
@@ -160,11 +159,6 @@ export const IconsTable = () => {
                       <br/><br/>{icon.Extra_context}
                     </React.Fragment>
                   )}
-                  {icon.Label && (
-                    <React.Fragment>
-                      <br/><br/>Tooltip:{icon.Label}
-                    </React.Fragment>
-                  )}
                 </Td>
                 <Td dataLabel={columns[6]}>
                   <Tooltip

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.js

@@ -62,7 +62,6 @@ export const iconsData = [
     "React_name": "ArrowCircleUpIcon",
     "Type": "Status",
     "Contextual_usage": "Represents status: an item (such as a VM) is up",
-    "Label": "Upgrade"
   },
   {
     "Style": "fas",
@@ -105,7 +104,6 @@ export const iconsData = [
       "React_name": "BellIcon",
       "Type": "Framework",
       "Contextual_usage": "Indicates the ability to open a notification drawer.",
-      "Label": "Notifications"
     },
     {
       "Style": "",
@@ -193,7 +191,6 @@ export const iconsData = [
     "React_name": "CogIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates availability of configurable settings",
-    "Label": "Settings"
   },
   {
     "Style": "fas",
@@ -229,7 +226,6 @@ export const iconsData = [
     "React_name": "CopyIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the availability of a copy to clipboard function",
-    "Label": "Copy"
   },
   {
     "Style": "pficon",
@@ -272,15 +268,13 @@ export const iconsData = [
     "React_name": "DownloadIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates a download function is available",
-    "Label": "Download"
   },
   {
     "Style": "fas",
     "Name": "fa-ellipsis-v",
     "React_name": "EllipsisVIcon",
     "Type": "Framework",
     "Contextual_usage": "Indicates a contextual menu of actions or additional actions is available",
-    "Label": "More options"
   },
   {
     "Style": "fas",
@@ -518,7 +512,6 @@ export const iconsData = [
     "React_name": "PencilAltIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to edit an item",
-    "Label": "Edit"
   },
   {
     "Style": "fas",
@@ -610,23 +603,20 @@ export const iconsData = [
     "React_name": "SearchIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates that that user may perform a search",
-    "Label": "Search"
   },
   {
     "Style": "fas",
     "Name": "fa-search-minus",
     "React_name": "SearchMinusIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to zoom out",
-    "Label": "Search minus"
   },
   {
     "Style": "fas",
     "Name": "fa-search-plus",
     "React_name": "SearchPlusIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to zoom in",
-    "Label": "Search plus"
   },
   {
     "Style": "fas",
@@ -656,7 +646,6 @@ export const iconsData = [
     "React_name": "SyncAltIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the availability of a sync action",
-    "Label": "Sync; Refresh; Running"
   },
   {
     "Style": "fas",
@@ -685,7 +674,6 @@ export const iconsData = [
     "React_name": "TaskIcon",
     "Type": "Framework, Object",
     "Contextual_usage": "Indicates the ability to open a task drawer. Also can represent tasks or activity.",
-    "Label": "Tasks"
   },
   {
     "Style": "fas",
@@ -728,7 +716,6 @@ export const iconsData = [
     "React_name": "TrashIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to delete",
-    "Label": "Delete"
   },
   {
     "Style": "fas",
@@ -989,7 +976,6 @@ export const iconsData = [
     "React_name": "ExportIcon",
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to export a file or other data",
-    "Label": "Export"
   },
   {
     "Style": "pficon",

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.md

@@ -134,7 +134,9 @@ The Font Awesome icons included with PatternFly are Font Awesome solid (FAS) web
 
 ## All icons 
 
-The following table outlines details for all icons supported by PatternFly, as well as guidance for using each icon.
+The following table outlines details for all icons supported by PatternFly, as well as guidance for using each icon. 
+
+For guidance related to tooltips for icons, [refer to our tooltips writing guide.](/ux-writing/tooltips#icon-tooltips)
 
 Select any single icon in the table to download it as an SVG. You can also download all icon SVGs <a href="https://github.com/patternfly/patternfly-design/raw/master/resources/patternfly-icon-svgs/patternfly-icons.zip">on GitHub</a>.