Chip styling

packages/editor/src/components/post-status/index.js

@@ -26,6 +26,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 function PostStatusLabel() {
 	const status = useSelect(
@@ -58,6 +59,7 @@ function PostStatusLabel() {
 			} ) }
 		>
 			{ statusLabel }
+			<Icon icon={ chevronDownSmall } />
 		</Text>
 	);
 }

packages/editor/src/components/post-status/style.scss

@@ -11,10 +11,10 @@
 	.editor-post-status-label {
 		border-radius: $grid-unit-20;
 		display: inline-flex;
-		padding: 0 $grid-unit-10;
+		padding: 0 $grid-unit-10 0 $grid-unit-15;
 		background: rgba($gray-900, 0.04);
-		height: 100%;
-		font-weight: 500;
+		height: $button-size-compact;
+		align-items: center;
 		color: $gray-900;
 
 		&:hover {

packages/icons/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ## 9.46.0 (2024-04-03)
 
+- Add new `chevronDownSmall` icon.
+
 ## 9.45.0 (2024-03-21)
 
 ## 9.44.0 (2024-03-06)

packages/icons/src/index.js

@@ -35,6 +35,7 @@ export { default as category } from './library/category';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
 export { default as chevronDown } from './library/chevron-down';
+export { default as chevronDownSmall } from './library/chevron-down-small';
 export { default as chevronLeft } from './library/chevron-left';
 export { default as chevronLeftSmall } from './library/chevron-left-small';
 export { default as chevronRight } from './library/chevron-right';

packages/icons/src/library/chevron-down-small.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const chevronDownSmall = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="m15.99 10.889-3.988 3.418-3.988-3.418.976-1.14 3.012 2.582 3.012-2.581.976 1.139Z" />
+	</SVG>
+);
+
+export default chevronDownSmall;