search

tableau / tableau-ui

React UI components that have the look-and-feel of Tableau.
https://tableau.github.io/tableau-ui/
Other
95 stars 28 forks source link

Add `Stepper` component #15

Closed craigkovatch closed 5 years ago

craigkovatch commented 5 years ago

Requested by @tjallingt in #13

craigkovatch commented 5 years ago

@tjallingt do you care about the horizontal stepper buttons, the ones which are not attached to a numeric input? And if so -- I am considering that maybe they should just be a variant of Button or maybe a single StepperButton component with a direction prop -- it feels strange to publish a component which is just two buttons in a wrapper. And since they have no linked behavior, not sure I could make that API more elegant than just publishing single buttons. Any opinions?

tjallingt commented 5 years ago

I find it hard to come up with compelling use cases for a horizontal or left/right Stepper (at least in the context of extensions) so I'm really not sure its worth the effort of adding and maintaining it...

And if someone needs it, it should be pretty simple to add two buttons with two svg icons or whatever.

Having a neatly styled cross browser version of

<input type="number"  min="10" max="100" step="5" value="50" />

is the most generally useful case.

Kind of crazy idea: Maybe if the Toggle is somehow generic enough it could be part of that? As long as it doesn't interfere with the primary use case it might work. Having the Toggle be able to contain icons would be great anyway and maybe there is some pattern that would allow a user to simply listen to left/right Toggle but never set a selected side. I find it hard to say whether this would make the component too generic so maybe this is not that great 😕

I know Kent C Dodds has spend a lot of time making very generic Toggle components to teach React component patterns (I think they quickly become too generic though).

craigkovatch commented 5 years ago

I think stepper buttons are "momentary press button" and thus a different UI concept from "toggle button". Almost done with the "neatly styled cross browser version of " though :)

tjallingt commented 5 years ago

Yea an end user shouldn't have to write <Toggle /> where they meant <Stepper horizontal/>... I intended it more as a justification for having a UI component that is simply two buttons; by uniting the implementation of the horizontal Stepper with the Toggle.

Great to hear my number inputs are gonna look amazing soon ✨

craigkovatch commented 5 years ago

Fixed in https://www.npmjs.com/package/@tableau/tableau-ui/v/2.2.0