Merge pull request #11001 from ethereum/icon-story-grid

Display icons in a grid

Author: pettinarip

src/components/icons/Icons.stories.tsx

@@ -1,4 +1,11 @@
-import { Box, Center, StackDivider, VStack } from "@chakra-ui/react"
+import {
+  Box,
+  Center,
+  Flex,
+  SimpleGrid,
+  StackDivider,
+  VStack,
+} from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 import * as React from "react"
 import { EthHomeIcon } from "./EthHomeIcon"
@@ -180,30 +187,24 @@ iconsDefinitions.sort((a, b) =>
   (a?.displayName || "") > (b?.displayName || "") ? 1 : -1
 )
 const items = iconsDefinitions.map((IconDef) => (
-  <Box
+  <Flex
     key={IconDef.displayName}
+    direction="column"
+    gap={4}
+    p={4}
     border="1px"
     borderStyle="solid"
-    borderColor="border"
-    p={1}
+    borderColor="background.highlight"
   >
     <Center>
-      <IconDef />
+      <IconDef w="50px" h="50px" />
     </Center>
     <Center>{IconDef.displayName}</Center>
-  </Box>
+  </Flex>
 ))
 
 export const Icons: StoryObj<typeof VStack> = {
   render: () => {
-    return (
-      <VStack
-        divider={<StackDivider borderColor="gray.200" />}
-        spacing={4}
-        align="stretch"
-      >
-        {items}
-      </VStack>
-    )
+    return <SimpleGrid columns={[2, 2, 3, 5]}>{items}</SimpleGrid>
   },
 }