Skip to content

Remove the props as and ...props in Only #186

@Ayc0

Description

@Ayc0

Only is not type safe: it accepts as and ...props and drill those props. But there is no check to see if those props match what's should be allowed for the component.

We could try to be smart with those types, but as we're rendering just a <Fragment>, I don't think it makes sense.
So instead of a code like this:

const App = () => (
  <ul>
    <Only as="li" on="xs">
      Only visible for extra small devices (portrait phones)
    </Only>
    <Only as="li" on="sm">
      Only visible for small devices (landscape phones)
    </Only>
    <Only as="li" on="md">
      Only visible for medium devices (tablets)
    </Only>
    <Only as="li" on="lg">
      Only visible for large devices (desktops)
    </Only>
    <Only as="li" on="xl">
      Only visible for extra large devices (large desktops)
    </Only>
    <Only as="li" on="sm xl">
      Only visible for small AND extra large devices
    </Only>
  </ul>
);

We'd instead do:

const App = () => (
  <ul>
    <Only on="xs">
      <li>Only visible for extra small devices (portrait phones)</li>
    </Only>
    <Only on="sm">
      <li>Only visible for small devices (landscape phones)</li>
    </Only>
    <Only on="md">
      <li>Only visible for medium devices (tablets)</li>
    </Only>
    <Only on="lg">
      <li>Only visible for large devices (desktops)</li>
    </Only>
    <Only on="xl">
      <li>Only visible for extra large devices (large desktops)</li>
    </Only>
    <Only on="sm xl">
      <li>Only visible for small AND extra large devices</li>
    </Only>
  </ul>
);

Yes it's a big breaking change, but I don't think this adds a lot of benefits for the codebase

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions