⬆️ Upgrade @Material packages to 0.19 versions (#30)

- 💥 Change "accent" to "secondary" globally, as done by MDC-Web. material-components/material-components-web#1116 - ✨ `{{mdc-button}}` now has `unelevated` boolean attribute (default: `false`) - ✨ `{{mdc-button}}` now has `dense` boolean attribute (default: `false`) - ✨ `{{mdc-button}}` now has `compact` boolean attribute (default: `false`) - ✨ `{{mdc-textfield}}` now has `box` boolean attribute (default: `false`)
secondstreet · Sep 6, 2017 · d06c0b6 · d06c0b6
1 parent 39ad8d5
commit d06c0b6
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 208 deletions.
diff --git a/addon/components/mdc-button.js b/addon/components/mdc-button.js
@@ -7,11 +7,27 @@ export default Ember.Component.extend(MDCComponent, {
   /**
    * @type {Boolean}
    */
-  accent: false,
+  secondary: false,
   /**
    * @type {Boolean}
    */
   raised: false,
+  /**
+   * @type {Boolean}
+   */
+  unelevated: false,
+  /**
+   * @type {Boolean}
+   */
+  compact: false,
+  /**
+   * @type {Boolean}
+   */
+  dense: false,
+  /**
+   * @type {Boolean}
+   */
+  stroked: false,
   /**
    * @type {Boolean}
    */
@@ -26,7 +42,15 @@ export default Ember.Component.extend(MDCComponent, {
   layout,
   tagName: 'button',
   classNames: 'mdc-button',
-  classNameBindings: ['accent:mdc-button--accent', 'raised:mdc-button--raised', 'mdcClassNames'],
+  classNameBindings: [
+    'secondary:mdc-button--accent',
+    'raised:mdc-button--raised',
+    'unelevated:mdc-button--unelevated',
+    'compact:mdc-button--compact',
+    'dense:mdc-button--dense',
+    'stroked:mdc-button--stroked',
+    'mdcClassNames'
+  ],
   attributeBindings: ['disabled', 'type', 'style'],
   //endregion
 

diff --git a/addon/components/mdc-linear-progress.js b/addon/components/mdc-linear-progress.js
@@ -29,7 +29,7 @@ export default Ember.Component.extend(MDCComponent, {
   /**
    * @type {Boolean}
    */
-  accent: false,
+  secondary: false,
 
   /**
    * @type {Number}
@@ -45,7 +45,7 @@ export default Ember.Component.extend(MDCComponent, {
     `indeterminate:${cssClasses.INDETERMINATE_CLASS}`,
     `closed:${cssClasses.CLOSED_CLASS}`,
     `reversed:${cssClasses.REVERSED_CLASS}`,
-    'accent:mdc-linear-progress--accent'
+    'secondary:mdc-linear-progress--accent'
   ],
   attributeBindings: ['role'],
   init() {

diff --git a/addon/components/mdc-menu.js b/addon/components/mdc-menu.js
@@ -2,11 +2,11 @@ import Ember from 'ember';
 import layout from '../templates/components/mdc-menu';
 import { MDCComponent } from '../mixins/mdc-component';
 import styleComputed from '../utils/style-computed';
-import { MDCSimpleMenuFoundation } from '@material/menu';
+import { MDCSimpleMenuFoundation, util } from '@material/menu';
 
 const { get, set } = Ember;
 const { strings } = MDCSimpleMenuFoundation;
-const TRANSFORM_PROPERTY = ('transform' in document.createElement('span')) ? 'transform' : 'webkitTransform';
+const TRANSFORM_PROPERTY = util.getTransformPropertyName(window);
 
 /**
  * @typedef {Ember.Component} MDCMenuComponent

diff --git a/addon/components/mdc-textfield.js b/addon/components/mdc-textfield.js
@@ -1,8 +1,11 @@
 import Ember from 'ember';
 import layout from '../templates/components/mdc-textfield';
 import { MDCComponent, addClass, removeClass } from '../mixins/mdc-component';
+import getElementProperty from '../utils/get-element-property';
 import { MDCTextfieldFoundation } from '@material/textfield';
+import { util } from '@material/ripple';
 
+const MATCHES = util.getMatchesProperty(HTMLElement.prototype);
 const { cssClasses } = MDCTextfieldFoundation;
 const { get, set, computed } = Ember;
 
@@ -27,6 +30,11 @@ export default Ember.Component.extend(MDCComponent, {
    * @type {String}
    */
   type: 'text',
+  /**
+   * Render as a box instead of a bare textfield
+   * @type {Boolean}
+   */
+  box: false,
   /**
    * This will be called when the user indicates they want to change the value
    * of the input. If you want to simulate two-way binding, you can use the
@@ -42,6 +50,10 @@ export default Ember.Component.extend(MDCComponent, {
    * @type {Boolean}
    */
   valid: true,
+  /**
+   * @type {Boolean}
+   */
+  'bad-input': false,
   /**
    * @type {?String}
    */
@@ -87,7 +99,7 @@ export default Ember.Component.extend(MDCComponent, {
       'inputFocusHandlers',
       'inputBlurHandlers',
       'inputInputHandlers',
-      'inputKeydownHandlers',
+      'inputKeydownHandlers'
     ].forEach(prop => set(this, prop, Ember.A([])));
     this._super(...arguments);
   },
@@ -123,12 +135,20 @@ export default Ember.Component.extend(MDCComponent, {
    * @type {Object}
    */
   CLASS_NAMES: cssClasses,
+  rippleOptions() {
+    const fallbackHasMatches = () => ({ [MATCHES]: () => false });
+    return {
+      isSurfaceActive: () =>
+        getElementProperty(this, 'querySelector', fallbackHasMatches)('input, textarea')[MATCHES](':active')
+    };
+  },
   //endregion
 
   //region Computed Properties
   /**
    * @type {String}
    */
+  ripple: computed.bool('box'),
   labelClassnames: computed('value', 'labelClasses.[]', function() {
     const classnames = Ember.A([]);
     if (get(this, 'value')) {
@@ -212,12 +232,7 @@ export default Ember.Component.extend(MDCComponent, {
         get(component, 'inputKeydownHandlers').removeObject(handler);
       },
       getNativeInput() {
-        const  value = get(component, 'value');
-        return {
-          value,
-          disabled: get(component, 'disabled'),
-          checkValidity: () => get(component, 'valid')
-        };
+        return getElementProperty(component, 'querySelector', () => null)('input, textarea');
       }
     });
   },

diff --git a/addon/templates/components/mdc-textfield.hbs b/addon/templates/components/mdc-textfield.hbs
@@ -1,4 +1,4 @@
-<label class="{{CLASS_NAMES.ROOT}} {{mdcClassNames}} {{unless valid CLASS_NAMES.INVALID}} {{if fullwidth "mdc-textfield--fullwidth"}} {{if disabled CLASS_NAMES.DISABLED}} {{if value CLASS_NAMES.UPGRADED}} {{if multiline "mdc-textfield--multiline"}}">
+<label class="{{CLASS_NAMES.ROOT}} {{mdcClassNames}} {{unless valid CLASS_NAMES.INVALID}} {{if fullwidth "mdc-textfield--fullwidth"}} {{if disabled CLASS_NAMES.DISABLED}} {{if value CLASS_NAMES.UPGRADED}} {{if multiline "mdc-textfield--multiline"}} {{if box "mdc-textfield--box"}}">
   {{#if multiline}}
     {{mdc-textfield/textarea
       value=value
@@ -24,6 +24,9 @@
       readonly=readonly
       type=type
     }}
+    {{#if box}}
+      <div class="mdc-textfield__bottom-line"></div>
+    {{/if}}
   {{/if}}
   {{#mdc-textfield/label class-names=labelClassnames}}
     {{label}}

diff --git a/blueprints/ember-material-components-web/index.js b/blueprints/ember-material-components-web/index.js
@@ -2,24 +2,24 @@ module.exports = {
   normalizeEntityName: function() {}, // no-op since we're just adding dependencies
   afterInstall: function() {
     return this.addPackagesToProject([
-      { name: '@material/base', target: '0.1.0' },
-      { name: '@material/animation', target: '0.2.2' },
-      { name: '@material/theme', target: '0.1.5' },
-      { name: '@material/checkbox', target: '0.1.0' },
-      { name: '@material/radio', target: '0.2.5' },
-      { name: '@material/button', target: '0.3.7' },
-      { name: '@material/fab', target: '0.3.9' },
-      { name: '@material/card', target: '0.1.0' },
-      { name: '@material/icon-toggle', target: '0.1.12' },
-      { name: '@material/elevation', target: '0.1.1' },
-      { name: '@material/list', target: '0.1.0' },
-      { name: '@material/form-field', target: '0.1.1' },
-      { name: '@material/textfield', target: '0.2.0' },
-      { name: '@material/menu', target: '0.4.0' },
-      { name: '@material/toolbar', target: '0.4.1'},
-      { name: '@material/tabs', target: '0.2.4'},
-      { name: '@material/ripple', target: '0.7.0'},
-      { name: '@material/linear-progress', target: '0.1.3'},
+      { name: '@material/base', target: '0.2.5' },
+      { name: '@material/animation', target: '0.3.1' },
+      { name: '@material/theme', target: '0.2.0' },
+      { name: '@material/checkbox', target: '0.4.5' },
+      { name: '@material/radio', target: '0.2.12' },
+      { name: '@material/button', target: '0.5.0' },
+      { name: '@material/fab', target: '0.3.16' },
+      { name: '@material/card', target: '0.2.7' },
+      { name: '@material/icon-toggle', target: '0.1.19' },
+      { name: '@material/elevation', target: '0.1.11' },
+      { name: '@material/list', target: '0.2.17' },
+      { name: '@material/form-field', target: '0.2.14' },
+      { name: '@material/textfield', target: '0.3.6' },
+      { name: '@material/menu', target: '0.4.5' },
+      { name: '@material/toolbar', target: '0.4.7'},
+      { name: '@material/tabs', target: '0.2.8'},
+      { name: '@material/ripple', target: '0.8.5'},
+      { name: '@material/linear-progress', target: '0.1.8'},
       { name: '@material/switch', target: '0.1.12'}
     ]);
   }

diff --git a/package.json b/package.json
@@ -33,25 +33,25 @@
     "material-design-icons": "^3.0.1"
   },
   "devDependencies": {
-    "@material/animation": "0.2.2",
-    "@material/base": "0.1.0",
-    "@material/button": "0.3.7",
+    "@material/animation": "0.3.1",
+    "@material/base": "0.2.5",
+    "@material/button": "0.5.0",
     "@material/card": "0.1.0",
-    "@material/checkbox": "0.1.0",
-    "@material/elevation": "0.1.1",
-    "@material/fab": "0.3.9",
-    "@material/form-field": "0.1.1",
-    "@material/icon-toggle": "0.1.12",
-    "@material/linear-progress": "0.1.3",
-    "@material/list": "0.1.0",
-    "@material/menu": "0.4.0",
-    "@material/radio": "0.2.5",
-    "@material/ripple": "0.7.0",
+    "@material/checkbox": "0.4.5",
+    "@material/elevation": "0.1.11",
+    "@material/fab": "0.3.16",
+    "@material/form-field": "0.2.14",
+    "@material/icon-toggle": "0.1.19",
+    "@material/linear-progress": "0.1.8",
+    "@material/list": "0.2.17",
+    "@material/menu": "0.4.5",
+    "@material/radio": "0.2.12",
+    "@material/ripple": "0.8.5",
     "@material/switch": "0.1.12",
-    "@material/tabs": "0.2.4",
-    "@material/textfield": "0.2.0",
-    "@material/theme": "0.1.5",
-    "@material/toolbar": "0.4.1",
+    "@material/tabs": "0.2.8",
+    "@material/textfield": "0.3.6",
+    "@material/theme": "0.2.0",
+    "@material/toolbar": "0.4.7",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
     "ember-cli": "2.10.0",

diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
@@ -3,6 +3,7 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
   isDemoVisible: true,
   myProgress: 0.5,
+  isFirstSwitchOn: true,
   actions: {
     alert(what) {
       Ember.run.later(() => {

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -6,9 +6,14 @@
   <h2 class="mdc-typography--title">Buttons</h2>
   {{#mdc-button}}Standard Button{{/mdc-button}}
   {{#mdc-button disabled=true click=(action "alert" "Should not see this.")}}Disabled Button{{/mdc-button}}
-  {{#mdc-button accent=true}}Accent Button{{/mdc-button}}
+  {{#mdc-button secondary=true}}Secondary Button{{/mdc-button}}
   {{#mdc-button raised=true}}Raised Button{{/mdc-button}}
-  {{#mdc-button raised=true accent=true}}Raised Accent Button{{/mdc-button}}
+  {{#mdc-button raised=true secondary=true}}Raised Secondary Button{{/mdc-button}}
+  {{#mdc-button unelevated=true}}Unelevated Button{{/mdc-button}}
+  {{#mdc-button unelevated=true secondary=true}}Unelevated Secondary Button{{/mdc-button}}
+  {{#mdc-button stroked=true}}Stroked Button{{/mdc-button}}
+  {{#mdc-button unelevated=true compact=true}}Unelevated Compact Button{{/mdc-button}}
+  {{#mdc-button unelevated=true dense=true}}Unelevated Dense Button{{/mdc-button}}
   {{#mdc-button click=(action "alert" "Action button clicked")}}Action Button{{/mdc-button}}
   <form class="tiny-form" onsubmit={{action "alert" "Form Submitted"}}>
     {{#mdc-button type="submit"}}Submit Button{{/mdc-button}}
@@ -124,7 +129,13 @@
 <section class="component-doc">
   <h2 class="mdc-typography--title">Text Fields</h2>
 
-  TODO: Bug with placeholder + label.
+  {{mdc-textfield
+    label="Box Textfield"
+    box=true
+    value=textfieldBoxValue
+    onchange=(action (mut textfieldBoxValue))
+    type="text"
+  }}
 
   {{mdc-textfield
     label="Email Address"
@@ -134,6 +145,7 @@
     type="email"
     helptext="This will not be sent to any server"
   }}
+  TODO: Bug with placeholder + label.
 
   {{mdc-textfield
     label="Recipient Email"
@@ -224,8 +236,8 @@
   <h3 class="mdc-typography--subheading2">Linear Progress Indeterminate</h3>
   {{mdc-linear-progress indeterminate=true}}
 
-  <h3 class="mdc-typography--subheading2">Linear Progress Determinate Accented</h3>
-  {{mdc-linear-progress accent=true}}
+  <h3 class="mdc-typography--subheading2">Linear Progress Determinate Secondary</h3>
+  {{mdc-linear-progress secondary=true}}
 
 </section>
 

diff --git a/tests/integration/components/mdc-linear-progress-test.js b/tests/integration/components/mdc-linear-progress-test.js
@@ -10,24 +10,24 @@ test('it renders', function(assert) {
   // Set any properties with this.set('myProperty', 'value');
   // Handle any actions with this.on('myAction', function(val) { ... });
 
-  this.set('isAccent', false);
+  this.set('isSecondary', false);
   this.set('myProgress', 0.5);
   this.set('isIndeterminate', false);
   this.set('mdcFoundation', {
     setProgress: (x) => {
       assert.equal(x, this.get('myProgress'));
     }
   });
-  this.render(hbs`{{mdc-linear-progress accent=isAccent progress=myProgress indeterminate=isIndeterminate foundation=mdcFoundation}}`);
+  this.render(hbs`{{mdc-linear-progress secondary=isSecondary progress=myProgress indeterminate=isIndeterminate foundation=mdcFoundation}}`);
 
   assert.equal(this.$().text().trim(), '');
 
   assert.notOk(this.$('.mdc-linear-progress').hasClass('mdc-linear-progress--indeterminate'), 'Progress bar is not in indeterminate state');
 
   this.set('myProgress', 0.8);
 
-  this.set('isAccent', true);
+  this.set('isSecondary', true);
   this.set('isIndeterminate', true);
   assert.ok(this.$('.mdc-linear-progress').hasClass('mdc-linear-progress--indeterminate'), 'Progress bar is in indeterminate state');
-  assert.ok(this.$('.mdc-linear-progress').hasClass('mdc-linear-progress--accent'), 'Progress bar is in accented variation');
+  assert.ok(this.$('.mdc-linear-progress').hasClass('mdc-linear-progress--accent'), 'Progress bar is in secondary variation');
 });