• Spec reference: https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions
• Motion video mock: https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B8v7jImPsDi-d09QRUZzVUdMSFk/components-buttons-fab-transition_card_01.webm
• Implement Proper transitions between FAB and Single Sheet Menu
• Add correct Keyboard A11y

There are internal motion mocks for these transitions that I can get when it comes time to implement.

Copied from google/material-design-lite#4483

Spec Reference: https://www.google.com/design/spec/growth-communications/feature-discovery.html#feature-discovery-design-patterns

I've done a lot of work on this internally, so I'm happy to take it.

Copied from google/material-design-lite#4497

Spec reference: https://www.google.com/design/spec/style/color.html#color-color-palette

@Garbee's implementation of all material colors as custom properties: https://gitlab.com/material/colors/blob/master/colors.html

Copied from google/material-design-lite#4492

Spec reference: https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch

Copied from google/material-design-lite#4478

The Material Design fonts are pretty much required for MDL.
Currently developers need to include it themselves using

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

We should include it automatically using an @include in the MDL CSS.

Copied from google/material-design-lite#413

• Regular buttons
• FABs
• Checkboxes
• Lists (List Items)

Pending #4467

Copied from google/material-design-lite#4614

• No-Seam / Static
• Seam Always / Fixed

• No-Seam -> Seam + Fixed / Waterfall
• Flexible Header

Spec reference: https://www.google.com/design/spec/components/toolbars.html

Copied from google/material-design-lite#4480

spec reference: https://material.google.com/components/text-fields.html#text-fields-character-counter (search for "counter")

Copied from google/material-design-lite#4823

Extricated from google/material-design-lite#4475

Copied from google/material-design-lite#4948

• Spec reference: https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions
• Motion video mock: https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B8v7jImPsDi-NXNEaXZ0Um1yc0k/components-buttons-fab-transition_toolbar_01.webm
• X & Y positions that FAB moves to needs clarification
• Implement Bottom FAB menu component
• Implement Proper transitions between FAB and Toolbar

There are internal motion mocks for these transitions that I can get when it comes time to implement.

Copied from google/material-design-lite#4482

Spec reference: https://material.io/go/design-tooltips

Copied from google/material-design-lite#4495

Spec reference: https://material.google.com/components/subheaders.html

Copied from google/material-design-lite#4485

We've got stuff in our constants files that look like:

return {
   ANIM_END_EVENT: (() => {
     const d = document.createElement('div');
     return 'transition' in d.style ? 'transition' : 'webkitTransition';
   })();
};

export function getTransitionEndEvent(windowObj) {
}

// ....

Add a demo illustrating how to wrap MDL's v2 architecture into a custom element.

Copied from google/material-design-lite#4799

Once we hit alpha, we need to do a proper a11y audit to ensure we're going in the right direction with all of our components.

Copied from google/material-design-lite#4891

Spec reference: https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints.

Copied from google/material-design-lite#4496

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

v2 @ master

What browser(s) is this bug affecting (including version)?

all

What OS (and version) are you using?

OS X El Capitan

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

1. Type npm run dev and navigate to http://localhost:8080/radio.html
2. Click on a label for a radio

What is the expected behavior?

The ink ripple should activate

What is the actual behavior?

Only the focus ripple activates

Any other information you believe would be useful?

This is due to the fact that isSurfaceActive is always set to false in the radio's ripple adapter. Instead, we need to set it conditionally based on whether or not the label is being interacted with.

Copied from google/material-design-lite#4830

Spec reference: https://www.google.com/design/spec/components/steppers.html

• All steppers / step types, except "Mobile Step"
• "Mobile Step"

Caveat: We might want to split this up differently once we get to this task, and recategorize the stepper types from the spec language to make it less ambiguous.

Copied from google/material-design-lite#4501

See #4571

Copied from google/material-design-lite#4572

For a single-line snackbar, we could make it so that the text will not cause line breaks (and show an ellipses instead, perhaps). For multiline, we'd have to trust the user not to put in arbitrarily long strings of text.

Some browsers also support clamping to a certain number of lines, so we can progressively enhance for that as well

Copied from google/material-design-lite#4828

It seems we forgot to do focus trapping while the drawer is open, as we do for mdl-simple-menu. We should refactor out the focus trapping code and use it across both components.

@traviskaufman FYI.

Copied from google/material-design-lite#4950

Specs: https://material.google.com/components/lists.html#lists-specs

Copied from google/material-design-lite#4487

In order to simplify CSS Custom Property-level theming, we should have a utility method that a developer can call to generate all the text colors, using the color contrast algorithm based off of the provided primary, accent and background colors.

mdl.theme.applyTheme(
    document.querySelector(':root'),
    {primary: '#3f51b5', accent: '#ff4081', background: '#fff')
);

:root {
  --mdl-theme-primary: #3f51b5;
  --mdl-theme-accent: #ff4081;
  --mdl-theme-background: #fff;
  --mdl-theme-text-primary-on-primary: white;
  --mdl-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-accent: white;
  --mdl-theme-text-secondary-on-accent: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-dark: white;
  --mdl-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}

spec reference: https://material.google.com/components/buttons.html#buttons-toggle-buttons

Note that this is just a button with an icon instead of text. Could be added to mdc-button.

Copied from google/material-design-lite#4824

Spec reference: https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators

Copied from google/material-design-lite#4488

See #17

Once the above story is done, we should go back and remove places where this is happening.

Copied from google/material-design-lite#4746

Pending #4824

Copied from google/material-design-lite#4712

e.g., focus trapping, input modality, etc. Essentially a common library of functionality for handling focus across all our components.

Copied from google/material-design-lite#4582

Pending #4499

Copied from google/material-design-lite#4686

google/material-design-lite#4918 (comment)

Implement component that would allow users to easily and transparently switch between a custom select and native select, providing a good UX across all form factors.

Copied from google/material-design-lite#4923

The customize page of the docs do a great job of showing how to customize the color theme. However, some users may want more customization. I happen to know that simply adding an extra css file that loads last, with whatever customization a user wants, will override anything in MDL, but not every user will be aware that. Adding something to that effect might be helpful.

Great job so far. I'm especially impressed how fast issues are being addressed. Thanks for this.

Copied from google/material-design-lite#841

In V1MDL, we had the concept of user-submissions for inclusion on https://getmdl.io/showcase/index.html, but only got around to highlighting a few of the Google properties that shipped with MDL support.

As submissions tend to be of varying quality, I might suggest that we move to just including user submissions in a wiki page that can be referenced but doesn't necessarily appear on the site. Thoughts, @sgomes?

Copied from google/material-design-lite#4734

Our webpack build is very, very, very slow right now. My original guess was that this had to do with the fact that we're using a multi-entry build. However, it actually looks like this is more efficient than splitting up our build files.

I'd like to investigate why our builds are particularly slow and see if there's anything we can do to optimize them.

Additionally, this would be a great time to look into switching over to Webpack 2.0, as it supports tree shaking which could help us slim down the size of our output.

Copied from google/material-design-lite#4881

Spec Reference: https://www.google.com/design/spec/components/snackbars-toasts.html

It's been called a "Toast" in the past, but the thing that's not Android-specific is a snackbar.

• Initial Implementation
• Dark Theme (background: #fafafa, text: text-primary-on-dark, action: theme primary color)
• Keyboard Focus Handling
• In demo, ensure that "Action on Bottom" is unchecked and disabled when "multiline" is unchecked
• End-to-end usage example in README (instantiation, using it in response to an event)
• Start-aligned snackbars (left for LTR, right for RTL)
• Add dismissOnAction option, which defaults to true. When true, snackbar dismisses as soon as a user interacts with its action button (see #28).
• Address #564

Copied from google/material-design-lite#4490

Spec reference: https://www.google.com/design/spec/components/grid-lists.html#grid-lists-specs

Copied from google/material-design-lite#4498

• Attach css class / data attr to document element indicating that a snackbar is visible (and what type is visible)
• Create a mixin + css class combo that can be attached to elements and translates the elements using the correct easing curve, timing, and y offset depending on the type of snackbar.

Copied from google/material-design-lite#4829

Spec reference: https://www.google.com/design/spec/components/expansion-panels.html

• Single Expansion Panel
• Expansion panel group / accordion (a la Inbox)

Copied from google/material-design-lite#4499

Our CI seems to be flaky yet again. Once we finish up the alpha milestone, we should prioritize diagnosing and fixing this issue so we can handle PR submissions reliably. Possible diagnosis off the top of my head would be that the karma tap reporter is streaming out more than TravisCI or SauceLabs can handle. The tests seem to have gotten flakier as we've added more. We may have to investigate either sharding our tests and running them via a CI matrix, figuring out how to suppress console output without losing vital information such as info on test failures, or - at worst - switching over to a different test framework which can scale out better.

Copied from google/material-design-lite#4922

Spec reference: https://www.google.com/design/spec/components/dialogs.html

I also made a Codepen mocking up a basic dialog sketch: http://codepen.io/traviskaufman/pen/yJayZj

Even though the spec doesn't have an "x" button in their mocks, it does work well for large dialogs on big screens, so we may want to consider it.

Copied from google/material-design-lite#4486

Spec reference: https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field

• Full-Width Autocomplete
• Inline Autocomplete

Copied from google/material-design-lite#4500

Spec reference: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons

Copied from google/material-design-lite#4493

Spec reference: https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators

See also: googlearchive/paper-linear-progress#1

Copied from google/material-design-lite#4489

• Continuous Slider
• Discrete Slider

@sgomes already doing some work on this.

Notes

Step values need to be able to be quantized to decimal places, e.g. min = 0, max = 5, step = .2. Possible algorithm: Take the raw value, divide it by step, round that number, and then multiply the original step value by the rounded number. E.g.

function quantize(val, min, max, step) {
  const numSteps = Math.round(val / step);
  const quantizedVal = numSteps * step;
  return Math.max(min, Math.min(max, quantizedVal));
}

const min = 0, max = 5, step = .2;
quantize(3.56, min, max, step); // 3.6
quantize(2.148692, min, max, step) // 2.2
quantize(1.061733, min, max, step) // 1

Hello, glad to hear work has begun on v2.

I'd like to request that google closure library externs are generated once v2 is complete.

Copied from google/material-design-lite#4641

Spec reference: https://www.google.com/design/spec/components/tabs.html

Copied from google/material-design-lite#4481

Spec reference: https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-behavior

Copied from google/material-design-lite#4484

Spec reference: https://www.google.com/design/spec/patterns/navigation-drawer.html

"Persistent" drawers are the ones that remain on the page yet collapse into miniature drawers when not being used.

Copied from google/material-design-lite#4754

The MDL search should behave as desceribed in the MD styleguide - please see examples here.

I've already seen the issue #192 which has been closed. The "layout demo page" mentioned there is not available (404). I don't see there also any solution. I think we should consider reopening it.

Such component like examples shown in the MD spec would be not only "nice to have" but rather an important feature. For now an existing one is buggy (sometimes overlaps other objects when width is small). It's also limited - it doesn't give a nice user experience when write long phrases inside. My comments are about the trunk version.

It would be really great to have something like this example (an animated GIF demo).

In meantime could you please advice how to make the existing solution 100% width (I mean "search" as in examples here)? I tried simple CSS modifications, but I'm not sure that there is some easy way to do it.

The issue #192 has been closed with annotation that it could be reopened. Could you please back to this topic?

Copied from google/material-design-lite#4554

We should have a mechanism in place for hosting builds of MDL on gh-pages, for testing/review purposes. Some options:

• An edge or master folder that hosts a build of the current state of master, through a commit hook.
• A stable or latest folder that hosts a build of the latest release, through a publish hook.
• A collection of manually uploaded static builds, if needed.

Copied from google/material-design-lite#4892