From 5cd4f3f76ba80049a4b45ccba9f5f023804730b2 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Tue, 2 Mar 2021 05:44:39 -0800 Subject: [PATCH] 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 --- package-lock.json | 67 ++-- packages/components/package.json | 8 +- packages/components/src/ui/card/body.js | 2 +- packages/components/src/ui/card/component.js | 2 +- packages/components/src/ui/card/footer.js | 2 +- packages/components/src/ui/card/header.js | 2 +- .../ui/card/test/__snapshots__/index.js.snap | 30 +- .../test/__snapshots__/index.js.snap | 36 +- .../test/__snapshots__/index.js.snap | 6 +- .../test/__snapshots__/index.js.snap | 12 +- .../ui/flex/test/__snapshots__/index.js.snap | 12 +- .../use-font-size-control.js | 2 +- .../test/__snapshots__/index.js.snap | 8 +- .../h-stack/test/__snapshots__/index.js.snap | 18 +- packages/components/src/ui/popover/README.md | 19 + .../components/src/ui/popover/component.js | 127 +++++++ packages/components/src/ui/popover/content.js | 63 ++++ packages/components/src/ui/popover/context.js | 10 + packages/components/src/ui/popover/index.js | 2 + .../src/ui/popover/stories/index.js | 26 ++ packages/components/src/ui/popover/styles.js | 34 ++ .../popover/test/__snapshots__/index.js.snap | 336 ++++++++++++++++++ .../components/src/ui/popover/test/index.js | 103 ++++++ packages/components/src/ui/popover/types.ts | 80 +++++ packages/components/src/ui/popover/utils.js | 20 ++ .../test/__snapshots__/index.js.snap | 2 +- .../spinner/test/__snapshots__/index.js.snap | 16 +- .../surface/test/__snapshots__/index.js.snap | 26 +- .../ui/text/test/__snapshots__/text.js.snap | 4 +- packages/components/src/ui/utils/index.js | 1 + packages/components/src/ui/utils/types.ts | 28 ++ .../ui/utils/use-isomorphic-layout-effect.js | 10 + .../v-stack/test/__snapshots__/index.js.snap | 18 +- .../ui/view/test/__snapshots__/index.js.snap | 10 +- .../test/__snapshots__/index.js.snap | 2 +- 35 files changed, 1005 insertions(+), 139 deletions(-) create mode 100644 packages/components/src/ui/popover/README.md create mode 100644 packages/components/src/ui/popover/component.js create mode 100644 packages/components/src/ui/popover/content.js create mode 100644 packages/components/src/ui/popover/context.js create mode 100644 packages/components/src/ui/popover/index.js create mode 100644 packages/components/src/ui/popover/stories/index.js create mode 100644 packages/components/src/ui/popover/styles.js create mode 100644 packages/components/src/ui/popover/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/popover/test/index.js create mode 100644 packages/components/src/ui/popover/types.ts create mode 100644 packages/components/src/ui/popover/utils.js create mode 100644 packages/components/src/ui/utils/use-isomorphic-layout-effect.js diff --git a/package-lock.json b/package-lock.json index d5b2a1bb89649e..ccf5e2de80e01a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1598,6 +1598,11 @@ } } }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz", @@ -12428,10 +12433,10 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/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", @@ -12465,14 +12470,14 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, "@wp-g2/components": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.156.tgz", - "integrity": "sha512-PLu1jgQ2LRV2gcnvWrC4QM0bpfxzC1N2f6e4dpvueawuXs2avq2GJKol9vDKT2AKsmuQt+GhreTkyGHR4HO0fA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.159.tgz", + "integrity": "sha512-FUuQpZxiq7ROfOrPcCcru3znc82r9VtVRSAACQpadRswIYr9aTaedWOCnaI0QU32rs51nh4bc2LwalZVtE7nkg==", "requires": { "@popperjs/core": "^2.5.4", - "@wp-g2/context": "^0.0.156", - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/context": "^0.0.159", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "csstype": "^3.0.3", "downshift": "^6.0.15", "framer-motion": "^2.1.0", @@ -12487,23 +12492,25 @@ } }, "@wp-g2/context": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.156.tgz", - "integrity": "sha512-T7Sy0Ti9W6I6+VpZJNlnseSuKXk0Q/UqJHsA3jO0wI3zWL/Vj3xl7ZEHFt1Hyae3gIqWKd84REkRK667274pXw==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.159.tgz", + "integrity": "sha512-FyWg2u2yjUfzoNv3W8L+JQKojYuYrauNU0SidqbGaPMrk5ftSkRHisCxiYQgfeBUSPVvEIVfIDacDfHZ6QjI8A==", "requires": { - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@emotion/hash": "^0.8.0", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "lodash": "^4.17.19" } }, "@wp-g2/create-styles": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.156.tgz", - "integrity": "sha512-wbMIfgUSnQKOsK+z0HVQDEntzZeltuN1ZePYn7o/eNbhDaA3nKKVQ9GhHcjPbNQxZlmPRKy4wPeQntWSOVGipA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.159.tgz", + "integrity": "sha512-cdoasY3TS2LoBHK/Erw57gcHAYex2csKULLoFcvlttMBMhsLT0tQWz6aJjJDFCW1QZAjjIuk+FXByOxyZwo2cg==", "requires": { "@emotion/core": "^10.1.1", + "@emotion/hash": "^0.8.0", "@emotion/is-prop-valid": "^0.8.8", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/utils": "^0.0.159", "create-emotion": "^10.0.27", "emotion": "^10.0.27", "emotion-theming": "^10.0.27", @@ -12514,18 +12521,18 @@ } }, "@wp-g2/styles": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.156.tgz", - "integrity": "sha512-KZfBEfgFhKbAsNqcYyrdG5uyk7BZ7jVcZ0HPC9iUFi58c7/+v+1qN5EkGxVwTg3F2iDR8J0iTbhrwKtckgcaTA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.159.tgz", + "integrity": "sha512-ZjhAKuLwNa+l5fJgwGzu7UzsUGJcW9D1EdfORKbGBv7Jw4+6P5xk+qf4CNYN6u3EE3J5r//CTF16f6Pbj2pjKg==", "requires": { - "@wp-g2/create-styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156" + "@wp-g2/create-styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159" } }, "@wp-g2/utils": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.156.tgz", - "integrity": "sha512-iBxzoecGlpPnX8pv6f4MfUulGf/cyYlsff8Vl4BHI6sU8kQc4lLDo2qyQ/723bqFPiVgAE5fDanyqKoVywxO3Q==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.159.tgz", + "integrity": "sha512-0bkbB1o+4J3qShVl5STiWVN9xl2+/LtiEi/sC4yx/yeFXN31Cr/HKtGVIjil2aRkL8Dk7imbaSJoMIyH5LfvsA==", "requires": { "copy-to-clipboard": "^3.3.1", "create-emotion": "^10.0.27", @@ -12543,9 +12550,9 @@ } }, "csstype": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", - "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" }, "fast-deep-equal": { "version": "3.1.3", diff --git a/packages/components/package.json b/packages/components/package.json index dda78a970395ea..77430c48c1e811 100644 --- 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 index 0da8e87bcc5aa9..dead8a7224a7e9 100644 --- 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`; * * * diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js index b6b4575c87d8ae..b6997ab0a56a5e 100644 --- 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 index 591d6d56aefa94..7ad190b11950bc 100644 --- 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`; * * * ... diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js index ae4b7a0a0c0723..f6c4f13a052eed 100644 --- 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`; * * * ... diff --git a/packages/components/src/ui/card/test/__snapshots__/index.js.snap b/packages/components/src/ui/card/test/__snapshots__/index.js.snap index 8fa1c1a188db77..e129d3afa248f9 100644 --- a/packages/components/src/ui/card/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/card/test/__snapshots__/index.js.snap @@ -11,8 +11,8 @@ Snapshot Diff: title="WordPress.org" />
Code is Poetry.
@@ -444,13 +444,13 @@ exports[`props should render correctly 1`] = `