From 7e88111d0968c5e35d1e618ee773a7fc324d9b87 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 2 Jun 2025 14:32:37 -0400 Subject: [PATCH 1/3] docs(tooltips and popovers): Updates images for v6. --- .../components/popover/img/popover-alert.svg | 188 ++++++++++++++++++ .../popover/img/popover-behavior.svg | 32 +++ .../popover/img/popover-linked-question.svg | 146 ++++++++++++++ .../components/popover/img/popover-states.svg | 71 +++++++ .../components/popover/img/popover-usage.svg | 98 +++++++++ .../popover/img/popover-variations-alert.svg | 90 +++++++++ .../components/popover/popover.md | 35 +++- .../components/tooltip/img/bar-chart.svg | 66 ++++++ .../tooltip/img/disabled-button.svg | 116 +++++++++++ .../components/tooltip/img/kebab-icon.svg | 116 +++++++++++ .../components/tooltip/img/on-hyperlink.svg | 167 ++++++++++++++++ .../components/tooltip/tooltip.md | 18 +- 12 files changed, 1129 insertions(+), 14 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-behavior.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-variations-alert.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/bar-chart.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg new file mode 100644 index 0000000000..4b7bac11f6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-behavior.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-behavior.svg new file mode 100644 index 0000000000..42f7f3b016 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-behavior.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg new file mode 100644 index 0000000000..572256d28f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg new file mode 100644 index 0000000000..51028e72cd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg new file mode 100644 index 0000000000..a9c834ae52 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-variations-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-variations-alert.svg new file mode 100644 index 0000000000..05ef6f9974 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-variations-alert.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md index f1f4688846..33a41f9006 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md @@ -7,6 +7,8 @@ related: [ 'Tooltip' ] --- + +import '../components.css'; ## Usage Popovers are commonly used on form field labels, page titles or headings, or table column headings. Use popovers to: @@ -14,19 +16,27 @@ Popovers are commonly used on form field labels, page titles or headings, or tab - Help explain unfamiliar terms. - Provide context around a task. -popover for an email address form field explaining what the email address is used for +
+![Example showing a popover on a form field label.](./img/popover-usage.svg) +
When using a default popover to define a term or explain a concept, use a gray question-circle icon. Upon hover or click, the icon turns black. -Popover icon colors depending on state +
+![Examples of the different popover icon states.](./img/popover-states.svg) +
To provide more information to a user without an accompanying UI element, you can add a popover to a linked question. -popover for a linked question +
+![Example showing a popover on a linked question.](./img/popover-linked-question.svg) +
Use link button styling for the linked question, and add a blue question-circle icon before it. Clicking the link text triggers a popover, which answers the linked question. -alert popover opens when user clicks or hovers over an alert label +
+![Example showing an alert popover on a label in a table.](./img/popover-alert.svg) +
To provide additional information about an alert, use an alert popover. The alert popover will open upon hover or click. @@ -40,12 +50,15 @@ Both [tooltips](/components/tooltip/design-guidelines) and popovers provide more For information on other forms of on-screen help, see [Tooltip](/components/tooltip/design-guidelines) and [Hint](/components/hint/design-guidelines). ## Behavior + +
+![Example showing the different ways that a popover can be dismissed.](./img/popover-behavior.svg) +
+ Popovers are triggered when a user clicks on the popover icon and are dismissed in one of the following ways: -- The user clicks the exit icon. -- The user clicks anywhere on the screen outside the popover. -- The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.) - -popover example with placeholder text for the title and informational text +1. The user clicks the exit icon. +2. The user clicks anywhere on the screen outside the popover. +3. The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.) ## Variations @@ -55,7 +68,9 @@ These popovers are plain-text and do not include icons. They are used to convey ### Alert popovers These popover are similar to default popovers, the key difference being the inclusion of status-like headers for the following alert types: default, info, success, warning, and danger. -alert popover examples with placeholder text for the title and informational text +
+![Example of the different kinds of alert popovers.](./img/popover-variations-alert.svg) +
## Content considerations - Popover copy is longer than tooltip copy, but it should still be concise. Aim for 1–3 sentences. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/bar-chart.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/bar-chart.svg new file mode 100644 index 0000000000..a1d578dfb0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/bar-chart.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg new file mode 100644 index 0000000000..9341bdc28b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg new file mode 100644 index 0000000000..2a9c9f870e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg new file mode 100644 index 0000000000..9c34159a03 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md index 67ac9fb004..59848febd4 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md @@ -3,25 +3,35 @@ id: Tooltip section: components --- +import '../components.css'; + For information on other forms of on-screen help, see [popover](/components/popover/design-guidelines) and [hint](/components/hint/design-guidelines). ## Usage Use tooltips to: - Provide labels for unlabeled icons. - table with tooltip on an unlabeled kebab icon to provide more information +
+ ![Example showing a tooltip on an unlabeled kebab icon in a toolbar.](./img/kebab-icon.svg) +
- Provide additional information on a data point or element in a chart or table. - bar chart with a tooltip on data point to describe it as Asia Pacific +
+ ![Example showing a tooltip on a data point in a bar chart.](./img/bar-chart.svg) +
- Define new or unfamiliar UI elements that aren’t described directly in the user interface. For example, you can use a tooltip on a disabled button. - table with tooltip on a disabled edit button to provide more information regarding access +
+ ![Example showing a tooltip on a disabled edit button.](./img/disabled-button.svg) +
- Provide additional information on text or labels on hover. A way for users to see more information before clicking the element and being directed to a new page or producing an action on the page. - table with tooltip on clickable text to provide more information +
+ ![Example showing a tooltip on a hyperlink.](./img/on-hyperlink.svg) +
### Tooltip delay on hover By default, tooltips have a 300ms entry delay when hovering over an object. Although this is the recommended delay time, you may customize it via prop. For example, if you have a tooltip on an icon, and you would like for it to appear immediately on hover, you may set the delay to 0 ms. From bc0fc8243a2495a5e5a31c058ae18b5e07b0a6db Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 2 Jun 2025 16:28:45 -0400 Subject: [PATCH 2/3] Fixing line error. --- .../content/design-guidelines/components/popover/popover.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md index 33a41f9006..c91f807679 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md @@ -9,7 +9,7 @@ related: [ --- import '../components.css'; - + ## Usage Popovers are commonly used on form field labels, page titles or headings, or table column headings. Use popovers to: - Anticipate and answer questions for the user. From 5093f9f0b9340780688407e72809d0716d045a90 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 3 Jun 2025 10:35:33 -0400 Subject: [PATCH 3/3] Updating images for better visibility. --- .../components/popover/img/popover-alert.svg | 303 ++++++++---------- .../popover/img/popover-linked-question.svg | 199 +++++------- .../components/popover/img/popover-states.svg | 72 ++--- .../components/popover/img/popover-usage.svg | 134 ++++---- .../tooltip/img/disabled-button.svg | 175 +++++----- .../components/tooltip/img/kebab-icon.svg | 174 +++++----- .../components/tooltip/img/on-hyperlink.svg | 216 +++++-------- 7 files changed, 529 insertions(+), 744 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg index 4b7bac11f6..15196ea3fd 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-alert.svg @@ -1,188 +1,147 @@ - + - - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg index 572256d28f..d734d8597f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-linked-question.svg @@ -1,128 +1,87 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - - - - - - + + + + + - - - - + + + + - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - + + + + + + - + @@ -131,16 +90,8 @@ - - - - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg index 51028e72cd..1410021043 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-states.svg @@ -1,61 +1,43 @@ - + - + - - - - - - - - + + - + - - - - - - - - + + - + - - - - - - - - - - - - - + + + + + + + - - - - - - - - + + + + + + + + - - + + - + @@ -65,7 +47,7 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg index a9c834ae52..ec2566c6ee 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/img/popover-usage.svg @@ -1,80 +1,72 @@ - + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - + + + + + + + - - - - - + + + + + - - + + - - - - + + + + - + @@ -83,16 +75,16 @@ - + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg index 9341bdc28b..a85ce0e77a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/disabled-button.svg @@ -1,98 +1,91 @@ - + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - + + + - - - + + + - - - + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - + @@ -101,16 +94,8 @@ - - - - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg index 2a9c9f870e..43afde0854 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/kebab-icon.svg @@ -1,98 +1,92 @@ - + - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -101,16 +95,8 @@ - - - - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg index 9c34159a03..16bf1d7b6a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tooltip/img/on-hyperlink.svg @@ -1,149 +1,87 @@ - + - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + - - - + + + - + @@ -152,16 +90,8 @@ - - - - - - - - - +