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 The markup still doesn't make sense, let's try again.

Currently this:

<div class="c-bolt-floating-action-buttons c-bolt-floating-action-buttons--position-bottom-right" aria-hidden="false" aria-expanded="true" data-visible-items="2" data-show-on-load="" data-bolt-ready="">
  <ul class="c-bolt-floating-action-buttons__content">
    <li class="c-bolt-floating-action-buttons__content-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Share"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__content-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Back to top"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__content-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__content-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__content-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
    </li>
  </ul>
  <div class="c-bolt-floating-action-buttons__more">
    <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="More"></button>
  </div>
</div>

What we want to get to is this:

<div class="c-bolt-floating-action-buttons c-bolt-floating-action-buttons--position-bottom-right" aria-hidden="false" data-visible-items="2" data-show-on-load data-bolt-ready>
  <ul class="c-bolt-floating-action-buttons__list">
    <li class="c-bolt-floating-action-buttons__list-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Share"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__list-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Back to top"></button>
    </li>
    <li class="c-bolt-floating-action-buttons__list-item">
      <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="More" aria-expanded="false"></button>
      <ul class="c-bolt-floating-action-buttons__list">
        <li class="c-bolt-floating-action-buttons__list-item">
          <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
        </li>
        <li class="c-bolt-floating-action-buttons__list-item">
          <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
        </li>
        <li class="c-bolt-floating-action-buttons__list-item">
          <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Secondary"></button>
        </li>
      </ul>
    </li>
  </ul>
</div>

aria-expanded is to be used on a <button> not a <div>. Also reference my rough design previously, when "more" is clicked on to expand, the ellipsis changes to an X.

[MarcinMr]

@mikemai2awesome @cjwhitedev I did an example of the children's btns animation. Had to change js for testing purposes, this might need to be refactored, didn't make cascade variables dynamic, but hardcoded at this moment in CSS as I don't know if this is what we are looking for.

[mikemai2awesome]

@cjwhitedev This is working great now. We have show_on_scroll, but how can we hide the FAB again if user scrolls back up? The scroll to top button on Collaboration Center fades away when user scrolls back up, we need to cover this use case.