@1024pix/pix-ui 17.2.0 → 17.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v17.2.1 (31/08/2022)
+
+
+### :rocket: Amélioration
+- [#247](https://github.com/1024pix/pix-ui/pull/247) [FEATURE] Amélioration couleurs `PixIconButton`
+
 ## v17.2.0 (24/08/2022)
 
 

package/addon/styles/_pix-banner.scss

@@ -32,9 +32,9 @@
     .pix-icon-button {
       background-color: $pix-primary-5;
       color: $pix-primary-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-primary-10;
         color: $pix-primary-70;
       }
@@ -47,9 +47,9 @@
     .pix-icon-button {
       background-color: $pix-warning-5;
       color: $pix-warning-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-warning-10;
         color: $pix-warning-70;
       }
@@ -62,9 +62,9 @@
     .pix-icon-button {
       background-color: $pix-error-5;
       color: $pix-error-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-error-10;
         color: $pix-error-70;
       }

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

@@ -10,35 +10,36 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
+  color: $pix-neutral-60;
 
   &:disabled {
     opacity: 0.5;
-    cursor: default;
+    cursor: not-allowed;
   }
 
-  &:hover,
-  &:focus {
-    transition: background-color 0.2s ease;
-    background-color: $pix-neutral-15;
-    &:disabled {
-      background-color: transparent;
-    }
+  &:hover:enabled {
+    background-color: $pix-neutral-20;
+    box-shadow: none;
+    border: 0;
+    color: $pix-neutral-60;
   }
 
-  &:active {
-    transition: background-color 0.2s ease;
-    background-color: $pix-neutral-20;
+  &:focus:enabled {
+    background-color: $pix-neutral-60;
+    box-shadow: 0 0 0 2px $pix-neutral-60;
+    border: 2px solid $pix-neutral-0;
+    color: $pix-neutral-0;
+  }
+
+  &:active:enabled {
+    background-color: $pix-neutral-22;
+    box-shadow: none;
+    border: 0;
+    color: $pix-neutral-60;
   }
 
   &--background {
     background-color: $pix-neutral-10;
-    &:hover,
-    &:focus,
-    &:active {
-      &:disabled {
-        background-color: $pix-neutral-15;
-      }
-    }
   }
 
   &--small {
@@ -52,12 +53,4 @@
     height: 38px;
     font-size: 1.25rem;
   }
-
-  &--dark-grey {
-    color: $pix-neutral-60;
-  }
-
-  &--light-grey {
-    color: $pix-neutral-60;
-  }
 }

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

@@ -11,31 +11,42 @@ const Template = (args) => {
         @triggerAction={{triggerAction}}
         @withBackground={{withBackground}}
         @size={{size}}
+        disabled={{disabled}}
+        aria-disabled={{disabled}}
         />
     `,
     context: args,
   };
 };
 
+const triggerAction = () => Promise.resolve();
+
 export const Default = Template.bind({});
 Default.args = {
   ariaLabel: 'Action du bouton',
   icon: 'xmark',
-  triggerAction: () => {
-    return new Promise().resolves();
-  },
+  triggerAction,
 };
 
 export const small = Template.bind({});
 small.args = {
   ...Default.args,
   size: 'small',
+  triggerAction,
 };
 
 export const withBackground = Template.bind({});
 withBackground.args = {
   ...Default.args,
   withBackground: true,
+  triggerAction,
+};
+
+export const disabled = Template.bind({});
+disabled.args = {
+  ...Default.args,
+  disabled: true,
+  triggerAction,
 };
 
 export const argTypes = {

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

@@ -3,8 +3,8 @@ import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-icon-button.stories.js';
 
 <Meta
-  title='Basics/Icon button'
-  component='PixIconButton'
+  title="Basics/Icon button"
+  component="PixIconButton"
   decorators={[centered]}
   argTypes={stories.argTypes}
 />
@@ -37,6 +37,14 @@ Le bouton avec le fond grisé.
   <Story name="With Background" story={stories.withBackground} height={60} />
 </Canvas>
 
+## Disabled
+
+Exemple avec le bouton disabled
+
+<Canvas>
+  <Story name="Disabled" story={stories.disabled} height={60} />
+</Canvas>
+
 ## Accessibilité / aria-label
 
 L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composant, la propriété `ariaLabel` a été ajouté.
@@ -48,42 +56,42 @@ L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composa
 ## Usage
 
 Par défaut
+
 ```html
-<PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="icon"
-    @triggerAction={{triggerAction}}
-/>
+<PixIconButton @ariaLabel="L'action du bouton" @icon="icon" @triggerAction="{{triggerAction}}" />
 ```
 
 Bouton de fermeture
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="times"
-    @triggerAction={{triggerAction}}
-    @withBackground={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="times"
+  @triggerAction="{{triggerAction}}"
+  @withBackground="{{true}}"
 />
 ```
 
 Bouton d'action
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="arrow-left"
-    @triggerAction={{triggerAction}}
-    @size="small"
-    @withBackground={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="arrow-left"
+  @triggerAction="{{triggerAction}}"
+  @size="small"
+  @withBackground="{{true}}"
 />
 ```
 
 État disabled
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="xmark"
-    disabled={{true}}
-    aria-disabled={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="xmark"
+  disabled="{{true}}"
+  aria-disabled="{{true}}"
 />
 ```
 

package/package.json

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