@1024pix/pix-ui 23.0.0 → 23.0.1

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 export const parameters = {
+  layout: 'centered',
   a11y: {
     element: '#root',
   },

package/CHANGELOG.md

@@ -1,7 +1,34 @@
 # Pix-UI Changelog
 
+## v23.0.1 (09/12/2022)
+
+
+### :building_construction: Tech
+- [#304](https://github.com/1024pix/pix-ui/pull/304) [TECH] Enlever le reset-css et ajouter attributes dans PixSelect(PIX-6504)
+
+### :coffee: Autre
+- [#303](https://github.com/1024pix/pix-ui/pull/303) [DOCS] Ajouter des infos sur les breaking changes des v22 & v23 dans le changelog
+
 ## v23.0.0 (08/12/2022)
 
+### :warning: Breaking Change
+**PixModal** :
+* Les boutons d'actions dans le footer ne sont plus alignés à droite par défaut. Pour garder le comportement précédant, il faut reprendre ce bout de code :
+
+```
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-s;
+  margin-bottom: $spacing-s;
+
+  @include device-is('tablet') {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}
+```
 
 ### :rocket: Amélioration
 - [#285](https://github.com/1024pix/pix-ui/pull/285) [FEATURE] Améliorer l'accessibilité de PixModal (PIX-6265)
@@ -19,6 +46,9 @@
 ## v22.0.0 (08/12/2022)
 
 
+### :warning: Breaking Change
+Ember v4 obligatoire.
+
 ### :rocket: Amélioration
 - [#288](https://github.com/1024pix/pix-ui/pull/288) [FEATURE] Ajout le composant PixToggle (PIX-6427)
 

package/addon/components/pix-pagination.hbs

@@ -3,9 +3,11 @@
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect
       @label={{this.selectPageSizeLabel}}
+      @placeholder={{this.pageSize}}
       @screenReaderOnly={{true}}
       class="pagination-size__choice"
-      @selectedOption={{this.pageSize}}
+      @value={{this.pageSize}}
+      @hideDefaultOption={{true}}
       @onChange={{this.changePageSize}}
       @options={{this.pageOptions}}
     />

package/addon/components/pix-pagination.js

@@ -105,8 +105,8 @@ export default class PixPagination extends Component {
   }
 
   @action
-  changePageSize(event) {
-    this.router.replaceWith({ queryParams: { pageSize: event.target.value, pageNumber: 1 } });
+  changePageSize(value) {
+    this.router.replaceWith({ queryParams: { pageSize: value, pageNumber: 1 } });
   }
 
   @action

package/addon/components/pix-select.hbs

@@ -7,6 +7,7 @@
   {{on-escape-action this.hideDropdown this.selectId}}
   {{did-insert this.setSelectWidth}}
   {{on "keydown" this.lockTab}}
+  ...attributes
 >
   {{#if @label}}
     <div class="{{if @screenReaderOnly 'screen-reader-only'}}">

package/addon/styles/_pix-filter-banner.scss

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

package/addon/styles/_pix-select.scss

@@ -105,6 +105,7 @@
 
   &__dropdown-icon {
     @include text-small();
+    margin-left: $spacing-xs;
     color: $pix-neutral-60;
     font-weight: $font-heavy;
     pointer-events: none;

package/app/stories/form.stories.mdx

@@ -1,10 +1,8 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './form.stories.js';
 
 <Meta
   title='Form/Example'
-  decorators={[centered]}
 />
 
 # Formulaire avec les composants Pix UI

package/app/stories/pix-background-header.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-background-header.stories.js';
 
 <Meta
   title='Layout/Background Header'
   component='PixBackgroundHeader'
-  decorators={[centered]}
 />
 
 # Pix Background Header

package/app/stories/pix-banner.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-banner.stories.js';
 
 <Meta
   title='Notification/Banner'
   component='PixBanner'
-  decorators={[centered]}
   argTypes={stories.argsTypes}
 />
 

package/app/stories/pix-block.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-block.stories.js';
 
 <Meta
   title='Layout/Block'
   component='PixBlock'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-button-link.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-button-link.stories.js';
 
 <Meta
   title='Basics/ButtonLink'
   component='PixButtonLink'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-button-upload.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-button-upload.stories.js';
 
 <Meta
   title='Basics/ButtonUpload'
   component='PixButtonUpload'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-button.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable, SourceContainer } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-button.stories.js';
 
 <Meta
   title='Basics/Button'
   component='PixButton'
-  decorators={[centered]}
   argTypes={stories.argsTypes}
 />
 

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

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-checkbox.stories.js';
 
 <Meta
   title='Form/Checkbox'
   component='PixCheckbox'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-collapsible.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-collapsible.stories.js';
 

package/app/stories/pix-dropdown.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-dropdown.stories.js';
 

package/app/stories/pix-filter-banner.stories.js

@@ -9,10 +9,9 @@ export const filterBanner = (args) => {
   @clearFiltersLabel={{this.clearFiltersLabel}}
   @onClearFilters={{this.onClearFilters}}
 >
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
-  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
+  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
+  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
+  <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
 </PixFilterBanner>`,
     context: args,
   };

package/app/stories/pix-filter-banner.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-filter-banner.stories.js';
 
 <Meta
   title='Form/Filter banner'
   component='PixFilterBanner'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-filterable-and-searchable-select.stories.js

@@ -155,7 +155,7 @@ export const argTypes = {
   searchLabel: {
     name: 'searchLabel',
     description:
-      'Label de la recherche dans le menu déroulant du select. Obligatoire uniquement si le isSearchable est à true.',
+      'Label de la recherche dans le menu déroulant du select. **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
@@ -164,7 +164,7 @@ export const argTypes = {
   searchPlaceholder: {
     name: 'searchPlaceholder',
     description:
-      'Placeholder de la recherche dans le menu déroulant du select.  Obligatoire uniquement si le isSearchable est à true.',
+      'Placeholder de la recherche dans le menu déroulant du select.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
@@ -173,7 +173,7 @@ export const argTypes = {
   emptySearchMessage: {
     name: 'emptySearchMessage',
     description:
-      "Message affiché si la recherche dans le select ne retourne pas d'options.  Obligatoire uniquement si le isSearchable est à true.",
+      "Message affiché si la recherche dans le select ne retourne pas d'options.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**",
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },

package/app/stories/pix-icon-button.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-icon-button.stories.js';
 
 <Meta
   title="Basics/Icon button"
   component="PixIconButton"
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-input-code.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-input-code.stories.js';
 
 <Meta
   title='Form/Inputs/Code'
   component='PixInputCode'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-input-password.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-input-password.stories.js';
 
 <Meta
   title='Form/Inputs/Password'
   component='PixInputPassword'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-input.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-input.stories.js';
 
 <Meta
   title='Form/Inputs/Input'
   component='PixInput'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-message.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-message.stories.js';
 
 <Meta
   title='Notification/Message'
   component='PixMessage'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-modal.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-modal.stories.js';
 
 <Meta
   title="Basics/Modal"
   component="PixModal"
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

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

@@ -140,7 +140,8 @@ multiSelectWithYield.args = {
 export const argTypes = {
   id: {
     name: 'id',
-    description: 'Permet l‘accessibilité du composant attribuant des ``for`` pour chaque entité',
+    description:
+      "Permet l'accessibilité du composant attribuant des ``for`` pour chaque entité. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
     type: { name: 'string' },
   },
   placeholder: {
@@ -152,7 +153,8 @@ export const argTypes = {
   },
   label: {
     name: 'label',
-    description: "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
+    description:
+      "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran. **⚠️ Le`label` est obligatoire que si l'`id` n'est pas donné. ⚠️**",
     type: { name: 'string' },
     defaultValue: 'Label du champ',
   },

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

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-multi-select.stories.js';
 
 <Meta

package/app/stories/pix-pagination.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-pagination.stories.js';
 
@@ -55,8 +54,8 @@ Sur mobile, le select qui permet de choisir le nombre d'élément à afficher su
 <PixPagination
    @pagination={{pagination}}
    @locale = {{locale}}
-   @pageOptions = {{pageOptions}
-   @isCondensed = {{isCondensed}
+   @pageOptions = {{pageOptions}}
+   @isCondensed = {{isCondensed}}
 />
 ```
 

package/app/stories/pix-progress-gauge.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-progress-gauge.stories.js';
 
 <Meta
   title='Others/Progress Gauge'
   component='PixProgressGauge'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-radio-button.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-radio-button.stories.js';
 
 <Meta
   title='Form/Radio Button'
   component='PixRadioButton'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-return-to.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-return-to.stories.js';
 
 <Meta
   title='Basics/Return To'
   component='PixReturnTo'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

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

@@ -211,7 +211,8 @@ export const argTypes = {
   },
   id: {
     name: 'id',
-    description: 'Un identifiant unique placé sur le composant',
+    description:
+      "Un identifiant unique placé sur le composant. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
@@ -219,7 +220,8 @@ export const argTypes = {
   },
   label: {
     name: 'label',
-    description: 'Label du menu déroulant',
+    description:
+      "Label du menu déroulant. ** ⚠️ Le `label` est obligatoire que si l'`id` n'est pas donné. ⚠️ **",
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
@@ -260,24 +262,27 @@ export const argTypes = {
   },
   searchLabel: {
     name: 'searchLabel',
-    description: 'Label de la recherche dans le menu déroulant',
-    type: { name: 'string', required: true },
+    description:
+      'Label de la recherche dans le menu déroulant. **⚠️ Le `searchLabel` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
+    type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
     },
   },
   searchPlaceholder: {
     name: 'searchPlaceholder',
-    description: 'Placeholder de la recherche dans le menu déroulant',
-    type: { name: 'string', required: true },
+    description:
+      'Placeholder de la recherche dans le menu déroulant. **⚠️ Le `searchPlaceholder` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
+    type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
     },
   },
   emptySearchMessage: {
     name: 'emptySearchMessage',
-    description: "Message affiché si la recherche ne retourne pas d'options",
-    type: { name: 'string', required: true },
+    description:
+      "Message affiché si la recherche ne retourne pas d'options. **⚠️ Le `emptySearchMessage` est obligatoire que si le `isSearchable` à `true`. ⚠️**",
+    type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
     },

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

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-select.stories.js';
 
 <Meta

package/app/stories/pix-selectable-tag.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-selectable-tag.stories.js';
 
 <Meta
   title='basics/Tag/Selectable Tag'
   component='PixSelectableTag'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-sidebar.stories.mdx

@@ -1,12 +1,10 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 
 import * as stories from './pix-sidebar.stories.js';
 
 <Meta
   title="Basics/Sidebar"
   component="PixSidebar"
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-stars.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-stars.stories.js';
 
 <Meta
   title='Others/PixStars'
   component='PixStars'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-tag.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-tag.stories.js';
 
 <Meta
   title='Basics/Tag'
   component='PixTag'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/app/stories/pix-textarea.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-textarea.stories.js';
 
 <Meta
   title='Form/Textarea'
   component='PixTextarea'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

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

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-toggle.stories.js';
 
 <Meta
@@ -8,7 +7,7 @@ import * as stories from './pix-toggle.stories.js';
   argTypes={stories.argTypes}
 />
 
-# Pix Select
+# Pix Toggle
 
 Affiche un bouton à deux états.
 
@@ -36,3 +35,6 @@ Affiche un bouton à deux états.
   <Story name='WithYields' story={stories.WithYields} height={200} />
 </Canvas>
 
+## Arguments
+
+<ArgsTable story="Default" />

package/app/stories/pix-tooltip.stories.mdx

@@ -1,11 +1,9 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-tooltip.stories.js';
 
 <Meta
   title='Basics/Tooltip'
   component='PixTooltip'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/docs/create-component.stories.mdx

@@ -77,7 +77,6 @@ export const argTypes = {
 ```markdown
 {/* pix-message.stories.mdx */}
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-message.stories.js';
 
 {/* Titre de la section affichée dans le menu de storybook */}
@@ -85,7 +84,6 @@ import * as stories from './pix-message.stories.js';
 <Meta
   title='Notification/Message'
   component='PixMessage'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "23.0.0",
+  "version": "23.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -66,7 +66,6 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-centered": "^5.3.21",
     "@storybook/addon-controls": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",