diff --git a/aries-site/src/data/structures/templates/templates.js b/aries-site/src/data/structures/templates/templates.js
index fa59b097f..8c03094ac 100644
--- a/aries-site/src/data/structures/templates/templates.js
+++ b/aries-site/src/data/structures/templates/templates.js
@@ -249,15 +249,27 @@ export const templates = [
name: 'Popover',
available: true,
cardOrder: 5,
- description: `A Popover is an overlay presenting contextual information related to a specific UI element.`,
+ description: `A Popover is an overlay presenting contextual information
+ related to a specific UI element.`,
preview: {
component: () => ,
background: 'background-front',
},
- seoDescription: `A Popover is an overlay presenting contextual information related to a specific UI element. It is revealed and closed by click events.`,
+ seoDescription: `A Popover is an overlay presenting contextual information
+ related to a specific UI element. It is revealed and closed by click
+ events.`,
relatedContent: ['Tip'],
sections: ['Use cases', 'Anatomy', 'Content guidelines', 'Accessibility'],
- tags: ['popup', 'pop up', 'popover', 'tip', 'tooltip', 'modal', 'popover menu', 'inline popover'],
+ tags: [
+ 'popup',
+ 'pop up',
+ 'popover',
+ 'tip',
+ 'tooltip',
+ 'modal',
+ 'popover menu',
+ 'inline popover',
+ ],
},
{
name: 'User feedback collection',
diff --git a/aries-site/src/examples/templates/popover/PopoverAnatomy.js b/aries-site/src/examples/templates/popover/PopoverAnatomy.js
index 4eb9bebf3..f8d13a5a4 100644
--- a/aries-site/src/examples/templates/popover/PopoverAnatomy.js
+++ b/aries-site/src/examples/templates/popover/PopoverAnatomy.js
@@ -110,7 +110,7 @@ export const PopoverAnatomy = () => {
alignSelf="center"
id="round"
kind="style"
- target={mobile ? '4' : 'round="xsmall"'}
+ target={mobile ? '6' : 'round="xsmall"'}
gridArea="annotation-round"
/>
diff --git a/aries-site/src/examples/templates/popover/PopoverInlineExample.js b/aries-site/src/examples/templates/popover/PopoverInlineExample.js
index 67de0e01e..2a6a1937c 100644
--- a/aries-site/src/examples/templates/popover/PopoverInlineExample.js
+++ b/aries-site/src/examples/templates/popover/PopoverInlineExample.js
@@ -31,8 +31,8 @@ const device = [
const columns = {
xsmall: ['auto'],
- small: ['auto'],
- medium: ['auto'],
+ small: ['auto', 'auto', 'auto'],
+ medium: ['auto', 'auto', 'auto'],
large: ['auto', 'auto', 'auto'],
xlarge: ['auto', 'auto', 'auto', 'auto'],
};
@@ -77,7 +77,7 @@ export const PopoverInlineExample = () => {
}
+ icon={}
onClick={handleButtonClick}
ref={targetRef}
a11yTitle="Informational help"
diff --git a/aries-site/src/examples/templates/popover/PopoverSimpleExample.js b/aries-site/src/examples/templates/popover/PopoverSimpleExample.js
index e2da98e44..ce0662656 100644
--- a/aries-site/src/examples/templates/popover/PopoverSimpleExample.js
+++ b/aries-site/src/examples/templates/popover/PopoverSimpleExample.js
@@ -41,9 +41,9 @@ export const PopoverSimpleExample = () => {
align={{ bottom: 'top', left: 'left' }}
>
- A popover's contents provide contextual information for the related UI element.
-
- Unlike a tooltip, a popover is revealed and closed by a click event and may contain interactive elements.
+ A popover's contents provide contextual information for the related
+ UI element. Unlike a tooltip, a popover is revealed and closed by a
+ click event and may contain interactive elements.
)}
diff --git a/aries-site/src/pages/templates/popover.mdx b/aries-site/src/pages/templates/popover.mdx
index 0d2fe3f52..5cfce3757 100644
--- a/aries-site/src/pages/templates/popover.mdx
+++ b/aries-site/src/pages/templates/popover.mdx
@@ -1,9 +1,10 @@
-import { Example } from '../../layouts';
+import { Example, StyleTable } from '../../layouts';
import {
PopoverAnatomy,
PopoverSimpleExample,
PopoverInlineExample,
} from '../../examples';
+import { Checkmark } from 'grommet-icons';
| Closed by mouse-click and/or keyboard. A popover also closes by any clicks outside of the popover. |
+| **3** | **Body** | Provides contextual information. | | May include non-text elements. |
| **4** | **Footer** | Contains additional actions. | Optional | May include anchors. |
+
## Content guidelines
@@ -56,7 +81,7 @@ Recommended practices:
Ensure accessibility by including an `a11yTitle` on:
- Triggers without labels, such as icon-only buttons.
-- The Close button, describing the Popover's contents.
+- The Close button.
Add `aria-haspopup` as well as `aria-controls` on:
- The trigger in which opens the popover.