[Collapse] Support collapsing horizontally (x-axis)

[sentilesdal]

Environment

• Package version(s): 3.12.0
• Browser and OS versions: Chrome 71

Feature request

Allow the <Collapse/> to collapse horizontally.

Examples

One idea: pass in the dimension you wish to transition on

export interface ICollapseProps extends IProps {
  ...
  /**
   * The dimension of the  child component to apply the transition.
   * @default "height"
   */
  transitionDimension?: 'height' | 'width';
  ...
}

and then deciding throughout which dimension to capture and which transition to apply.

[sentilesdal]

I would be happy to submit a PR if someone would give some direction on how they'd prefer to see this implemented. i.e. would you like to see a boolean flag used instead for the API:

export interface ICollapseProps extends IProps {
  ...
  /**
   * If true, transitions along the x-axis.
   * @default false
   */
  horizontal?: boolean;
}

[giladgray]

@sentilesdal definitely down for this. we use an opt-in vertical prop (default false) on other components (ControlGroup, ButtonGroup) so it would be cool to maintain that consistency, but it's very awkward that the default here would be vertical=true and you'd have to set vertical={false} for this behavior. so i guess i'm open to the API being horizontal={true}. either way, definitely just a boolean prop.

i'd be delighted to review a PR for this! if, in your travels, you want to clean up the Collapse code, that would be greatly appreciated and encouraged. 👏

[sentilesdal]

@giladgray Sounds good. I'm going to try to find time this weekend to get this implemented. =)

[RonnyO]

Hey @sentilesdal, any chance you started work on this? I need this as well, so if you didn't start yet perhaps I will 🙂

[sentilesdal]

@RonnyO no i haven’t. Feel free!