Primer React Box component examples appear out of date

[ktravers]

Description

In the docs for the Box component, the examples all use props that no longer appear to be available for this component.

For example, my team recently tried to use the gridGap prop as documented here, which resulted in the following linter failure: https://janky.githubapp.com/80188803/output.

Steps to reproduce

1. In a codebase with Primer React important, attempt to use any of the Box component code examples as currently documented. For example:

   <Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
     <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
       1
     </Box>
     <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
       2
     </Box>
     <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
       3
     </Box>
   </Box>

2. Observe primer-react/no-system-props error(s)

Version

35.18.0

Browser

Chrome, Safari, Firefox

[broccolinisoup]

👋🏻 @ktravers Thanks for taking the time to file this issue! For context, these props (such as gridGap) are system props and we are moving away from them (This doc needs to be updated as well! ) - sorry that the docs were not up-to-date and possibly misleading - we'll make sure to update them. sx prop can be used for styling on our components. I hope this is helpful - please let us know if you have any questions 🙌🏻

[siddharthkp]

Created a PR for review with a quick fix: https://github.com/primer/react/pull/2886