What:

Props returned from useResponsiveProps does not respect common responsive props behaviors.

Why:

The responsive props matcher used on the server accounts only for the default breakpoint. So LgDown prop won't apply (although it should), because "lg" is not the default breakpoint.

const serverMatcher: MatcherFunction = (parsedProp) => {
  const { breakpoint } = parsedProp
  return breakpoint.isDefault && typeof window === 'undefined'
}

Environment:

• atomic-layout version: 0.12.2

Reproduction steps:

import React from 'react'
import { useResponsiveProps } from 'atomic-layout'

// Declaration
const Component = (ownProps) => {
  const props = useResponsiveProps(ownProps)

  return <div {...props}>Text</div>
}

// Usage
<Component
  bgColorLdDown="red"
/>

During SSR the background color won't be present at all. It should be red.

Related issues:

• Successor to useResponsiveProps: Fixes default breakpoint prop value assignment #281