material-components / material-components-web Goto Github PK
View Code? Open in Web Editor NEWModular and customizable Material Design UI components for the web
Home Page: https://material.io/develop/web
License: MIT License
Modular and customizable Material Design UI components for the web
Home Page: https://material.io/develop/web
License: MIT License
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
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';
})();
};
This is problematic since these constants files are evaluated at module load time, and used within foundation classes, which means that it implicitly makes our foundation classes require a DOM context before they're initialized. This has negative implications for frameworks which leverage server-side rendering.
We need to break these out into helper methods and put them in mdl-animation e.g.
export function getTransitionEndEvent(windowObj) {
}
// ....
This will ensure that we're not trying to work with any web platform context within our foundations until at least init()
is called.
Copied from google/material-design-lite#4745
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
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
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://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
See #4571
Copied from google/material-design-lite#4572
Spec reference: https://www.google.com/design/spec/components/toolbars.html
Copied from google/material-design-lite#4480
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
<html class="mdl-reset">
<!-- .... -->
</html>
.mdl-reset {
@include mdl-typography;
h1 {
@include mdl-typography-...
}
h2 {
// ...
}
}
Copied from google/material-design-lite#4652
@sgomes already doing some work on this.
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
Copied from google/material-design-lite#4494
Pending #4467
Copied from google/material-design-lite#4614
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
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
Spec reference: https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field
Copied from google/material-design-lite#4500
Pending #4499
Copied from google/material-design-lite#4686
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 #4824
Copied from google/material-design-lite#4712
Copied from google/material-design-lite#4829
Spec reference: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
Copied from google/material-design-lite#4493
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')
);
resulting in:
: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);
}
Copied from google/material-design-lite#4927
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/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
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
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?
npm run dev
and navigate to http://localhost:8080/radio.htmlWhat 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/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
Add a demo illustrating how to wrap MDL's v2 architecture into a custom element.
Copied from google/material-design-lite#4799
We should have a mechanism in place for hosting builds of MDL on gh-pages
, for testing/review purposes. Some options:
edge
or master
folder that hosts a build of the current state of master
, through a commit hook.stable
or latest
folder that hosts a build of the latest release, through a publish hook.Copied from google/material-design-lite#4892
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://material.google.com/components/subheaders.html
Copied from google/material-design-lite#4485
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
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
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
Spec reference: https://material.io/go/design-tooltips
Copied from google/material-design-lite#4495
Spec reference: https://www.google.com/design/spec/components/steppers.html
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
Spec reference: https://www.google.com/design/spec/components/grid-lists.html#grid-lists-specs
Copied from google/material-design-lite#4498
Spec reference: https://www.google.com/design/spec/components/expansion-panels.html
Copied from google/material-design-lite#4499
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
Extricated from google/material-design-lite#4475
Copied from google/material-design-lite#4948
Spec reference: https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints.
Copied from google/material-design-lite#4496
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
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
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.
#fafafa
, text: text-primary-on-dark, action: theme primary color)dismissOnAction
option, which defaults to true
. When true
, snackbar dismisses as soon as a user interacts with its action button (see #28).Copied from google/material-design-lite#4490
spec reference: https://material.google.com/components/text-fields.html#text-fields-character-counter (search for "counter")
Copied from google/material-design-lite#4823
Spec reference: https://www.google.com/design/spec/components/tabs.html
Copied from google/material-design-lite#4481
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.