From 4bb72f9d1a80063984b79403e9117b279a2656f2 Mon Sep 17 00:00:00 2001 From: Mark Avery Date: Thu, 16 Nov 2017 16:11:15 -0800 Subject: [PATCH] feat(styleNamespace): now upgrading to using 'styleNamespace' for the namespace computed property. Will offically deprecate componentCssClassName in the future (#254) --- README.md | 18 ++++++++++-------- addon/mixins/style-namespacing-extras.js | 2 +- app/initializers/component-styles.js | 15 +++++++++++++-- app/initializers/route-styles.js | 2 +- .../app/components/base-rules/template.hbs | 4 ++-- .../app/components/scss/for-loop/template.hbs | 2 +- .../addon/components/no-style/template.hbs | 4 ++-- .../components/second-addon-less/template.hbs | 4 ++-- .../addon/components/addon-scss/template.hbs | 4 ++-- 9 files changed, 34 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index e1fe1b5..85fca21 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ To be able to use this for routes, you need to add a wrapping `div` around the o After that it's quite easy: add a style file in your route directory alongside your `route.js` or `template.hbs` files. -An individual controller also has access to a `styleNamespace` property that is the namespace for a given route. This can be used for various use cases. (like enabling BEM style similar to how the `componentCssClassName` is used in a component) +An individual controller also has access to a `styleNamespace` property that is the namespace for a given route. This can be used for various use cases. (like enabling BEM style similar to how the `styleNamespace` is used in a component) ### Usage with classic (non pod) structure @@ -184,18 +184,18 @@ postcss plugins in this way too. ### Getting the generated class name -You also have access to the generated class name to use in your templates. There is a computed property `componentCssClassName` This can be used to pass the class name to things like [`ember-wormhole`](https://github.com/yapplabs/ember-wormhole) or for use in BEM style classnames. +You also have access to the generated class name to use in your templates. There is a computed property `styleNamespace` This can be used to pass the class name to things like [`ember-wormhole`](https://github.com/yapplabs/ember-wormhole) or for use in BEM style classnames. An example of BEM usage would be `my-component/template.hbs` ```handlebars - - - ``` @@ -221,17 +221,19 @@ An example of BEM usage would be } ``` +*`componentCssClassName` will be officially deprecated, then removed in future versions. Will be migrating to the more appropriately named `styleNamespace`* + #### Using the generated class name in `classNameBindings` -You can build your own computed properties on top of `componentCssClassName`. One use case is using it to build a `classNameBinding`: +You can build your own computed properties on top of `styleNamespace`. One use case is using it to build a `classNameBinding`: `my-component/component.hbs` ```js classNameBindings: ['customBinding'], stateProperty: false, - customBinding: computed('componentCssClassName', 'stateProperty', function() { + customBinding: computed('styleNamespace', 'stateProperty', function() { if (this.get('stateProperty') { - return `${this.get('componentCssClassName')}--state`; + return `${this.get('styleNamespace')}--state`; } else { return ''; } diff --git a/addon/mixins/style-namespacing-extras.js b/addon/mixins/style-namespacing-extras.js index 7ae09af..487e43a 100644 --- a/addon/mixins/style-namespacing-extras.js +++ b/addon/mixins/style-namespacing-extras.js @@ -14,7 +14,7 @@ export default Mixin.create({ _shouldAddNamespacedClassName: computed({ get() { - return this.get('tagName') !== '' && this.get('componentCssClassName'); + return this.get('tagName') !== '' && this.get('styleNamespace'); } }), }); diff --git a/app/initializers/component-styles.js b/app/initializers/component-styles.js index edf9ea7..75786ec 100644 --- a/app/initializers/component-styles.js +++ b/app/initializers/component-styles.js @@ -6,6 +6,10 @@ const { Component, ComponentLookup, computed, + computed: { + // deprecatingAlias, + alias, + }, getOwner } = Ember; @@ -21,17 +25,24 @@ ComponentLookup.reopen({ }); Component.reopen(StyleNamespacingExtras, { - componentCssClassName: computed({ + styleNamespace: computed({ get() { return podNames[this.get('_componentIdentifier')] || ''; } }), + // componentCssClassName: deprecatingAlias('styleNamespace', { + // id: 'ember-component-css.deprecate-componentCssClassName', + // until: '0.7.0', + // }), + + componentCssClassName: alias('styleNamespace'), + init() { this._super(...arguments); if (this.get('_shouldAddNamespacedClassName')) { - this.classNames = this.classNames.concat(this.get('componentCssClassName')); + this.classNames = this.classNames.concat(this.get('styleNamespace')); } } }); diff --git a/app/initializers/route-styles.js b/app/initializers/route-styles.js index 1652280..9b7385a 100644 --- a/app/initializers/route-styles.js +++ b/app/initializers/route-styles.js @@ -11,7 +11,7 @@ Router.reopen({ let currentPath = route.name.replace(/\./g, '/'); if (podNames[currentPath]) { - getOwner(this).lookup(`controller:${route.name}`).set('routeStyleNamespaceClass', podNames[currentPath]); + getOwner(this).lookup(`controller:${route.name}`).set('styleNamespace', podNames[currentPath]); classes.push(podNames[currentPath]); } } diff --git a/tests/dummy/app/components/base-rules/template.hbs b/tests/dummy/app/components/base-rules/template.hbs index 3c3767a..498f149 100644 --- a/tests/dummy/app/components/base-rules/template.hbs +++ b/tests/dummy/app/components/base-rules/template.hbs @@ -4,5 +4,5 @@ - -element variant + +element variant diff --git a/tests/dummy/app/components/scss/for-loop/template.hbs b/tests/dummy/app/components/scss/for-loop/template.hbs index 0fc04fc..0dbbd25 100644 --- a/tests/dummy/app/components/scss/for-loop/template.hbs +++ b/tests/dummy/app/components/scss/for-loop/template.hbs @@ -1,3 +1,3 @@ {{#each items as |item|}} - + {{/each}} diff --git a/tests/dummy/lib/no-style-files-yet/addon/components/no-style/template.hbs b/tests/dummy/lib/no-style-files-yet/addon/components/no-style/template.hbs index 97fbeb3..4dcf939 100644 --- a/tests/dummy/lib/no-style-files-yet/addon/components/no-style/template.hbs +++ b/tests/dummy/lib/no-style-files-yet/addon/components/no-style/template.hbs @@ -4,5 +4,5 @@ - - + + diff --git a/tests/dummy/lib/second-test-addon/addon/components/second-addon-less/template.hbs b/tests/dummy/lib/second-test-addon/addon/components/second-addon-less/template.hbs index 37e8255..dd12705 100644 --- a/tests/dummy/lib/second-test-addon/addon/components/second-addon-less/template.hbs +++ b/tests/dummy/lib/second-test-addon/addon/components/second-addon-less/template.hbs @@ -5,5 +5,5 @@ - - + + diff --git a/tests/dummy/lib/test-addon/addon/components/addon-scss/template.hbs b/tests/dummy/lib/test-addon/addon/components/addon-scss/template.hbs index 39c94ff..c4899fb 100644 --- a/tests/dummy/lib/test-addon/addon/components/addon-scss/template.hbs +++ b/tests/dummy/lib/test-addon/addon/components/addon-scss/template.hbs @@ -5,5 +5,5 @@ - - + +