@1024pix/pix-ui 20.0.1 → 20.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Pix-UI Changelog
 
+## v20.2.0 (25/10/2022)
+
+
+### :rocket: Amélioration
+- [#267](https://github.com/1024pix/pix-ui/pull/267) [FEATURE] Gérer l'échappement de la tooltip (PIX-6114)
+
+## v20.1.0 (13/10/2022)
+
+
+### :rocket: Amélioration
+- [#241](https://github.com/1024pix/pix-ui/pull/241) [FEATURE] PixCollapsible : Autoriser l'utilisation d'un Block Content pour le titre
+
+### :bug: Correction
+- [#264](https://github.com/1024pix/pix-ui/pull/264) [BUGFIX] Réparer l'ombre du compsant Pix Block.
+- [#263](https://github.com/1024pix/pix-ui/pull/263) [BUGFIX] Permettre le scroll quand la modale est détruite
+
 ## v20.0.1 (11/10/2022)
 
 

package/addon/components/pix-collapsible.hbs

@@ -8,14 +8,22 @@
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
-    <span>
+    <span class="pix-collapsible-title__container">
       {{#if @titleIcon}}
         <FaIcon @icon={{@titleIcon}} class="pix-collapsible-title__icon" />
       {{/if}}
-      {{this.title}}
+
+      {{#if (has-block "title")}}
+        {{yield to="title"}}
+      {{else}}
+        {{this.title}}
+      {{/if}}
     </span>
 
-    <FaIcon @icon="{{if this.isCollapsed 'plus' 'minus'}}" class="pix-collapsible-title__icon" />
+    <FaIcon
+      @icon="{{if this.isCollapsed 'plus' 'minus'}}"
+      class="pix-collapsible-title__toggle-icon"
+    />
   </button>
 
   <div

package/addon/components/pix-tooltip.hbs

@@ -1,4 +1,12 @@
-<span class="pix-tooltip" ...attributes>
+<span
+  class="pix-tooltip"
+  {{on-escape-action this.hideTooltip}}
+  {{on "mouseover" this.showTooltip}}
+  {{on "mouseout" this.hideTooltipOnMouseOut}}
+  {{on "focusin" this.showTooltip}}
+  {{on "focusout" this.hideTooltip}}
+  ...attributes
+>
   {{#if (has-block "triggerElement")}}
     {{yield to="triggerElement"}}
   {{/if}}

package/addon/components/pix-tooltip.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class PixTooltip extends Component {
   get position() {
@@ -18,4 +19,25 @@ export default class PixTooltip extends Component {
   get display() {
     return typeof this.args.hide === 'undefined' || !this.args.hide;
   }
+
+  @action
+  showTooltip(event) {
+    event.target.classList.add('pix-tooltip--visible');
+  }
+
+  @action
+  hideTooltip(event) {
+    event.target.classList.remove('pix-tooltip--visible');
+  }
+
+  @action
+  hideTooltipOnMouseOut(event) {
+    const isFocused = document.activeElement === event.target;
+
+    if (isFocused) {
+      return;
+    }
+
+    this.hideTooltip(event);
+  }
 }

package/addon/styles/_pix-block.scss

@@ -4,11 +4,10 @@
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0px 4px 8px 0px $pix-neutral-110;
+    box-shadow: 0px 4px 8px rgba($pix-neutral-110, 0.08);
   }
 
   &--shadow-heavy {
-    box-shadow: 0 50px 54px -40px rgba($pix-neutral-110, 0.4),
-      0 7px 14px 0 rgba($pix-neutral-100, 0.1);
+    box-shadow: 0px 12px 24px rgba($pix-neutral-110, 0.08);
   }
 }

package/addon/styles/_pix-collapsible.scss

@@ -12,7 +12,7 @@
   background-color: $pix-neutral-0;
 
   &__title {
-    padding: 14px 10px 14px 16px;
+    padding: 14px 16px;
     min-width: 100%;
     cursor: pointer;
     display: flex;
@@ -22,11 +22,7 @@
     color: $pix-neutral-60;
     font-size: 1rem;
     font-weight: 500;
-
-    .pix-collapsible-title__icon {
-      color: $pix-neutral-45;
-      margin-right: 6px;
-    }
+    align-items: center;
 
     &:hover {
       background-color: $pix-neutral-10;
@@ -41,6 +37,25 @@
     }
   }
 
+  &-title {
+
+    &__container {
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &__icon{
+      color: $pix-neutral-45;
+      margin-right: 6px;
+    }
+
+    &__toggle-icon{
+      color: $pix-neutral-45;
+      margin-left: 16px;
+    }
+  }
+
   &__content {
     padding: 16px 20px;
     display: none;

package/addon/styles/_pix-tooltip.scss

@@ -5,9 +5,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
 
-  & > *:first-child:hover + .pix-tooltip__content,
-  & > *:first-child:focus + .pix-tooltip__content {
+.pix-tooltip--visible {
+  + .pix-tooltip__content {
     display: block;
     opacity: 1;
   }

package/app/modifiers/trap-focus.js

@@ -22,6 +22,7 @@ export default modifier(function trapFocus(element, [isOpen]) {
     element.removeEventListener('keydown', (event) => {
       handleKeyDown(event, element);
     });
+    allowPageScrolling();
   };
 });
 

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

@@ -13,6 +13,23 @@ export const collapsible = (args) => {
   };
 };
 
+export const collapsibleWithBlockTitle = (args) => {
+  return {
+    template: hbs`
+    <PixCollapsible
+      @titleIcon={{titleIcon}}>
+      <:title>
+        <span>Titre avec <em>contenu de type block</em></span>
+      </:title>
+      <:default>
+        <div>Contenu du PixCollapsible</div>
+      </:default>
+      </PixCollapsible>
+    `,
+    context: args,
+  };
+};
+
 export const multipleCollapsible = (args) => {
   return {
     template: hbs`

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

@@ -20,6 +20,10 @@ Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer
   <Story name='PixCollapsible' story={stories.collapsible} height={150} />
 </Canvas>
 
+<Canvas>
+  <Story name='With block title' story={stories.collapsibleWithBlockTitle} height={150} />
+</Canvas>
+
 <Canvas>
   <Story name='MultiplePixCollapsible' story={stories.multipleCollapsible} height={260} />
 </Canvas>

package/package.json

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