Frap

Notes

A FRAP (Floating Resizable Action Pill) is a continuation of Material Design's FAB: Floating Action Button. Unlike the FAB, it includes clear text, never an icon, in order to make every action clear and unambigous.

It's a button-like element that is typically the primary action forward in a screen/workflow. It persistently conveys a user's next best action by floating at the highest possible element elevation, always locked to the bottom right of the screen.

The FRAP and Mini FRAP can be paired to deliver two distinct and immediately available actions at key points within the order flow. Mini FRAPs have the same elevation and interactive properties as FRAPS, however they may contain an icon or sometimes an icon paired with text.

Like Button, it renders button tags by default or a if href is provided. It also supports an arbitrary tagName prop for advanced usage, which can support HTML tag names or React components like Link.

Props

centerSvgInMiniFrapbool[true]
If true, SVG will be centered inside the frap.
childrennode
circularbool
If true, sets a circular background behind the actual element.
classNamestring['']
coloroneOf('greenAccent', 'white', 'houseGreen')['greenAccent']
Sets background color to either green accent, house green, or white. Defaults to green accent. Text color will be set based on which option is chosen.
disabledbool
hrefstring
loadingbool[false]
If true, it shows a loading animation inside the frap. Not shown if it's a mini frap or it's disabled.
minibool[false]
If true, limits height and changes foreground/background colors.
tagNameany
Permits use of any HTML element or React component as a frap. Defaults to button, or a if an href is present.
onClick[() => {}]

Example: Fraps

class FrapExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }

  toggleLoading() {
    this.setState({
      showLoading: !this.state.showLoading
    });
  }
  render() {
    return (
      <div className='relative'>
        <Frap
          loading={ this.state.showLoading }
          className='mr3 mb4'
        >
          It's a Frap!
        </Frap>
        <Frap
          loading={ this.state.showLoading }
          mini
          className='block mr3 mb4'>
          Mini Frap
        </Frap>

        <div className='bg-houseGreen flex p5 items-center'>
          <Frap
            loading={ this.state.showLoading }
            className='mr3'
            color='white'
          >
            It's a White Frap!
          </Frap>
          <Frap
            circular color='white'
            aria-label='Favorite'
          >
            <Icon path={ iconPaths.heart } />
          </Frap>
        </div>

        <Frap
          className='mr3 mt4'
          color='white'
          loading={ this.state.showLoading }
          href={'https://www.starbucksreserve.com/en-us/locations/milano'}
          target="_blank"
        >
          It's a Hyperlink Frap
        </Frap>

        <Button
          className='absolute'
          onClick={ () => this.toggleLoading() }
          style={{ right: 0, top: 0 }}
        >
          { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}

render(<FrapExample />);

class FrapExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }

  toggleLoading() {
    this.setState({
      showLoading: !this.state.showLoading
    });
  }
  render() {
    return (
      <div className='relative'>
        <Frap
          loading={ this.state.showLoading }
          className='mr3 mb4'
        >
          It's a Frap!
        </Frap>
        <Frap
          loading={ this.state.showLoading }
          mini
          className='block mr3 mb4'>
          Mini Frap
        </Frap>

        <div className='bg-houseGreen flex p5 items-center'>
          <Frap
            loading={ this.state.showLoading }
            className='mr3'
            color='white'
          >
            It's a White Frap!
          </Frap>
          <Frap
            circular color='white'
            aria-label='Favorite'
          >
            <Icon path={ iconPaths.heart } />
          </Frap>
        </div>

        <Frap
          className='mr3 mt4'
          color='white'
          loading={ this.state.showLoading }
          href={'https://www.starbucksreserve.com/en-us/locations/milano'}
          target="_blank"
        >
          It's a Hyperlink Frap
        </Frap>

        <Button
          className='absolute'
          onClick={ () => this.toggleLoading() }
          style={{ right: 0, top: 0 }}
        >
          { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}

render(<FrapExample />);

<div className='p4'>
  <p>
    <Frap mini circular className='mb4' aria-label='Favorite'>
      <Icon path={ iconPaths.heart } />
    </Frap>
  </p>
  <p>
    <Frap circular>
      $50
    </Frap>
  </p>
</div>

<div className='p4'>
  <p>
    <Frap mini circular className='mb4' aria-label='Favorite'>
      <Icon path={ iconPaths.heart } />
    </Frap>
  </p>
  <p>
    <Frap circular>
      $50
    </Frap>
  </p>
</div>

Example: Rewards Themed

<React.Fragment>
  <p className='pb3'>Fraps nested in ThemeContext.Provider with a Rewards Theme it will change style automatically. The markup for the Frap is identical, only the Theme provider wrapping the buttons is different.</p>
  <ThemeContext.Provider value={ themes.rewards }>
    <div className='p3'>
      <p className='pb2'>Rewards theme</p>
      <p>
        <Frap mini className='block mr3 mb4'>
          On the
        </Frap>
        <Frap>
          Dark side
        </Frap>
      </p>
    </div>
  </ThemeContext.Provider>
</React.Fragment>

<React.Fragment>
  <p className='pb3'>Fraps nested in ThemeContext.Provider with a Rewards Theme it will change style automatically. The markup for the Frap is identical, only the Theme provider wrapping the buttons is different.</p>
  <ThemeContext.Provider value={ themes.rewards }>
    <div className='p3'>
      <p className='pb2'>Rewards theme</p>
      <p>
        <Frap mini className='block mr3 mb4'>
          On the
        </Frap>
        <Frap>
          Dark side
        </Frap>
      </p>
    </div>
  </ThemeContext.Provider>
</React.Fragment>

Example: Icon and Text Frap

<div className="p4">
  <p>
    <Frap color="houseGreen" className="flex items-end">
      <Icon path={iconPaths.magicWand} className="mr2 color-gold" />
      Customize
    </Frap>
  </p>
</div>;

<div className="p4">
  <p>
    <Frap color="houseGreen" className="flex items-end">
      <Icon path={iconPaths.magicWand} className="mr2 color-gold" />
      Customize
    </Frap>
  </p>
</div>;

<div className='p4'>
  <p className='mb3'>
    The <code>frapPadding</code> and <code>frapPaddingDouble</code> spacing utility classes can be
    used on elements to help provide enough room for content when using a frap. Use the scroll bar
    in each box to see it in effect.
  </p>
  <div className='flex'>
    <div className='relative mr3'>
      <div className='frapPadding' style={{ border: '1px solid #333', height: '200px', overflow: 'auto' }}>
        <p className='p2'>
          There is a lot of content here you really should see.  Wouldn't it be a bummer if some
          button or something was covering up this amazing text? There is a lot of content here you
          really should see.  Wouldn't it be a bummer if some button or something was covering up
          this amazing text? There is a lot of content here you really should see.  Wouldn't it be
          a bummer if some button or something was covering up this amazing text? There is a lot of
          content here you really should see.  Wouldn't it be a bummer if some button or something
          was covering up this amazing text?
      	</p>
        <Frap className='absolute' style={{ right: '16px', bottom: '16px' }}>
          It's a frap!
        </Frap>
      </div>
    </div>
    <div className='relative'>
      <div className='frapPaddingDouble' style={{ border: '1px solid #333', height: '200px', overflow: 'auto' }}>
        <p className='p2'>
          There is a lot of content here you really should see.  Wouldn't it be a bummer if some
          button or something was covering up this amazing text? There is a lot of content here you
          really should see.  Wouldn't it be a bummer if some button or something was covering up
          this amazing text? There is a lot of content here you really should see.  Wouldn't it be
          a bummer if some button or something was covering up this amazing text? There is a lot of
          content here you really should see.  Wouldn't it be a bummer if some button or something
          was covering up this amazing text?
        </p>
        <div className='absolute' style={{ right: '16px', bottom: '16px' }}>
          <div className='mb3'>
            <Frap mini>
              It's a mini frap!
            </Frap>
          </div>
          <div>
            <Frap>
              It's a regular frap!
            </Frap>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className='p4'>
  <p className='mb3'>
    The <code>frapPadding</code> and <code>frapPaddingDouble</code> spacing utility classes can be
    used on elements to help provide enough room for content when using a frap. Use the scroll bar
    in each box to see it in effect.
  </p>
  <div className='flex'>
    <div className='relative mr3'>
      <div className='frapPadding' style={{ border: '1px solid #333', height: '200px', overflow: 'auto' }}>
        <p className='p2'>
          There is a lot of content here you really should see.  Wouldn't it be a bummer if some
          button or something was covering up this amazing text? There is a lot of content here you
          really should see.  Wouldn't it be a bummer if some button or something was covering up
          this amazing text? There is a lot of content here you really should see.  Wouldn't it be
          a bummer if some button or something was covering up this amazing text? There is a lot of
          content here you really should see.  Wouldn't it be a bummer if some button or something
          was covering up this amazing text?
      	</p>
        <Frap className='absolute' style={{ right: '16px', bottom: '16px' }}>
          It's a frap!
        </Frap>
      </div>
    </div>
    <div className='relative'>
      <div className='frapPaddingDouble' style={{ border: '1px solid #333', height: '200px', overflow: 'auto' }}>
        <p className='p2'>
          There is a lot of content here you really should see.  Wouldn't it be a bummer if some
          button or something was covering up this amazing text? There is a lot of content here you
          really should see.  Wouldn't it be a bummer if some button or something was covering up
          this amazing text? There is a lot of content here you really should see.  Wouldn't it be
          a bummer if some button or something was covering up this amazing text? There is a lot of
          content here you really should see.  Wouldn't it be a bummer if some button or something
          was covering up this amazing text?
        </p>
        <div className='absolute' style={{ right: '16px', bottom: '16px' }}>
          <div className='mb3'>
            <Frap mini>
              It's a mini frap!
            </Frap>
          </div>
          <div>
            <Frap>
              It's a regular frap!
            </Frap>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>