@wordpress/components 19.8.1 → 19.9.0

package/src/ui/spinner/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ Snapshot Diff:
       <div
         class="css-tada40-BarsView e1s9yo7h0"
 -       style="color: blue;"
-+       style="color: rgb(0, 0, 0);"
++       style="color: rgb(30, 30, 30);"
       >
         <div
           class="InnerBar1"
@@ -193,7 +193,7 @@ exports[`props should render correctly 1`] = `
   >
     <div
       class="emotion-4 emotion-5"
-      style="color: rgb(0, 0, 0);"
+      style="color: rgb(30, 30, 30);"
     >
       <div
         class="InnerBar1"
@@ -258,6 +258,6 @@ Snapshot Diff:
     >
       <div
         class="css-tada40-BarsView e1s9yo7h0"
-        style="color: rgb(0, 0, 0);"
+        style="color: rgb(30, 30, 30);"
       >
 `;

package/src/utils/colors-values.js

@@ -8,18 +8,12 @@ import { merge } from 'lodash';
  */
 import { rgba } from './colors';
 
-export const BASE = {
+const BASE = {
 	black: '#000',
 	white: '#fff',
 };
 
-/**
- * TODO: Continue to update values as "G2" design evolves.
- *
- * "G2" refers to the movement to advance the interface of the block editor.
- * https://github.com/WordPress/gutenberg/issues/18667
- */
-export const G2 = {
+const G2 = {
 	blue: {
 		medium: {
 			focus: '#007cba',
@@ -35,10 +29,6 @@ export const G2 = {
 		200: '#e0e0e0', // Used sparingly for light borders.
 		100: '#f0f0f0', // Used for light gray backgrounds.
 	},
-	darkGray: {
-		primary: '#1e1e1e',
-		heading: '#050505',
-	},
 	mediumGray: {
 		text: '#757575',
 	},
@@ -49,7 +39,7 @@ export const G2 = {
 	},
 };
 
-export const DARK_GRAY = {
+const DARK_GRAY = {
 	900: '#191e23',
 	800: '#23282d',
 	700: '#32373c',
@@ -63,7 +53,7 @@ export const DARK_GRAY = {
 	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
 };
 
-export const DARK_OPACITY = {
+const DARK_OPACITY = {
 	900: rgba( '#000510', 0.9 ),
 	800: rgba( '#00000a', 0.85 ),
 	700: rgba( '#06060b', 0.8 ),
@@ -76,7 +66,7 @@ export const DARK_OPACITY = {
 	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
 };
 
-export const DARK_OPACITY_LIGHT = {
+const DARK_OPACITY_LIGHT = {
 	900: rgba( '#304455', 0.45 ),
 	800: rgba( '#425863', 0.4 ),
 	700: rgba( '#667886', 0.35 ),
@@ -88,7 +78,7 @@ export const DARK_OPACITY_LIGHT = {
 	100: rgba( '#747474', 0.05 ),
 };
 
-export const LIGHT_GRAY = {
+const LIGHT_GRAY = {
 	900: '#a2aab2',
 	800: '#b5bcc2',
 	700: '#ccd0d4',
@@ -101,7 +91,7 @@ export const LIGHT_GRAY = {
 	placeholder: rgba( BASE.white, 0.65 ),
 };
 
-export const LIGHT_OPACITY_LIGHT = {
+const LIGHT_OPACITY_LIGHT = {
 	900: rgba( BASE.white, 0.5 ),
 	800: rgba( BASE.white, 0.45 ),
 	700: rgba( BASE.white, 0.4 ),
@@ -117,7 +107,7 @@ export const LIGHT_OPACITY_LIGHT = {
 // Additional colors.
 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
 
-export const BLUE = {
+const BLUE = {
 	wordpress: {
 		700: '#00669b',
 	},
@@ -139,19 +129,19 @@ export const BLUE = {
 	},
 };
 
-export const ALERT = {
+const ALERT = {
 	yellow: '#f0b849',
 	red: '#d94f4f',
 	green: '#4ab866',
 };
 
-export const ADMIN = {
+const ADMIN = {
 	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
 	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
 };
 
 // Namespaced values for raw colors hex codes.
-export const UI = {
+const UI = {
 	theme: ADMIN.theme,
 	background: BASE.white,
 	backgroundDisabled: LIGHT_GRAY[ 200 ],
@@ -169,10 +159,16 @@ export const UI = {
 // Using Object.assign instead of { ...spread } syntax helps TypeScript
 // to extract the correct type defs here.
 export const COLORS = Object.assign( {}, BASE, {
-	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
+	darkGray: DARK_GRAY,
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	/**
+	 * The main gray color object (since Apr 16, 2022).
+	 *
+	 * We are in the process of simplifying the colors in this file,
+	 * please prefer this `gray` object in the meantime.
+	 */
 	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,

package/tsconfig.json

@@ -3,7 +3,13 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"types": [ "gutenberg-env" ],
+		"types": [
+			"gutenberg-env",
+			"gutenberg-test-env",
+			"jest",
+			"@testing-library/jest-dom",
+			"snapshot-diff",
+		],
 		// Some errors in Reakit types with TypeScript 4.3
 		// Remove the following line when they've been addressed.
 		"skipLibCheck": true,
@@ -90,7 +96,7 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
-		"src/**/test",
+		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
 		"src/ui/__storybook-utils",
 		"src/ui/font-size-control"
 	]