Bifrost Design System

SlideDown

import SlideDown from "@intility/bifrost-react/SlideDown";

Rewritten from scratch in in 4.0, potentially breaking.

Animate height

Animating height is tricky because CSS can't transition to keyword auto, this component creates two wrapper divs which use the .bf-expand class.

This component is used internally by <Accordion.Item>, <Message expandable>, <Table.Row content>, and <Nav.Group> (when inside expanded sidebar or mobile menu).

Pass a boolean to the open prop to control its open/collapsed state:

<SlideDown open={booleanState}>
  <p>My content...</p>
</SlideDown>

Combined with <Button.Expand> you can create expandable content like this;

<Button.Expand open={isOpen} onClick={() => setIsOpen(!isOpen)}>
  Click here to toggle the content below
</Button.Expand>
<SlideDown open={isOpen}>
  <p>My content...</p>
</SlideDown>

"I really wish I had my hammer."
"Hammer?"
"Quite unique. It was made from this special metal from the heart of a dying star. And when I spun it really, really fast it gave me the ability to fly."
"You rode a hammer?"
"No, I didn’t ride the hammer."
"The hammer rode you on your back?"
"No. I used to spin it really fast, and it would pull me off the..."
"Oh, my God. The hammer pulled you off?"
"The ground. It would pull me off the ground, up into the air, and I would fly. Every time I threw it, it would always come back to me."
"Sounds like you had a pretty special and intimate relationship with this hammer and that losing it was almost comparable to losing a loved one."
"That’s a nice way of putting it.

Padding

The technique used internally does not allow padding on the wrapper element.

Avoid padding on the <SlideDown> itself

<SlideDown open={booleanState} style={{ padding: "16px" }}>
  <p>Will not be hidden properly :(</p>
</SlideDown>

Instead apply padding to a container around your content

<SlideDown open={booleanState}>
  <div style={{ padding: "16px" }}>
    <p>Ahh, that's much better</p>
  </div>
</SlideDown>

Sandbox

import { useState } from "react";
import SlideDown from "@intility/bifrost-react/SlideDown";
import Button from "@intility/bifrost-react/Button";

export default function () {
  const [expanded, setExpanded] = useState(true);
  return (
    <>
      <Button.Expand onClick={() => setExpanded(!expanded)} open={expanded}>
        Click here to toggle the content below
      </Button.Expand>
      <SlideDown open={expanded} className="bf-content">
        <p>
          "I really wish I had my hammer."
          <br />
          "Hammer?"
          <br />
          "Quite unique. It was made from this special metal from the heart of a
          dying star. And when I spun it really, really fast it gave me the
          ability to fly."
          <br />
          "You rode a hammer?"
          <br />
          "No, I didn’t ride the hammer."
          <br />
          "The hammer rode you on your back?"
          <br />
          "No. I used to spin it really fast, and it would pull me off the..."
          <br />
          "Oh, my God. The hammer pulled you off?"
          <br />
          "The ground. It would pull me off the ground, up into the air, and I
          would fly. Every time I threw it, it would always come back to me."
          <br />
          "Sounds like you had a pretty special and intimate relationship with
          this hammer and that losing it was almost comparable to losing a loved
          one."
          <br />
          "That’s a nice way of putting it.
        </p>
      </SlideDown>
      <p className="bf-p">following content will be pushed down</p>
    </>
  );
}

Open Sandbox