Dropdowns

The Dropdown component should be used for when content is naturally hidden but then displayed in a drawer-like fashion when the user toggles the button.

Note: This component is still in a “prototype” state until it can be further tested in implementations such as navigations and other areas. Wherever possible, we will try to keep the core funcationality the same going forward and will communicate any potential breaking changes before updating the System.

Usage

Look at the View tab for each dropdown variation to see an example of how it is being used.

Macro reference

Default Dropdown component.

buttonOptions

Param Default Values Description
class miz-button--primary dropdown-toggle String Additional classes appended to the dropdown button
attributes id:'defaultDropdownButtonID' Object Attributes to be applied to the dropdown button
text 'Dropdown button' String The text to be displayed on the dropdown button

contentOptions

Param Default Values Description
class miz-dropdown-content dropdown-menu String Additional classes appended to the dropdown content
attributes null Object Attributes to be applied to the dropdown content
content 'No content' Array The content to be displayed for the dropdown content

dropdownOptions

Param Default Values Description
class miz-dropdown dropdown String Additional classes appended to the dropdown
attributes null Object Attributes to be applied to the dropdown

buttonOptions

Param Default Values Description
class miz-button--primary dropdown-toggle String Additional classes appended to the dropdown button
attributes id:'defaultDropdownButtonID' Object Attributes to be applied to the dropdown button
text 'Dropdown button' String The text to be displayed on the dropdown button

contentOptions

Param Default Values Description
class miz-dropdown-content dropdown-menu miz-dropdown-menu String Additional classes appended to the dropdown content
attributes null Object Attributes to be applied to the dropdown content
content 'No content' Array The content to be displayed for the dropdown content

dropdownOptions

Param Default Values Description
class miz-dropdown dropdown miz-dropdown--menu String Additional classes appended to the dropdown
attributes null Object Attributes to be applied to the dropdown
{#

  Dropdown
  Base dropdown component. Builds a basic dropdown component with a button and some content.
  @see https://designsystem.missouri.edu/components/detail/buttons.html
  @see http://getbootstrap.com/docs/4.1/components/dropdowns/

  @uses AppendClasses, AddAttributes from @miz/utilties/utils.twig
  @uses DropdownButton, DropdownContent from @miz/components/dropdown/dropdown.twig

  @param {object} buttonOptions
  @param {object} contentOptions
  @param {object} options
  @param {string} ├─ options.class
  @param {object} └─ options.attributes

 #}
{% macro Dropdown( buttonOptions, contentOptions, options ) %}
  {%- spaceless %}

    {# Imports #}
    {% from "@miz/utilities/utils.twig" import AppendClasses as appendClasses %}
    {% from "@miz/utilities/utils.twig" import AddAttributes as addAttributes %}
    {% from _self import DropdownButton as dropdownButton %}
    {% from _self import DropdownContent as dropdownContent %}

    {# Parameters #}
    {% set dropdownClass = 'miz-dropdown dropdown' %}
    {% set dropdownClass = appendClasses( dropdownClass, options.class ) %}
    {% set dropdownAttributes = addAttributes( options.attributes ) %}

  {% endspaceless -%}

  {# Output #}
  <div class="{{ dropdownClass }}" {{ dropdownAttributes }}>
    {{ dropdownButton( buttonOptions ) }}
    {{ dropdownContent( contentOptions ) }}
  </div>

{% endmacro %}

{#

  Dropdown button

  @uses AppendClasses, AddAttributes from @miz/utilties/utils.twig
  @uses Button from @miz/components/buttons/button.twig

  @param {object} options
  @param {string} ├─ options.class
  @param {string} ├─ options.text
  @param {object} └─ attributes
  @param {string}    ├─ attributes.id
  @param {string}    ├─ attributes.data-toggle
  @param {string}    ├─ attributes.aria-haspopup
  @param {string}    └─ attributes.aria-expanded

#}
{% macro DropdownButton( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% from "@miz/utilities/utils.twig" import AppendClasses as appendClasses %}
    {% from "@miz/utilities/utils.twig" import AddAttributes as addAttributes %}
    {% from "@miz/components/buttons/buttons.twig" import Button as button %}

    {# Parameters #}
    {% set dropdownButtonClass = 'miz-button--primary' %}
    {% set dropdownButtonClass = appendClasses( dropdownButtonClass, options.class ) %}
    {% set dropdownButtonText = options.text | default( 'Dropdown button' ) %}
    {% set dropdownButtonText = dropdownButtonText ~ '<i class="miz-icon material-icons miz-icon--md">arrow_drop_down</i>' %}
    {% set optionalDropdownButtonAttributes = options.attributes | default( {} ) %}

    {% set dropdownButtonAttributes = {
      "id": "defaultDropdownButtonID",
      "data-toggle": "dropdown",
      "aria-haspopup": "true",
      "aria-expanded": "false"
    } %}

    {% set mergedDropdownButtonContentAttributes = dropdownButtonAttributes | merge( optionalDropdownButtonAttributes ) %}

    {# Variables #}
    {% set dropdownButtonOptions = {
      class: dropdownButtonClass,
      text: dropdownButtonText,
      attributes: mergedDropdownButtonContentAttributes
    } %}

  {% endspaceless -%}

  {# Output #}
  {{ button( dropdownButtonOptions ) }}

{% endmacro %}

{#

  Dropdown content

  @uses AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param {object} options
  @param {string} ├─ options.class
  @param {string} ├─ options.content
  @param {object} └─ attributes
  @param {string}    └─ attributes.aria-labelledby

 #}
{% macro DropdownContent( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% from "@miz/utilities/utils.twig" import AppendClasses as appendClasses %}
    {% from "@miz/utilities/utils.twig" import AddAttributes as addAttributes %}

    {# Parameters #}
    {% set dropdownContentClass = 'miz-dropdown-content dropdown-menu' %}
    {% set dropdownContentClass = appendClasses( dropdownContentClass, options.class ) %}
    {% set dropdownContentContent = options.content | default( 'No content' ) %}
    {% set optionalDropdownAttributes = options.attributes | default( {} ) %}
    {% set dropdownContentAttributes = {
      "aria-labelledby": "defaultDropdownMenuButtonID"
    } %}
    {% set mergedDropdownContentAttributes = dropdownContentAttributes | merge( optionalDropdownAttributes ) %}

    {# Variables #}
    {% set dropdownContentAttributes = addAttributes( mergedDropdownContentAttributes ) %}

  {% endspaceless -%}

  {# Output #}
  <div class="{{ dropdownContentClass }}" {{ dropdownContentAttributes }}>
    {{ dropdownContentContent }}
  </div>

{% endmacro %}

{#

  Dropdown Menu
  This is a type of Dropdown component
  @see https://www.w3.org/TR/wai-aria-practices-1.1/#menu

  @uses AppendClasses, AddAttributes, CreateMenuItemLink from @miz/utilities/utils.twig
  @uses Dropdown from @miz/components/dropdowns/dropdowns.twig

  @param {object} buttonOptions
  @param {object} contentOptions
  @param {array}  └─ contentOptions.items Required
  @param {object}    └─ contentOptions.items.link
  @param {string}       ├─ contentOptions.items.link.class
  @param {string}       ├─ contentOptions.items.link.href
  @param {string}       └─ contentOptions.items.link.text
  @param {object} options
  @param {string} ├─ options.class
  @param {object} └─ attributes

  @todo Still not sure whether the menu item shouldn't be broken out into its own component. JLR

#}
{% macro DropdownMenu( buttonOptions, contentOptions, options = {} ) %}
  {%- spaceless %}

    {# Imports #}
    {% from "@miz/utilities/utils.twig" import CreateMenuItemLink as createMenuItemLink %}
    {% from "@miz/utilities/utils.twig" import AppendClasses as appendClasses %}
    {% from "@miz/components/dropdowns/dropdowns.twig" import Dropdown as dropdown %}

    {# Parameters #}

    {# Content options #}
    {% set dropdownMenuContentClass = 'miz-dropdown-menu' %}
    {% set dropdownMenuContentClass = appendClasses( dropdownMenuContentClass, contentOptions.class ) %}
    {% set dropdownMenuContentItems = contentOptions.items %}

    {# Dropdown options #}
    {% set dropdownMenuClass = 'miz-dropdown--menu' %}
    {% set dropdownMenuClass = appendClasses( dropdownMenuClass, options.class ) %}

    {# Variables #}
    {% set dropdownMenuItemLink = {
      class: "miz-dropdown-item dropdown-item",
      href: "#",
      text: "Menu item"
    } %}

    {% set dropdownMenuContent %}
    {% for menuItem in dropdownMenuContentItems %}
      {{ createMenuItemLink( dropdownMenuItemLink | merge( menuItem.link ) ) }}
    {% endfor %}
    {% endset %}

    {% set dropdownMenuContentOptions = {
      class: dropdownMenuContentClass,
      content: dropdownMenuContent
    } %}

    {% set dropdownOptions = {
      class: dropdownMenuClass,
      attributes: options.attributes
    } %}

    {% set contentOptions = contentOptions | merge( dropdownMenuContentOptions ) %}

  {% endspaceless -%}

  {# Output #}
  {{ dropdown( buttonOptions, contentOptions, dropdownOptions ) }}

{% endmacro %}

        
    
/* No context defined for this component. */
  • Content:
    // Dropdowns
    //
    // Dropdown menu container and contents.
    
    .miz-dropdown {
      position: relative;
    }
    
    // Dropdown Content
    // For now, this is mostly ported over from Bootstrap.
    .miz-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: $zindex-dropdown;
      display: none; // none by default, but block on "open" of the menu
      float: left;
      min-width: $dropdown-min-width;
      width: auto;
      padding: $dropdown-padding-y 0;
      margin: $dropdown-spacer 0 0; // override default ul
    
      @include font-size($dropdown-font-size);
    
      color: $dropdown-color;
      text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
      list-style: none;
      background-color: $dropdown-bg;
      background-clip: padding-box;
      border: $dropdown-border-width solid $dropdown-border-color;
    
      @include border-radius($dropdown-border-radius);
      @include box-shadow($dropdown-box-shadow);
    }
    
    .miz-dropdown-content.show {
      display: flex; // This could cause an issue in IE11 but current does not
      flex-direction: column;
      align-items: flex-start;
    }
    
    .miz-dropdown-item {
      display: block;
      width: 100%; // For `<button>`s
      padding: $miz-space-inset-squish-default;
      clear: both;
      font-weight: $font-weight-normal;
      color: $dropdown-link-color;
      text-align: inherit; // For `<button>`s
      white-space: nowrap; // prevent links from randomly breaking onto new lines
      background-color: transparent; // For `<button>`s
      border: 0; // For `<button>`s
    
      // Prevent dropdown overflow if there's no padding
      // See https://github.com/twbs/bootstrap/pull/27703
      @if $dropdown-padding-y == 0 {
        &:first-child {
          @include border-top-radius($dropdown-inner-border-radius);
        }
    
        &:last-child {
          @include border-bottom-radius($dropdown-inner-border-radius);
        }
      }
    
      @include hover-focus {
        color: $dropdown-link-hover-color;
        text-decoration: none;
    
        @include gradient-bg($dropdown-link-hover-bg);
      }
    
      &.active,
      &:active {
        color: $dropdown-link-active-color;
        text-decoration: none;
    
        @include gradient-bg($dropdown-link-active-bg);
      }
    
      &.disabled,
      &:disabled {
        color: $dropdown-link-disabled-color;
        pointer-events: none;
        background-color: transparent;
        // Remove CSS gradients if they're enabled
        @if $enable-gradients {
          background-image: none;
        }
      }
    }
    
  • URL: /components/raw/miz-dropdowns/_dropdowns.scss
  • Filesystem Path: fractal/pattern-library/miz/components/dropdowns/_dropdowns.scss
  • Size: 2.4 KB