@1024pix/pix-ui 20.2.2 → 20.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v20.2.3 (15/11/2022)
+
+
+### :bug: Correction
+- [#276](https://github.com/1024pix/pix-ui/pull/276) [BUGFIX] Corriger le rendu du composant tootltip dans des contextes flex (PIX-6314)
+
 ## v20.2.2 (09/11/2022)
 
 

package/addon/components/pix-tooltip.hbs

@@ -8,9 +8,9 @@
   ...attributes
 >
   {{#if (has-block "triggerElement")}}
-    <div class={{if this.isVisible "pix-tooltip--visible" ""}}>
+    <span class="pix-tooltip__trigger-element">
       {{yield to="triggerElement"}}
-    </div>
+    </span>
   {{/if}}
 
   {{#if (has-block "tooltip")}}
@@ -19,6 +19,7 @@
         id={{@id}}
         role="tooltip"
         class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+          {{if this.isVisible 'pix-tooltip__content--visible'}}
           {{if @isInline 'pix-tooltip__content--inline'}}
           {{if @isLight 'pix-tooltip__content--light'}}
           {{if @isWide 'pix-tooltip__content--wide'}}"

package/addon/styles/_pix-tooltip.scss

@@ -6,12 +6,9 @@
   justify-content: center;
   align-items: center;
 
-}
-
-.pix-tooltip--visible {
-  + .pix-tooltip__content {
+  &__trigger-element {
     display: block;
-    opacity: 1;
+    width: 100%;
   }
 }
 
@@ -31,6 +28,11 @@
   line-height: 1.4rem;
   transition: opacity 0.3s;
 
+  &--visible {
+    display: block;
+    opacity: 1;
+  }
+
   &--inline {
     white-space: nowrap;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "20.2.2",
+  "version": "20.2.4",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -8,8 +8,8 @@
   "license": "MIT",
   "author": "GIP Pix",
   "engines": {
-    "node": "16.14.0",
-    "npm": ">=8.3.1 <=8.13.2"
+    "node": "16",
+    "npm": ">=8.13.2 <9"
   },
   "ember": {
     "edition": "octane"

package/addon/components/pix-tooltip-deprecated.hbs

@@ -1,18 +0,0 @@
-<span class="pix-tooltip" ...attributes>
-
-  {{yield}}
-
-  {{#if @text}}
-    <span
-      id={{@id}}
-      role="tooltip"
-      class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-        {{if @isInline 'pix-tooltip__content--inline'}}
-        {{if @isLight 'pix-tooltip__content--light'}}
-        {{if @isWide 'pix-tooltip__content--wide'}}"
-    >
-      {{this.text}}
-    </span>
-  {{/if}}
-
-</span>

package/addon/components/pix-tooltip-deprecated.js

@@ -1,26 +0,0 @@
-import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/template';
-
-export default class PixTooltipDeprecated extends Component {
-  get position() {
-    const correctsPosition = [
-      'top',
-      'right',
-      'bottom',
-      'bottom-left',
-      'bottom-right',
-      'left',
-      'top-left',
-      'top-right',
-    ];
-    return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
-  }
-
-  get text() {
-    if (this.args.unescapeHtml) {
-      return htmlSafe(this.args.text);
-    } else {
-      return this.args.text;
-    }
-  }
-}

package/app/components/pix-tooltip-deprecated.js

@@ -1 +0,0 @@
-export { default } from '@1024pix/pix-ui/components/pix-tooltip-deprecated';

package/app/stories/pix-tooltip-deprecated.stories.js

@@ -1,136 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-const Template = (args) => {
-  return {
-    template: hbs`
-      <PixTooltipDeprecated
-        @id="tooltip-1"
-        @text={{this.text}}
-        @position={{this.position}}
-        @isLight={{this.isLight}}
-        @isInline={{this.isInline}}
-        @isWide={{this.isWide}}
-        @unescapeHtml={{this.unescapeHtml}}
-      >
-        <PixButton aria-describedby="tooltip-1">
-          {{this.label}}
-        </PixButton>
-      </PixTooltipDeprecated>
-    `,
-    context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Hello World',
-  label: 'À survoler pour voir la tooltip',
-};
-
-export const isLight = Template.bind({});
-isLight.args = {
-  ...Default.args,
-  isLight: true,
-};
-
-export const isWide = Template.bind({});
-isWide.args = {
-  ...Default.args,
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas molestie mauris vel viverra.',
-  isWide: true,
-};
-
-export const isInline = Template.bind({});
-isInline.args = {
-  ...Default.args,
-  text: 'Je suis une trèèèèèèèès longue information',
-  isInline: true,
-};
-
-export const left = Template.bind({});
-left.args = {
-  ...Default.args,
-  label: 'Mon infobulle apparaît à gauche',
-  position: 'left',
-  isInline: true,
-};
-
-export const right = Template.bind({});
-right.args = {
-  ...Default.args,
-  label: 'Mon infobulle apparaît à droite',
-  position: 'right',
-  isInline: true,
-};
-
-export const bottom = Template.bind({});
-bottom.args = {
-  ...Default.args,
-  label: 'Mon infobulle apparaît en bas',
-  position: 'bottom',
-};
-
-export const unescapeHtml = Template.bind({});
-unescapeHtml.args = {
-  ...Default.args,
-  text: 'Hello <b style="color: red;">W</b>orld',
-  label: "J'affiche du html",
-  unescapeHtml: true,
-};
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description: 'Identifiant permettant de référencer le déclencheur via aria-describedby',
-    type: { name: 'string', required: true },
-  },
-  text: {
-    name: 'text',
-    defaultValue: 'Tooltiptop',
-    description: 'Texte à afficher',
-    type: { name: 'string', required: false },
-  },
-  position: {
-    name: 'position',
-    description: 'Position de la tooltip',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'top' } },
-    control: {
-      type: 'select',
-      options: [
-        'top',
-        'top-left',
-        'top-right',
-        'right',
-        'bottom',
-        'bottom-left',
-        'bottom-right',
-        'left',
-      ],
-    },
-  },
-  isLight: {
-    name: 'isLight',
-    description: 'Affichage en mode clair',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  isInline: {
-    name: 'isInline',
-    description: 'Affichage en une seule ligne',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  isWide: {
-    name: 'isWide',
-    description: 'Affichage large',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  unescapeHtml: {
-    name: 'unescapeHtml',
-    description: "Évite d'échapper les caractères HTML",
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-};

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

@@ -1,143 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import centered from '@storybook/addon-centered/ember';
-import * as stories from './pix-tooltip-deprecated.stories.js';
-
-<Meta
-  title='Basics/TooltipDeprecated (3.24 Compliant)'
-  component='PixTooltipDeprecated'
-  decorators={[centered]}
-  argTypes={stories.argTypes}
-/>
-
-# Pix Tooltip
-
-Une infobulle qui s'affiche au survol d'un élément.
-
-Ce composant est utilisé comme wrapper, c'est à dire qu'il encadre l'élément sur lequel on souhaite ajouter une infobulle.
-
-> ⚠️ A noter que le wrapper PixTooltipDeprecated est en `display: flex;`, il s'adaptera donc à la taille de ses enfants. Ainsi si votre élément ne s'affiche plus comme avant après l'ajout de la PixTooltipDeprecated, veillez à rajouter les dimensions voulues à l'enfant.
-
-> ⚠️ L'infobulle ne s'affichera pas si le texte est vide.
-
-## Accessibilité
-
-Les tooltips doivent être appliquées de préférences sur des éléments nativement focusable comme `<button>` ou `<input>`.
-
-Si vous utilisez un élément `<div>` ou `<span>`, il faut ajouter `tabindex="0"` pour qu'il prenne le focus.
-
-```html
-<PixTooltipDeprecated @text="My tooltip">
-  <span tabindex="0">Mon span</span>
-</PixTooltipDeprecated>
-```
-
-Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur via `aria-describedby`:
-
-```html
-<PixTooltipDeprecated @id="tooltip-1" @text="My tooltip">
-  <PixButton aria-describedby="tooltip-1">Mon bouton</PixButton>
-</PixTooltipDeprecated>
-```
-
-## Default
-
-Infobulle en position `top`, fond sombre (par défaut).
-
-<Canvas>
-  <Story name="Default" story={stories.Default} height={200} />
-</Canvas>
-
-## Is Light
-
-Infobulle en mode clair.
-
-> ⚠️ le tooltip "light" est à utiliser de préférence sur fond coloré ! Mais ce n'est pas obligatoire.
-
-<Canvas>
-  <Story name="Is Light" story={stories.isLight} height={200} />
-</Canvas>
-
-## Position
-
-Différentes positions de l'infobulle.
-Existe aussi `top-left`, `top-right`, `bottom-left` et `bottom-right`.
-
-<Canvas isColumn>
-  <Story name="Left" story={stories.left} height={100} />
-  <Story name="Right" story={stories.right} height={100} />
-  <Story name="Bottom" story={stories.bottom} height={150} />
-</Canvas>
-
-## Is Wide
-
-Infobulle en plus large.
-
-<Canvas>
-  <Story name="Is Wide" story={stories.isWide} height={200} />
-</Canvas>
-
-## Is Inline
-
-Infobulle dont le contenu reste sur une ligne.
-
-<Canvas>
-  <Story name="Is Inline" story={stories.isInline} height={200} />
-</Canvas>
-
-## unescape HTML
-
-N'échappe pas l'HTML (Affiche du HTML formaté)
-
-<Canvas>
-    <Story name="unescape HTML" story={stories.unescapeHtml} height={200} />
-</Canvas>
-
-## Usage
-
-```html
-<PixTooltipDeprecated
-  @text='Hey'
->
-  <button>Tooltip par défaut</button>
-</PixTooltipDeprecated>
-
-<PixTooltipDeprecated
-  @text='Hey'
-  @isLight={{true}}
->
-  <button>Tooltip en mode clair</button>
-</PixTooltipDeprecated>
-
-<PixTooltipDeprecated
-  @text='Hey'
-  @isLight={{true}}
->
-  <button>Tooltip sur une ligne</button>
-</PixTooltipDeprecated>
-
-<PixTooltipDeprecated
-  @text='Hey'
-  @position='bottom'
-  @isLight={{true}}
-  >
-  <button>Tooltip apparaissant en bas</button>
-</PixTooltipDeprecated>
-
-<PixTooltipDeprecated
-  @text='Hey'
-  @isWide={{true}}
-  >
-  <button>Tooltip en mode large</button>
-</PixTooltipDeprecated>
-
-<PixTooltipDeprecated
-  @text='Super <b style="color: green">i</b>n<b style="color: green">f</b>o'
-  @unescapeHtml={{true}}
-  >
-  <button>Html tooltip</button>
-</PixTooltipDeprecated>
-```
-
-## Arguments
-
-<ArgsTable story="Default" />