From 4d11b373f31a310f030d423523083427cadc144b Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 25 Jul 2018 12:45:02 -0400 Subject: [PATCH 1/4] feat(list): Updated two-line list to use typography baseline to match spec. (#3085) BREAKING CHANGE The layout of two-line list items is changed to wrap primary text line in a separate block element. --- demos/list.html | 98 ++++++++++++++++----------------- demos/list.scss | 1 + packages/mdc-list/README.md | 23 ++++---- packages/mdc-list/mdc-list.scss | 41 +++++++++++--- 4 files changed, 89 insertions(+), 74 deletions(-) diff --git a/demos/list.html b/demos/list.html index 819e3d7b8e9..b6ae33b7325 100644 --- a/demos/list.html +++ b/demos/list.html @@ -44,7 +44,7 @@ - Photos + Photos Jan 9, 2014 Folders - Photos + Photos Jan 9, 2014 Folders - Recipes + Recipes Jan 17, 2014 Folders - Work + Work Jan 28, 2014 Files - Vacation Itinerary + Vacation Itinerary Jan 10, 2014 Files - Kitchen Remodel + Kitchen Remodel Jan 20, 2014 Text-Only aria-orientation="vertical">
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -620,19 +620,19 @@

    Text-Only (Dense)

    aria-orientation="vertical">
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -645,21 +645,21 @@

    Graphic

  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -672,21 +672,21 @@

    Graphic (Dense)

  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -699,21 +699,21 @@

    Avatar List

  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -726,21 +726,21 @@

    Avatar List (dense)

  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
  • - Two-line item + Two-line item Secondary text
    • @@ -752,21 +752,21 @@

    Metadata

    aria-orientation="vertical">
  • - Two-line item + Two-line item Secondary text $10.00
  • - Two-line item + Two-line item Secondary text $20.00
  • - Two-line item + Two-line item Secondary text $30.00 @@ -779,21 +779,21 @@

    Metadata (Dense)

    aria-orientation="vertical">
  • - Two-line item + Two-line item Secondary text $10.00
  • - Two-line item + Two-line item Secondary text $20.00
  • - Two-line item + Two-line item Secondary text $30.00 @@ -809,7 +809,7 @@

    Example - Two-line Avatar + Text + Icon

    - Photos + Photos Jan 9, 2014     Example - Two-line Avatar + Text + Icon - Recipes + Recipes Jan 17, 2014 Example - Two-line Avatar + Text + Icon - Work + Work Jan 28, 2014 Lists w/ Ellipsis - Photos - - This is some secondary text - + Photos + This is some secondary text - Photos of my best photography using my finely tuned skills and eye - - This is some secondary text - + Photos of my best photography using my finely tuned skills and eye + This is some secondary text - Work Photos - - This is a description of work photos from the years 2018 to present time while I was a barista - + Work Photos + This is a description of work photos from the years 2018 to present time while I was a barista