@1024pix/pix-ui 23.3.0 → 24.0.1

package/.circleci/config.yml

@@ -18,10 +18,10 @@ jobs:
     docker:
       - image: cimg/node:16.14.0-browsers
     steps:
+      - checkout
       - run: sudo npm i -g npm@8.13.2
       - browser-tools/install-chrome
       - browser-tools/install-chromedriver
-      - checkout
       - run: npm ci
       - run: npm run lint:js
       - run: npm run lint:hbs

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Pix-UI Changelog
 
+## v24.0.1 (11/01/2023)
+
+
+### :bug: Correction
+- [#315](https://github.com/1024pix/pix-ui/pull/315) [BUGFIX] Améliorer le comportement du PixSelect (PIX-6775)
+- [#317](https://github.com/1024pix/pix-ui/pull/317) [BUGFIX] La CI sort en erreur alors que les tests sont OK en local
+
+## v24.0.0 (09/01/2023)
+
+
+### :coffee: Autre
+- [#314](https://github.com/1024pix/pix-ui/pull/314) [BREAKING_CHANGE] Ajouter un normalize/reset css dans Pix UI (pix-6723)
+
 ## v23.3.0 (29/12/2022)
 
 

package/addon/components/pix-select.hbs

@@ -33,7 +33,7 @@
     aria-controls={{this.listId}}
     aria-disabled={{@isDisabled}}
   >
-    {{this.placeholder}}
+    <span class="pix-select-button__text">{{this.placeholder}}</span>
 
     <FaIcon
       class="pix-select-button__dropdown-icon"

package/addon/components/pix-select.js

@@ -139,7 +139,7 @@ export default class PixSelect extends Component {
   lockTab(event) {
     if (event.code === 'Tab' && this.isExpanded) {
       event.preventDefault();
-      document.getElementById(this.searchId).focus();
+      if (this.args.isSearchable) document.getElementById(this.searchId).focus();
     }
   }
 

package/addon/styles/_pix-banner.scss

@@ -1,5 +1,4 @@
 .pix-banner {
-  @import 'reset-css';
   font-family: $font-roboto;
   font-weight: $font-normal;
   padding: 16px 24px;

package/addon/styles/_pix-button-base.scss

@@ -1,6 +1,4 @@
 .pix-button {
-  @import 'reset-css';
-
   color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.875rem;

package/addon/styles/_pix-checkbox.scss

@@ -1,5 +1,4 @@
 .pix-checkbox {
-  @import 'reset-css';
   align-items: center;
   display: flex;
 

package/addon/styles/_pix-collapsible.scss

@@ -1,6 +1,4 @@
 .pix-collapsible {
-  @import 'reset-css';
-
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -21,7 +19,6 @@
     border: none;
     color: $pix-neutral-60;
     font-size: 1rem;
-    font-weight: 500;
     align-items: center;
 
     &:hover {

package/addon/styles/_pix-dropdown.scss

@@ -1,5 +1,4 @@
 .pix-dropdown {
-  @import 'reset-css';
   width: 100%;
   position: relative;
 

package/addon/styles/_pix-icon-button.scss

@@ -1,6 +1,4 @@
 .pix-icon-button {
-  @import 'reset-css';
-
   border-radius: 50%;
   cursor: pointer;
   border: none;

package/addon/styles/_pix-input-code.scss

@@ -1,5 +1,4 @@
 .pix-input-code {
-  @import 'reset-css';
   display: flex;
 
   // hide up/down cursors

package/addon/styles/_pix-input-password.scss

@@ -1,6 +1,4 @@
 .pix-input-password {
-  @import 'reset-css';
-
   display: flex;
   flex-direction: column;
   position: relative;

package/addon/styles/_pix-input.scss

@@ -1,6 +1,4 @@
 .pix-input {
-  @import 'reset-css';
-
   display: flex;
   flex-direction: column;
   position: relative;

package/addon/styles/_pix-message.scss

@@ -1,6 +1,4 @@
 .pix-message {
-  @import 'reset-css';
-
   margin: 0;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;

package/addon/styles/_pix-modal.scss

@@ -35,7 +35,7 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-modal {
-  @import 'reset-css';
+  
   display: inline-block;
   vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   width: 512px;

package/addon/styles/_pix-return-to.scss

@@ -1,6 +1,4 @@
 .pix-return-to {
-  @import 'reset-css';
-
   font-size: 1rem;
   font-weight: $font-medium;
   letter-spacing: 0.15px;

package/addon/styles/_pix-select.scss

@@ -108,6 +108,12 @@
     @include formElementInError();
   }
 
+  &__text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &__dropdown-icon {
     @include text-small();
     margin-left: $spacing-xs;
@@ -165,7 +171,8 @@
     &--hidden {
       visibility: hidden;
       height: 0;
-      padding: 0;
+      padding-top: 0;
+      padding-bottom: 0;
     }
   }
 }

package/addon/styles/_pix-selectable-tag.scss

@@ -17,7 +17,6 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 }
 
 .pix-selectable-tag {
-  @import 'reset-css';
   display: inline-block;
   text-align: center;
   position: relative;

package/addon/styles/_pix-sidebar.scss

@@ -22,7 +22,7 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-sidebar {
-  @import 'reset-css';
+  
   display: flex;
   flex-direction: column;
   height: 100%;

package/addon/styles/_pix-stars.scss

@@ -1,5 +1,4 @@
 .pix-stars {
-  @import 'reset-css';
   line-height: 0;
 
   > svg {

package/addon/styles/_pix-tag.scss

@@ -1,6 +1,4 @@
 .pix-tag {
-  @import 'reset-css';
-
   display: inline-block;
   text-align: center;
   vertical-align: baseline;

package/addon/styles/_pix-textarea.scss

@@ -1,6 +1,4 @@
 .pix-textarea {
-  @import 'reset-css';
-
   textarea {
     width: 100%;
     border: 1px solid $pix-neutral-40;

package/addon/styles/_pix-tooltip.scss

@@ -1,6 +1,4 @@
 .pix-tooltip {
-  @import 'reset-css';
-
   position: relative;
   display: flex;
   justify-content: center;

package/addon/styles/addon.scss

@@ -1,4 +1,5 @@
 @import 'pix-design-tokens';
+@import 'normalize-reset';
 @import 'a11y';
 @import 'pix-background-header';
 @import 'pix-banner';
@@ -17,7 +18,6 @@
 @import 'pix-tag';
 @import 'pix-textarea';
 @import 'pix-tooltip';
-@import 'pix-button-link';
 @import 'pix-button-upload';
 @import 'pix-input';
 @import 'pix-input-password';
@@ -35,15 +35,3 @@
 
 // at the end so it can override it's children scss
 @import 'pix-filterable-and-searchable-select';
-
-html {
-  font-size: 16px;
-}
-
-body {
-  font-family: $font-roboto;
-}
-
-* {
-  box-sizing: border-box;
-}

package/addon/styles/normalize-reset/_normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

package/addon/styles/normalize-reset/_reset.scss

@@ -0,0 +1,20 @@
+/****** Elad Shechter's RESET *******/
+/*** box sizing border-box for all elements ***/
+html {
+    font-size: 16px;
+  }  
+body {
+    font-family: $font-roboto;
+}
+*,
+*::before,
+*::after{box-sizing:border-box;}
+a{text-decoration:none; color:inherit; cursor:pointer;}
+button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
+figure{margin:0;}
+input::-moz-focus-inner {border:0; padding:0; margin:0;}
+ul, ol, dd{margin:0; padding:0; list-style:none;}
+h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
+p{margin:0;}
+cite {font-style:normal;}
+fieldset{border-width:0; padding:0; margin:0;}

package/addon/styles/normalize-reset/index.scss

@@ -0,0 +1,2 @@
+@import 'normalize';
+@import 'reset';

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

@@ -9,7 +9,7 @@ export const Template = (args) => {
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
 >
-  {{label}}
+  {{this.label}}
 </PixCheckbox>`,
     context: args,
   };

package/app/stories/pix-multi-select.stories.js

@@ -8,7 +8,7 @@ const Template = (args) => ({
       border : none;
     }
   </style>
-  <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+  <h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
   {{#if this.id}}
     <div>
       <label for={{this.id}}>Un label en dehors du composant</label>
@@ -54,7 +54,7 @@ Default.args = {
 export const multiSelectWithChildComponent = (args) => {
   return {
     template: hbs`
-      <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+      <h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
       <PixMultiSelect
         @label={{this.label}}
         @placeholder={{this.placeholder}}

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

@@ -7,6 +7,7 @@ export const Template = (args) => {
       <style>
         .custom {
           border: 0;
+          width: 150px;
         }
         .custom:hover {
           border: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "23.3.0",
+  "version": "24.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"

package/addon/styles/_pix-button-link.scss

@@ -1,3 +0,0 @@
-.pix-button-link {
-  @import 'reset-css';
-}

package/addon/styles/_reset-css.scss

@@ -1,30 +0,0 @@
-ul, ol, li, form, fieldset, legend
-{
-	margin: 0;
-	padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
-
-fieldset,img { border: 0; }
-
-legend { color: #000; }
-
-li { list-style: none; }
-
-sup { vertical-align: text-top; }
-
-sub { vertical-align: text-bottom; }
-
-table
-{
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-caption, th, td
-{
-	text-align: left;
-	vertical-align: top;
-	font-weight: normal;
-}