@wordpress/nux 5.20.0 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 6.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 5.20.0 (2022-11-16)
 
 ## 5.19.0 (2022-11-02)

package/build-style/style-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {

package/build-style/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "5.20.0",
+	"version": "6.0.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,21 +31,21 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/deprecated": "^3.22.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
 		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/components/dot-tip/test/__snapshots__/index.js.snap

@@ -3,13 +3,14 @@
 exports[`DotTip should render correctly 1`] = `
 <div
   aria-label="Editor tips"
-  class="components-popover nux-dot-tip"
+  class="components-popover nux-dot-tip is-positioned"
   role="dialog"
-  style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
+  style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
   tabindex="-1"
 >
   <div
     class="components-popover__content"
+    style="max-height: 0px; overflow: auto;"
   >
     <p>
       It looks like you’re writing a letter. Would you like help?

package/src/components/dot-tip/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -12,23 +12,27 @@ import { DotTip } from '..';
 const noop = () => {};
 
 describe( 'DotTip', () => {
-	it( 'should not render anything if invisible', () => {
+	it( 'should not render anything if invisible', async () => {
 		render(
 			<DotTip>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
 
+		await act( () => Promise.resolve() );
+
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should render correctly', () => {
+	it( 'should render correctly', async () => {
 		render(
 			<DotTip isVisible setTimeout={ noop }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
 
+		await act( () => Promise.resolve() );
+
 		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
 	} );
 
@@ -44,6 +48,8 @@ describe( 'DotTip', () => {
 			</DotTip>
 		);
 
+		await act( () => Promise.resolve() );
+
 		await user.click( screen.getByRole( 'button', { name: 'Got it' } ) );
 
 		expect( onDismiss ).toHaveBeenCalled();
@@ -61,6 +67,8 @@ describe( 'DotTip', () => {
 			</DotTip>
 		);
 
+		await act( () => Promise.resolve() );
+
 		await user.click(
 			screen.getByRole( 'button', { name: 'Disable tips' } )
 		);