Remove Flex/Box prop shorthand in metabase/components (#17345)

* Remove Flex/Box prop shorthand in metabase/components

* Grid's width is an array (responsive sizes)

frontend/src/metabase/components/CollectionEmptyState.jsx

@@ -21,17 +21,19 @@ const Element = ({
     className="bg-white rounded"
     align="center"
     p={2}
-    w={"300px"}
     mb={1}
-    style={{ boxShadow: `0 1px 4px 1px rgba(0, 0, 0, 0.08)` }}
+    style={{ width: 300, boxShadow: `0 1px 4px 1px rgba(0, 0, 0, 0.08)` }}
   >
     <IconWrapper borderRadius={"99px"} bg={iconBackgroundColor} p={1} mr={1}>
       <Icon name={iconName} color="white" />
     </IconWrapper>
     <Box
-      w={textWidth}
-      bg={color("brand-light")}
-      style={{ height: 8, borderRadius: 99 }}
+      style={{
+        width: textWidth,
+        height: 8,
+        borderRadius: 99,
+        backgroundColor: color("brand-light"),
+      }}
     />
   </Flex>
 );

frontend/src/metabase/components/ExplorePane.jsx

@@ -160,9 +160,12 @@ export const ExploreOption = ({ option }: { option: Candidate }) => (
     <Flex
       align="center"
       justify="center"
-      bg={color("accent4")}
-      w="42px"
-      style={{ borderRadius: 6, height: 42 }}
+      style={{
+        backgroundColor: color("accent4"),
+        borderRadius: 6,
+        width: 42,
+        height: 42,
+      }}
       mr={1}
     >
       <Icon name="bolt" size={20} className="flex-no-shrink text-white" />

frontend/src/metabase/components/Grid.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Box, Flex } from "grid-styled";
 
 export const GridItem = ({ children, w, px, py, ...props }) => (
-  <Box w={w} px={px} py={py} {...props}>
+  <Box px={px} py={py} {...props} width={w}>
     {children}
   </Box>
 );