GridItem should not use prop shorthand (#17610)

frontend/src/metabase/collections/components/BulkActions.jsx

@@ -66,8 +66,8 @@ function BulkActions(props) {
                    to the main content above to ensure the bulk checkbox lines up */}
       <Box px={[2, 4]} py={1}>
         <Grid>
-          <GridItem w={[1, 1 / 3]} />
-          <GridItem w={[1, 2 / 3]} px={[1, 2]}>
+          <GridItem width={[1, 1 / 3]} />
+          <GridItem width={[1, 2 / 3]} px={[1, 2]}>
             <Flex align="center" justify="center" px={2}>
               <SelectionControls {...props} />
               <BulkActionControls

frontend/src/metabase/components/CollectionList.jsx

@@ -33,7 +33,7 @@ function CollectionList({
       {collections
         .filter(c => c.id !== currentUser.personal_collection_id)
         .map(collection => (
-          <GridItem w={w} key={collection.id}>
+          <GridItem width={w} key={collection.id}>
             <CollectionItem
               collection={collection}
               event={`${analyticsContext};Collection List;Collection click`}

frontend/src/metabase/components/ExplorePane.jsx

@@ -139,7 +139,7 @@ export const ExploreList = ({
   <Grid>
     {candidates &&
       candidates.map((option, index) => (
-        <GridItem w={gridColumns} key={index}>
+        <GridItem width={gridColumns} key={index}>
           {asCards ? (
             <Card hoverable p={2}>
               <ExploreOption option={option} />

frontend/src/metabase/components/Grid.jsx

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

frontend/src/metabase/containers/Overworld.jsx

@@ -164,7 +164,7 @@ class Overworld extends React.Component {
                   {items.map(pin => {
                     return (
                       <GridItem
-                        w={[1, 1 / 2, 1 / 3]}
+                        width={[1, 1 / 2, 1 / 3]}
                         key={`${pin.model}-${pin.id}`}
                       >
                         <Link
@@ -288,7 +288,7 @@ class Overworld extends React.Component {
                   <Box mb={4}>
                     <Grid>
                       {databases.map(database => (
-                        <GridItem w={[1, 1 / 3]} key={database.id}>
+                        <GridItem width={[1, 1 / 3]} key={database.id}>
                           <Link
                             to={Urls.browseDatabase(database)}
                             hover={{ color: color("brand") }}

frontend/src/metabase/containers/UserCollectionList.jsx

@@ -44,7 +44,7 @@ const UserCollectionList = ({ collectionsById }) => (
               list.map(
                 user =>
                   user.personal_collection_id && (
-                    <GridItem w={1 / 3} key={user.personal_collection_id}>
+                    <GridItem width={1 / 3} key={user.personal_collection_id}>
                       <Link
                         to={Urls.collection(
                           collectionsById[user.personal_collection_id],

frontend/src/metabase/new_query/containers/NewQueryOptions.jsx

@@ -83,7 +83,7 @@ export default class NewQueryOptions extends Component {
       <Box my="auto" mx={PAGE_PADDING}>
         <Grid className="justifyCenter">
           {hasDataAccess && (
-            <GridItem w={ITEM_WIDTHS}>
+            <GridItem width={ITEM_WIDTHS}>
               <NewQueryOption
                 image="app/img/simple_mode_illustration"
                 title={t`Simple question`}
@@ -95,7 +95,7 @@ export default class NewQueryOptions extends Component {
             </GridItem>
           )}
           {hasDataAccess && (
-            <GridItem w={ITEM_WIDTHS}>
+            <GridItem width={ITEM_WIDTHS}>
               <NewQueryOption
                 image="app/img/notebook_mode_illustration"
                 title={t`Custom question`}
@@ -107,7 +107,7 @@ export default class NewQueryOptions extends Component {
             </GridItem>
           )}
           {hasNativeWrite && (
-            <GridItem w={ITEM_WIDTHS}>
+            <GridItem width={ITEM_WIDTHS}>
               <NewQueryOption
                 image="app/img/sql_illustration"
                 title={t`Native query`}