@wordpress/components 28.0.0 → 28.1.0

package/src/checkbox-control/stories/index.story.tsx

@@ -142,6 +142,8 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
 					setChecked( v );
 					onChange( v );
 				} }
+				// Disable reason: For simplicity of the code snippet.
+				// eslint-disable-next-line no-restricted-syntax
 				id="my-checkbox-with-custom-label"
 				aria-describedby="my-custom-description"
 			/>
@@ -149,6 +151,7 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
 				<label htmlFor="my-checkbox-with-custom-label">
 					My custom label
 				</label>
+				{ /* eslint-disable-next-line no-restricted-syntax */ }
 				<div id="my-custom-description" style={ { fontSize: 13 } }>
 					A custom description.
 				</div>

package/src/checkbox-control/style.scss

@@ -5,6 +5,8 @@
 	@include break-small() {
 		--checkbox-input-size: 20px;
 	}
+
+	--checkbox-input-margin: #{$grid-unit-10};
 }
 
 .components-checkbox-control__label {
@@ -55,7 +57,7 @@
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: $grid-unit-15;
+	margin-right: var(--checkbox-input-margin);
 	vertical-align: middle;
 	width: var(--checkbox-input-size);
 	aspect-ratio: 1;
@@ -84,5 +86,5 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control__help {
 	display: inline-block;
-	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+	margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 }

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -68,6 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -347,6 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -636,6 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -937,6 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);

package/src/radio-control/index.tsx

@@ -73,7 +73,7 @@ export function RadioControl(
 			help={ help }
 			className={ clsx( className, 'components-radio-control' ) }
 		>
-			<VStack spacing={ 1 }>
+			<VStack spacing={ 3 }>
 				{ options.map( ( option, index ) => (
 					<div
 						key={ `${ id }-${ index }` }

package/src/radio-control/style.scss

@@ -7,7 +7,7 @@
 	@include radio-control;
 
 	display: inline-flex;
-	margin: 0 6px 0 0;
+	margin: 0 $grid-unit-10 0 0;
 	padding: 0;
 	appearance: none;
 	cursor: pointer;

package/src/tabs/tablist.tsx

@@ -53,10 +53,12 @@ function useTrackElementOffset(
 
 		function updateIndicator( element: HTMLElement ) {
 			setIndicatorPosition( {
-				left: element.offsetLeft,
-				top: element.offsetTop,
-				width: element.offsetWidth,
-				height: element.offsetHeight,
+				// Workaround to prevent unwanted scrollbars, see:
+				// https://github.com/WordPress/gutenberg/pull/61979
+				left: Math.max( element.offsetLeft - 1, 0 ),
+				top: Math.max( element.offsetTop - 1, 0 ),
+				width: parseFloat( getComputedStyle( element ).width ),
+				height: parseFloat( getComputedStyle( element ).height ),
 			} );
 			updateCallbackRef.current?.();
 		}

package/src/text/styles.ts

@@ -12,6 +12,7 @@ export const Text = css`
 	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
+	text-wrap: balance; /* Fallback for Safari. */
 	text-wrap: pretty;
 `;
 

package/src/text/test/__snapshots__/index.tsx.snap

@@ -22,6 +22,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -54,6 +55,7 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;