@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

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

@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import CheckboxControl from '..';
+import { VStack } from '../../v-stack';
 
 const meta: ComponentMeta< typeof CheckboxControl > = {
 	component: CheckboxControl,
@@ -71,7 +72,7 @@ export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
 		Object.values( fruits ).some( Boolean ) && ! isAllChecked;
 
 	return (
-		<>
+		<VStack>
 			<CheckboxControl
 				{ ...args }
 				checked={ isAllChecked }
@@ -85,6 +86,7 @@ export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
 				} }
 			/>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label="Apple"
 				checked={ fruits.apple }
 				onChange={ ( apple ) =>
@@ -95,6 +97,7 @@ export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
 				}
 			/>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label="Orange"
 				checked={ fruits.orange }
 				onChange={ ( orange ) =>
@@ -104,9 +107,10 @@ export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
 					} ) )
 				}
 			/>
-		</>
+		</VStack>
 	);
 };
 Indeterminate.args = {
 	label: 'Select all',
+	__nextHasNoMarginBottom: true,
 };

package/src/checkbox-control/types.ts

@@ -8,7 +8,10 @@ import type { ReactNode } from 'react';
  */
 import type { BaseControlProps } from '../base-control/types';
 
-export type CheckboxControlProps = Pick< BaseControlProps, 'help' > & {
+export type CheckboxControlProps = Pick<
+	BaseControlProps,
+	'help' | '__nextHasNoMarginBottom'
+> & {
 	/**
 	 * A function that receives the checked state (boolean) as input.
 	 */

package/src/color-palette/index.js

@@ -120,7 +120,7 @@ export function CustomColorPickerDropdown( {
 } ) {
 	const popoverProps = useMemo(
 		() => ( {
-			__unstableShift: true,
+			shift: true,
 			...( isRenderedInSidebar
 				? {
 						// When in the sidebar: open to the left (stacking),

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -30,21 +30,18 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-2>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-3>* {
+.emotion-2>* {
   min-width: 0;
 }
 
-.emotion-4 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -56,21 +53,18 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-4>* {
+.emotion-3>* {
   min-width: 0;
 }
 
-.emotion-6 {
+.emotion-5 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -78,13 +72,13 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   min-width: 0;
 }
 
-.emotion-8 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.emotion-9 {
+.emotion-8 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -95,14 +89,14 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   flex: 1;
 }
 
-.emotion-11 {
+.emotion-10 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -117,7 +111,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   flex: 1;
 }
 
-.emotion-19 {
+.emotion-18 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -146,7 +140,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
     aria-haspopup="true"
     aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
     as="button"
-    className="emotion-0 emotion-1 emotion-2 emotion-3 components-flex components-color-palette__custom-color"
+    className="emotion-0 emotion-1 emotion-2 components-flex components-color-palette__custom-color"
     data-wp-c16t={true}
     data-wp-component="Flex"
     onClick={[MockFunction]}
@@ -162,7 +156,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
       aria-expanded={true}
       aria-haspopup="true"
       aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-      className="components-flex components-color-palette__custom-color emotion-4 emotion-5"
+      className="components-flex components-color-palette__custom-color emotion-3 emotion-4"
       data-wp-c16t={true}
       data-wp-component="Flex"
       onClick={[MockFunction]}
@@ -198,25 +192,25 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
               "selector": ".components-truncate",
             }
           }
-          className="emotion-6 emotion-7 emotion-8 components-flex-item components-color-palette__custom-color-name"
+          className="emotion-5 emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-name"
           data-wp-c16t={true}
           data-wp-component="FlexItem"
         >
           <Noop />
           <Truncate
-            className="components-flex-item components-color-palette__custom-color-name emotion-9 emotion-5"
+            className="components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
             data-wp-c16t={true}
             data-wp-component="FlexItem"
           >
             <View
               as="span"
-              className="emotion-11 components-truncate components-flex-item components-color-palette__custom-color-name emotion-9 emotion-5"
+              className="emotion-10 components-truncate components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
               data-wp-c16t={true}
               data-wp-component="FlexItem"
             >
               <Noop />
               <span
-                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-15 emotion-5"
+                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-14 emotion-4"
                 data-wp-c16t={true}
                 data-wp-component="FlexItem"
               >
@@ -232,13 +226,13 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
       >
         <View
           as="span"
-          className="emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-value"
+          className="emotion-5 emotion-6 components-flex-item components-color-palette__custom-color-value"
           data-wp-c16t={true}
           data-wp-component="FlexItem"
         >
           <Noop />
           <span
-            className="components-flex-item components-color-palette__custom-color-value emotion-19 emotion-5"
+            className="components-flex-item components-color-palette__custom-color-value emotion-18 emotion-4"
             data-wp-c16t={true}
             data-wp-component="FlexItem"
           >
@@ -267,21 +261,18 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-2>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-3>* {
+.emotion-2>* {
   min-width: 0;
 }
 
-.emotion-4 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -293,21 +284,18 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-4>* {
+.emotion-3>* {
   min-width: 0;
 }
 
-.emotion-6 {
+.emotion-5 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -315,13 +303,13 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   min-width: 0;
 }
 
-.emotion-8 {
+.emotion-7 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.emotion-9 {
+.emotion-8 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -332,14 +320,14 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   flex: 1;
 }
 
-.emotion-11 {
+.emotion-10 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -354,7 +342,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   flex: 1;
 }
 
-.emotion-19 {
+.emotion-18 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -366,9 +354,9 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   contentClassName="components-color-palette__custom-color-dropdown-content"
   popoverProps={
     Object {
-      "__unstableShift": true,
       "offset": 8,
       "placement": "bottom",
+      "shift": true,
     }
   }
   renderContent={[Function]}
@@ -399,7 +387,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
         aria-haspopup="true"
         aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
         as="button"
-        className="emotion-0 emotion-1 emotion-2 emotion-3 components-flex components-color-palette__custom-color"
+        className="emotion-0 emotion-1 emotion-2 components-flex components-color-palette__custom-color"
         data-wp-c16t={true}
         data-wp-component="Flex"
         onClick={[Function]}
@@ -415,7 +403,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
           aria-expanded={false}
           aria-haspopup="true"
           aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-          className="components-flex components-color-palette__custom-color emotion-4 emotion-5"
+          className="components-flex components-color-palette__custom-color emotion-3 emotion-4"
           data-wp-c16t={true}
           data-wp-component="Flex"
           onClick={[Function]}
@@ -451,25 +439,25 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
                   "selector": ".components-truncate",
                 }
               }
-              className="emotion-6 emotion-7 emotion-8 components-flex-item components-color-palette__custom-color-name"
+              className="emotion-5 emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-name"
               data-wp-c16t={true}
               data-wp-component="FlexItem"
             >
               <Noop />
               <Truncate
-                className="components-flex-item components-color-palette__custom-color-name emotion-9 emotion-5"
+                className="components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
                 data-wp-c16t={true}
                 data-wp-component="FlexItem"
               >
                 <View
                   as="span"
-                  className="emotion-11 components-truncate components-flex-item components-color-palette__custom-color-name emotion-9 emotion-5"
+                  className="emotion-10 components-truncate components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
                   data-wp-c16t={true}
                   data-wp-component="FlexItem"
                 >
                   <Noop />
                   <span
-                    className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-15 emotion-5"
+                    className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-14 emotion-4"
                     data-wp-c16t={true}
                     data-wp-component="FlexItem"
                   >
@@ -485,13 +473,13 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
           >
             <View
               as="span"
-              className="emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-value"
+              className="emotion-5 emotion-6 components-flex-item components-color-palette__custom-color-value"
               data-wp-c16t={true}
               data-wp-component="FlexItem"
             >
               <Noop />
               <span
-                className="components-flex-item components-color-palette__custom-color-value emotion-19 emotion-5"
+                className="components-flex-item components-color-palette__custom-color-value emotion-18 emotion-4"
                 data-wp-c16t={true}
                 data-wp-component="FlexItem"
               >
@@ -558,20 +546,17 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 3);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-2>*+*:not( marquee ) {
-  margin-top: calc(4px * 3);
-}
-
-.emotion-3>* {
+.emotion-2>* {
   min-height: 0;
 }
 
-.emotion-4 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -583,20 +568,17 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 3);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-4>*+*:not( marquee ) {
-  margin-top: calc(4px * 3);
-}
-
-.emotion-4>* {
+.emotion-3>* {
   min-height: 0;
 }
 
-.emotion-7 {
+.emotion-6 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -604,21 +586,18 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-8>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-9>* {
+.emotion-7>* {
   min-width: 0;
 }
 
-.emotion-10 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -630,21 +609,18 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-10>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-10>* {
+.emotion-8>* {
   min-width: 0;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -652,13 +628,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   min-width: 0;
 }
 
-.emotion-14 {
+.emotion-12 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
-.emotion-15 {
+.emotion-13 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -669,14 +645,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   flex: 1;
 }
 
-.emotion-17 {
+.emotion-15 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.emotion-21 {
+.emotion-19 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -691,7 +667,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   flex: 1;
 }
 
-.emotion-25 {
+.emotion-23 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -723,14 +699,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     spacing={3}
   >
     <View
-      className="emotion-0 emotion-1 emotion-2 emotion-3 components-flex components-h-stack components-v-stack"
+      className="emotion-0 emotion-1 emotion-2 components-flex components-h-stack components-v-stack"
       data-wp-c16t={true}
       data-wp-component="VStack"
       isColumn={true}
     >
       <Noop />
       <div
-        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        className="components-flex components-h-stack components-v-stack emotion-3 emotion-4"
         data-wp-c16t={true}
         data-wp-component="VStack"
       >
@@ -744,9 +720,9 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             contentClassName="components-color-palette__custom-color-dropdown-content"
             popoverProps={
               Object {
-                "__unstableShift": true,
                 "offset": 8,
                 "placement": "bottom",
+                "shift": true,
               }
             }
             renderContent={[Function]}
@@ -777,7 +753,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   aria-haspopup="true"
                   aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
                   as="button"
-                  className="emotion-0 emotion-7 emotion-8 emotion-9 components-flex components-color-palette__custom-color"
+                  className="emotion-0 emotion-6 emotion-7 components-flex components-color-palette__custom-color"
                   data-wp-c16t={true}
                   data-wp-component="Flex"
                   onClick={[Function]}
@@ -793,7 +769,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                     aria-expanded={false}
                     aria-haspopup="true"
                     aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                    className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                    className="components-flex components-color-palette__custom-color emotion-8 emotion-4"
                     data-wp-c16t={true}
                     data-wp-component="Flex"
                     onClick={[Function]}
@@ -829,25 +805,25 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                             "selector": ".components-truncate",
                           }
                         }
-                        className="emotion-12 emotion-13 emotion-14 components-flex-item components-color-palette__custom-color-name"
+                        className="emotion-10 emotion-11 emotion-12 components-flex-item components-color-palette__custom-color-name"
                         data-wp-c16t={true}
                         data-wp-component="FlexItem"
                       >
                         <Noop />
                         <Truncate
-                          className="components-flex-item components-color-palette__custom-color-name emotion-15 emotion-5"
+                          className="components-flex-item components-color-palette__custom-color-name emotion-13 emotion-4"
                           data-wp-c16t={true}
                           data-wp-component="FlexItem"
                         >
                           <View
                             as="span"
-                            className="emotion-17 components-truncate components-flex-item components-color-palette__custom-color-name emotion-15 emotion-5"
+                            className="emotion-15 components-truncate components-flex-item components-color-palette__custom-color-name emotion-13 emotion-4"
                             data-wp-c16t={true}
                             data-wp-component="FlexItem"
                           >
                             <Noop />
                             <span
-                              className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-21 emotion-5"
+                              className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-19 emotion-4"
                               data-wp-c16t={true}
                               data-wp-component="FlexItem"
                             >
@@ -863,13 +839,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                     >
                       <View
                         as="span"
-                        className="emotion-12 emotion-13 components-flex-item components-color-palette__custom-color-value"
+                        className="emotion-10 emotion-11 components-flex-item components-color-palette__custom-color-value"
                         data-wp-c16t={true}
                         data-wp-component="FlexItem"
                       >
                         <Noop />
                         <span
-                          className="components-flex-item components-color-palette__custom-color-value emotion-25 emotion-5"
+                          className="components-flex-item components-color-palette__custom-color-value emotion-23 emotion-4"
                           data-wp-c16t={true}
                           data-wp-component="FlexItem"
                         >

package/src/color-picker/input-with-slider.tsx

@@ -33,6 +33,7 @@ export const InputWithSlider = ( {
 				label={ label }
 				hideLabelFromVision
 				value={ value }
+				// @ts-expect-error TODO: Resolve discrepancy in NumberControl
 				onChange={ onChange }
 				prefix={
 					<Spacer

package/src/combobox-control/index.js

@@ -96,7 +96,7 @@ function ComboboxControl( {
 		} );
 
 		return startsWithMatch.concat( containsMatch );
-	}, [ inputValue, options, value ] );
+	}, [ inputValue, options ] );
 
 	const onSuggestionSelected = ( newSelectedSuggestion ) => {
 		setValue( newSelectedSuggestion.value );