This PR cleans up the way we're using responsive object props.

There are three types of cleanup involved here. I think it's easier to explain the responsive object prop syntax as a whole first, so that it's obvious why there are three types of cleanup.

How responsive object props syntax works

When specifying responsive objects, it's important to always start with a base value. The base is basically the default value for that prop.

() => (
  <div>
    {/* These are equivalent */}
    <Box fontSize="16px" />
    <Box fontSize={{ base: '16px' }} />
  </div>
)

To make this responsive, we can add keys for specific breakpoints. If a breakpoint isn't defined, it will use the value from the definition of the next smallest breakpoint that is defined. If there isn't a smaller breakpoint defined, the base value is used.

Essentially we can look at the priority like this:

base < definition for breakpoint smaller than user's breakpoint < exact definition for user's breakpoint

() => (
  <Box fontSize={{ base: '16px', md: '18px', xl: '24px' }} />
)

Here's the breakdown of the values at each breakpoint for the above example:

Breakpoint	Size
< `sm`	`16px`
`sm`	`16px`
`md`	`18px`
`lg`	`18px`
`xl`	`24px`
`2xl`	`24px`

We didn't need to define values for sm, lg, or 2xl because they fall back to the definition of the next smallest defined breakpoint. sm falls back to base, lg falls back to md, and 2xl falls back to xl.

Types of cleanup

Make sure all objects have a base key. Some of them started with sm which will break for screen sizes smaller than the sm breakpoint.
Removing unnecessary breakpoint sizes. If an object defines identical values for base, sm and md, we only need to define base as sm and md will fall back to the base value.
Removing unnecessary use of responsive objects. If a responsive object defines identical values for base and any other breakpoint, we don't need to use responsive syntax at all.

Developer-DAO / DAO-job-board

refactor: clean up responsive object props #210

How responsive object props syntax works

Types of cleanup