Featured Products style tweaks (#316)

* Update search list item padding

* Fix search list item radio alignment

* Star icon: Material -> Dashicons

* Featured product min height

* placeholder icon + explanation of explicit height value

* Fix linter errors

* Remove unnecessary Icon from block registration

* Remove the star icon

Author: jameskoster

assets/js/blocks/featured-product/block.js

@@ -30,7 +30,6 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { IconStar } from '../../components/icons';
 import ProductControl from '../../components/product-control';
 
 // Copied from core/cover, updated for product.
@@ -161,7 +160,7 @@ class FeaturedProduct extends Component {
 
 		return (
 			<Placeholder
-				icon={ <IconStar /> }
+				icon="star-filled"
 				label={ __( 'Featured Product', 'woo-gutenberg-products-block' ) }
 				className="wc-block-featured-product"
 			>
@@ -270,7 +269,7 @@ class FeaturedProduct extends Component {
 						) : (
 							<Placeholder
 								className="wc-block-featured-product"
-								icon={ <IconStar /> }
+								icon="star-filled"
 								label={ __( 'Featured Product', 'woo-gutenberg-products-block' ) }
 							>
 								{ ! loaded ? (

assets/js/blocks/featured-product/index.js

@@ -9,14 +9,13 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import './style.scss';
 import Block from './block';
-import { IconStar } from '../../components/icons';
 
 /**
  * Register and run the "Featured Product" block.
  */
 registerBlockType( 'woocommerce/featured-product', {
 	title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
-	icon: <IconStar />,
+	icon: 'star-filled',
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	description: __(

assets/js/blocks/featured-product/style.scss

@@ -3,7 +3,7 @@
 	background-color: $black;
 	background-size: cover;
 	background-position: center center;
-	min-height: 430px;
+	min-height: 500px;
 	width: 100%;
 	margin: 0 0 1.5em 0;
 	display: flex;

assets/js/components/icons/index.js

@@ -4,5 +4,4 @@ export { default as IconCheckUnchecked } from './checkbox-unchecked';
 export { default as IconNewReleases } from './new-releases';
 export { default as IconRadioSelected } from './radio-selected';
 export { default as IconRadioUnselected } from './radio-unselected';
-export { default as IconStar } from './star';
 export { default as IconWidgets } from './widgets';

assets/js/components/icons/star.js

@@ -36,7 +36,7 @@
 
 .woocommerce-search-list__list {
 	padding: 0;
-	max-height: 18.5em;
+	max-height: 17em;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border-top: 1px solid $core-grey-light-500;
@@ -85,7 +85,7 @@
 		display: flex;
 		align-items: center;
 		margin-bottom: 0;
-		padding: $gap;
+		padding: $gap-small $gap;
 		background: $white;
 		// !important to keep the border around on hover
 		border-bottom: 1px solid $core-grey-light-500 !important;
@@ -102,6 +102,8 @@
 		.woocommerce-search-list__item-state {
 			flex: 0 0 16px;
 			margin-right: $gap-smaller;
+			// Set an explicit height to ensure vertical alignment
+			height: 24px;
 		}
 
 		.woocommerce-search-list__item-label {