@wordpress/components 36.1.0 → 37.0.0

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

@@ -2,7 +2,7 @@
 
 exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -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;
@@ -135,31 +135,31 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding-left: 0;
   padding-right: 0;
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  font-weight: 499;
+  font-weight: 600;
 }
 
 @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"
@@ -337,7 +337,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -354,7 +354,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -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>
@@ -578,7 +578,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 
 exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -595,7 +595,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -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;
@@ -711,31 +711,31 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding-left: 0;
   padding-right: 0;
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  font-weight: 499;
+  font-weight: 600;
 }
 
 @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"
@@ -907,7 +907,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -924,7 +924,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -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`