Skip to content
This repository has been archived by the owner on Apr 14, 2020. It is now read-only.

Easy gets easier | Reshaping components, updated docs, and fixes! 🧙✨
Compare
Choose a tag to compare
@itsdouges itsdouges released this 06 May 01:20
· 106 commits to master since this release
v2.2.0
64381c4

Two brand new components this release. Some old components that are actually documented now. And some bug fixes.

Enjoy! 🎉

Ooh, shiny! ✨✨

ReshapingContainer 🎨

Note - This is a new type of component ("composite"). They will be made up of one or more animations, and some extra spice 🌶 to give a great drop-in and use ASAP experience for developers.

A composite component that is made up of the Move animation and some extra markup for the floating background. It has been made to be able to efficiently have the parent container resize around its children after state changes.

This is useful for anything where you want the background to nicely reshape itself around its children, for example a hover menu!

Note - Yes the children bleed outside of the container. Yes it's intended. This component does one thing - reshape the background to the size of the children on state changes. It's up to you to do something with the children 😊

import { ReshapingContainer } from 'yubaba';

<ReshapingContainer id="hello-world">
  {props => <div {...props}>hello, world!</div>}
</ReshapingContainer>

reshaping-container

RevealReshapingContainer 👀 🎨

Another composite component that is made up of SimpleReveal and ReshapingContainer. It will do everything the reshaping container does plus keeping the children within the container when resizing.

This is useful for any experience that does not change its position, only dimensions. For example a modal dialog!

import { RevealReshapingContainer } from 'yubaba';

<RevealReshapingContainer id="hello-world">
  {props => <div {...props}>hello, world!</div>}
</RevealReshapingContainer>

reveal-reshaping-container

Reveal 👀

Will reveal the destination element from the origin size to the destination size using clip-path only which will not work for IE11.

import Baba, { Reveal } from 'yubaba';

<Baba name="reveal">
  <Reveal>
    {props => <div {...props}>hello, world!</div>}
  </Reveal>
</Baba>

FocalReveal 🎯 👀

Note - Actually not new, just documented now

Will reveal a container around a marked focal element using width and height, or alternatively clip-path. See FocalRevealMove for what this looks like.

This component requires the use of a FocalTarget to mark the focal element.

import Baba, { FocalReveal, FocalTarget } from 'yubaba';

<Baba name="focal-reveal">
  <FocalReveal>
    {props => (
      <div {...props}>
        hello, world!
        <FocalTarget>{target => <img src="./my-image.jpeg" {...target} />}</FocalTarget>
      </div>
    )}
  </FocalReveal>
</Baba>

focal-reveal

FadeMove 💨

**Note -**Actually not new, just documented now

Will clone the origin element and position it absolutely then animate it ontop of the destination element, while fading out.

Generally you'd want to use Move or CrossFadeMove over this.

import Baba, { FadeMove } from 'yubaba';

<Baba name="reveal">
  <FadeMove>
    {props => <div {...props}>hello, world!</div>}
  </FadeMove>
</Baba>

fade-move

Fixes

Deprecation notice - RevealMove has been renamed to FocalRevealMove. You can still use it as RevealMove for now, but will be removed in the next major release.

  • Baba will no longer send their own data to a parent Baba now
  • RevealMove has been renamed to FocalRevealMove

Chores

  • README has been given some love, primarily around the value prop area
  • yubabajs.com now groups components by type (focal, supporting, composite.. etc)
Assets 2
Loading