Polish dropdown arrow. Now it's the same as for switcher.

WordPress · Sep 13, 2018 · c933243 · c933243
1 parent 6d92309
commit c933243
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
@@ -304,3 +304,16 @@
 	text-align: center;
 	font-size: $default-font-size;
 }
+
+@mixin dropdown-arrow() {
+	content: "";
+	pointer-events: none;
+	display: block;
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-top: 5px solid currentColor;
+	right: 6px;
+}
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -13,7 +13,6 @@ import { DOWN } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import IconButton from '../icon-button';
-import Dashicon from '../dashicon';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';
 
@@ -61,7 +60,7 @@ function DropdownMenu( {
 						label={ label }
 						tooltip={ label }
 					>
-						<Dashicon icon="arrow-down" />
+						<span className="components-dropdown-menu__indicator" />
 					</IconButton>
 				);
 			} }

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -38,6 +38,17 @@
 			background-color: $dark-gray-500;
 			color: $white;
 		}
+
+		.components-dropdown-menu__indicator {
+			display: inline-block;
+			margin-left: 10px;
+
+			// Add a dropdown arrow indicator.
+			&::after {
+				@include dropdown-arrow();
+				top: $icon-button-size-small / 2 + 1px;
+			}
+		}
 	}
 }
 .components-dropdown-menu__popover .components-popover__content {
@@ -58,11 +69,6 @@
 		outline: none;
 		cursor: pointer;
 
-		.dashicon {
-			margin-right: 8px;
-		}
-
-
 		&.has-separator {
 			margin-top: 6px;
 			position: relative;

diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss
@@ -36,17 +36,8 @@
 
 	// Add a dropdown arrow indicator.
 	.editor-block-icon::after {
-		content: "";
-		pointer-events: none;
-		display: block;
-		position: absolute;
+		@include dropdown-arrow();
 		top: $icon-button-size-small / 2 - 1px;
-		width: 0;
-		height: 0;
-		border-left: 3px solid transparent;
-		border-right: 3px solid transparent;
-		border-top: 5px solid currentColor;
-		right: 6px;
 	}
 
 	.editor-block-switcher__transform {