Merge remote-tracking branch 'origin/develop' into fix/dialog_rtl

.github/ISSUE_TEMPLATE/--bug-report.md

@@ -1,7 +1,7 @@
 ---
 name: "\U0001F41BBug report"
 about: Create a bug report to help us improve
-title: "[ComponetName] "
+title: "[ComponentName] title"
 labels: bug
 assignees: ''
 

docs/getting-started.md

@@ -88,11 +88,9 @@ You’ll need all of these Node dependencies:
 You can install all of them by running this command:
 
 ```
-npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader
+npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader node-sass extract-loader file-loader
 ```
 
-> Note: We recommend using webpack 3, because we're still investigating using webpack 4. We also recommend you use webpack-dev-server 2, because this works with webpack 3.
-
 In order to demonstrate how webpack bundles our Sass, you’ll need an `index.html`. This HTML file needs to include CSS. The CSS is generated by sass-loader, which compiles Sass files into CSS. The CSS is extracted into a `.css` file by extract-loader. Create this simple “hello world” `index.html`:
 
 ```html
@@ -156,10 +154,10 @@ And open http://localhost:8080 in a browser. You should see a blue “Hello Worl
 
 ### Step 2: Include CSS for a component
 
-Now that you have webpack configured to compile Sass into CSS, let's include the Sass files for the Material Design button. First install the Node dependency:
+Now that you have webpack configured to compile Sass into CSS, let's include the Sass files for the Material Design button. First, install the Node dependency:
 
 ```
-npm install --save-dev @material/button
+npm install @material/button
 ```
 
 We need to tell our `app.scss` to import the Sass files for `@material/button`. We can also use Sass mixins to customize the button. Replace your “hello world” version of `app.scss` with this code:
@@ -244,14 +242,14 @@ Now run `npm start` again and open http://localhost:8080. You should see a Mater
 
 We need to configure webpack to bundle ES2015 JavaScript into standard JavaScript, through [babel](https://babeljs.io). You’ll need all of these dependencies:
 
-- [babel-core](https://www.npmjs.com/package/babel-core)
+- [@babel/core](https://www.npmjs.com/package/@babel/core)
 - [babel-loader](https://www.npmjs.com/package/babel-loader): Compiles JavaScript files using babel
-- [babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015): Preset for compiling es2015
+- [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env): Preset for compiling es2015
 
 You can install all of them by running this command:
 
 ```
-npm install --save-dev babel-core@6 babel-loader@7 babel-preset-es2015
+npm install --save-dev @babel/core babel-loader @babel/preset-env
 ```
 
 In order to demonstrate how webpack bundles our JavaScript, you’ll need to update `index.html` to include JavaScript. The JavaScript file is generated by babel-loader, which compiles ES2015 files into JavaScript. Add this script tag to `index.html` before the closing `</body>` tag:
@@ -284,7 +282,7 @@ Then configure webpack to convert `app.js` into `bundle.js` by modifying the fol
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
-       presets: ['es2015'],
+       presets: ['@babel/preset-env'],
      },
    }
    ```
@@ -312,10 +310,11 @@ module.exports = {
           },
           {loader: 'extract-loader'},
           {loader: 'css-loader'},
-          {loader: 'postcss-loader',
+          {
+            loader: 'postcss-loader',
             options: {
-              plugins: () => [autoprefixer()],
-            },
+              plugins: () => [autoprefixer()]
+            }
           },
           {
             loader: 'sass-loader',
@@ -329,7 +328,7 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         query: {
-          presets: ['es2015'],
+          presets: ['@babel/preset-env'],
         },
       }
     ],
@@ -341,10 +340,10 @@ Now run `npm start` again and open http://localhost:8080. You should see a “he
 
 ### Step 4: Include JavaScript for a component
 
-Now that you have webpack configured to compile ES2015 into JavaScript, let's include the ES2015 files from the Material Design ripple. First install the Node dependency:
+Now that you have webpack configured to compile ES2015 into JavaScript, let's include the ES2015 files from the Material Design ripple. First, install the Node dependency:
 
 ```
-npm install --save-dev @material/ripple
+npm install @material/ripple
 ```
 
 We need to tell our `app.js` to import the ES2015 file for `@material/ripple`. We also need to initialize an `MDCRipple` with a DOM element. Replace your “hello world” version of `app.js` with this code:
@@ -370,7 +369,7 @@ Add another script to `package.json`:
 
 ```json
   "scripts": {
-    "build": "webpack -p",
+    "build": "webpack",
     "start": "webpack-dev-server"
   }
 ```

docs/open_source/triage.md

@@ -1,9 +1,9 @@
 # Triage Process
 
-* [MDC Web Untriaged Issues](https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc)
-* [MDC Catalog Untriaged Issues](https://github.com/material-components/material-components-web-catalog/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc)
-* [MDC Web Codelabs Untriaged Issues](https://github.com/material-components/material-components-web-codelabs/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc+)
-* [MDC React Untriaged Issues](https://github.com/material-components/material-components-web-react/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3Ain-tracker%20-label%3A%22help%20wanted%22%20no%3Aassignee%20sort%3Acreated-asc%20)
+* [MDC Web Untriaged Issues](https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3Abacklog+-label%3Athis-Q+-label%3Anext-Q+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc+)
+* [MDC Catalog Untriaged Issues]([catalog](https://github.com/material-components/material-components-web-catalog/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3Abacklog+-label%3Athis-Q+-label%3Anext-Q+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc+))
+* [MDC Web Codelabs Untriaged Issues](https://github.com/material-components/material-components-web-codelabs/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+-label%3Aicebox+-label%3Abacklog+-label%3Athis-Q+-label%3Anext-Q+-label%3A%22help+wanted%22+no%3Aassignee+no%3Amilestone+sort%3Acreated-asc+)
+* [MDC React Untriaged Issues](https://github.com/material-components/material-components-web-react/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+comments%3A0+-author%3Amoog16+)
 
 ### Installation Problems
 

packages/mdc-auto-init/README.md

@@ -66,6 +66,16 @@ property on that element.
 document.querySelector('.mdc-text-field').MDCTextField.disabled = true;
 ```
 
+#### Calling subsequent `mdc.autoInit()`
+
+If you decide to add new components into the DOM after the initial `mdc.autoInit()`, you can make subsequent calls to `mdc.autoInit()`. This will not reinitialize existing components. This works since mdc-auto-init will add the `data-mdc-auto-init-state="initialized"` attribute, which tracks if the component has already been initialized. After calling `mdc.autoInit()` your component will then look like:
+
+```html
+<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" data-mdc-auto-init-state="initialized">
+  ...
+</div>
+```
+
 ### Using as a standalone module
 
 #### Registering Components

packages/mdc-auto-init/constants.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+export const strings = {
+  AUTO_INIT_ATTR: 'data-mdc-auto-init',
+  AUTO_INIT_STATE_ATTR: 'data-mdc-auto-init-state',
+  INITIALIZED_STATE: 'initialized',
+};

packages/mdc-auto-init/index.ts

@@ -26,6 +26,10 @@
 import {MDCComponent} from '@material/base/component';
 import {MDCFoundation} from '@material/base/foundation';
 
+import {strings} from './constants';
+
+const {AUTO_INIT_ATTR, AUTO_INIT_STATE_ATTR, INITIALIZED_STATE} = strings;
+
 export interface MDCAttachable {
   new<F extends MDCFoundation>(root: Element, foundation?: F, ...args: Array<unknown>): MDCComponent<F>;
 
@@ -60,12 +64,13 @@ function emit<T extends object>(evtType: string, evtData: T, shouldBubble = fals
 /**
  * Auto-initializes all MDC components on a page.
  */
-export function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
+export function mdcAutoInit(root = document) {
   const components = [];
-  const nodes: Element[] = [].slice.call(root.querySelectorAll('[data-mdc-auto-init]'));
+  let nodes: Element[] = [].slice.call(root.querySelectorAll(`[${AUTO_INIT_ATTR}]`));
+  nodes = nodes.filter((node) => node.getAttribute(AUTO_INIT_STATE_ATTR) !== INITIALIZED_STATE);
 
   for (const node of nodes) {
-    const ctorName = node.getAttribute('data-mdc-auto-init');
+    const ctorName = node.getAttribute(AUTO_INIT_ATTR);
     if (!ctorName) {
       throw new Error('(mdc-auto-init) Constructor name must be given.');
     }
@@ -76,11 +81,6 @@ export function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
           `(mdc-auto-init) Could not find constructor in registry for ${ctorName}`);
     }
 
-    if (Object.getOwnPropertyDescriptor(node, ctorName)) {
-      warn(`(mdc-auto-init) Component already initialized for ${node}. Skipping...`);
-      continue;
-    }
-
     // TODO: Should we make an eslint rule for an attachTo() static method?
     // See https://github.com/Microsoft/TypeScript/issues/14600 for discussion of static interface support in TS
     const component = Constructor.attachTo(node);
@@ -91,6 +91,7 @@ export function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
       writable: false,
     });
     components.push(component);
+    node.setAttribute(AUTO_INIT_STATE_ATTR, INITIALIZED_STATE);
   }
 
   emit('MDCAutoInit:End', {});

packages/mdc-checkbox/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-chips/chip-set/index.ts

@@ -24,3 +24,4 @@
 export * from './adapter';
 export * from './component';
 export * from './foundation';
+export {cssClasses as chipSetCssClasses, strings as chipSetStrings} from './constants';

packages/mdc-chips/chip/index.ts

@@ -25,3 +25,4 @@ export * from './adapter';
 export * from './component';
 export * from './foundation';
 export * from './types';
+export {cssClasses as chipCssClasses, strings as chipStrings} from './constants';

packages/mdc-dialog/index.ts

@@ -26,5 +26,6 @@ import * as util from './util';
 export {util};
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-drawer/index.ts

@@ -26,5 +26,6 @@ import * as util from './util';
 export {util};
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './dismissible/foundation';
 export * from './modal/foundation';

packages/mdc-floating-label/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-form-field/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-grid-list/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-icon-button/index.ts

@@ -23,5 +23,6 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-line-ripple/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-linear-progress/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-list/index.ts

@@ -23,5 +23,6 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-menu-surface/index.ts

@@ -27,5 +27,6 @@ export {Corner, CornerBit} from './constants';
 export {util};
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-menu/index.ts

@@ -24,5 +24,6 @@
 export {Corner} from '@material/menu-surface/constants'; // for backward compatibility
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-notched-outline/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-radio/index.ts

@@ -23,4 +23,5 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';

packages/mdc-ripple/index.ts

@@ -26,5 +26,6 @@ import * as util from './util';
 export {util};
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';

packages/mdc-select/README.md

@@ -372,6 +372,7 @@ well as interaction targets. See [here](icon/) for more information on using ico
 | `mdc-select__menu` | Mandatory when using the enhanced select. This class should be placed on the `mdc-menu` element within the `mdc-select` element. |
 | `mdc-select__dropdown-icon` | Mandatory. Should be placed on an `i` element within the `mdc-select` element. Used for the dropdown arrow svg and animation.
 | `mdc-select__icon` | Optional. Should be placed on an `i` or `svg` element within the `mdc-select` element. Used for the leading icon.
+| `mdc-select--activated` | Optional. Styles the activated state of select. This class will be added automatically when menu is opened.
 | `mdc-select--disabled` | Optional. Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `<select>` element. |
 | `mdc-select--outlined` | Optional. Styles the select as outlined select. |
 | `mdc-select__native-control` | Mandatory for the native select. The native `<select>` element. |
@@ -462,6 +463,8 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `handleFocus() => void` | Handles a focus event on the `select` element. |
 | `handleBlur() => void` | Handles a blur event on the `select` element. |
 | `handleClick(normalizedX: number) => void` | Sets the line ripple center to the normalizedX for the line ripple. |
+| `handleMenuOpened() => void` | Handles menu or menu surface opened event.
+| `handleMenuClosed() => void` | Handles menu or menu surface closed event.
 | `handleChange() => void` | Handles a change to the `select` element's value. This must be called both for `change` events and programmatic changes requested via the component API. |
 | `handleKeydown(event: KeyboardEvent) => void` | Handles opening the menu (enhanced select) when the `mdc-select__selected-text` element is focused and the user presses the `Enter` or `Space` key. |
 | `setSelectedIndex(index: number) => void` | Handles setting the `mdc-select__selected-text` element and closing the menu (enhanced select only). Also causes the label to float and outline to notch if needed. |

packages/mdc-select/component.ts

@@ -156,6 +156,8 @@ export class MDCSelect extends MDCComponent<MDCSelectFoundation> implements MDCR
     this.handleKeydown_ = (evt) => this.foundation_.handleKeydown(evt);
     this.handleMenuSelected_ = (evtData) => this.selectedIndex = evtData.detail.index;
     this.handleMenuOpened_ = () => {
+      this.foundation_.handleMenuOpened();
+
       if (this.menu_!.items.length === 0) {
         return;
       }
@@ -166,6 +168,8 @@ export class MDCSelect extends MDCComponent<MDCSelectFoundation> implements MDCR
       focusItemEl.focus();
     };
     this.handleMenuClosed_ = () => {
+      this.foundation_.handleMenuClosed();
+
       // isMenuOpen_ is used to track the state of the menu opening or closing since the menu.open function
       // will return false if the menu is still closing and this method listens to the closed event which
       // occurs after the menu is already closed.

packages/mdc-select/constants.ts

@@ -22,6 +22,7 @@
  */
 
 const cssClasses = {
+  ACTIVATED: 'mdc-select--activated',
   DISABLED: 'mdc-select--disabled',
   FOCUSED: 'mdc-select--focused',
   INVALID: 'mdc-select--invalid',

packages/mdc-select/foundation.ts

@@ -132,6 +132,14 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
     this.notchOutline(openNotch);
   }
 
+  handleMenuOpened() {
+    this.adapter_.addClass(cssClasses.ACTIVATED);
+  }
+
+  handleMenuClosed() {
+    this.adapter_.removeClass(cssClasses.ACTIVATED);
+  }
+
   /**
    * Handles value changes, via change event or programmatic updates.
    */

packages/mdc-select/helper-text/index.ts

@@ -24,3 +24,4 @@
 export * from './adapter';
 export * from './component';
 export * from './foundation';
+export {cssClasses as helperTextCssClasses, strings as helperTextStrings} from './constants';

packages/mdc-select/icon/index.ts

@@ -24,3 +24,4 @@
 export * from './adapter';
 export * from './component';
 export * from './foundation';
+export {strings as iconStrings} from './constants';

packages/mdc-select/index.ts

@@ -23,6 +23,7 @@
 
 export * from './adapter';
 export * from './component';
+export * from './constants';
 export * from './foundation';
 export * from './types';
 export * from './helper-text/index';