DS-541 Floating Action Buttons

[cjwhitedev]

Jira

• DS-541
• DS-540

Summary

Create a component for floating action buttons.

Details

1. Added the new Floating Action Buttons component
2. Created full page demos to showcase the component usage
3. Fixed a bug in Button element where icon is way too big for small icon-only buttons

How to test

1. Pull Down the Branch and update.
2. Check out the demo pages.

Release notes

New component named Floating Action Buttons added.

Visual changes

Icon-only button with size set to small renders smaller icon now. Overall button size is not affected.

[mikemai2awesome]

@cjwhitedev This is a good first pass. First, let's keep this simple and just name this Floating Action Buttons rather than a fancy term that doesn't resonate.

Secondly, let's go over some visual enhancements and semantics fixes.

Visual

Let's create some information hierarchy here. If the more button toggles on additional buttons, these would be considered secondary. Rough sketch below:

Additionally, it'd be great to smooth out the transition with some motion effects like this.

Semantics

This is a list of buttons, let's apply the correct semantics in the markup.

<ul>
  <li>
    <button type="button">more</button>
    <ul>
      <li>
        <a href="">
          rocket
        </a>
      </li>
      <li>
        <a href="">
          rocket
        </a>
      </li>
      <li>
        <a href="">
          rocket
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="">share</a>
  </li>
  <li>
    <a href="">scroll to top</a>
  </li>
</ul>

[danielamorse]

@cjwhitedev left a few inline requests. Please also update demo titles and description to reflect the new prop name (still see examples of "show-on-scroll-position"), and remember to prefix commit messages with the ticket number 🙏

[danielamorse]

@cjwhitedev approved! 🎉 Thanks for sticking with this one. I think it turned out great.

I made two last tweaks. One is a very minor JS style thing - I tend to skip brackets for single-line if statement. It's totally fine to include brackets (some prefer that), but for consistency I removed them (see commit). Second, I removed the remaining scroll-position demos (see commit).

Before merging I just want to double-check this has @mikemai2awesome's approval. I think he approved before many recent changes.

[mikemai2awesome]

@danielamorse @cjwhitedev I fixed some docs and tested with screen readers. Good to go.