BorderControl: Fix focus styling (#40951)

WordPress · May 11, 2022 · 0ae80c5 · 0ae80c5
1 parent 4254356
commit 0ae80c5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `BorderControl` now only displays the reset button in its popover when selections have already been made. [#40917](https://github.com/WordPress/gutenberg/pull/40917)
 -   `BorderControl` & `BorderBoxControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40920](https://github.com/WordPress/gutenberg/pull/40920)).
+-   `BorderControl` improved focus and border radius styling for component. [#40951](https://github.com/WordPress/gutenberg/pull/40951)
 
 ### Internal
 

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -25,13 +25,15 @@ const labelStyles = css`
 	font-weight: 500;
 `;
 
+const focusBoxShadow = css`
+	box-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };
+`;
+
 export const borderControl = css`
 	position: relative;
 `;
 
 export const innerWrapper = () => css`
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-	border-radius: 2px;
 	flex: 1 0 40%;
 
 	/*
@@ -47,13 +49,29 @@ export const innerWrapper = () => css`
 	 */
 	${ UnitControlWrapper } {
 		flex: 1;
-		${ rtl( { marginLeft: 0 } )() }
+		${ rtl( { marginLeft: -1 } )() }
 	}
 
 	&& ${ UnitSelect } {
 		/* Prevent default styles forcing heights larger than BorderControl */
 		min-height: 0;
-		${ rtl( { marginRight: 0 } )() }
+		${ rtl(
+			{
+				borderRadius: '0 1px 1px 0',
+				marginRight: 0,
+			},
+			{
+				borderRadius: '1px 0 0 1px',
+				marginLeft: 0,
+			}
+		)() }
+		transition: box-shadow 0.1s linear, border 0.1s linear;
+
+		&:focus {
+			z-index: 1;
+			${ focusBoxShadow }
+			border: 1px solid ${ COLORS.ui.borderFocus };
+		}
 	}
 `;
 
@@ -76,16 +94,6 @@ export const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {
 
 export const borderControlDropdown = () => css`
 	background: #fff;
-	${ rtl(
-		{
-			borderRadius: `1px 0 0 1px`,
-			borderRight: `${ CONFIG.borderWidth } solid ${ COLORS.ui.border }`,
-		},
-		{
-			borderRadius: `0 1px 1px 0`,
-			borderLeft: `${ CONFIG.borderWidth } solid ${ COLORS.ui.border }`,
-		}
-	)() }
 
 	&& > button {
 		/*
@@ -94,7 +102,20 @@ export const borderControlDropdown = () => css`
 		 */
 		height: 100%;
 		padding: ${ space( 0.75 ) };
-		border-radius: inherit;
+		${ rtl(
+			{ borderRadius: `2px 0 0 2px` },
+			{ borderRadius: `0 2px 2px 0` }
+		)() }
+		border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+		position: relative;
+
+		&:focus,
+		&:hover:not( :disabled ) {
+			${ focusBoxShadow }
+			border-color: ${ COLORS.ui.borderFocus };
+			z-index: 1;
+			position: relative;
+		}
 	}
 `;
 
@@ -187,7 +208,11 @@ export const resetButton = css`
 export const borderWidthControl = () => css`
 	/* Target the InputControl's backdrop */
 	&&& ${ BackdropUI } {
-		border: none;
+		${ rtl( {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+		} )() }
+		transition: box-shadow 0.1s linear;
 	}
 
 	/* Specificity required to overcome UnitControl padding */