Start adding lint rules for 40px default size (#64410)

* Start adding lint rules for 40px default size

* Make stricter

Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>

.eslintrc.js

@@ -278,7 +278,6 @@ module.exports = {
 			},
 		},
 		{
-			// Temporary rules until we're ready to officially deprecate the bottom margins.
 			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
 			excludedFiles: [
 				'packages/components/src/**/@(test|stories)/**',
@@ -289,6 +288,7 @@ module.exports = {
 					'error',
 					...restrictedSyntax,
 					...restrictedSyntaxComponents,
+					// Temporary rules until we're ready to officially deprecate the bottom margins.
 					...[
 						'BaseControl',
 						'CheckboxControl',
@@ -309,6 +309,19 @@ module.exports = {
 							componentName +
 							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
 					} ) ),
+					// Temporary rules until we're ready to officially default to the new size.
+					...[
+						'BorderBoxControl',
+						'BorderControl',
+						'DimensionControl',
+						'FontSizePicker',
+					].map( ( componentName ) => ( {
+						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
 				],
 			},
 		},