@1024pix/pix-ui 46.4.2 → 46.5.0

package/addon/components/pix-filterable-and-searchable-select.hbs

@@ -28,7 +28,6 @@
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>
     <PixSelect
-      {{did-insert this.setSelectWidth}}
       @id={{this.pixSelectId}}
       @placeholder={{@placeholder}}
       @value={{@value}}

package/addon/components/pix-filterable-and-searchable-select.js

@@ -1,14 +1,38 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixFilterableAndSearchableSelect extends Component {
+  @service elementHelper;
   @tracked selectedCategories = [];
-  mainId = 'pix-pfass-' + guidFor(this);
-  pixSelectId = 'pix-pfass-select-' + guidFor(this);
-  pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
+    this.mainId = 'pix-pfass-' + guidFor(this);
+    this.pixSelectId = 'pix-pfass-select-' + guidFor(this);
+    this.pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+    this.elementHelper.waitForElement(this.pixSelectId).then(() => {
+      const baseFontRemRatio = Number(
+        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+      );
+
+      const multiSelectWidth = document
+        .getElementById(this.pixMultiSelectId)
+        .getBoundingClientRect().width;
+
+      const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
+
+      const className = `sizing-select-${this.pixSelectId}`;
+      this.elementHelper.createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
+
+      const element = document.getElementById(`container-${this.pixSelectId}`);
+
+      element.className = element.className + ' ' + className;
+    });
+  }
 
   @action
   selectCategories(categories) {
@@ -47,22 +71,4 @@ export default class PixFilterableAndSearchableSelect extends Component {
 
     return selectableOptions;
   }
-
-  @action
-  setSelectWidth(element) {
-    const baseFontRemRatio = Number(
-      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-    );
-
-    const multiSelectWidth = document
-      .getElementById(this.pixMultiSelectId)
-      .getBoundingClientRect().width;
-
-    const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
-
-    const className = `sizing-select-${this.pixSelectId}`;
-    createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
-
-    element.className = element.className + ' ' + className;
-  }
 }

package/addon/components/pix-pagination.hbs

@@ -1,4 +1,4 @@
-<footer class={{this.isCondensed}} {{did-update this.checkCurrentPageAgainstPageCount @pagination}}>
+<footer class={{this.isCondensed}}>
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect

package/addon/components/pix-pagination.js

@@ -118,13 +118,4 @@ export default class PixPagination extends Component {
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
   }
-
-  @action
-  checkCurrentPageAgainstPageCount() {
-    const pageCount = this.args.pagination.pageCount;
-    if (pageCount === 0) return;
-    if (this.currentPage > pageCount) {
-      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
-    }
-  }
 }

package/addon/components/pix-select.hbs

@@ -4,7 +4,6 @@
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
   {{on-escape-action this.hideDropdown this.selectId}}
-  {{did-insert this.setSelectWidth}}
   {{on "keydown" this.lockTab}}
   ...attributes
 >
@@ -47,7 +46,6 @@
       <div
         {{popover}}
         class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-        id={{this.dropDownId}}
         {{on "transitionend" this.focus}}
       >
         {{#if @isSearchable}}

package/addon/components/pix-select.js

@@ -1,30 +1,47 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixSelect extends Component {
+  @service elementHelper;
   @tracked isExpanded = false;
   @tracked searchValue = null;
-  searchId = 'search-input-' + guidFor(this);
 
   constructor(...args) {
     super(...args);
 
     const categories = [];
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `listbox-${this.selectId}`;
+
     this.args.options.forEach((element) => {
       if (!categories.includes(element.category) && element.category !== undefined) {
         categories.push(element.category);
       }
     });
-
     this.displayCategory = categories.length > 0;
-  }
 
-  get selectId() {
-    if (this.args.id) return this.args.id;
-    return 'select-' + guidFor(this);
+    if (!this.args.isComputeWidthDisabled) {
+      this.elementHelper.waitForElement(this.selectId).then((elementList) => {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const checkIconWidth = 1.125 * baseFontRemRatio;
+        const listWidth = elementList.getBoundingClientRect().width;
+        const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
+
+        const className = `sizing-select-${this.selectId}`;
+        this.elementHelper.createClass(`.${className}`, `width: ${selectWidth}rem;`);
+
+        const element = document.getElementById(`container-${this.selectId}`);
+
+        element.className = element.className + ' ' + className;
+      });
+    }
   }
 
   get displayDefaultOption() {
@@ -51,14 +68,6 @@ export default class PixSelect extends Component {
     return this.isExpanded ? 'true' : 'false';
   }
 
-  get listId() {
-    return `listbox-${this.selectId}`;
-  }
-
-  get dropDownId() {
-    return `dropdown-${this.selectId}`;
-  }
-
   get placeholder() {
     if (!this.args.value) return this.args.placeholder;
     const option = this.args.options.find((option) => option.value === this.args.value);
@@ -155,23 +164,4 @@ export default class PixSelect extends Component {
       }
     }
   }
-
-  @action
-  setSelectWidth() {
-    if (!this.args.isComputeWidthDisabled) {
-      const baseFontRemRatio = Number(
-        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-      );
-      const checkIconWidth = 1.125 * baseFontRemRatio;
-      const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
-      const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
-
-      const className = `sizing-select-${this.selectId}`;
-      createClass(`.${className}`, `width: ${selectWidth}rem;`);
-
-      const element = document.getElementById(`container-${this.selectId}`);
-
-      element.className = element.className + ' ' + className;
-    }
-  }
 }

package/addon/styles/_pix-toggle.scss

@@ -10,9 +10,13 @@
   }
 
   &__button {
+    @extend %pix-body-s;
+
     width: fit-content;
     padding: var(--pix-spacing-1x);
-    background-color: transparent;
+    font-weight: var(--pix-font-bold);
+    line-height: 1.572;
+    background: var(--pix-neutral-20);
     border: 1px solid var(--pix-neutral-500);
     border-radius: 4px;
   }
@@ -20,11 +24,13 @@
   &__on,
   &__off {
     display: inline-block;
-    padding: var(--pix-spacing-2x);
-    color: var(--pix-neutral-800);
+    padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
     border-radius: 4px;
+  }
 
-    @extend %pix-body-s;
+  &__on {
+    color: var(--pix-neutral-800);
+    font-weight: var(--pix-font-normal);
   }
 
   &__off {
@@ -36,11 +42,13 @@
     .pix-toggle {
       &__on {
         color: var(--pix-neutral-20);
+        font-weight: inherit;
         background-color: var(--pix-neutral-800);
       }
 
       &__off {
         color: inherit;
+        font-weight: var(--pix-font-normal);
         background-color: transparent;
       }
     }

package/app/services/element-helper.js

@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+
+export default class ElementService extends Service {
+  waitForElement(id) {
+    return new Promise((resolve) => {
+      if (document.getElementById(id)) {
+        return resolve(document.getElementById(id));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.getElementById(id)) {
+          resolve(document.getElementById(id));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+
+  createClass(name, rules) {
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
+    else style.sheet.insertRule(name + '{' + rules + '}', 0);
+  }
+}

package/app/stories/pix-toggle.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form/Toggle',
+  title: 'Basics/Toggle',
   argTypes: {
     label: {
       name: 'label',
@@ -100,8 +100,8 @@ const TemplateWithYields = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   label: 'Mon toggle',
-  onLabel: 'Oui',
-  offLabel: 'Non',
+  onLabel: 'Option A',
+  offLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };
@@ -110,8 +110,8 @@ export const Inline = Template.bind({});
 Inline.args = {
   inline: true,
   label: 'Mon toggle',
-  onLabel: 'Oui',
-  offLabel: 'Non',
+  onLabel: 'Option A',
+  offLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };
@@ -120,8 +120,8 @@ export const ScreenReaderOnly = Template.bind({});
 ScreenReaderOnly.args = {
   screenReaderOnly: true,
   label: 'Mon toggle',
-  onLabel: 'Oui',
-  offLabel: 'Non',
+  onLabel: 'Option A',
+  offLabel: 'Option B',
   toggled: false,
   onChange: action('onChange'),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.4.2",
+  "version": "46.5.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -64,7 +64,6 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",
-    "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^3.0.0",
     "@embroider/macros": "^1.11.0",
@@ -106,7 +105,7 @@
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^5.0.0",
+    "ember-template-lint": "^6.0.0",
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-try": "^3.0.0-beta",
     "eslint": "^8.28.0",

package/addon/common/add-dynamic-style-tag.js

@@ -1,8 +0,0 @@
-export function createClass(name, rules) {
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  document.getElementsByTagName('head')[0].appendChild(style);
-
-  if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
-  else style.sheet.insertRule(name + '{' + rules + '}', 0);
-}