Components: Add Popover (#29084)

* Upgrade G2 * Components: Add Popover * Update snapshot tests after upgrading G2 * Update documentation in README and JSDoc * Add missing namespace Co-authored-by: Jon Q <[email protected]>
WordPress · Mar 2, 2021 · 5cd4f3f · 5cd4f3f
1 parent e18750d
commit 5cd4f3f
Show file tree

Hide file tree

Showing 35 changed files with 1,005 additions and 139 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -45,10 +45,10 @@
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
-		"@wp-g2/components": "^0.0.156",
-		"@wp-g2/context": "^0.0.156",
-		"@wp-g2/styles": "^0.0.156",
-		"@wp-g2/utils": "^0.0.156",
+		"@wp-g2/components": "^0.0.159",
+		"@wp-g2/context": "^0.0.159",
+		"@wp-g2/styles": "^0.0.159",
+		"@wp-g2/utils": "^0.0.159",
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",

diff --git a/packages/components/src/ui/card/body.js b/packages/components/src/ui/card/body.js
@@ -52,7 +52,7 @@ function CardBody( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Card, CardBody } from '@wordpress/components/ui';
+ * import { Card, CardBody } from `@wordpress/components/ui`;
  *
  * <Card>
  * 	<CardBody>

diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js
@@ -66,7 +66,7 @@ function Card( props, forwardedRef ) {
  *   CardBody,
  *   CardFooter,
  *   Text,
- * } from `@wordpress/components/ui`
+ * } from `@wordpress/components/ui`;
  *
  * function Example() {
  *   return (

diff --git a/packages/components/src/ui/card/footer.js b/packages/components/src/ui/card/footer.js
@@ -53,7 +53,7 @@ function CardFooter( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Card, CardBody, CardFooter } from '@wordpress/components/ui';
+ * import { Card, CardBody, CardFooter } from `@wordpress/components/ui`;
  *
  * <Card>
  * 	<CardBody>...</CardBody>

diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js
@@ -47,7 +47,7 @@ function CardHeader( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Card, CardBody, CardHeader } from '@wordpress/components/ui';
+ * import { Card, CardBody, CardHeader } from `@wordpress/components/ui`;
  *
  * <Card>
  * 	<CardHeader>...</CardHeader>

diff --git a/packages/components/src/ui/card/test/__snapshots__/index.js.snap b/packages/components/src/ui/card/test/__snapshots__/index.js.snap
@@ -11,16 +11,16 @@ Snapshot Diff:
         title="WordPress.org"
       />
       <div
--       class="components-card-inner-body wp-components-card-inner-body css-1n7epz"
-+       class="components-scrollable wp-components-scrollable components-card-body wp-components-card-body css-1hp1ar"
+-       class="components-card-inner-body wp-components-card-inner-body ic-b8zmsr ic-192yz5d css-1n7epz"
++       class="components-scrollable wp-components-scrollable components-card-body wp-components-card-body ic-1reds0m ic-y3p1xi ic-192yz5d css-1hp1ar"
         data-g2-c16t="true"
 -       data-g2-component="CardInnerBody"
 +       data-g2-component="CardBody"
       >
         Code is Poetry.
       </div>
       <div
-        class="components-flex wp-components-flex components-card-footer wp-components-card-footer css-1qwgs3h"
+        class="components-flex wp-components-flex components-card-footer wp-components-card-footer ic-i2oc6g ic-17cs4ki ic-192yz5d css-1qwgs3h"
 `;
 
 exports[`props should render correctly 1`] = `
@@ -411,29 +411,29 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
-  class="components-surface wp-components-surface components-card wp-components-card emotion-6"
+  class="components-surface wp-components-surface components-card wp-components-card ic-1vr61kr ic-15506ld ic-192yz5d emotion-6"
   data-g2-c16t="true"
   data-g2-component="Card"
 >
   <div
-    class="emotion-3"
+    class="ic-192yz5d emotion-3"
     data-g2-component="CardContent"
   >
     <div
-      class="components-flex wp-components-flex components-card-header wp-components-card-header emotion-0"
+      class="components-flex wp-components-flex components-card-header wp-components-card-header ic-1jf72r7 ic-17cs4ki ic-192yz5d emotion-0"
       data-g2-c16t="true"
       data-g2-component="CardHeader"
       title="WordPress.org"
     />
     <div
-      class="components-scrollable wp-components-scrollable components-card-body wp-components-card-body emotion-1"
+      class="components-scrollable wp-components-scrollable components-card-body wp-components-card-body ic-1reds0m ic-y3p1xi ic-192yz5d emotion-1"
       data-g2-c16t="true"
       data-g2-component="CardBody"
     >
       Code is Poetry.
     </div>
     <div
-      class="components-flex wp-components-flex components-card-footer wp-components-card-footer emotion-2"
+      class="components-flex wp-components-flex components-card-footer wp-components-card-footer ic-i2oc6g ic-17cs4ki ic-192yz5d emotion-2"
       data-g2-c16t="true"
       data-g2-component="CardFooter"
     >
@@ -444,13 +444,13 @@ exports[`props should render correctly 1`] = `
   </div>
   <div
     aria-hidden="true"
-    class="components-elevation wp-components-elevation emotion-4"
+    class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-4"
     data-g2-c16t="true"
     data-g2-component="CardElevation"
   />
   <div
     aria-hidden="true"
-    class="components-elevation wp-components-elevation emotion-5"
+    class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-5"
     data-g2-c16t="true"
     data-g2-component="CardElevation"
   />
@@ -463,20 +463,20 @@ Snapshot Diff:
 + Second value
 
 @@ -7,16 +7,16 @@
-      class="css-1kk7lqu"
+      class="ic-192yz5d css-1kk7lqu"
       data-g2-component="CardContent"
     />
     <div
       aria-hidden="true"
--     class="components-elevation wp-components-elevation css-1vg495v"
-+     class="components-elevation wp-components-elevation css-1wkolpp"
+-     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d css-1vg495v"
++     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d css-1wkolpp"
       data-g2-c16t="true"
       data-g2-component="CardElevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation wp-components-elevation css-dgxm8l"
-+     class="components-elevation wp-components-elevation css-1zwi7l"
+-     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d css-dgxm8l"
++     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d css-1zwi7l"
       data-g2-c16t="true"
       data-g2-component="CardElevation"
     />