Simplify Responsive prop

[couds]

Currently the responsive prop is way to complex, quite nested objects, I'm thinking on flat the object and separate it into several different props. what do you guys think?

This will be a breaking change so if possible I will try to push it to V4.

What I have in mind is something like this:

Create one prop for each breakpoints mobile, tablet, touch, desktop, widescreen, fullhd with this shape.

PropTypes.shape({
    display: PropTypes.oneOf(displays),
    hide: PropTypes.oneOf([true, false, 'only']),
    textSize: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
    textAlignment: PropTypes.oneOf([
      'centered',
      'justified',
      'left',
      'right',
      'centered-only',
      'justified-only',
      'left-only',
      'right-only',
    ]),
  }),

[kennethnym]

@couds will the syntax be something like this?

<Button
  mobile={{
    hide: true,
    display: 'flex',
    textSize: 6,
  }}
/>

if so, then i prefer something like onMobile, or onDesktop. Also, I think we should have separate props for viewport-specific helpers, like onDesktopOnly and onMobileOnly.

<Button
  onMobile={{
    hide: true,
    display: 'flex',
  }}
  onDesktopOnly={{
    textSize: 6,
  }}
/>

[couds]

Hi @MrCreeper1008 I will think about the dmobile/deskropOnly.

What is for sure is that the prop name will not start with on because normally that is for event listener and could be cconfusing

[kennethnym]

Fixed in commit 1c5ce9a