Breaking: Update container component

- simplify component class - move @z-index@ handling to CSS custom property Replaces mansona#272
pichfl · Jun 8, 2022 · 652b973 · 652b973
1 parent 1c16c50
commit 652b973
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 30 deletions.
diff --git a/addon/components/notification-container.js b/addon/components/notification-container.js
@@ -1,7 +1,5 @@
 /* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes */
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/template';
 import { inject as service } from '@ember/service';
 
 import layout from '../templates/components/notification-container';
@@ -12,15 +10,4 @@ export default class NotificationContainerComponent extends Component {
   tagName = '';
   layout = layout;
   position = 'top';
-  zindex = '1060';
-
-  @computed('position')
-  get positionClass() {
-    return `ember-cli-notifications-notification__container--${this.position}`;
-  }
-
-  @computed('zindex')
-  get inlineStyle() {
-    return htmlSafe(`z-index: ${this.zindex};`);
-  }
 }
diff --git a/addon/styles/components/notification-container.css b/addon/styles/components/notification-container.css
@@ -1,5 +1,11 @@
 :root {
-  --ecn-container-position: 10px;
+  /* Spacing */
+  --ecn-spacing-1: 0.5rem;
+  --ecn-spacing-2: 1rem;
+
+  /* Container */
+  --ecn-container-z-index: 9999;
+  --ecn-container-position: var(--ecn-spacing-1);
   --ecn-container-width: 80%;
   --ecn-container-max-with: 400px;
 
@@ -17,51 +23,49 @@
   --ecn-orange: #ff7f48;
   --ecn-red: #e74c3c;
 
-  /* Spacing */
-  --ecn-spacing-1: .5rem;
-  --ecn-spacing-2: 1rem;
 }
 
 /* Base */
-.ember-cli-notifications-notification__container {
+.ecn_container {
   position: fixed;
   margin: 0 auto;
   width: var(--ecn-container-width);
   max-width: var(--ecn-container-max-with);
+  z-index: var(--ecn-container-z-index, 9999);
 }
 
 /* Position */
-.ember-cli-notifications-notification__container--top {
+.ecn_container-top {
   top: var(--ecn-container-position);
   right: 0;
   left: 0;
 }
 
-.ember-cli-notifications-notification__container--top-left {
+.ecn_container-top-left {
   top: var(--ecn-container-position);
   right: auto;
   left: var(--ecn-container-position);
 }
 
-.ember-cli-notifications-notification__container--top-right {
+.ecn_container-top-right {
   top: var(--ecn-container-position);
   right: var(--ecn-container-position);
   left: auto;
 }
 
-.ember-cli-notifications-notification__container--bottom {
+.ecn_container-bottom {
   right: 0;
   bottom: var(--ecn-container-position);
   left: 0;
 }
 
-.ember-cli-notifications-notification__container--bottom-left {
+.ecn_container-bottom-left {
   right: auto;
   bottom: var(--ecn-container-position);
   left: var(--ecn-container-position);
 }
 
-.ember-cli-notifications-notification__container--bottom-right {
+.ecn_container-bottom-right {
   right: var(--ecn-container-position);
   bottom: var(--ecn-container-position);
   left: auto;

diff --git a/addon/templates/components/notification-container.hbs b/addon/templates/components/notification-container.hbs
@@ -1,6 +1,5 @@
 <div
-  class="ember-cli-notifications-notification__container {{this.positionClass}}"
-  style={{this.inlineStyle}}
+  class="ecn_container ecn_container-{{this.position}}"
   data-test-notification-container={{this.position}}
 >
   {{#each this.notifications.content as |notification|}}

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,5 +1,5 @@
 {{! template-lint-disable link-rel-noopener no-action no-unbalanced-curlies require-button-type require-input-label }}
-<NotificationContainer @position={{this.position}} @zindex={{this.zindex}} />
+<NotificationContainer @position={{this.position}} />
 <div class="bg-blue white py4">
   <div class="max-width-4 mx-auto px2">
     <div class="mb3">
@@ -26,9 +26,9 @@
     <h2>Basic usage</h2>
     <hr>
     <p>Include the container component in your template.</p>
-    <p>Optionally, change the position or z-index value of the notifications container.</p>
-    <p class="h5"><i>Default value is top</i></p>
-    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right" zindex="9999"&#125;&#125;</CodeBlock>
+    <p>Optionally, change the position of the notifications container. The default value is <code>top</code>.</p>
+    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right"&#125;&#125;</CodeBlock>
+    <p>To change the <code>z-index</code> of the container, override the CSS custom property <code>--ecn-container-zindex</code>. The default value is <code>9999</code>.</p>
 
     <p>Inject the notifications service where required.</p>
     <CodeBlock @language="js">import Controller from '@ember/controller';