Icons: Deprecate warning and rename to cautionFilled (#67895)

* Icons: Deprecate `warning` and rename to `cautionFilled` * Update changelog * Update icon * Update mobile snapshots * Rename original variable * Update existing usage in native files --------- Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Dec 13, 2024 · b371f6e · b371f6e · github-actions · Dec 13, 2024
1 parent 75289cf
commit b371f6e
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js
@@ -17,7 +17,7 @@ import { View } from '@wordpress/primitives';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { audio, warning } from '@wordpress/icons';
+import { audio, cautionFilled } from '@wordpress/icons';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
@@ -167,7 +167,7 @@ function Player( {
 					<View style={ styles.subtitleContainer }>
 						{ isUploadFailed && (
 							<Icon
-								icon={ warning }
+								icon={ cautionFilled }
 								style={ {
 									...styles.errorIcon,
 									...uploadFailedStyle,

diff --git a/packages/block-editor/src/components/contrast-checker/index.native.js b/packages/block-editor/src/components/contrast-checker/index.native.js
@@ -13,7 +13,7 @@ import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, warning } from '@wordpress/icons';
+import { Icon, cautionFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -52,7 +52,7 @@ function ContrastCheckerMessage( {
 
 	return (
 		<View style={ styles[ 'block-editor-contrast-checker' ] }>
-			<Icon style={ iconStyle } icon={ warning } />
+			<Icon style={ iconStyle } icon={ cautionFilled } />
 			<Text style={ msgStyle }>{ msg }</Text>
 		</View>
 	);

diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -89,7 +89,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           <Svg
             height={16}
             style={{}}
-            viewBox="-2 -2 24 24"
+            viewBox="0 0 24 24"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
           >

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -58,7 +58,7 @@ import {
 	useCallback,
 	useMemo,
 } from '@wordpress/element';
-import { cover as icon, replace, image, warning } from '@wordpress/icons';
+import { cover as icon, replace, image, cautionFilled } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 // eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -665,7 +665,10 @@ const Cover = ( {
 					style={ styles.uploadFailedContainer }
 				>
 					<View style={ styles.uploadFailed }>
-						<Icon icon={ warning } { ...styles.uploadFailedIcon } />
+						<Icon
+							icon={ cautionFilled }
+							{ ...styles.uploadFailedIcon }
+						/>
 					</View>
 				</View>
 			) }

diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -132,7 +132,7 @@ exports[`File block renders file error state without crashing 1`] = `
         <Svg
           height={24}
           style={{}}
-          viewBox="-2 -2 24 24"
+          viewBox="0 0 24 24"
           width={24}
           xmlns="http://www.w3.org/2000/svg"
         >

diff --git a/packages/editor/src/components/error-boundary/index.native.js b/packages/editor/src/components/error-boundary/index.native.js
@@ -16,7 +16,7 @@ import {
 	usePreferredColorSchemeStyle,
 	withPreferredColorScheme,
 } from '@wordpress/compose';
-import { warning } from '@wordpress/icons';
+import { cautionFilled } from '@wordpress/icons';
 import { Icon } from '@wordpress/components';
 
 /**
@@ -141,7 +141,7 @@ class ErrorBoundary extends Component {
 					<View style={ styles[ 'error-boundary__container' ] }>
 						<View style={ iconContainerStyle }>
 							<Icon
-								icon={ warning }
+								icon={ cautionFilled }
 								{ ...styles[ 'error-boundary__icon' ] }
 							/>
 						</View>

diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Deprecate `warning` icon and rename to `cautionFilled` ([#67895](https://github.com/WordPress/gutenberg/pull/67895)).
+
 ## 10.14.0 (2024-12-11)
 
 ## 10.13.0 (2024-11-27)

diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.js
@@ -11,7 +11,14 @@ import check from '../../library/check';
 import * as icons from '../../';
 import keywords from './keywords';
 
-const { Icon: _Icon, ...availableIcons } = icons;
+const {
+	Icon: _Icon,
+
+	// Deprecated aliases
+	warning: _warning,
+
+	...availableIcons
+} = icons;
 
 const meta = {
 	component: Icon,

diff --git a/packages/icons/src/icon/stories/keywords.ts b/packages/icons/src/icon/stories/keywords.ts
@@ -1,13 +1,13 @@
 const keywords: Partial< Record< keyof typeof import('../../'), string[] > > = {
 	cancelCircleFilled: [ 'close' ],
+	cautionFilled: [ 'alert', 'caution', 'warning' ],
 	create: [ 'add' ],
 	file: [ 'folder' ],
 	seen: [ 'show' ],
 	thumbsDown: [ 'dislike' ],
 	thumbsUp: [ 'like' ],
 	trash: [ 'delete' ],
 	unseen: [ 'hide' ],
-	warning: [ 'alert', 'caution' ],
 };
 
 export default keywords;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -37,6 +37,11 @@ export { default as caption } from './library/caption';
 export { default as capturePhoto } from './library/capture-photo';
 export { default as captureVideo } from './library/capture-video';
 export { default as category } from './library/category';
+export {
+	/** @deprecated Import `cautionFilled` instead. */
+	default as warning,
+	default as cautionFilled,
+} from './library/caution-filled';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
 export { default as chevronDown } from './library/chevron-down';
@@ -301,6 +306,5 @@ export { default as update } from './library/update';
 export { default as upload } from './library/upload';
 export { default as verse } from './library/verse';
 export { default as video } from './library/video';
-export { default as warning } from './library/warning';
 export { default as widget } from './library/widget';
 export { default as wordpress } from './library/wordpress';
diff --git a/packages/icons/src/library/caution-filled.js b/packages/icons/src/library/caution-filled.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const cautionFilled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM12.75 8V13H11.25V8H12.75ZM12.75 14.5V16H11.25V14.5H12.75Z" />
+	</SVG>
+);
+
+export default cautionFilled;
diff --git a/packages/icons/src/library/warning.js b/packages/icons/src/library/warning.js