From 60cf6c528d1938879c0fd048fd8bf31101620757 Mon Sep 17 00:00:00 2001 From: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Wed, 29 Aug 2018 15:46:42 -0700 Subject: [PATCH] fix(list): Update single line list to ellipsis (#3460) --- demos/dialog.html | 66 +- demos/drawer/dismissible-drawer.html | 38 +- demos/drawer/modal-drawer.html | 38 +- demos/drawer/permanent-drawer.html | 47 +- demos/list.html | 2219 +++++++++-------- demos/menu-surface.html | 31 +- demos/menu.html | 120 +- packages/mdc-dialog/README.md | 66 +- packages/mdc-drawer/README.md | 59 +- packages/mdc-list/README.md | 121 +- packages/mdc-list/mdc-list.scss | 6 +- packages/mdc-menu/README.md | 16 +- packages/mdc-theme/_color-palette.scss | 6 +- .../spec/mdc-drawer/classes/dismissible.html | 18 +- .../spec/mdc-drawer/classes/modal.html | 18 +- .../spec/mdc-drawer/classes/permanent.html | 18 +- 16 files changed, 1687 insertions(+), 1200 deletions(-) diff --git a/demos/dialog.html b/demos/dialog.html index 9d707358fe3..ecea24e5305 100644 --- a/demos/dialog.html +++ b/demos/dialog.html @@ -149,17 +149,61 @@

- - -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • - - -
    -

    Avatar List

    - -
    -
    -

    Avatar List (dense)

    - -
    -
    -

    Example - Avatar with Text

    - -
    -
    -

    Metadata

    - -
    -
    -

    Metadata (Dense)

    - -
    -
    -

    Trailing Checkbox

    - +
    +
    +

    Avatar List

    + +
    +
    +

    Avatar List (dense)

    + +
    +
    +

    Example - Avatar with Text

    + +
    +
    +

    Metadata

    + +
    +
    +

    Metadata (Dense)

    + +
    +
    +

    Trailing Checkbox

    + -
    -
    -

    Avatar + Metadata

    - -
    -
    -

    Avatar + Metadata (Dense)

    - -
    -
    -

    Example - Avatar with Text and Icon

    - -
    - -
    -

    Two-Line List

    -
    -

    Text-Only

    - -
    -
    -

    Text-Only (Dense)

    - -
    -
    -

    Graphic

    - -
    -
    -

    Graphic (Dense)

    - -
    -
    -

    Avatar List

    - -
    -
    -

    Avatar List (dense)

    - -
    -
    -

    Metadata

    - -
    -
    -

    Metadata (Dense)

    - -
    -
    -

    Example - Two-line Avatar + Text + Icon

    - -
    -
    -

    Lists w/ Ellipsis

    - -
    -
    -
    -

    List Dividers

    -
    -

    Full-Width Dividers

    - -
    -
    -

    Inset Dividers

    - -
    -
    -
    -

    List Groups

    -
    -

    Basic Usage

    -
    -

    List 1

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -

    List 2

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -
    -
    -

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    -
    -

    Folders

    -
      -
    • - - - - - Photos - Jan 9, 2014 - - - info - -
      • -
    • - - - - - Recipes - Jan 17, 2014 - - - info - -
      • -
    • - - - - - Work - Jan 28, 2014 - - - info - -
      • -
    -
    -

    Files

    -
      -
    • - - - - - Vacation Itinerary - Jan 10, 2014 - - - info - -
      • -
    • - - - - - Kitchen Remodel - Jan 20, 2014 - - - info - -
      • -
    -
    -
    -
    -
    -

    Interactive Lists (with ink ripple)

    -
    -

    Example - Interactive List

    -
    +
    +

    Avatar + Metadata

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Avatar + Metadata (Dense)

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Example - Avatar with Text and Icon

    +     +
    +
    +
    +

    Two-Line List

    +
    +

    Text-Only

    + +
    +
    +

    Text-Only (Dense)

    + +
    +
    +

    Graphic

    + +
    +
    +

    Graphic (Dense)

    + +
    +
    +

    Avatar List

    + +
    +
    +

    Avatar List (dense)

    + +
    +
    +

    Metadata

    + +
    +
    +

    Metadata (Dense)

    + +
    +
    +

    Example - Two-line Avatar + Text + Icon

    + +
    +
    +

    Lists w/ Ellipsis

    + +
    +
    +
    +

    List Dividers

    +
    +

    Full-Width Dividers

    + +
    +
    +

    Inset Dividers

    + +
    +
    +
    +

    List Groups

    +
    +

    Basic Usage

    +
    +

    List 1

    +
      +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    +
    +

    List 2

    +
      +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    +
    +
    +
    +

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    +
    +

    Folders

    +
    -
    - - - - - + - + }; + + [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) { + var list = mdc.list.MDCList.attachTo(ele); + list.wrapFocus = true; + }); + + addRippleToListItems(document.getElementById('leading-checkbox-list')); + addRippleToListItems(document.getElementById('trailing-checkbox-list')); + }); + + diff --git a/demos/menu-surface.html b/demos/menu-surface.html index 6dc317f1b82..b83bd904086 100644 --- a/demos/menu-surface.html +++ b/demos/menu-surface.html @@ -50,12 +50,33 @@
    diff --git a/demos/menu.html b/demos/menu.html index 136ec647606..3cf6fd1a118 100644 --- a/demos/menu.html +++ b/demos/menu.html @@ -50,11 +50,31 @@
    @@ -78,7 +98,9 @@ - Single + + Single + - - + + - + @@ -133,7 +173,9 @@ - Cut + + Cut + ⌘X @@ -166,13 +214,19 @@
    @@ -260,7 +320,9 @@ - Cut + + Cut + ⌘X diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md index b12c7df946d..3ecc9cd9552 100644 --- a/packages/mdc-dialog/README.md +++ b/packages/mdc-dialog/README.md @@ -92,17 +92,61 @@ a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.