@1024pix/pix-ui 43.1.0 → 44.0.0

package/addon/components/pix-button-base.js

@@ -1,10 +1,6 @@
 import Component from '@glimmer/component';
 
 export default class PixButtonBase extends Component {
-  get shape() {
-    return this.args.shape || 'squircle';
-  }
-
   get backgroundColor() {
     return this.args.backgroundColor || 'primary';
   }
@@ -16,10 +12,10 @@ export default class PixButtonBase extends Component {
   get baseClassNames() {
     const classNames = [
       'pix-button',
-      `pix-button--shape-${this.shape}`,
       `pix-button--size-${this.size}`,
       `pix-button--${this.backgroundColor}`,
     ];
+
     this.args.isBorderVisible && classNames.push('pix-button--border');
 
     return classNames;

package/addon/components/pix-filter-banner.hbs

@@ -19,7 +19,6 @@
         <div class="pix-filter-banner__button-container">
           <PixButton
             class="pix-filter-banner__button"
-            @shape="squircle"
             @size="small"
             @triggerAction={{@onClearFilters}}
             @isDisabled={{@isClearFilterButtonDisabled}}

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

@@ -9,6 +9,7 @@
   text-decoration: none;
   background-color: var(--pix-primary-500);
   border: 2px solid transparent;
+  border-radius: 25px;
   outline: none;
   cursor: pointer;
 
@@ -35,26 +36,14 @@
     }
   }
 
-  &--shape-rounded {
-    border-radius: 25px;
-  }
-
-  &--shape-squircle {
-    border-radius: 4px;
-  }
-
   &--size-big {
     padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
   }
 
-  &--size-small.pix-button--shape-rounded {
+  &--size-small {
     padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
   }
 
-  &--size-small.pix-button--shape-squircle {
-    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
-  }
-
   &--primary {
     background-color: var(--pix-primary-500);
 

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

@@ -8,7 +8,7 @@ import * as ComponentStories from './pix-button-link.stories';
 
 Affiche un lien avec le style d'un bouton Pix. Il peut être de type HTML ou Route EmberJS.
 
-Hérite des styles de base de `PixButton` (`shape`, `backgroundColor`, `size`, `isBorderVisible`, `isDisabled`)
+Hérite des styles de base de `PixButton` (`backgroundColor`, `size`, `isBorderVisible`, `isDisabled`)
 
 ## Lien HTML
 
@@ -36,4 +36,4 @@ Un bouton de route EmberJS peut être désactivé via la propriété `@isDisable
 
 ## Arguments
 
-<ArgTypes of={ComponentStories} />
+<ArgTypes of={ComponentStories} />

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

@@ -26,17 +26,6 @@ export default {
         "Paramètre facultatif du <LinkTo> Ember permettant d'ajouter des paires de clé/valeur dans les paramètres d'une URL",
       type: { required: false },
     },
-    shape: {
-      name: 'shape',
-      description: 'forme: `rounded`,`squircle`',
-      type: { name: 'string', required: false },
-      options: ['rounded', 'squircle'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'squircle' },
-      },
-    },
     backgroundColor: {
       name: 'backgroundColor',
       description:
@@ -96,7 +85,6 @@ export const htmlLink = {
     template: hbs`<PixButtonLink
   @href='https://pix.fr'
   target='NEW'
-  @shape={{this.shape}}
   @backgroundColor={{this.backgroundColor}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
@@ -114,7 +102,6 @@ export const emberLink = (args) => {
   @route=''
   @model=''
   @query={{this.query}}
-  @shape={{this.shape}}
   @backgroundColor={{this.backgroundColor}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}

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

@@ -7,7 +7,7 @@ import * as ComponentStories from './pix-button-upload.stories';
 
 Affiche un bouton d'upload de fichiers.
 
-Hérite des styles de base de `PixButton` (`shape`, `backgroundColor`, `size`, `isBorderVisible`)
+Hérite des styles de base de `PixButton` (`backgroundColor`, `size`, `isBorderVisible`)
 
 Toutes les [propriétés HTML d'un input de type file](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file) sont supportées.
 

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

@@ -15,17 +15,6 @@ export default {
         "fonction à exécuter au moment de l'upload du fichier, elle prend en entrée la liste des fichiers uploadés.",
       type: { name: 'function', required: true },
     },
-    shape: {
-      name: 'shape',
-      description: 'forme: `rounded`,`squircle`',
-      type: { name: 'string', required: false },
-      options: ['rounded', 'squircle'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'squircle' },
-      },
-    },
     backgroundColor: {
       name: 'backgroundColor',
       description:
@@ -76,7 +65,6 @@ export const buttonUpload = (args) => {
     template: hbs`<PixButtonUpload
   @id={{this.id}}
   @onChange={{this.onChange}}
-  @shape={{this.shape}}
   @backgroundColor={{this.backgroundColor}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}

package/app/stories/pix-button.mdx

@@ -54,12 +54,6 @@ Le loader peut être affiché de deux façons :
 
  <Story of={ComponentStories.loader} height={150} />
 
-## Shape
-
-Le bouton rounded
-
- <Story of={ComponentStories.shape}  height={75} />
-
 
 ## Size
 
@@ -77,7 +71,6 @@ Un petit bouton avec les bords arrondis en fond transparent avec une bordure
   @triggerAction="{{action"
   triggerAction}}
   @loadingColor="white"
-  @shape="squircle"
   @backgroundColor="transparent-light"
   @isDisabled="{{false}}"
   @size="small"

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

@@ -30,17 +30,6 @@ export default {
         defaultValue: { summary: 'white' },
       },
     },
-    shape: {
-      name: 'shape',
-      description: 'forme: `rounded`,`squircle`',
-      type: { name: 'string', required: false },
-      options: ['rounded', 'squircle'],
-      control: { type: 'select' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'squircle' },
-      },
-    },
     backgroundColor: {
       name: 'backgroundColor',
       description:
@@ -155,7 +144,6 @@ const Template = (args) => ({
   <PixButton
     @triggerAction={{this.triggerAction}}
     @loadingColor={{this.loadingColor}}
-    @shape={{this.shape}}
     @backgroundColor={{this.backgroundColor}}
     @isDisabled={{this.isDisabled}}
     @isLoading={{this.isLoading}}
@@ -174,7 +162,6 @@ const Template = (args) => ({
     <PixButton
       @triggerAction={{this.triggerAction}}
       @loadingColor={{button.loadingColor}}
-      @shape={{button.shape}}
       @backgroundColor={{button.backgroundColor}}
       @isDisabled={{button.isDisabled}}
       @isLoading={{button.isLoading}}
@@ -195,7 +182,6 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
   loadingColor: 'white',
-  shape: 'squircle',
   size: 'big',
   backgroundColor: 'primary',
   label: 'Bouton',
@@ -296,13 +282,6 @@ loader.args = {
   ],
 };
 
-export const shape = Template.bind({});
-shape.args = {
-  ...Default.args,
-  label: 'Bouton rounded',
-  shape: 'rounded',
-};
-
 export const size = Template.bind({});
 size.args = {
   ...Default.args,

package/package.json

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