Modular and customizable Material Design UI components for the web

Overview

Version Chat

Material Components for the web

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.

Important links

Quick start

Using via CDN

<!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">

<!-- Render textfield component -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Label</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

Please see quick start demo on codepen for full example.

Using NPM

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

HTML

Sample usage of text field component. Please see Textfield component page for more options.

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-floating-label" id="my-label">Label</span>
  <span class="mdc-line-ripple"></span>
</label>

CSS

Load styles required for text field component.

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

JavaScript

Import MDCTextField module to instantiate text field component.

import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

This'll initialize text field component on a single .mdc-text-field element.

Please see quick start demo on glitch for full example.

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

Issues
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: yes 
    opened by github-actions[bot] 168
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: yes 
    opened by github-actions[bot] 138
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: yes 
    opened by github-actions[bot] 91
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: yes 
    opened by github-actions[bot] 80
  • Update webpack to the latest version 🚀

    Update webpack to the latest version 🚀

    ☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

    Version 4.0.0 of webpack was just published.

    Dependency webpack
    Current Version 3.11.0
    Type devDependency

    The version 4.0.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of webpack.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Release Notes v4.0.0

    Big changes

    • Environment
      • Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
    • Usage
      • You have to choose (mode or --mode) between two modes now: production or development
        • production enables all kind of optimizations to generate optimized bundles
        • development enables comments and hint for development and enables the eval devtool
        • production doesn't support watching, development is optimized for fast incremental rebuilds
        • production also enables module concatenating (Scope Hoisting)
        • You can configure this in detail with the flags in optimization.* (build your custom mode)
        • process.env.NODE_ENV are set to production or development (only in built code, not in config)
        • There is a hidden none mode which disables everything
    • Syntax
      • import() always returns a namespace object. CommonJS modules are wrapped into the default export
        • This probably breaks your code, if you used to import CommonJs with import()
    • Configuration
      • You no longer need to use these plugins:
        • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (on by default in production mode)
        • ModuleConcatenationPlugin -> optimization.concatenateModules (on by default in production mode)
        • NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)
      • CommonsChunkPlugin was removed -> optimization.splitChunks, optimization.runtimeChunk
    • JSON
      • webpack now handles JSON natively
        • You may need to add type: "javascript/auto" when transforming JSON via loader to JS
        • Just using JSON without loader should still work
      • allows to import JSON via ESM syntax
        • unused exports elimination for JSON modules
    • Optimization
      • Upgrade uglifyjs-webpack-plugin to v1
        • ES15 support

    Big features

    • Modules
      • webpack now supports these module types:
        • javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
        • javascript/esm: EcmaScript modules, all other module system are not available
        • javascript/dynamic: Only CommonJS and, EcmaScript modules are not available
        • json: JSON data, it's available via require and import
        • webassembly/experimental: WebAssembly modules (currently experimental)
      • javascript/esm handles ESM more strictly compared to javascript/auto:
        • Imported names need to exist on imported module
        • Dynamic modules (non-esm, i. e. CommonJs) can only imported via default import, everything else (including namespace import) emit errors
      • In .mjs modules are javascript/esm by default
      • WebAssembly modules
        • can import other modules (JS and WASM)
        • Exports from WebAssembly modules are validated by ESM import
          • You'll get a warning/error when trying to import a non-existing export from WASM
        • can only be used in async chunks. They doesn't work in initial chunks (would be bad for web performance)
          • Import modules using WASM via import()
        • This is an experimental feature and subject of change
    • Optimization
      • sideEffects: false is now supported in package.json
        • sideEffects in package.json also supports glob expressions and arrays of glob expressions
      • Instead of a JSONP function a JSONP array is used -> async script tag support, order no longer matter
      • New optimization.splitChunks option was introduced
        Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
      • Dead branches are now removed by webpack itself
        • Before: Uglify removed the dead code
        • Now: webpack removes the dead code (in some cases)
        • This prevents crashing when import() occur in a dead branch
    • Syntax
      • webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression.
      • Using System.import() now emits a warning
        • You can disable the warning with Rule.parser.system: true
        • You can disable System.import with Rule.parser.system: false
    • Configuration
      • Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration.
      • optimization.minimize has been added to switch minimizing on/off
        • By default: on in production mode, off in development mode
      • optimization.minimizer has been added to configurate minimizers and options
    • Usage
      • Some Plugin options are now validated
      • CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI
      • The ProgressPlugin (--progress) now displays plugin names
        • At least for plugins migrated to the new plugin system
    • Performance
      • UglifyJs now caches and parallizes by default
      • Multiple performance improvements, especially for faster incremental rebuilds
      • performance improvement for RemoveParentModulesPlugin
    • Stats
      • Stats can display modules nested in concatenated modules

    Features

    • Configuration
      • Module type is automatically choosen for mjs, json and wasm extensions. Other extensions need to be configured via module.rules[].type
      • Incorrect options.dependencies configurations now throw error
      • sideEffects can be overriden via module.rules
      • output.hashFunction can now be a Constructor to a custom hash function
        • You can provide a non-cryto hash function for performance reasons
      • add output.globalObject config option to allow to choose the global object reference in runtime exitCode
    • Runtime
      • Error for chunk loading now includes more information and two new properties type and request.
    • Devtool
      • remove comment footer from SourceMaps and eval
      • add support for include test and exclude to the eval source map devtool plugin
    • Performance
      • webpacks AST can be passed directly from loader to webpack to avoid extra parsing
      • Unused modules are no longer unnecessarly concatenated
      • Add a ProfilingPlugin which write a (Chrome) profile file which includes timings of plugins
      • Migrate to using for of instead of forEach
      • Migrate to using Map and Set instead of Objects
      • Migrate to using includes instead of indexOf
      • Replaced some RegExp with string methods
      • Queue don't enqueues the same job twice
      • Use faster md4 hash for hashing by default
    • Optimization
      • When using more than 25 exports mangled export names are shorter.
      • script tags are no longer text/javascript and async as this are the default values (saves a few bytes)
      • The concatenated module now generates a bit less code
      • constant replacements now don't need __webpack_require__ and argument is omitted
    • Defaults
      • webpack now looks for the .wasm, .mjs, .js and .json extensions in this order
      • output.pathinfo is now on by default in develoment mode
      • in-memory caching is now off by default in production
      • entry defaults to ./src
      • output.path defaults to ./dist
      • Use production defaults when omiting the mode option
    • Usage
      • Add detailed progress reporting to SourceMapDevToolPlugin
      • removed plugins now give a useful error message
    • Stats
      • Sizes are now shown in kiB instead of kB in Stats
      • entrypoints are now shows by default in Stats
      • chunks now display <{parents}> >{children}< and ={siblings}= in Stats
      • add buildAt time to stats
      • stats json now includes the output path
    • Syntax
      • A resource query is supported in context
      • Referencing entry point name in import() now emits a error instead of a warning
      • Upgraded to acorn 5 and support ES 2018
    • Plugins
      • done is now an async hook

    Bugfixes

    • Generated comments no longer break on */
    • webpack no longer modifies the passed options object
    • Compiler "watch-run" hook now has the Compiler as first parameter
    • add output.chunkCallbackName to the schema to allow configurating WebWorker template
    • Using module.id/loaded now correctly bails out of Module Concatentation (Scope Hoisting)
    • OccurenceOrderPlugin now sorts modules in correct order (instead of reversed)
    • timestamps for files are read from watcher when calling Watching.invalidate
    • fix incorrect -! behavior with post loaders
    • add run and watchRun hooks for MultiCompiler
    • this is now undefined in ESM
    • VariableDeclaration are correctly identified as var, const or let
    • Parser now parse the source code with the correct source type (module/script) when the module type javascript/dynamic or javascript/module is used.
    • don't crash on missing modules with buildMeta of null
    • add original-fs module for electron targets
    • HMRPlugin can be added to the Compiler outside of plugins

    Internal changes

    • Replaced plugin calls with tap calls (new plugin system)
    • Migrated many deprecated plugins to new plugin system API
    • added buildMeta.exportsType: "default" for json modules
    • Remove unused methods from Parser (parserStringArray, parserCalculatedStringArray)
    • Remove ability to clear BasicEvaluatedExpression and to have multiple types
    • Buffer.from instead of new Buffer
    • Avoid using forEach and use for of instead
    • Use neo-async instead of async
    • Update tapable and enhanced-resolve dependencies to new major versions
    • Use prettier

    Removed features

    • removed module.loaders
    • removed loaderContext.options
    • removed Compilation.notCacheable flag
    • removed NoErrorsPlugin
    • removed Dependency.isEqualResource
    • removed NewWatchingPlugin
    • removed CommonsChunkPlugin

    Breaking changes for plugins/loaders

    • new plugin system
      • plugin method is backward-compatible
      • Plugins should use Compiler.hooks.xxx.tap(<plugin name>, fn) now
    • New major version of enhanced-resolve
    • Templates for chunks may now generate multiple assets
    • Chunk.chunks/parents/blocks are no longer Arrays. A Set is used internally and there are methods to access it.
    • Parser.scope.renames and Parser.scope.definitions are no longer Objects/Arrays, but Map/Sets.
    • Parser uses StackedSetMap (LevelDB-like datastructure) instead of Arrays
    • Compiler.options is no longer set while applying plugins
    • Harmony Dependencies has changed because of refactoring
    • Dependency.getReference() may now return a weak property. Dependency.weak is now used by the Dependency base class and returned in the base impl of getReference()
    • Constructor arguments changed for all Modules
    • Merged options into options object for ContextModule and resolveDependencies
    • Changed and renamed dependencies for `import()
    • Moved Compiler.resolvers into Compiler.resolverFactory accessible with plugins
    • Dependency.isEqualResource has been replaced with Dependency.getResourceIdentifier
    • Methods on Template are now static
    • A new RuntimeTemplate class has been added and outputOptions and requestShortener has been moved to this class
      • Many methods has been updated to use the RuntimeTemplate instead
      • We plan to move code which accesses the runtime to this new class
    • Module.meta has been replaced with Module.buildMeta
    • Module.buildInfo and Module.factoryMeta have been added
    • Some properties of Module have been moved into the new objects
    • added loaderContext.rootContext which points to the context options. Loaders may use it to make stuff relative to the application root.
    • add this.hot flag to loader context when HMR is enabled
    • buildMeta.harmony has been replaced with buildMeta.exportsType: "namespace
    • The chunk graph has changed:
      • Before: Chunks were connected with parent-child-relationships.
      • Now: ChunkGroups are connected with parent-child-relationships. ChunkGroups contain Chunks in order.
      • Before: AsyncDependenciesBlocks reference a list of Chunks in order.
      • Now: AsyncDependenciesBlocks reference a single ChunkGroup.
    • file/contextTimestamps are Maps now
    • map/foreach Chunks/Modules/Parents methods are now deprecated/removed
    • NormalModule accept options object in Constructor
    • Added required generator argument for NormalModule
    • Added createGenerator and generator hooks for NormalModuleFactory to customize code generation
    • Allow to customize render manifest for Chunks via hooks
    Commits

    The new version differs by 838 commits.

    • 213226e 4.0.0
    • fde0183 Merge pull request #6081 from webpack/formating/prettier
    • b6396e7 update stats
    • f32bd41 fix linting
    • 5238159 run prettier on existing code
    • 518d1e0 replace js-beautify with prettier
    • 4c25bfb 4.0.0-beta.3
    • dd93716 Merge pull request #6296 from shellscape/fix/hmr-before-node-stuff
    • 7a07901 Merge pull request #6563 from webpack/performance/assign-depth
    • c7eb895 Merge pull request #6452 from webpack/update_acorn
    • 9179980 Merge pull request #6551 from nveenjain/fix/templatemd
    • e52f323 optimize performance of assignDepth
    • 6bf5df5 Fixed template.md
    • 90ab23a Merge branch 'master' into fix/hmr-before-node-stuff
    • b0949cb add integration test for spread operator

    There are 250 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 75
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: yes 
    opened by github-actions[bot] 71
  • chore: Update lerna to the latest version 🚀

    chore: Update lerna to the latest version 🚀

    Version 3.0.0 of lerna was just published.

    Dependency lerna
    Current Version 2.11.0
    Type devDependency

    The version 3.0.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of lerna.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Release Notes v3.0.0

    Bug Fixes

    • add: Always use POSIX paths when computing relative file: specifiers (ffe354f)
    • add: Support explicit & implicit relative file: specifiers (41f231f)
    • create: Use filename without scope when generating imports from test file (acfd48b)
    • publish: Improve npm pack experience (627cfc2)

    Features

    BREAKING CHANGES

    lerna changed

    • The package names emitted to stdout are no longer prefixed by a "- ", and private packages are no longer displayed by default.

    lerna ls

    • The default output of lerna ls no longer shows version strings or private packages.
    • The new alias lerna la resembles the old output, with the addition of relative path to the package
    • The new alias lerna ll is a shortcut for the new --long option
    • A new --parseable option has been added to aid magical piping incantations

    lerna publish

    • --preid now defaults to "alpha" during prereleases:

      The previous default for this option was undefined, which led to an awkward "1.0.1-0" result when passed to semver.inc().

      The new default "alpha" yields a much more useful "1.0.1-alpha.0" result. Any previous prerelease ID will be preserved, justas it was before.

    • --no-verify is no longer passed to git commit by default, but controlled by the new --commit-hooks option:

      The previous behavior was too overzealous, and the new option operates exactly like the corresponding npm version option of the same name.

      As long as your pre-commit hooks are properly scoped to ignore changes in package.json files, this change should not affect you. If that is not the case, you may pass --no-commit-hooks to restore the previous behavior.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper cla: yes 
    opened by greenkeeper[bot] 55
  • chore(infrastructure): automate method description table in README.md

    chore(infrastructure): automate method description table in README.md

    related https://app.zenhub.com/workspaces/mdc-web-585809de72a2830c7f7fbaad/issues/material-components/material-components-web/4858

    fixes #4903

    cla: yes 
    opened by moog16 32
  • feat(expansion-panel): Add Expansion Panel component

    feat(expansion-panel): Add Expansion Panel component

    closes #46

    This is ready for code review.

    Engineering Outline

    TODO:

    • [x] Accordion
    • [x] Block toggleExpansion() when target is not appropriate
    • [x] Docs/README
    • [x] RTL
    • [x] Theming
    • [ ] Accessibility
    • [x] Tests
    • [x] SCSS mixins and partials
    • [x] ~~Define keyframes~~
    • [x] Tab key selection
    • [ ] No JS variant
    • [x] Closure compatibility

    I need guidance on a few things:

    • I set the inner HTML of the expansion icon(s) to expand_more in the foundation because the spec shows that exact icon. Is this preferable to actually inserting the icon into the header manually and not having the user create the icon at all?
    • The spec doesn't say how to style the text in the body or footer sections. Should I use the "Label" text style (15sp Roboto Regular; 87% black)?
    • The theming is still a bit weak. With dark theme going away, what is the proper way to implement component theming in a dark context?
    needs-design-guidance 
    opened by griest024 31
  • refactor(slider): Functional slider tick visuals with css background

    refactor(slider): Functional slider tick visuals with css background

    So one of the few components you make it difficult to test for is the slider, but AFAIKT, this completely resolves #4729. Outside of the suite, I deployed and performed a pretty rigid stress test and it behaviorally matches up. Maybe the remove method could be taken out, since the new append method essentially just replaces values, but I left an updated definition of it just in case it *could be called from elsewhere to hide ticks, between altering tick marker numbers, etc...

    cc @moog16 please comb this, even aside from my assurance of it behaving implacably in browser. Meaning, rename "append" to "create" and fix my typo on line 140 of the adapter if you want. :)

    cla: yes 
    opened by jonjohnjohnson 31
  • styles(tabs): Defining theme API to support secondary navigation tabs token values.

    styles(tabs): Defining theme API to support secondary navigation tabs token values.

    styles(tabs): Defining theme API to support secondary navigation tabs token values.

    cla: yes 
    opened by copybara-service[bot] 0
  • feature(dialog): Add styling for close icon button to dialog

    feature(dialog): Add styling for close icon button to dialog

    feature(dialog): Add styling for close icon button to dialog

    'close' icon button can now inserted in MDC dialog's title. It should not be used when action buttons (e.g. cancel and OK buttons) are used in the dialog.

    cla: yes 
    opened by copybara-service[bot] 0
  • icon-button Undefined mixin

    icon-button Undefined mixin

    When attempting to import all packages individually, as opposed to importing material-components-web alone, I get Undefined mixin for icon-button.core-styles.

    Reproduced in this codesandbox

    bug 
    opened by ukozdan 0
  • [mdc-banner] Required $level and $color parameters

    [mdc-banner] Required $level and $color parameters

    Bug report

    When I try to use mdc-banner component following the documentation @use "@material/banner/styles"; an error message is shown that $level and $color parameters are missing.

    Steps to reproduce

    1. Place @use "@material/banner/styles"; in SCSS file
    2. Build (I'm using rollup, but should be the case with other bundlers)

    Actual behavior

    During the build I get the following warning message:

    src/index.js → dist/bundle.js...
    WARNING: both $level and $color are required; received $level: '0', $color: ''
        node_modules\@material\elevation\_elevation-theme.scss 234:5   -shadow()
        node_modules\@material\elevation\_elevation-theme.scss 466:20  resolver()
        node_modules\@material\tokens\_resolvers.scss 5:11             -material-elevation()
        node_modules\@material\elevation\_elevation-theme.scss 426:21  with-resolver()
        node_modules\@material\banner\_banner-theme.scss 437:3         -banner-elevation()
        node_modules\@material\banner\_banner-theme.scss 154:3         theme-styles()
        node_modules\@material\banner\_banner.scss 63:5                core-styles()
        node_modules\@material\banner\styles.scss 25:1                 @use
        stdin 1:1                                                      root stylesheet
    

    Some banner related code provides a $level: 0 and $color: null value to _elevation-theme.scss, which results in a warning.

    node_modules\@material\elevation\_elevation-theme.scss:463 DEBUG: 0
    node_modules\@material\elevation\_elevation-theme.scss:464 DEBUG: null
    

    Expected behavior

    There should be no error message, the -shadow() function should use default values.

    Screenshots

    image

    Your Environment:

    | Software | Version(s) | | ---------------- | ---------- | | MDC Web |13.0.0 | Browser |Google Chrome | Operating System |Windows 10

    bug 
    opened by matyaslapincs 1
  • fix(menusurface): Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element.

    fix(menusurface): Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element.

    fix(menusurface): Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element.

    cla: yes 
    opened by copybara-service[bot] 0
  • [mdc-floating-label] shake-keyframes generates invalid CSS

    [mdc-floating-label] shake-keyframes generates invalid CSS

    Bug report

    Twice within shake-keyframes (here and here), the calc expression calc(0 - #{$positionX}) is used. The default value for $positionX is 0%, so if no alternate value is passed, this generates calc(0 - 0%), which is invalid CSS, causing the property it's in to be ignored.

    Actual behavior

    The transform property assigned here will be ignored, since it contains an invalid calc expression.

    Expected behavior

    The calc expression should be valid, allowing the transform property to be set as expected.

    Additional context

    I discovered this in a somewhat odd edge case of someone trying to re-compile the already compiled mdc-floating-label.scss (which mean Sass's calc simplification threw an error), but the bug is present in all cases.

    Possible solution

    Numbers with and without units should not be mixed within a calc expression. You may also wish to remove the interpolation, which would mean that Sass's calc simplification would catch this sort of bug early.

    bug 
    opened by jathak 1
  • chore: Release

    chore: Release

    This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.

    cla: no 
    opened by github-actions[bot] 12
  • chore: Bump node from 10 to 14 in nvmrc

    chore: Bump node from 10 to 14 in nvmrc

    null

    cla: yes 
    opened by jkevingutierrez 1
  • MDCSlider keyboard interaction

    MDCSlider keyboard interaction

    Is there any plans to bring keyboard interactions back to the MDC Slider? I see they were removed in v8, but can't see why.

    opened by NikkiTheBugSlayer 5
Releases(v13.0.0)
  • v13.0.0(Sep 24, 2021)

  • v12.0.0(Jul 27, 2021)

  • v11.0.0(Apr 15, 2021)

  • v10.0.0(Feb 5, 2021)

  • v9.0.0(Dec 29, 2020)

  • v8.0.0(Nov 2, 2020)

  • v7.0.0(Jun 23, 2020)

  • v5.1.0(Feb 25, 2020)

    Changelog

    Bug Fixes

    • list: ensure sass mixin works if leading is provided in px (265ecba)
    • textfield: replace notched outline and ripple <div>s with <span> (765caef)
    • typography: ensure global variables can override styles with module system (7ec9697)
    • typography: Separate @material/feature-targeting, was causing Sass test to fail (772a03e)

    Features

    • typography: add CSS custom properties (6a56f38)
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(Feb 14, 2020)

    Changelog

    Bug Fixes

    • linear-progress: support aria attributes (#5248) (7084b40), closes #5248
    • auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)
    • button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)
    • button: Fixed parameter default value in height mixin (#5244) (b0cecf1)
    • checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893
    • checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)
    • checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)
    • checkbox: update disabled color values (#5209) (821871e)
    • chips: .d.ts file generated with syntax error (d154836)
    • chips: .d.ts file generated with syntax error (#5577) (98f7faa)
    • chips: Do not throw error if chip set becomes empty (#5290) (f978109)
    • chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)
    • chips: Move touch target inside primary action (ad3bbf7)
    • core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)
    • data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)
    • dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)
    • elevation: Update overlay color mixin (#5331) (b723dfa)
    • fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)
    • fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)
    • fab: Adjust fab line-height (#5254) (525989b)
    • fab: Adjust fab line-height to center text (#5258) (591a6ad)
    • floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)
    • list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)
    • notched-outline: Restore component test (#5449) (4269133)
    • radio: update disabled color values (#5210) (491fddc)
    • select: Do not fire change event on programmatic change (#5255) (ec72968)
    • select: Fix notch outline width when floating (#5319) (1c494e5)
    • slider: slider track not visible (#5512) (f2426d2)
    • slider: use secondary custom property color for slider container (#5132) (aa8e43e)
    • slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)
    • snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)
    • snackbar: adjust mixins to meet spec (#5477) (f16f15b)
    • switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)
    • switch: fix strict generic checks (7f5e0c2)
    • switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)
    • switch: set track border to be transparent (#5323) (397905b)
    • testing: Revert change from #5299. (#5324) (5fb62be)
    • textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)
    • textfield: add separate classes for leading/trailing icons (#5367) (70c708d)
    • textfield: change root element to
    • textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)
    • textfield: incorrect mixin forward path (#5554) (3e782d8)
    • textfield: move ripple to separate element (c541ebe)
    • textfield: outlined trailing icon's position (#5496) (93e2288)
    • textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)
    • textfield: use correct disabled colors for IE11 high contrast (5353985)
    • add missing SASS dependencies (#5337) (d2ae6e1)
    • Remove edge detection for CSS custom properties (#5264) (fe444ac)

    Code Refactoring

    Features

    • button: Add disabled state color mixins (#5232) (b5eb51e)
    • button: Add overflow ellipsis mixin (#5352) (47949b0)
    • button: Setup elevation overlay (#5256) (3cbee6d)
    • card: Add elevation overlay structure (#5282) (aa0eba4)
    • chips: Add elevation overlay structure (#5279) (3e560b3)
    • chips: Announce when chips are removed (b3f70eb)
    • chips: Consolidate interaction event handlers (#5251) (5729943)
    • dialog: Add elevation overlay structure (#5283) (b8bc4a2)
    • dom: Add focus trap utility. (#5505) (63f357d)
    • dom: Create announcer utility (32c1df1)
    • elevation: Add elevation overlay mixins (#5249) (b4cfdc4)
    • elevation: Update elevation mixins (#5304) (ba879b6)
    • fab: Add elevation overlay structure (#5278) (e89750d)
    • fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)
    • floating-label: add feature targeting for styles (#5287) (b240bcc)
    • icon-button: Add disabled state color mixins (#5246) (7161170)
    • line-ripple: add active/inactive states to line-ripple (b6c7f62)
    • line-ripple: add feature targeting for styles (#5292) (391674a)
    • menu: Add elevation overlay structure (#5280) (7fd17ce)
    • notched-outline: add feature targeting for styles (#5289) (c483774)
    • progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)
    • switch: Add elevation overlay structure (#5281) (50f110a)
    • Add index stylesheets to each MDC Web package (#5539) (1814866)
    • Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)
    • Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)
    • switch: Restructure DOM (#5312) (0ec1fab)
    • text-field: Add disabled state color mixins (#5208) (66299b6)
    • text-field: add feature targeting for styles (#5378) (e8a9936)
    • textfield: add end-alignment (#5356) (847dd1a)

    Reverts

    • Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329
    • "fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)
    • feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)
    • fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)
    • fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)

    BREAKING CHANGES

    • chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.
    • text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.
    • textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px
    • chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.
    • line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()
    • grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.
    • Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).
    • textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().
    • switch: Added setNativeControlAttr method in mdc-switch adapter.
    • textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>
    • switch: Switch DOM structure has changed. See switch README for details
    • button: Variable $mdc-button-disabled-container-fill-color renamed to $mdc-button-disabled-container-color.
    • Removed $edgeOptOut option from mdc-theme-prop() Sass mixin.
    • chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation
    • Adds new adapter methods to MDCLinearProgressAdapter.
    • elevation: Functions moved into the _functions.scss file
    • touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
    • checkbox: remove event listener for 'change' and add event listener for 'click'.
      • Add handleClick() method in foundation to handle click event.
      • Add setCheck() method into component to change check status.

    NOTE: @import on updated Sass files may not work until https://github.com/webpack-contrib/sass-loader/issues/804 is fixed, use @use instead.

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Dec 15, 2016)

Owner
Material Components
Build beautiful, usable products with Material Components for Android, Flutter, iOS, and the web.
Material Components
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 13, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 202 Sep 26, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Oct 10, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Oct 12, 2021
React Component that implements a speed dial using Material-UI.

react-speed-dial React Component that implements a speed dial using Material-UI. For Material-UI v1 use material-ui-speed-dial like inbox toolbox vers

Simon Mollweide 57 Oct 2, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 33 Sep 1, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Oct 12, 2021
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021