address design feedback

WordPress · May 6, 2024 · 318b70a · 318b70a
1 parent 3defb6a
commit 318b70a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -452,11 +452,13 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					<ShadowInputControl
 						label={ __( 'X Position' ) }
 						value={ shadow.x }
+						hasNegativeRange
 						onChange={ ( value ) => onShadowChange( 'x', value ) }
 					/>
 					<ShadowInputControl
 						label={ __( 'Y Position' ) }
 						value={ shadow.y }
+						hasNegativeRange
 						onChange={ ( value ) => onShadowChange( 'y', value ) }
 					/>
 					<ShadowInputControl
@@ -469,6 +471,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 					<ShadowInputControl
 						label={ __( 'Spread' ) }
 						value={ shadow.spread }
+						hasNegativeRange
 						onChange={ ( value ) =>
 							onShadowChange( 'spread', value )
 						}
@@ -479,7 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	);
 }
 
-function ShadowInputControl( { label, value, onChange } ) {
+function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	const [ isCustomInput, setIsCustomInput ] = useState( false );
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
@@ -521,7 +524,14 @@ function ShadowInputControl( { label, value, onChange } ) {
 					value={ parsedQuantity ?? 0 }
 					onChange={ sliderOnChange }
 					withInputField={ false }
-					min={ 0 }
+					min={
+						hasNegativeRange
+							? -(
+									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
+										?.max ?? 10
+							  )
+							: 0
+					}
 					max={
 						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
 					}

diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -40,7 +40,7 @@ export default function ShadowsPanel() {
 			<ScreenHeader
 				title={ __( 'Shadows' ) }
 				description={ __(
-					'Shadows and the application of those shadows on site elements.'
+					'Manage and create shadow styles for use across the site.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">
@@ -53,17 +53,17 @@ export default function ShadowsPanel() {
 						shadows={ defaultShadows || [] }
 						category={ 'default' }
 					/>
-					<ShadowList
-						label={ __( 'Theme' ) }
-						shadows={ themeShadows || [] }
-						category={ 'theme' }
-						placeholder={ __( 'Theme shadows are empty!' ) }
-					/>
+					{ themeShadows && themeShadows.length > 0 && (
+						<ShadowList
+							label={ __( 'Theme' ) }
+							shadows={ themeShadows || [] }
+							category={ 'theme' }
+						/>
+					) }
 					<ShadowList
 						label={ __( 'Custom' ) }
 						shadows={ customShadows || [] }
 						category={ 'custom' }
-						placeholder={ __( 'Custom shadows are empty!' ) }
 						onCreate={ onCreateShadow }
 					/>
 				</VStack>
@@ -72,7 +72,7 @@ export default function ShadowsPanel() {
 	);
 }
 
-function ShadowList( { label, placeholder, shadows, category, onCreate } ) {
+function ShadowList( { label, shadows, category, onCreate } ) {
 	const handleAddShadow = () => {
 		onCreate( {
 			name: `Shadow ${ shadows.length + 1 }`,
@@ -100,7 +100,7 @@ function ShadowList( { label, placeholder, shadows, category, onCreate } ) {
 					) }
 				</FlexItem>
 			</HStack>
-			{ shadows.length ? (
+			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>
 					{ shadows.map( ( shadow ) => (
 						<ShadowItem
@@ -110,8 +110,6 @@ function ShadowList( { label, placeholder, shadows, category, onCreate } ) {
 						/>
 					) ) }
 				</ItemGroup>
-			) : (
-				<div>{ placeholder }</div>
 			) }
 		</VStack>
 	);

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -117,13 +117,17 @@
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	overflow: auto;
-}
-
-.edit-site-global-styles__shadow-preview-block {
-	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
-	width: 60%;
-	height: 60px;
+	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
+	background-position: 0 0, 8px 8px;
+	background-size: 16px 16px;
+
+	.edit-site-global-styles__shadow-preview-block {
+		border: $gray-200 $border-width solid;
+		border-radius: $radius-block-ui;
+		background-color: $white;
+		width: 60%;
+		height: 60px;
+	}
 }
 
 .edit-site-global-styles__shadow-editor-panel {