@wordpress/components 19.15.0 → 20.0.0

package/src/utils/colors-values.js

@@ -1,180 +1,85 @@
-/**
- * External dependencies
- */
-import { merge } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { rgba } from './colors';
 
-const BASE = {
-	black: '#000',
-	white: '#fff',
-};
+const white = '#fff';
 
-const G2 = {
-	blue: {
-		medium: {
-			focus: '#007cba',
-			focusDark: '#fff',
-		},
-	},
-	gray: {
-		900: '#1e1e1e',
-		700: '#757575', // Meets 4.6:1 text contrast against white.
-		600: '#949494', // Meets 3:1 UI or large text contrast against white.
-		400: '#ccc',
-		300: '#ddd', // Used for most borders.
-		200: '#e0e0e0', // Used sparingly for light borders.
-		100: '#f0f0f0', // Used for light gray backgrounds.
-	},
-	mediumGray: {
-		text: '#757575',
-	},
-	lightGray: {
-		ui: '#949494',
-		secondary: '#ccc',
-		tertiary: '#e7e8e9',
-	},
+// Matches the grays in @wordpress/base-styles
+const GRAY = {
+	900: '#1e1e1e',
+	800: '#2f2f2f',
+	/** Meets 4.6:1 text contrast against white. */
+	700: '#757575',
+	/** Meets 3:1 UI or large text contrast against white. */
+	600: '#949494',
+	400: '#ccc',
+	/** Used for most borders. */
+	300: '#ddd',
+	/** Used sparingly for light borders. */
+	200: '#e0e0e0',
+	/** Used for light gray backgrounds. */
+	100: '#f0f0f0',
 };
 
 const DARK_GRAY = {
-	900: '#191e23',
-	800: '#23282d',
-	700: '#32373c',
-	600: '#40464d',
 	500: '#555d66', // Use this most of the time for dark items.
-	400: '#606a73',
 	300: '#6c7781', // Lightest gray that can be used for AA text contrast.
-	200: '#7e8993',
 	150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.
-	100: '#8f98a1',
-	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
-};
-
-const DARK_OPACITY = {
-	900: rgba( '#000510', 0.9 ),
-	800: rgba( '#00000a', 0.85 ),
-	700: rgba( '#06060b', 0.8 ),
-	600: rgba( '#000913', 0.75 ),
-	500: rgba( '#0a1829', 0.7 ),
-	400: rgba( '#0a1829', 0.65 ),
-	300: rgba( '#0e1c2e', 0.62 ),
-	200: rgba( '#162435', 0.55 ),
-	100: rgba( '#223443', 0.5 ),
-	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
-};
-
-const DARK_OPACITY_LIGHT = {
-	900: rgba( '#304455', 0.45 ),
-	800: rgba( '#425863', 0.4 ),
-	700: rgba( '#667886', 0.35 ),
-	600: rgba( '#7b86a2', 0.3 ),
-	500: rgba( '#9197a2', 0.25 ),
-	400: rgba( '#95959c', 0.2 ),
-	300: rgba( '#829493', 0.15 ),
-	200: rgba( '#8b8b96', 0.1 ),
-	100: rgba( '#747474', 0.05 ),
 };
 
 const LIGHT_GRAY = {
-	900: '#a2aab2',
 	800: '#b5bcc2',
-	700: '#ccd0d4',
 	600: '#d7dade',
-	500: '#e2e4e7', // Good for "grayed" items and borders.
 	400: '#e8eaeb', // Good for "readonly" input fields and special text selection.
 	300: '#edeff0',
 	200: '#f3f4f5',
-	100: '#f8f9f9',
-	placeholder: rgba( BASE.white, 0.65 ),
-};
-
-const LIGHT_OPACITY_LIGHT = {
-	900: rgba( BASE.white, 0.5 ),
-	800: rgba( BASE.white, 0.45 ),
-	700: rgba( BASE.white, 0.4 ),
-	600: rgba( BASE.white, 0.35 ),
-	500: rgba( BASE.white, 0.3 ),
-	400: rgba( BASE.white, 0.25 ),
-	300: rgba( BASE.white, 0.2 ),
-	200: rgba( BASE.white, 0.15 ),
-	100: rgba( BASE.white, 0.1 ),
-	backgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),
-};
-
-// Additional colors.
-// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
-
-const BLUE = {
-	wordpress: {
-		700: '#00669b',
-	},
-	dark: {
-		900: '#0071a1',
-	},
-	medium: {
-		900: '#006589',
-		800: '#00739c',
-		700: '#007fac',
-		600: '#008dbe',
-		500: '#00a0d2',
-		400: '#33b3db',
-		300: '#66c6e4',
-		200: '#bfe7f3',
-		100: '#e5f5fa',
-		highlight: '#b3e7fe',
-		focus: '#007cba',
-	},
 };
 
+// Matches @wordpress/base-styles
 const ALERT = {
 	yellow: '#f0b849',
 	red: '#d94f4f',
 	green: '#4ab866',
 };
 
+// Matches @wordpress/base-styles
 const ADMIN = {
-	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
-	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
+	theme: 'var( --wp-admin-theme-color, #007cba)',
+	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
 };
 
-// Namespaced values for raw colors hex codes.
 const UI = {
 	theme: ADMIN.theme,
-	background: BASE.white,
-	backgroundDisabled: LIGHT_GRAY[ 200 ],
-	border: G2.gray[ 700 ],
-	borderHover: G2.gray[ 700 ],
+	background: white,
+	backgroundDisabled: LIGHT_GRAY[ 200 ], // TODO: Replace with WordPress gray
+	border: GRAY[ 700 ],
+	borderHover: GRAY[ 700 ],
 	borderFocus: ADMIN.themeDark10,
-	borderDisabled: G2.gray[ 400 ],
-	borderLight: G2.gray[ 300 ],
-	label: DARK_GRAY[ 500 ],
-	textDisabled: DARK_GRAY[ 150 ],
-	textDark: BASE.white,
-	textLight: BASE.black,
+	borderDisabled: GRAY[ 400 ],
+	textDisabled: DARK_GRAY[ 150 ], // TODO: Replace with WordPress gray
+	textDark: white,
+
+	// Matches @wordpress/base-styles
+	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
+	lightGrayPlaceholder: rgba( white, 0.65 ),
 };
 
-// Using Object.assign instead of { ...spread } syntax helps TypeScript
-// to extract the correct type defs here.
-export const COLORS = Object.assign( {}, BASE, {
+export const COLORS = Object.freeze( {
+	/**
+	 * @deprecated Try to use `gray` instead.
+	 */
 	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.
+	 * The main gray color object.
+	 */
+	gray: GRAY,
+	/**
+	 * @deprecated Try to use `gray` instead.
 	 */
-	gray: G2.gray,
-	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
-	lightGrayLight: LIGHT_OPACITY_LIGHT,
-	blue: merge( {}, BLUE, G2.blue ),
+	lightGray: LIGHT_GRAY,
+	white,
 	alert: ALERT,
-	admin: ADMIN,
 	ui: UI,
 } );
 

package/src/utils/config-values.js

@@ -18,7 +18,7 @@ const CONTROL_PROPS = {
 	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
 	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.admin.theme }`,
+	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,

package/src/utils/input/input-control.js

@@ -33,30 +33,30 @@ export const inputControl = css`
 
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
-		color: ${ COLORS.darkGray.placeholder };
+		color: ${ COLORS.ui.darkGrayPlaceholder };
 	}
 
 	&::-moz-placeholder {
 		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ COLORS.darkGray.placeholder };
+		color: ${ COLORS.ui.darkGrayPlaceholder };
 	}
 
 	&:-ms-input-placeholder {
-		color: ${ COLORS.darkGray.placeholder };
+		color: ${ COLORS.ui.darkGrayPlaceholder };
 	}
 
 	.is-dark-theme & {
 		&::-webkit-input-placeholder {
-			color: ${ COLORS.lightGray.placeholder };
+			color: ${ COLORS.ui.lightGrayPlaceholder };
 		}
 
 		&::-moz-placeholder {
 			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ COLORS.lightGray.placeholder };
+			color: ${ COLORS.ui.lightGrayPlaceholder };
 		}
 
 		&:-ms-input-placeholder {
-			color: ${ COLORS.lightGray.placeholder };
+			color: ${ COLORS.ui.lightGrayPlaceholder };
 		}
 	}
 `;

package/src/utils/rtl.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import { mapKeys } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -57,7 +56,12 @@ function getConvertedKey( key ) {
  * @return {import('react').CSSProperties} Converted ltr -> rtl styles
  */
 export const convertLTRToRTL = ( ltrStyles = {} ) => {
-	return mapKeys( ltrStyles, ( _value, key ) => getConvertedKey( key ) );
+	return Object.fromEntries(
+		Object.entries( ltrStyles ).map( ( [ key, value ] ) => [
+			getConvertedKey( key ),
+			value,
+		] )
+	);
 };
 
 /**

package/src/utils/strings.ts

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
+	`[${ [
+		// - (hyphen-minus)
+		'\u002d',
+		// ~ (tilde)
+		'\u007e',
+		// ­ (soft hyphen)
+		'\u00ad',
+		// ֊ (armenian hyphen)
+		'\u058a',
+		// ־ (hebrew punctuation maqaf)
+		'\u05be',
+		// ᐀ (canadian syllabics hyphen)
+		'\u1400',
+		// ᠆ (mongolian todo soft hyphen)
+		'\u1806',
+		// ‐ (hyphen)
+		'\u2010',
+		// non-breaking hyphen)
+		'\u2011',
+		// ‒ (figure dash)
+		'\u2012',
+		// – (en dash)
+		'\u2013',
+		// — (em dash)
+		'\u2014',
+		// ― (horizontal bar)
+		'\u2015',
+		// ⁓ (swung dash)
+		'\u2053',
+		// superscript minus)
+		'\u207b',
+		// subscript minus)
+		'\u208b',
+		// − (minus sign)
+		'\u2212',
+		// ⸗ (double oblique hyphen)
+		'\u2e17',
+		// ⸺ (two-em dash)
+		'\u2e3a',
+		// ⸻ (three-em dash)
+		'\u2e3b',
+		// 〜 (wave dash)
+		'\u301c',
+		// 〰 (wavy dash)
+		'\u3030',
+		// ゠ (katakana-hiragana double hyphen)
+		'\u30a0',
+		// ︱ (presentation form for vertical em dash)
+		'\ufe31',
+		// ︲ (presentation form for vertical en dash)
+		'\ufe32',
+		// ﹘ (small em dash)
+		'\ufe58',
+		// ﹣ (small hyphen-minus)
+		'\ufe63',
+		// － (fullwidth hyphen-minus)
+		'\uff0d',
+	].join( '' ) }]`,
+	'g'
+);
+
+export const normalizeTextString = ( value: string ): string => {
+	return removeAccents( value )
+		.toLocaleLowerCase()
+		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
+};

package/src/utils/style-mixins.js

@@ -1,3 +1,4 @@
+export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
@@ -5,3 +6,4 @@ export { font } from './font';
 export { breakpoint } from './breakpoint';
 export { default as CONFIG } from './config-values';
 export { COLORS } from './colors-values';
+export { baseLabelTypography } from './base-label';

package/src/utils/test/strings.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeTextString } from '../strings';
+
+describe( 'normalizeTextString', () => {
+	it( 'should normalize hyphen-like characters to hyphens', () => {
+		expect( normalizeTextString( 'foo~bar' ) ).toBe( 'foo-bar' );
+		expect( normalizeTextString( 'foo־bar' ) ).toBe( 'foo-bar' );
+		expect( normalizeTextString( 'foo‐bar' ) ).toBe( 'foo-bar' );
+		expect( normalizeTextString( 'foo⸻bar' ) ).toBe( 'foo-bar' );
+		expect( normalizeTextString( 'foo゠bar' ) ).toBe( 'foo-bar' );
+		expect( normalizeTextString( 'foo－bar' ) ).toBe( 'foo-bar' );
+	} );
+} );

package/tsconfig.json

@@ -72,6 +72,7 @@
 		"src/navigable-container/**/*",
 		"src/navigator/**/*",
 		"src/number-control/**/*",
+		"src/placeholder/**/*",
 		"src/popover/**/*",
 		"src/radio-control/**/*",
 		"src/range-control/**/*",