address matts comments

grommet · Oct 17, 2024 · 4c720f5 · 4c720f5
1 parent 6935680
commit 4c720f5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 14 deletions.
diff --git 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: () => <PopoverPreview />,
       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
@@ -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"
         />
         <PopoverContent gridArea="popover" />

diff --git 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 = () => {
             <Button
               align="center"
               justify="start"
-              icon={<CircleInformation size="small" />}
+              icon={<CircleInformation aria-hidden="true" size="small" />}
               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
@@ -41,9 +41,9 @@ export const PopoverSimpleExample = () => {
           align={{ bottom: 'top', left: 'left' }}
         >
           <Paragraph size="small" margin="none">
-            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.
           </Paragraph>
         </Popover>
       )}

diff --git 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'; 
 
 <Example
   figma="https://www.figma.com/design/5uOrsL2qk8XwwH8C1ZpDb6/HPE-Design-System-Components?m=auto&node-id=36369-2087&t=DQC2q9WBqfsNEi8I-1"
@@ -35,10 +36,34 @@ Contextual help, such as a term's definition or feature explanation, may be prov
 | Label | Region        | Purpose                              | Required | Notes                                      |
 | :---: | ------------- | ------------------------------------ | :------: | ------------------------------------------ |
 | **1** | **Title**     | Identifies the popover.               | Optional |                                            |
-| **2** | **Close button** | Closes the popover.                | Required |  Closed by mouse-click and/or keyboard. A popover also closes by any clicks outside of the popover. |
-| **3** | **Body**      | Provides contextual information.      | Required | May include non-text elements.             |
+| **2** | **Close button** | Closes the popover.                |  <Checkmark align='center' a11yTitle="true" size="small" />  |  Closed by mouse-click and/or keyboard. A popover also closes by any clicks outside of the popover. |
+| **3** | **Body**      | Provides contextual information.      |  <Checkmark a11yTitle="true" size="small" />  | May include non-text elements.             |
 | **4** | **Footer**    | Contains additional actions.          | Optional | May include anchors.                       |
 
+<StyleTable
+  data={[
+    {
+      label: 4,
+      property: 'pad',
+      value: 'small',
+    },
+    {
+      label: 5,
+      property: 'gap',
+      value: 'small',
+    },
+    {
+      label: 6,
+      property: 'round',
+      value: 'xsmall',
+    },
+    {
+      label: 7,
+      property: 'elevation',
+      value: 'medium',
+    },
+  ]}
+/>
 
 ## 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.