@wordpress/components 36.0.1 → 37.0.1-next.v.202607070741.0

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -35,9 +35,9 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  height: 40px;
   min-width: 0;
   position: relative;
-  height: 40px;
 }
 
 .emotion-6:hover {
@@ -81,7 +81,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   		);
 }
 
-.emotion-8 {
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -94,7 +94,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -139,27 +139,27 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-10 {
+  .emotion-9 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10[disabled],
-.emotion-10[aria-disabled='true'] {
+.emotion-9[disabled],
+.emotion-9[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-9:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
-.emotion-11 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -168,7 +168,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   line-height: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -211,23 +211,23 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-15 {
+  .emotion-14 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-15::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-15[disabled],
-.emotion-15[aria-disabled='true'] {
+.emotion-14[disabled],
+.emotion-14[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-14:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
@@ -246,19 +246,19 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
       </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-6 emotion-7"
+        class="emotion-6 components-toggle-group-control"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
         id="wp-components-base-control-19"
         role="radiogroup"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
@@ -270,7 +270,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             value="uppercase"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               <svg
                 aria-hidden="true"
@@ -289,12 +289,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
           </button>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-15 components-toggle-group-control-option-base"
+            class="emotion-14 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -305,7 +305,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             value="lowercase"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               <svg
                 aria-hidden="true"
@@ -370,9 +370,9 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  height: 40px;
   min-width: 0;
   position: relative;
-  height: 40px;
 }
 
 .emotion-6:hover {
@@ -416,7 +416,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   		);
 }
 
-.emotion-8 {
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -429,7 +429,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -468,27 +468,27 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-10 {
+  .emotion-9 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10[disabled],
-.emotion-10[aria-disabled='true'] {
+.emotion-9[disabled],
+.emotion-9[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-9:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
-.emotion-11 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -512,19 +512,19 @@ exports[`ToggleGroupControl controlled should render correctly with text options
       </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-6 emotion-7"
+        class="emotion-6 components-toggle-group-control"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
         id="wp-components-base-control-18"
         role="radiogroup"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="R"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -535,19 +535,19 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             value="rigas"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               R
             </div>
           </button>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="J"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -558,7 +558,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             value="jack"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               J
             </div>
@@ -611,9 +611,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  height: 40px;
   min-width: 0;
   position: relative;
-  height: 40px;
 }
 
 .emotion-6:hover {
@@ -657,7 +657,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   		);
 }
 
-.emotion-8 {
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -670,7 +670,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -715,27 +715,27 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-10 {
+  .emotion-9 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10[disabled],
-.emotion-10[aria-disabled='true'] {
+.emotion-9[disabled],
+.emotion-9[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-9:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
-.emotion-11 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -744,7 +744,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   line-height: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -787,23 +787,23 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-15 {
+  .emotion-14 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-15::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-15[disabled],
-.emotion-15[aria-disabled='true'] {
+.emotion-14[disabled],
+.emotion-14[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-14:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
@@ -822,19 +822,19 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
       </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-6 emotion-7"
+        class="emotion-6 components-toggle-group-control"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
         id="wp-components-base-control-1"
         role="radiogroup"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
@@ -846,7 +846,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             value="uppercase"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               <svg
                 aria-hidden="true"
@@ -865,12 +865,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
           </button>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-15 components-toggle-group-control-option-base"
+            class="emotion-14 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -881,7 +881,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             value="lowercase"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               <svg
                 aria-hidden="true"
@@ -940,9 +940,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  height: 40px;
   min-width: 0;
   position: relative;
-  height: 40px;
 }
 
 .emotion-6:hover {
@@ -986,7 +986,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   		);
 }
 
-.emotion-8 {
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -999,7 +999,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1038,27 +1038,27 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-10 {
+  .emotion-9 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10[disabled],
-.emotion-10[aria-disabled='true'] {
+.emotion-9[disabled],
+.emotion-9[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-9:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
-.emotion-11 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1082,19 +1082,19 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
       </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-6 emotion-7"
+        class="emotion-6 components-toggle-group-control"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
         id="wp-components-base-control-0"
         role="radiogroup"
       >
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="R"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -1105,19 +1105,19 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             value="rigas"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               R
             </div>
           </button>
         </div>
         <div
-          class="emotion-8 emotion-9"
+          class="emotion-7 emotion-8"
         >
           <button
             aria-checked="false"
             aria-label="J"
-            class="emotion-10 components-toggle-group-control-option-base"
+            class="emotion-9 components-toggle-group-control-option-base"
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -1128,7 +1128,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             value="jack"
           >
             <div
-              class="emotion-11 emotion-12"
+              class="emotion-10 emotion-11"
             >
               J
             </div>

package/src/toggle-group-control/test/index.tsx

@@ -15,7 +15,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
  */
 import Button from '../../button';
 import {
-	ToggleGroupControl as _ToggleGroupControl,
+	ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
@@ -27,9 +27,10 @@ const hoverOutside = async () => {
 	await hover( document.body, { clientX: 10, clientY: 10 } );
 };
 
-const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
-	return <_ToggleGroupControl { ...props } __next40pxDefaultSize />;
-};
+const getGeneratedEmotionClassNames = ( element: HTMLElement ) =>
+	Array.from( element.classList ).filter( ( className ) =>
+		/^(css|emotion)-/.test( className )
+	);
 
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
@@ -635,3 +636,18 @@ describe.each( [
 		} );
 	} );
 } );
+
+test( 'should compose block styles in a single generated class', () => {
+	render(
+		<ToggleGroupControl label="Test Toggle Group Control" isBlock>
+			{ options }
+		</ToggleGroupControl>
+	);
+
+	const control = screen.getByRole( 'radiogroup', {
+		name: 'Test Toggle Group Control',
+	} );
+
+	expect( getGeneratedEmotionClassNames( control ) ).toHaveLength( 1 );
+	expect( control ).toHaveStyle( { display: 'flex' } );
+} );

package/src/toggle-group-control/toggle-group-control/README.md

@@ -24,7 +24,6 @@ function Example() {
 			label="my label"
 			value="vertical"
 			isBlock
-			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
@@ -87,10 +86,3 @@ Callback when a segment is selected.
 The value of the `ToggleGroupControl`.
 
 -   Required: No
-
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -23,7 +23,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		isAdaptiveWidth,
 		label,
 		onChange,
-		size,
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
@@ -63,7 +62,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			setValue: setSelectedValue,
 			isBlock: ! isAdaptiveWidth,
 			isDeselectable: true,
-			size,
 			setSelectedElement,
 		} ),
 		[
@@ -71,7 +69,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			selectedValue,
 			setSelectedValue,
 			isAdaptiveWidth,
-			size,
 			setSelectedElement,
 		]
 	);

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -29,7 +29,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		isAdaptiveWidth,
 		label,
 		onChange: onChangeProp,
-		size,
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
@@ -85,7 +84,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 				radio.getState().activeId !== radio.first(),
 			baseId,
 			isBlock: ! isAdaptiveWidth,
-			size,
 			// @ts-expect-error - This is wrong and we should fix it.
 			value: selectedValue,
 			// @ts-expect-error - This is wrong and we should fix it.
@@ -99,7 +97,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 			selectedValue,
 			setSelectedElement,
 			setValue,
-			size,
 		]
 	);