[Suggestion] Add Slider, Toggle and Section components

[tjallingt]

Slider and Toggle are mentioned in the extension-api UX Guidelines these look great and it would be amazing if we could just use them like any of the other components. Sliders might be tricky but the toggle should be relatively simple to implement...

What I mean by Section is a little bit more tricky to explain; in the extension-api UX Guidelines it also mentions how to structure a dialog, having a component to easily build out form sections with a nice header and correct padding and margins would be great. Perhaps this component could also make it easy to line up multiple columns of inputs as shown in some of the images.

[craigkovatch]

We're already working on Stepper :) Will discuss the rest of this with the team.

[tjallingt]

Fantastic! Can't wait to be able to use them 😄

[craigkovatch]

@tjallingt We're hoping to finish up Stepper before the holidays and will look at Slider after that.

WRT Section, we're actually re-evaluating the screenshots you posted as we may have inadvertently published non-finalized design guidelines.

My own thinking has always been: setting font-size and margin-bottom on an element is simple enough that creating an API for something like a Section (that we then have to support and be careful not to break) is more pain than it's worth. Likewise for something like column alignment -- I think display: table or display: flex are better options.

But do let me know if you think there's additional value that I'm not considering -- your feedback so far has been super valuable and we really appreciate it.

[tjallingt]

Yea the Section component idea is a bit more out there. My basis for wanting just being able to quickly throw together forms that follow your style guide. As you say it would basically only set some margins so I agree it might not really be worth adding.

On another note: the DropdownSelect elements in the style guide all have labels but currently in tableau-ui we don't have a prop to add a label. Essentially just:

function DropdownSelect({ label, ...props }) {
  return (
    <label
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <small style={{ color: "rgba(0,0,0,0.56)", fontSize: 10 }}>{label}</small>
      <CurrentDropdownSelect {...props} />
    </label>
  );
}

[craigkovatch]

Closing in favor of separate issues ^